/* KH Labs Research: page styles on top of /kh-system.css (tokens, nav, footer, buttons, fonts come from the system).
   Dark reading pages; figures sit on the warm paper ground (--paper) in rounded frames. */

main{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding:var(--sp9) var(--pad) var(--section)}
.paper{max-width:880px;margin-inline:auto}
.hero{padding:0}
.hero > :first-child{margin-top:0}

/* type */
.eyebrow{display:flex;align-items:center;gap:var(--sp2);font:500 var(--t-xs)/1.3 var(--mono);color:var(--mute)}
main h1{margin:var(--sp4) 0 var(--sp5);font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.04em;max-width:22ch}
.paper h1{max-width:26ch}
.lede{margin:0 0 var(--sp6);max-width:62ch;font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--soft)}
main h2{position:relative;margin:var(--sp8) 0 var(--sp4);padding-top:var(--sp5);font-size:clamp(26px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em}
main h3{margin:var(--sp6) 0 var(--sp2);font-size:20px;line-height:1.25;letter-spacing:-.015em}
main h4,main .abstract h2{margin:0 0 var(--sp2);max-width:none;font:500 var(--t-xs)/1.3 var(--mono);letter-spacing:0;color:var(--mute)}
main p,main li{color:var(--soft);font-size:16px;line-height:1.65}
main p{margin:0 0 var(--sp4)}
main :where(p,li,.cap,a){overflow-wrap:anywhere}
main b,main strong{color:var(--ink);font-weight:500}
.paper > p,.paper > ol,.paper > ul:not(.kf):not(.toc),.paper > h2,.paper > h3{max-width:72ch}
main :where(p,li,.cap) a{color:inherit;text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
main :where(p,li,.cap) a:hover{color:var(--ink);text-decoration-color:currentColor}
main ul:not(.kf):not(.toc),main ol{margin:0 0 var(--sp4);padding-left:22px}
main li{margin:0 0 var(--sp2)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.ci{color:var(--mute)}
.cap{margin:var(--sp3) 0 var(--sp6);max-width:72ch;font-size:14px;line-height:1.55;color:var(--mute)}
.cap b{color:var(--soft)}

main h2::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line)}

/* meta + actions */
.meta{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp5);margin:0 0 var(--sp5);padding:var(--sp3) 0;border-block:1px solid var(--line);font:400 var(--t-xs)/20px var(--mono);color:var(--mute)}
.meta b{color:var(--ink);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp3);margin:0 0 var(--sp6)}

/* abstract / key findings / callout */
.abstract,.box{margin:0 0 var(--sp5);padding:var(--sp5) var(--sp6);border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.box{margin:var(--sp6) 0;border-radius:var(--r2);padding:var(--sp4) var(--sp5)}
.abstract p:last-child,.box p:last-child{margin-bottom:0}
.abstract p,.box p{max-width:none}
ul.kf{margin:0;padding:0;list-style:none}
ul.kf li{position:relative;margin:0;padding:var(--sp3) 0 var(--sp3) var(--sp5);border-bottom:1px solid var(--line)}
ul.kf li:first-child{padding-top:var(--sp1)}
ul.kf li:last-child{padding-bottom:0;border-bottom:0}
ul.kf li::before{content:"";position:absolute;left:0;top:calc(var(--sp3) + 11px);width:8px;height:1px;background:var(--mute)}
ul.kf li:first-child::before{top:calc(var(--sp1) + 11px)}

/* contents */
.toc{columns:2;column-gap:var(--sp6);margin:0 0 var(--sp6);padding:0;list-style:none}
.toc li{break-inside:avoid;margin:0;padding:0}
.toc a{display:block;text-decoration:none;padding:var(--sp1) 0;font-size:15px;color:var(--soft);transition:color var(--t-fast)}
.toc a:hover{color:var(--ink)}
ol.refs{padding-left:24px}
ol.refs li{font-size:14px;line-height:1.6;margin-bottom:var(--sp3)}

/* tables */
.tw{margin:var(--sp4) 0 var(--sp2);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line2)}
.tw table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
.tw th{padding:10px 14px;border-bottom:1px solid var(--line2);font:500 var(--t-xs)/16px var(--mono);color:var(--mute);text-align:left;vertical-align:bottom}
.tw td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:top}
.tw tr:last-child td{border-bottom:0}
.tw tbody tr{transition:background-color var(--t-fast)}
.tw tbody tr:hover{background:var(--hover)}
.tw th.n,.tw td.n{text-align:right;font-family:var(--mono);font-size:var(--t-xs);line-height:20px;white-space:nowrap}
.tw th.n{line-height:16px}
.tw td.hi{color:#fff;font-weight:600}
.tw td b{color:var(--ink)}

/* figures: paper ground, rounded frame, Geist inside */
figure.fig{margin:var(--sp5) 0 0;padding:var(--sp5);border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.fig svg{width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);margin:var(--sp2) 0;font:400 var(--t-xs)/1.4 var(--mono);color:var(--mute)}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-1px}

