/* research.css — long-form research reports (/research/*). Builds on article.css.
   Charts are HTML/CSS (real text at every width); colors validated for CVD in
   both modes: violet + orange on light, stepped for the dark surface. */

.rpt{
  --viz-a:#6d5ce7; --viz-b:#e07400; --viz-m1:#9aa5b5; --viz-m2:#c9d1dc;
  --viz-grid:var(--line); --viz-gap:var(--surface);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rpt{--viz-a:#9085e9; --viz-b:#cc6a00; --viz-m1:#66758a; --viz-m2:#3f4b5c}
}
:root[data-theme="dark"] .rpt{--viz-a:#9085e9; --viz-b:#cc6a00; --viz-m1:#66758a; --viz-m2:#3f4b5c}

.rpt .art__wrap{max-width:820px}
.rpt__kicker{font-size:var(--step-label);font-weight:650;letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--accent-warm);margin:0 0 var(--sp-3)}
.rpt__head .art__title{font-size:clamp(28px,4vw,42px)}
.rpt__head .art__excerpt{font-weight:600;color:var(--text)}

/* key findings */
.rpt__keys{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin:var(--sp-8) 0 var(--sp-10)}
@media (min-width:640px){.rpt__keys{grid-template-columns:1fr 1fr}}
.rpt__key{background:var(--surface);border:var(--border) solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--radius);padding:var(--sp-5)}
.rpt__key p{margin:0;font-size:var(--step-0);line-height:1.6;color:var(--text-soft)}
.rpt__key .rpt__num{font-family:var(--font-display);font-size:clamp(36px,5vw,46px);line-height:1;
  color:var(--text-heading);letter-spacing:-.02em;margin-bottom:var(--sp-3);font-variant-numeric:lining-nums tabular-nums}
.rpt__key .rpt__lead{font-weight:700;color:var(--text);margin-bottom:var(--sp-2)}

/* body tables */
.rpt__table{overflow-x:auto;border:var(--border) solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rpt__table table{display:table;font-size:var(--step-0);margin:0;min-width:520px}
.rpt__table--narrow table{min-width:0}
.rpt__table th{background:var(--surface-band);font-size:var(--step--1);color:var(--text-soft)}
.rpt__table td{font-variant-numeric:tabular-nums}
.rpt__table tr:last-child td{border-bottom:0}
.rpt__table tfoot td{font-weight:700;color:var(--text-heading);border-top:var(--border) solid var(--line-strong);border-bottom:0}
.rpt__fine{font-size:var(--step-0);color:var(--text-faint);margin-top:calc(-1 * var(--sp-3))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rpt__table th{background:var(--surface-tint)}}
:root[data-theme="dark"] .rpt__table th{background:var(--surface-tint)}

/* ---------- chart frame ---------- */
.viz{margin:var(--sp-8) 0;padding:var(--sp-5) var(--sp-5) var(--sp-4);background:var(--surface);
  border:var(--border) solid var(--line);border-radius:var(--radius-lg)}
.viz .viz__head{display:block;text-align:left;margin:0 0 var(--sp-3)}
.viz__title{display:block;font-family:var(--font-display);font-size:var(--step-2);line-height:1.3;color:var(--text-heading)}
.viz__sub{display:block;font-size:var(--step--1);color:var(--text-faint);margin-top:2px}
.viz__note,.viz__src{font-size:var(--step--1);line-height:1.5;color:var(--text-faint);margin:var(--sp-2) 0 0!important}
.viz__note{color:var(--text-soft)}
.viz-legend{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-3);font-size:var(--step--1);color:var(--text-soft)}
.viz-key{display:inline-flex;align-items:center;gap:6px}
.viz-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.viz-sw--a{background:var(--viz-a)} .viz-sw--b{background:var(--viz-b)}
.viz-sw--m1{background:var(--viz-m1)} .viz-sw--m2{background:var(--viz-m2)}