/* code, quotes, transcripts */
pre,.cite{margin:var(--sp4) 0;padding:var(--sp4) var(--sp5);border-radius:var(--r2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font:400 var(--t-xs)/1.6 var(--mono);color:var(--ink);overflow-x:auto}
.cite{word-break:break-word}
code{padding:1px 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink)}
pre code{padding:0;background:none;font-size:inherit}
.chat{margin:var(--sp3) 0;padding:var(--sp3) var(--sp4);border-radius:var(--r2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.chat .t{margin:var(--sp2) 0;font-size:15px;line-height:1.55;color:var(--soft)}
.chat .t.bot{color:var(--ink)}
.chat .who{display:block;font:500 var(--t-xs)/1.4 var(--mono);color:var(--mute)}
.chat mark{padding:0 3px;border-radius:3px;background:var(--acc);color:#000}
.chat .tag{position:relative;display:block;height:auto;margin-top:var(--sp3);padding:var(--sp3) 0 0;border-radius:0;box-shadow:none;white-space:normal;font:400 var(--t-xs)/1.5 var(--mono);color:var(--mute)}
.chat .tag::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line)}

/* index cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:var(--sp7) 0 0}
.cards + h2{margin-top:var(--sp6)}
.card{padding:var(--sp6);color:var(--ink)}
.card .kind{font:500 var(--t-xs)/1.4 var(--mono);color:var(--mute)}
.card h3,.card h2{margin:var(--sp3) 0 var(--sp3);max-width:none;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.card p{margin:0 0 var(--sp5);font-size:15px;line-height:1.55;color:var(--soft)}
.card .big{margin-top:auto;font-size:clamp(34px,3.6vw,44px);line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.card .big .b{color:var(--acc)}
.card .small{margin-top:var(--sp2);font-size:14px;line-height:1.5;color:var(--mute)}
.card .go{margin-top:var(--sp5);font:500 14px/1 var(--mono);color:var(--ink)}
.card .go::after{content:"";display:block;height:1px;margin-top:6px;width:0;background:currentColor;transition:width var(--t-med) var(--out)}
.card:hover .go::after{width:100%}

@media (max-width:860px){.cards{grid-template-columns:minmax(0,1fr)}.toc{columns:1}}
@media (max-width:720px){
  main{padding-top:var(--sp7)}
  main h2{margin-top:var(--sp7)}
  .abstract{padding:var(--sp4) var(--sp5)}
  .card{padding:var(--sp5)}
  figure.fig{padding:var(--sp4)}
  figure.fig:not(.fig--r) svg{width:1160px;max-width:none}
  .tw th,.tw td{padding:10px 12px}
  .tw table{min-width:560px}
}

/* print (the report PDFs are printed from these pages): light, no chrome */
@media print{
  @page{size:A4;margin:16mm 15mm 18mm}
  :root{--bg:#fff;--ink:#14161a;--soft:#3c4048;--mute:#6b7079;--dim:#6b7079;--acc:#8f5200;--line:#d9d9d9;--line2:#c4c4c4;--line3:#999}
  html,body{background:#fff;color:#14161a}
  body{font-size:10.5pt;line-height:1.5}
  .nav,.sheet,.site-ft,.skip,.noprint,.actions{display:none!important}
  main{padding:0;max-width:none}
  .paper{max-width:none}
  main h1{font-size:24pt;margin-top:0;max-width:none}
  main h2{font-size:15pt;margin-top:22pt;break-after:avoid}
  main h3{break-after:avoid}
  main p,main li{font-size:10.5pt;color:#3c4048}
  figure,table,.chat,.abstract,.cite{break-inside:avoid}
  figure.fig{padding:8pt;background:#000;box-shadow:none;border-radius:8pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .abstract,.chat,pre,.cite,.box,.tw,code{box-shadow:none;border:1px solid #d9d9d9}
  main :where(p,li,.cap) a{text-decoration:none;color:#14161a}
}

/* reading measure: about 75 characters a line */
.lede,.hero > p,.paper p,.paper li,.abstract p,.box p,ul.kf li,.cap{max-width:56ch}
.paper > p,.paper > ol,.paper > ul:not(.kf):not(.toc){max-width:56ch}
.cite,.chat .tag{max-width:72ch}
.tw td{max-width:60ch}

@media (max-width:900px){figure.fig:not(.fig--r) svg{width:840px;max-width:none}}

/* responsive figures (charts.rfig): the desktop SVG scales to the column; below 600px a stacked phone SVG replaces it */
figure.fig--r{overflow:visible}
figure.fig--r svg{display:block;width:100%;height:auto;max-width:none}
figure.fig--r .fig__m{display:none}
/* tablet: the desktop figure would shrink its labels below 12px, so show the phone figure at a readable size */
@media (min-width:601px) and (max-width:900px){
  figure.fig.fig--r{max-width:480px}
  figure.fig--r .fig__d{display:none}
  figure.fig--r .fig__m{display:block}
}
@media (max-width:600px){
  figure.fig.fig--r{padding:var(--sp4) var(--sp3)}
  figure.fig--r .fig__d{display:none}
  figure.fig--r .fig__m{display:block}
}
.dl{margin:var(--sp2) 0 var(--sp6);font:400 max(13px,var(--t-xs))/20px var(--mono);color:var(--mute)}
.dl a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.dl a:hover{text-decoration-color:currentColor}
.cap + .dl{margin-top:calc(-1 * var(--sp4))}

/* wide tables and fixed-width figures: a right-edge fade and a one-line hint while there is more to scroll (assets/research.js) */
.xs-hint{margin:var(--sp4) 0 calc(-1 * var(--sp2));font:400 var(--t-xs)/1.4 var(--mono);color:var(--mute)}
.tw.xs:not(.xs-end),figure.fig.xs:not(.xs-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgb(0 0 0 / .15));mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgb(0 0 0 / .15))}

/* inline code sits in the text line */
main code{font-size:max(13px,.86em);font-weight:400;line-height:1;padding:1px 5px;white-space:normal}

/* abstract box: one rule (no h2 hairline inside), box sized to its text measure */
main .abstract h2{padding-top:0}
main .abstract h2::before{display:none}
.abstract{width:fit-content;max-width:100%}
.abstract ul.kf li,.abstract p{max-width:56ch}

/* key numbers: amber marks the problem / before value, white the after value */
.big .b,.kn .b{color:var(--acc)}

/* first-screen key figure on study pages */
.lead-fig{margin:0 0 var(--sp4)}
.lead-fig + .cap{margin-top:var(--sp3)}

/* report index: small real figure on each card, a fixed 96px high with a one-line caption (what it shows, unit).
   Cards in a row share their row tracks (subgrid), so headings, figures, big numbers and "Read the report" align. */
.card .mini-f{margin:0 0 var(--sp5)}
.card .mini{display:block;width:100%;height:96px}
.card .mini text{font-family:var(--mono)}
.card .mini-cap{margin:var(--sp2) 0 0;font:400 var(--t-xs)/1.45 var(--mono);color:var(--mute)}
.card .small .b{color:var(--acc)}
.card > p,.card .small{max-width:62ch}
@supports (grid-template-rows:subgrid){
  .cards{row-gap:0}
  .cards > .card.k-card{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;align-content:start;margin-bottom:var(--gap)}
  .cards > .card .big{margin-top:0;align-self:end}
}

/* motion: a short hero entrance on load; figure bars grow and marks fade in once, when the figure scrolls into view
   (assets/research.js adds .pl through window.onView). Without .pl every mark is drawn in its final state. */
@keyframes rIn{from{opacity:0;transform:translateY(10px)}}
@keyframes rGrowX{from{transform:scaleX(0)}}
@keyframes rGrowY{from{transform:scaleY(0)}}
@keyframes rFade{from{opacity:0}}
@keyframes rPop{from{opacity:0;transform:scale(.3)}}
main .hero > :nth-child(-n+5):not(figure){animation:rIn .7s var(--out) both}
main .hero > :nth-child(2){animation-delay:.05s}
main .hero > :nth-child(3){animation-delay:.1s}
main .hero > :nth-child(4){animation-delay:.15s}
main .hero > :nth-child(5){animation-delay:.2s}
.fig .ab,.fig .av,.fig .ad,.mini .ab{transform-box:fill-box}
.fig .ab,.mini .ab{transform-origin:0 50%}
.fig .av{transform-origin:50% 100%}
.fig .ad{transform-origin:50% 50%}
.fig.pl .ab,.mini.pl .ab{animation:rGrowX .9s var(--spring2) both;animation-delay:calc(var(--i,0) * 70ms)}
.fig.pl .av{animation:rGrowY .9s var(--spring2) both;animation-delay:calc(var(--i,0) * 70ms)}
.fig.pl .af{animation:rFade .6s var(--out) both;animation-delay:calc(var(--i,0) * 40ms)}
.fig.pl .ad{animation:rPop .5s var(--spring2) both;animation-delay:calc(.2s + var(--i,0) * 60ms)}
.fig.pl .aw{animation:rFade .5s var(--out) both;animation-delay:calc(.35s + var(--i,0) * 60ms)}
.fig.pl .at,.mini.pl .at{animation:rFade .5s var(--out) both;animation-delay:calc(.4s + var(--i,0) * 70ms)}
/* figures and card minis already on screen at load (.pl0, assets/research.js) grow from a visible start, with every value
   label shown from the first frame: no empty axes on load, and no replay from empty on the first scroll */
@keyframes rGrowX0{from{transform:scaleX(.45)}}
@keyframes rGrowY0{from{transform:scaleY(.45)}}
@keyframes rFade0{from{opacity:.5}}
@keyframes rPop0{from{transform:scale(.6)}}
.fig.pl0 .ab,.mini.pl0 .ab{animation:rGrowX0 .8s var(--spring2) both;animation-delay:calc(var(--i,0) * 40ms)}
.fig.pl0 .av{animation:rGrowY0 .8s var(--spring2) both;animation-delay:calc(var(--i,0) * 40ms)}
.fig.pl0 .af{animation:rFade0 .5s var(--out) both;animation-delay:calc(var(--i,0) * 30ms)}
.fig.pl0 .ad{animation:rPop0 .5s var(--spring2) both;animation-delay:calc(var(--i,0) * 40ms)}

/* 404 */
.nf{max-width:640px}
.nf ul.kf{margin:var(--sp5) 0 var(--sp6)}
.nf ul.kf a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}

@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  figure.fig--r .fig__m,.xs-hint,.dl{display:none!important}
  figure.fig--r .fig__d{display:block!important}
  .tw,figure.fig{-webkit-mask-image:none!important;mask-image:none!important}
  .abstract{width:auto}
  .tw{overflow:visible!important}
  .tw th.n{white-space:normal}
  .tw table{font-size:9pt}
  /* paper ink on white: highlighted cells, transcript meta / verdict strips and code blocks print dark-on-white, unclipped */
  .tw td.hi{color:#14161a}
  .chat .tag{background:none!important;color:#3c4048}
  pre,pre code{white-space:pre-wrap;overflow:visible!important;overflow-wrap:anywhere}
  .tw th.ph-x,.tw td.ph-x{display:table-cell!important}
}
/* tables on the study pages: numeric headers may wrap so the table fits the column */
.tw table.wh th.n{white-space:normal}
/* phones: secondary columns (site_common.tbl phone_hide) drop out so the result column stays on screen */
@media (max-width:600px){.tw th.ph-x,.tw td.ph-x{display:none}.tw table:has(.ph-x){min-width:0}}

/* paper PDF (.pw): white figures on the white page, full-width text, Figure 1 under the abstract on page 1.
   CSS fill/stroke override the SVG presentation attributes, so the same chart prints dark-on-white. */
@media print{
  figure.fig.fig--r{max-width:none!important}
  .pw h1{max-width:none;font-size:20pt;margin-bottom:6pt}
  .pw p,.pw li,.pw .cap,.pw .lede,.pw .abstract,.pw .abstract p,.pw ul.kf li{max-width:none}
  .pw .lede{font-size:11pt;margin-bottom:6pt}
  .pw .meta{margin-bottom:8pt;padding:4pt 0;font-size:8pt;line-height:12pt}
  .pw .abstract{padding:6pt 10pt;margin-bottom:6pt}
  .pw .abstract p{font-size:9.5pt;line-height:1.45}
  .pw > figure.fig{max-width:88%!important;margin:6pt auto 0}
  .pw > figure.fig + .cap{font-size:8.5pt;margin-top:4pt}
  .pw code{white-space:nowrap;font-size:.9em;padding:0 3pt}
  .pw pre,.pw pre code{white-space:pre-wrap;overflow:visible;padding:0;font-size:8.5pt}
  .pw pre{padding:6pt 8pt;break-inside:avoid}
  .pw pre code{border:0;box-shadow:none}
  .pw figure.fig{background:#fff;border:1px solid #d9d9d9;padding:6pt}
  .pw figure.fig text[fill="#ededed"],.pw figure.fig text[fill="#a1a1a1"]{fill:#14161a}
  .pw figure.fig rect[fill="#ededed"]{fill:#3c4048}
  .pw figure.fig rect[fill="#ededed"] + text[fill="#000"]{fill:#fff}
  .pw figure.fig rect[fill="rgba(255,255,255,.1)"]{fill:#ececec}
  .pw figure.fig [stroke="rgba(255,255,255,.1)"]{stroke:#d9d9d9}
  .pw figure.fig [stroke="#a1a1a1"]{stroke:#6b7079}
}