/* ---------- column chart ---------- */
.cc,.lc{padding-left:44px}
.cc__plot,.lc__plot{position:relative;height:240px;border-bottom:var(--border) solid var(--line-strong)}
.cc__plot{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(2px,.8vw,8px);align-items:end}
.cc__tick{position:absolute;left:0;right:0;border-top:var(--border) dashed var(--viz-grid);pointer-events:none}
.cc__tick b{position:absolute;right:calc(100% + 8px);top:-.7em;font-size:11px;font-weight:500;
  color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc__col{position:relative;height:100%;display:flex;flex-direction:column-reverse;gap:2px;outline:none;cursor:default}
.cc__col::before{content:"";position:absolute;inset:0 -2px;border-radius:4px;background:var(--text);opacity:0;transition:opacity .12s}
.cc__col:hover::before,.cc__col:focus-visible::before{opacity:.06}
.cc__seg{display:block;flex:none;min-height:0}
.cc__seg--a{background:var(--viz-a)} .cc__seg--b{background:var(--viz-b)}
.cc__seg:last-child{border-radius:4px 4px 0 0}
.cc__col--partial .cc__seg{opacity:.45}
.cc__x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(2px,.8vw,8px);margin-top:6px}
.cc__x span{font-size:11px;color:var(--text-faint);text-align:center;white-space:nowrap;display:flex;justify-content:center;min-width:0}
.cc--thin .cc__x span:nth-child(odd){visibility:hidden}
@media (max-width:700px){.cc__plot,.lc__plot{height:200px}}
@media (max-width:600px){
  .cc--thin .cc__x span{visibility:hidden}
  .cc--thin .cc__x span:nth-child(4n+2){visibility:visible}
  .cc:not(.cc--thin) .cc__x span:nth-child(even),.lc .cc__x span:nth-child(odd){visibility:hidden}
  .cc,.lc{padding-left:38px}
  .viz{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
}

/* ---------- line chart ---------- */
.lc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lc__line--a{stroke:var(--viz-a);stroke-width:2.5}
.lc__line--m1{stroke:var(--viz-m1)}
.lc__line--m2{stroke:var(--viz-m2);stroke-dasharray:5 4}
.lc__dot{position:absolute;width:8px;height:8px;margin:0 0 -4px -4px;border-radius:50%;
  box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.lc__dot--a{background:var(--viz-a)} .lc__dot--m1{background:var(--viz-m1);width:6px;height:6px;margin:0 0 -3px -3px}
.lc__dot--m2{background:var(--viz-m2);width:6px;height:6px;margin:0 0 -3px -3px}
.lc__label{position:absolute;transform:translate(-100%,50%);margin-left:-12px;margin-bottom:0;font-size:12px;
  font-weight:650;color:var(--text);white-space:nowrap;pointer-events:none;background:var(--surface);padding:0 4px;border-radius:4px}
.lc__bands{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.lc__band{position:relative;outline:none}
.lc__band::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid var(--text-faint);opacity:0}
.lc__band:hover::after,.lc__band:focus-visible::after{opacity:.5}
.lc .cc__x{gap:0}

/* ---------- horizontal bars ---------- */
.hb{display:grid;gap:6px}
.hb__row{display:grid;grid-template-columns:minmax(0,15rem) 1fr 3.5rem;align-items:center;gap:var(--sp-3);
  padding:3px 4px;border-radius:6px;outline:none}
.hb__row:hover,.hb__row:focus-visible{background:var(--surface-tint)}
.hb__label{font-size:var(--step--1);line-height:1.3;color:var(--text-soft)}
.hb__label b{font-weight:600;color:var(--text)} .hb__label em{font-style:normal;color:var(--text-faint)}
.hb__track{height:14px}
.hb__bar{display:block;height:100%;background:var(--viz-a);border-radius:0 4px 4px 0}
.hb__val{font-size:var(--step--1);font-weight:650;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .hb__row{grid-template-columns:1fr 3.2rem;row-gap:4px}
  .hb__label{grid-column:1 / -1}
}

/* ---------- 100% bars ---------- */
.sb{display:grid;gap:var(--sp-3)}
.sb__row{display:grid;grid-template-columns:7rem 1fr;align-items:center;gap:var(--sp-3);outline:none;border-radius:6px}
.sb__label{font-size:var(--step--1);font-weight:600;color:var(--text)}
.sb__track{display:flex;gap:2px;height:30px}
.sb__seg{display:flex;align-items:center;padding:0 10px;font-size:var(--step--1);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.sb__seg--a{background:var(--viz-a);border-radius:4px 0 0 4px}
.sb__seg--b{background:var(--viz-b);border-radius:0 4px 4px 0;justify-content:flex-end}
.sb__row:hover .sb__track,.sb__row:focus-visible .sb__track{filter:brightness(1.08)}
@media (max-width:480px){.sb__row{grid-template-columns:1fr}}

/* ---------- data disclosure ---------- */
.viz-data{margin-top:var(--sp-3);font-size:var(--step--1)}
.viz-data summary{cursor:pointer;color:var(--accent);font-weight:600;width:max-content}
.viz-data__scroll{overflow-x:auto;margin-top:var(--sp-2)}
.viz-data table{display:table;font-size:var(--step--1);margin:0}
.viz-data td,.viz-data th{padding:4px 10px;font-variant-numeric:tabular-nums}
.viz-data tfoot td{font-weight:700}

/* ---------- tooltip ---------- */
.viz-tip{position:fixed;z-index:60;pointer-events:none;max-width:260px;padding:8px 10px;border-radius:8px;
  background:var(--ink-900);color:#fff;font-size:12px;line-height:1.5;box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .1s}
.viz-tip.is-on{opacity:1}
.viz-tip b{display:block;font-weight:700;margin-bottom:2px}
.viz-tip span{display:block;color:#cfd6e2}

/* ---------- worked-example timeline ---------- */
.rpt__body .tl{list-style:none;padding:0;margin:var(--sp-6) 0;border-left:2px solid var(--line-strong)}
.tl__item{position:relative;display:grid;grid-template-columns:8.5rem 1fr;gap:2px var(--sp-4);
  padding:0 0 var(--sp-5) var(--sp-5);margin:0!important}
.tl__item::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;border-radius:50%;
  background:var(--viz-a);box-shadow:0 0 0 3px var(--paper)}
.tl__item--quiet::before{background:var(--surface);border:2px solid var(--line-strong);width:8px;height:8px}
.tl__date{font-size:var(--step-0);font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums}
.tl__form{font-size:var(--step--1);font-weight:650;color:var(--accent-warm);text-transform:uppercase;letter-spacing:.05em}
.tl__form em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-faint)}
.tl__what{grid-column:2;font-size:1rem;line-height:1.6}
@media (max-width:560px){.tl__item{grid-template-columns:1fr}.tl__what{grid-column:1}}

/* ---------- methods + close ---------- */
.rpt__sign{color:var(--text-soft);border-top:var(--border) solid var(--line);padding-top:var(--sp-5);margin-top:var(--sp-8)}
.rpt__methods{background:var(--surface-band);border-radius:var(--radius-lg);padding:var(--sp-6);margin-top:var(--sp-8);
  font-size:var(--step-0);line-height:1.65}
.rpt__methods h2{margin-top:0;font-size:var(--step-3)}
.rpt__methods > *{margin-bottom:var(--sp-4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rpt__methods{background:var(--surface-tint)}}
:root[data-theme="dark"] .rpt__methods{background:var(--surface-tint)}

.rpt__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin:var(--sp-10) 0 var(--sp-16);padding:var(--sp-6);border-radius:var(--radius-lg);
  background:var(--surface-invert);color:#fff}
.rpt__cta p{margin:0}
.rpt__cta-k{font-size:var(--step-label);font-weight:650;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--act-500)}
.rpt__cta-t{font-family:var(--font-display);font-size:var(--step-2);margin-top:4px!important}

/* ---------- ink, not blue: violet is reserved for chart data ---------- */
.rpt{--rpt-ink:var(--ink-900)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rpt{--rpt-ink:var(--text)}}
:root[data-theme="dark"] .rpt{--rpt-ink:var(--text)}
.rpt .viz__title,.rpt__key .rpt__num,.tl__date,
.rpt .rpt__table tfoot td{color:var(--rpt-ink)}
.rpt .art__body strong,.rpt .art__body b{color:var(--rpt-ink)}
.rpt .art__body li::marker{color:var(--text-faint)}
.rpt .ins-cat{color:var(--text-soft)}
.rpt__key{border-top-color:var(--accent-warm)}
.rpt .viz-data summary{color:var(--text-soft)}
.rpt .viz-data summary:hover{color:var(--rpt-ink)}
/* the big headlines keep the brand violet */
.rpt .art__title,.rpt .art__body h2{color:var(--text-heading)}