/* story.css: the research story at /research/where-ai-has-proof/ (scroll story, checked claims,
   scorecard, explorers). Layout only: every color is a ka.css token, no :root of its own (DESIGN.md
   rule 1). Data marks use the data palette, verdicts in order, strongest first, and every verdict is
   also written as a word: Adopt --d1, Pilot --d2, Watch --d3, Hold --d4. --warm marks a quoted number
   that runs past what its source measured, and a claim with no source. Markup: story-render.js and
   ops/build_research_story.mjs; motion: story.js plus the shared ka-motion hooks. */
body.story{background:var(--bg)}
.v-adopt{--c:var(--d1)}.v-pilot{--c:var(--d2)}.v-watch{--c:var(--d3)}.v-hold{--c:var(--d4)}
.sw{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--d2))}
/* "bubble size" glyph: a small and a large circle */
.sz{flex:none;display:inline-block;width:18px;height:12px;background:radial-gradient(circle at 3.5px 8px,var(--d2) 3px,transparent 3.6px),radial-gradient(circle at 12px 6px,var(--d2) 5.5px,transparent 6.1px);opacity:.75}

/* ---------- hero: the title on the left, the contents card on the right from 961px ---------- */
.story-top{padding-bottom:clamp(40px,6vw,72px)}
.story-top h1{max-width:20ch}
.story-top .sub{margin-bottom:0}
.story-by{margin-top:18px;font-size:var(--fs-sm);color:var(--mut)}
@media (min-width:961px){.story-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,23rem);gap:64px;align-items:end}}
@media (max-width:960px){.story-hero .toc{margin-top:32px;max-width:32rem}}
.toc{padding:14px 10px 6px}
.toc-k{margin:2px 12px 6px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.toc-list{list-style:none;padding:0}
.toc-list li{position:relative}
.toc-list li+li::before{content:"";position:absolute;left:12px;right:12px;top:0;border-top:1px solid var(--line);pointer-events:none}
.toc-row{display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto 8px;align-items:center;column-gap:10px;min-height:62px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--tint-2),var(--tint) 60%) no-repeat 0 0/0% 100%;transition:background-size var(--dur-ui) var(--ease-out),background-color var(--dur-press) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.toc-row:hover{color:inherit;background-size:100% 100%}
.toc-row:active{background-color:var(--tint-2);background-size:100% 100%}
.toc-row:focus-visible{outline-offset:-2px}
.toc-row::after{content:"";width:8px;height:14px;background:var(--blue);opacity:.7;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg;transition:translate var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.toc-row:hover::after{translate:0 3px;opacity:1}}
.toc-n{font:700 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;color:var(--blue)}
.toc-t{display:grid;gap:2px;min-width:0}
.toc-t b{font:600 var(--fs-lg)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.toc-t span{font-size:13.5px;line-height:1.35;color:var(--mut)}
.toc-c{font-size:12.5px;color:var(--mut);white-space:nowrap;text-align:right}
.toc-c b{display:block;font:700 var(--fs-xl)/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- chapters ---------- */
.chapter{padding:0 0 clamp(24px,4vw,40px)}
.chapter-head{max-width:1120px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--gutter) clamp(20px,3vw,32px)}
.chapter-head>*{max-width:760px}
.chapter-head.sub-head{padding-top:clamp(56px,7vw,88px)}
.chapter-head .h2{margin-bottom:14px}
.chapter-head .lede{margin:0}
.pn{display:inline-grid;place-items:center;min-width:30px;height:22px;margin-right:10px;padding:0 6px;border-radius:6px;background:var(--tint-2);color:var(--blue);font:700 12.5px/1 var(--sans);letter-spacing:.04em;vertical-align:1px}
.nojs{max-width:1120px;margin:0 auto 16px;padding:0 var(--gutter);color:var(--body)}
html:not(.js) .explore{display:none}

/* ---------- scene: a sticky figure beside (or, on narrow screens, above) the steps ---------- */
.scene,.steps,.step,.step .txt,.sfig,.xfig,.claim,.claim>div{box-sizing:border-box}
.scene{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,3vw,44px);align-items:start;max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.graphic{position:sticky;top:calc(var(--hdr-h) + 16px);height:var(--stage-h);display:flex;align-items:center}
.sfig,.xfig{width:100%;padding:clamp(16px,2vw,24px)}
.sfig-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:10px}
.sfig-head .datafig-label{flex:none;margin:0;white-space:nowrap} /* "Fig. 5" never breaks beside the title */
.sfig-head .datafig-title{font-size:var(--fs-xl);line-height:1.25;margin:0;max-width:none}
.sfig .datafig-body,.xfig .datafig-body{margin-top:10px}
/* the map fills what one screen leaves after the figure's head and key */
.sfig svg.plot{width:auto;max-width:100%;max-height:calc(var(--stage-h) - 120px);margin:0 auto}
.sfig .tblwrap,.xfig .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* the key sits directly above the plot; each part shows once the story reaches it (JS only) */
.skey{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;list-style:none;padding:0;margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--body)}
.skey li{display:inline-flex;align-items:center;gap:7px}
.skey .sk-size{margin-left:auto;color:var(--mut)}
html.js .skey li{opacity:0;transition:opacity var(--dur-enter) var(--ease-out)}
html.js .skey.on-v .sk-v,html.js .skey.on-size .sk-size{opacity:1}
/* (ka.css styles a legacy .steps/.step card list; the story resets what it does not use) */
.steps{display:block;margin:0;padding:12vh 0 22vh}
.step{min-height:78vh;display:flex;align-items:center;padding:0;gap:0}
.step .txt{max-width:40ch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh)}
/* the step being read lifts onto a white card with a blue edge; the others sit back on a quieter card
   at full text contrast. Only with JS, which marks the active one */
html.js .step .txt{background:color-mix(in srgb,var(--surface) 50%,var(--bg));box-shadow:none;translate:0 10px;transition:translate var(--dur-enter) var(--ease-out),box-shadow var(--dur-ui) var(--ease-ui),background-color var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui)}
html.js .step.is-active .txt{background:var(--surface);border-color:var(--tint-line);translate:none;box-shadow:inset 3px 0 0 var(--blue2),var(--sh-hover)}
.step .n{font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.step h3{font-size:var(--fs-xl);line-height:1.25;margin:0 0 10px}
.step p{font-size:var(--fs-ui);line-height:1.6;color:var(--body);margin:0}
.step p+p{margin-top:8px}
/* after each scene: the figure's source line and its table */
.scene-foot{max-width:1120px;margin:0 auto;padding:4px var(--gutter) 0}
.scene-foot .datafig-src{margin:0 0 4px}
.scene-foot .datafig-table{max-width:760px}
/* figure sizes, wider than 860px: a figure is as wide as the sticky stage's height allows for a 4:3 chart under
   its title and key (120px of chrome), up to --fig-max, and the step cards keep a column of their own. The
   figure and its steps start at the text frame's left edge, under the chapter's heading, and may run past the
   frame on the right, so a bigger screen gets a bigger chart instead of wider margins. When the row would not
   fit that way, the figure first gives up as much as 96px, then the row moves left until it keeps the gutter
   on the right (--row-w is the row's width).
   The explorers below use the same rule (their chrome is --xchrome). */
.scene,.scene-foot,.explore{--stage-h:calc(100svh - var(--hdr-h) - 32px);--fig-max:clamp(800px,58vw,960px)}
/* very large screens (2200px and up): figures may grow to 1,200px, and the map's labels with them */
@media (min-width:2200px){.scene,.scene-foot,.explore{--fig-max:min(1200px,48vw)}}
@media (min-width:861px){
  .scene,.scene-foot{--txt-w:clamp(320px,25vw,380px);--sgap:clamp(28px,3vw,44px);--fig-w:var(--fig-max);--row-w:calc(var(--fig-w) + var(--sgap) + var(--txt-w));grid-template-columns:minmax(0,var(--fig-w)) var(--txt-w);column-gap:var(--sgap);justify-content:start;max-width:none;
    padding-left:max(var(--gutter),min(calc((100% - 1120px) / 2 + var(--gutter)),calc(100% - var(--gutter) - var(--row-w) + 96px)))}
  /* the 4:3 map (#act1): no wider than the stage's height allows, and never under 600px, so it keeps the
     labeled desktop drawing (story.js switches to the numbered phone drawing under 520px of chart) */
  #act1,#act1+.scene-foot{--fig-w:clamp(600px,calc((var(--stage-h) - 120px) * 4 / 3 + 50px),var(--fig-max))}
  /* the source line and the table under a scene start at the figure's left edge */
  .scene-foot{display:grid}
  .scene-foot>*{grid-column:1}
}
/* short laptop windows (under 760px of height, so a 1366x768 screen once the browser's bars are counted): the map
   (#act1) is drawn 16:10 instead of 4:3 (story.js), under a tighter frame (104px of chrome), so it can be wider
   than the stage's height would allow a 4:3 drawing */
@media (min-width:861px) and (max-height:759px){
  #act1,#act1+.scene-foot{--fig-w:clamp(600px,calc((var(--stage-h) - 104px) * 1.6 + 40px),var(--fig-max))}
  #act1 .sfig{padding:16px 20px}
  #act1 .sfig svg.plot{max-height:calc(var(--stage-h) - 104px)}
}
.vword{display:inline-flex;align-items:center;gap:7px}
html:not(.js) #act1 .graphic{display:none}
html:not(.js) #act1{grid-template-columns:minmax(0,1fr);max-width:1120px;padding-left:var(--gutter)}
html:not(.js) #act1 .steps{padding:0}
html:not(.js) #act1 .step{min-height:0;padding:0 0 16px}

/* ---------- the map (Fig. 1): SVG drawn by story.js ---------- */
.plot{display:block;width:100%;height:auto;overflow:visible}
.plot .grid line{stroke:var(--grid);stroke-width:1}
.plot .axis{stroke:var(--axis);stroke-width:1.5}
/* sizes in drawing units; story.js sets --k (1 / the drawing's scale) so none falls under 11px on
   screen (12px for ticks) when the 720-unit desktop drawing is shown smaller, and none grows past 13 to 16px
   when it is shown larger (min(): names 16px, ticks 14px, verdicts 13.5px, axis titles and corners 13px);
   from 2200px of width, where figures reach 1,200px, the caps are 20% higher (--cap, the same in story.js) */
@media (min-width:2200px){.plot{--cap:1.2}}
.plot .ax-lab{font:700 min(max(13px,calc(11px * var(--k,1))),calc(13px * var(--k,1) * var(--cap,1)))/1 var(--sans);fill:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.plot .tick{font:500 min(max(14px,calc(12px * var(--k,1))),calc(14px * var(--k,1) * var(--cap,1)))/1 var(--sans);fill:var(--mut)}
.plot .quad{font:700 min(max(12.5px,calc(11px * var(--k,1))),calc(13px * var(--k,1) * var(--cap,1)))/1 var(--sans);fill:var(--mut);letter-spacing:.1em;text-transform:uppercase}
.plot .quad.sub{font-weight:500;letter-spacing:0;text-transform:none}
.plot .xaxis,.plot .yaxis,.plot .grid,.plot .quads{transition:opacity .9s var(--ease-io)}
.plot:not(.ax1) :is(.xaxis,.grid),.plot:not(.ax2) :is(.yaxis,.quads){opacity:0}
.plot .dot{fill:var(--d2);fill-opacity:.88;stroke:var(--surface);stroke-width:2;transition:fill var(--dur-enter) var(--ease-ui),fill-opacity var(--dur-ui) var(--ease-ui),stroke var(--dur-ui) var(--ease-ui)}
.plot.show-v .dot{fill:var(--c)}
.plot .dot.is-dim{fill-opacity:.16}
.plot .lab,.plot .vlab{pointer-events:none;paint-order:stroke;stroke:var(--surface);stroke-linejoin:round;transition:fill var(--dur-ui) var(--ease-ui),opacity var(--dur-ui) var(--ease-ui)}
.plot .lab{font:600 min(max(15px,calc(12px * var(--k,1))),calc(16px * var(--k,1) * var(--cap,1)))/1 var(--sans);fill:var(--ink);stroke-width:4px}
.plot .lab.is-dim{fill:var(--mut)}
.plot .vlab{font:700 min(max(13.5px,calc(11px * var(--k,1))),calc(13.5px * var(--k,1) * var(--cap,1)))/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;fill:var(--body);stroke-width:4px;opacity:0}
.plot.show-v .vlab{opacity:1}
.plot .vlab.is-dim,.plot .lab.is-off,.plot .vlab.is-off{opacity:.35}
.plot .lead{stroke:var(--mut);stroke-width:1;opacity:0;transition:opacity var(--dur-ui) var(--ease-ui)}
.plot .lead.on{opacity:.6}
.plot .lead.on.is-dim{opacity:.25}
.plot .bnum{fill:var(--surface);font:700 11.5px/1 var(--sans);pointer-events:none;transition:fill var(--dur-ui) var(--ease-ui),opacity var(--dur-ui) var(--ease-ui)}
.plot.show-v .bnum.v-hold{fill:var(--ink)}
.plot .bnum.is-dim{opacity:.4}
.plot.is-phone .tick,.plot.is-phone .ax-lab{font-size:11px}
.plot.is-phone .ax-lab{letter-spacing:.06em}
.plot.is-phone .vlab{font-size:11px;stroke-width:3.5px}
.plot.is-phone .dot{stroke-width:1.5px}
/* explorer states: filtered out, another one picked, this one picked */
.plot .dot.is-off{fill-opacity:.14}
.plot .dot.is-faded{fill-opacity:.45}
.plot .dot.is-sel{stroke:var(--ink);stroke-width:2.5px}
/* Chrome draws a square focus ring on an SVG shape focused by a mouse click; only the keyboard gets the ring */
.plot .dot:focus:not(:focus-visible){outline:none}
.plot .bnum.is-off{opacity:.35}
.plot [role=button]{cursor:pointer}
/* phones: a number in each bubble and the names in a key under the chart */
.pkey{list-style:none;padding:0;margin:6px 2px 0;display:flex;flex-wrap:wrap;gap:3px 12px;font:500 12px/1.3 var(--sans);color:var(--body)}
.pkey li{display:flex;align-items:center;min-width:0;white-space:nowrap}
.pkey b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:var(--d2);color:var(--surface);font-size:11px;transition:background-color var(--dur-enter) var(--ease-ui),color var(--dur-ui)}
.plot.show-v~.pkey b{background:var(--c)}
.pkey .pk-size{gap:6px;color:var(--mut)}
/* the story's phone map: the verdicts are written in the key (after each name, from the step that colors them)
   instead of beside the bubbles; the word keeps its room from the start, so the docked figure never changes size */
.plot.key-v :is(.vlab,.lead){display:none}
.pkey .pk-v{margin-left:5px;font:700 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
html.js .pkey .pk-v{opacity:0;transition:opacity var(--dur-enter) var(--ease-out)}
html.js .plot.show-v~.pkey .pk-v{opacity:1}
html.js .pkey .pk-size{opacity:0;transition:opacity var(--dur-enter) var(--ease-out)}
html.js .plot.show-size~.pkey .pk-size{opacity:1}
.sfig:has(.pkey) .skey .sk-size{display:none}
.plot.show-v~.pkey b.v-hold{color:var(--ink)}
.pkey.pick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 2px}
.pkey.pick li{white-space:normal}
.pkey.pick button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font:600 13px/1.25 var(--sans);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.pkey.pick button b{width:22px;height:22px;margin:0;font-size:12px}
.pkey.pick button:active{background:var(--tint)}
.pkey.pick button[aria-pressed=true]{border-color:var(--blue2);background:var(--tint)}
.pkey.pick button.is-off{color:var(--mut);background:var(--bg)}
.pkey.pick button.is-off b{background:var(--data-dim);color:var(--ink)}

/* ---------- the big number ---------- */
.bignum{width:min(820px,calc(100% - 2 * var(--gutter)));margin:clamp(48px,7vw,80px) auto 0;padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);text-align:center}
.bignum .num{font:700 clamp(72px,13vw,136px)/.95 var(--disp);letter-spacing:-.05em;color:var(--blue);margin:0 auto;max-width:none;font-variant-numeric:tabular-nums}
.bn-rule{display:block;width:min(220px,50%);height:4px;margin:20px auto 22px;border-radius:2px;background:var(--grad)}
.bn-h{font-size:var(--fs-2xl);margin:0 auto 12px;max-width:30ch}
.bn-body{font-size:var(--fs-base);line-height:1.65;color:var(--body);max-width:60ch;margin:0 auto}
.bn-src{margin:16px auto 0;font-size:var(--fs-sm);color:var(--mut)}

/* ---------- checked claims (Fig. 2 to 4): what circulates on the left, what the source measured on the right ---------- */
.claims{max-width:1120px;margin:0 auto;padding:0 var(--gutter);display:grid;gap:20px}
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.claim>div{padding:clamp(20px,2.6vw,30px)}
.claim .said{background:var(--bg);border-right:1px solid var(--line)}
.claim .tag{font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;max-width:none}
.claim .tag .fl{color:var(--blue)}
.claim .tag-v{color:var(--ink)}
.claim .tag-v i{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px;background:var(--warm);vertical-align:-1px}
.claim .fig{position:relative;display:inline-block;max-width:none;font:700 clamp(44px,6vw,64px)/1 var(--disp);letter-spacing:-.04em;color:var(--blue);margin:0 0 16px}
.claim .fig.is-void{color:var(--mut)}
.claim .strike{position:absolute;left:-4px;right:-4px;top:52%;height:3px;border-radius:2px;background:var(--warm)}
.claim .q{font:600 var(--fs-xl)/1.3 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.claim .why{font-size:var(--fs-ui);line-height:1.6;color:var(--body);margin:0 0 10px}
.claim .seen{font-size:var(--fs-sm);line-height:1.5;color:var(--mut);margin:0}
.viz{display:grid;gap:12px;margin:0 0 18px}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "b v";gap:6px 12px;align-items:center}
.vrow .vl{grid-area:l;font-size:var(--fs-sm);line-height:1.35;color:var(--body)}
.vrow .vbar{grid-area:b;position:relative;height:12px;border-radius:6px;background:var(--grid);overflow:hidden}
.vrow .vbar i{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--d2)}
.vrow.intent .vbar i{background:repeating-linear-gradient(135deg,var(--d2) 0 5px,var(--d4) 5px 9px)}
.vrow.quoted .vbar i{background:var(--warm)}
.vrow b{grid-area:v;font:700 var(--fs-ui)/1 var(--disp);color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vcap{font-size:var(--fs-xs);line-height:1.5;color:var(--mut);margin:0}
.viz.nos{grid-template-columns:1fr 1fr}
.nos .it{border:1.5px dashed var(--axis);border-radius:var(--r-sm);padding:12px 14px}
.nos .it b{display:block;font:700 var(--fs-2xl)/1 var(--disp);letter-spacing:-.03em;color:var(--mut)}
.nos .it span{display:block;margin-top:6px;font-size:var(--fs-sm);line-height:1.35;color:var(--mut)}
.nos .void{grid-column:1/-1;display:flex;align-items:center;gap:8px;max-width:none;margin:0;padding:10px 12px;border-radius:10px;background:var(--bg);box-shadow:inset 3px 0 0 var(--warm);font:700 var(--fs-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.nos .void svg{flex:none;color:var(--warm)}
.nos .vcap{grid-column:1/-1}

/* ---------- the scorecard (Fig. 5) ---------- */
.score{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.score col.c-name{width:31%}.score col.c-s{width:17%}.score col.c-v{width:18%}
.score thead th{font:700 12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--mut);text-align:left;vertical-align:bottom;padding:8px 8px 12px;border-bottom:1px solid var(--line-2)}
.score thead th span{display:block;margin-top:3px;font-weight:500;letter-spacing:0;text-transform:none}
.score thead .abbr,.verdict .abbr{display:none}
.score td,.score tbody th{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background-color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.score tbody tr:last-child>*{border-bottom:0}
.score tbody th{font:600 var(--fs-sm)/1.3 var(--sans);color:var(--ink);text-align:left;transition:color var(--dur-ui) var(--ease-ui),background-color var(--dur-ui) var(--ease-ui)}
.score tbody th .bn{display:block;margin-top:2px;font-weight:500;font-size:12.5px;color:var(--mut)}
.m{display:inline-flex;gap:3px;vertical-align:middle}
.m i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.m i.f{background:var(--data-dim)}
.m.is-met i.f{background:var(--d2)}
.verdict{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:700 12px/1 var(--sans);white-space:nowrap}
.verdict.fires{background:var(--tint-2);color:var(--blue)}
.verdict.fires::before{content:"";width:11px;height:11px;background:currentColor;-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.verdict.short{background:var(--bg);color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.score-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;max-width:none;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--body)}
.score-key>span{display:inline-flex;align-items:center;gap:6px}
.score-key .push{margin-left:auto;color:var(--mut)}
/* the story steps the scorecard: a column's pips fill as its step arrives, then the verdicts */
.score.staged .m i{scale:.6;opacity:.6;transition:scale var(--dur-enter) var(--ease-out),opacity var(--dur-ui) var(--ease-ui),background-color var(--dur-ui) var(--ease-ui)}
.score.staged .m i:nth-child(2){transition-delay:40ms}.score.staged .m i:nth-child(3){transition-delay:80ms}.score.staged .m i:nth-child(4){transition-delay:120ms}
.score.staged .m i.f{background:var(--line)}
.score.staged .m.on i{scale:1;opacity:1}
.score.staged .m.on i.f{background:var(--data-dim)}
.score.staged .m.on.is-met i.f{background:var(--d2)}
.score.staged .verdict{opacity:0;transition:opacity var(--dur-ui) var(--ease-ui)}
.score.staged .verdict.on{opacity:1}
.score tr.is-hot>*{background:var(--tint)}
.score tr.is-hot>th{color:var(--blue);box-shadow:inset 3px 0 0 var(--blue2)}
/* short screens beside the steps: the sticky scorecard drops its second lines so all six rows fit */
@media (min-width:861px) and (max-height:900px){
  :is(.sfig,.xfig) .score thead th span,:is(.sfig,.xfig) .score tbody th .bn{display:none}
  :is(.sfig,.xfig) .score td,:is(.sfig,.xfig) .score tbody th{padding-block:8px}
}
/* explorer rows: the whole row picks; the name is the button for keyboards and screen readers */
.score .pick{cursor:pointer}
.score .pick:hover>*{background:var(--tint)}
.score .pick.sel>*{background:var(--tint-2)}
.score .pick.sel>th{box-shadow:inset 3px 0 0 var(--blue2)}
.rowbtn{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rowbtn:focus-visible{outline-offset:3px;border-radius:2px}

/* ---------- explorers ---------- */
.explore{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.explore .row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
/* the same rule as the scenes: the map's chrome (title, chips, note, source line) is --xchrome, and the
   detail card keeps a reading column of 380 to 440px */
@media (min-width:861px){
  .explore{--xchrome:228px;--det-w:clamp(380px,28vw,440px);--fig-w:clamp(600px,calc((var(--stage-h) - var(--xchrome)) * 4 / 3 + 50px),var(--fig-max));--row-w:calc(var(--fig-w) + 24px + var(--det-w));max-width:none;
    padding-left:max(var(--gutter),min(calc((100% - 1120px) / 2 + var(--gutter)),calc(100% - var(--gutter) - var(--row-w) + 96px)))}
  .explore .row{grid-template-columns:minmax(0,var(--fig-w)) var(--det-w);justify-content:start}
  .xfig svg.plot{width:auto;max-width:100%;max-height:calc(var(--stage-h) - var(--xchrome));margin:0 auto}
  /* the scorecard explorer is a table, so its height does not grow with its width: it takes --fig-max */
  .explore:has(table.score){--fig-w:var(--fig-max)}
}
/* from 852px of height the map explorer is at least 750px wide, so its note sits beside the chips and the source
   line beside its link (the wide layout below): 28px less chrome */
@media (min-width:861px) and (min-height:852px){.explore{--xchrome:200px}}
/* under 852px of height the explorers do not stick (below), so only the map itself has to fit the screen: it
   takes the width that allows, and the chips, the note and the source line scroll past with the page */
@media (min-width:861px) and (max-height:851px){.explore{--xchrome:96px}}
/* the map explorer gives the chart two lines' height: the bubble-size note shares a line with the link
   under the chart, and the source line goes last; from 700px of figure the note sits beside the verdict
   chips instead and the source line and link share one line, as before */
@media (min-width:861px){
  #explore-map .xfig{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;container:xfig/inline-size}
  #explore-map .xfig>*,#explore-map .xfig>.datafig-foot>*{flex:1 1 100%;min-width:0}
  #explore-map .xfig>.vchips{flex:0 1 auto}
  #explore-map .xfig>.datafig-body{order:2}
  #explore-map .xfig>.datafig-foot{display:contents}
  #explore-map .xfig>.xnote{order:3;flex:0 1 auto;margin:12px 0 0}
  #explore-map .xfig .datafig-foot .more{order:4;flex:0 1 auto;margin:12px 0 0 auto}
  #explore-map .xfig .datafig-foot .datafig-src{order:5;margin:4px 0 0}
  @container xfig (min-width:700px){
    #explore-map .xfig>.xnote{order:1;margin:4px 0 0 auto}
    #explore-map .xfig .datafig-foot .datafig-src{order:3;flex:0 1 auto;margin:12px 0 0}
  }
}
@media (min-width:861px) and (min-height:852px){.explore .xfig{position:sticky;top:calc(var(--hdr-h) + 16px)}}
.xfig .datafig-foot{margin-top:12px}
.xfig .datafig-foot .more{font-size:var(--fs-sm)}
.xnote{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:var(--fs-xs);color:var(--mut)}
/* the verdict filter doubles as the key: each verdict with its swatch */
.vchips{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:100%;margin:4px 0 0;padding:4px;border-radius:14px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tint-line)}
.vchip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--body);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.vchip:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.vchip[aria-pressed=true]{color:var(--blue);background:var(--surface);box-shadow:var(--sh)}
.vchip:focus-visible{outline-offset:-2px}
.detail{padding:clamp(18px,2.4vw,26px)}
.detail p{font-size:var(--fs-ui);line-height:1.6;color:var(--body);margin:0}
.detail .empty{color:var(--mut)}
.cite-item{margin:8px 0;padding:6px 0 6px 12px;border-left:2px solid var(--tint-line);font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.cite-item .cite{display:block;margin-top:3px;font-size:12.5px;color:var(--mut)}
.cite-item.is-unverified{border-left-color:var(--warm)}
.cite-item .flag{margin-right:6px;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cite-item .flag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--warm);vertical-align:1px}
.story-end{padding-top:clamp(56px,8vw,96px)}

/* ---------- one column: the figure docks under the header, the steps pass beneath it ---------- */
@media (max-width:860px){
  .scene{grid-template-columns:minmax(0,1fr);gap:0}
  .graphic{top:var(--hdr-h);z-index:2;height:auto;display:block;padding-top:8px;background:var(--bg)}
  .sfig{padding:12px 12px 10px;box-shadow:var(--sh-hover)}
  .sfig-head{margin-bottom:6px;flex-wrap:nowrap}
  .xfig .sfig-head{flex-wrap:wrap} /* an explorer's longer label ("Fig. 1, interactive") takes its own line above the title */
  .sfig-head .datafig-title{font-size:var(--fs-lg)}
  .sfig .datafig-body{margin-top:6px}
  .sfig svg.plot{max-height:calc(60svh - 150px)}
  .sfig svg.plot.is-phone{max-height:none;width:100%}
  .steps{padding:16px 0 8svh}
  .step{display:block;min-height:0;padding:0 0 26svh}
  .step:last-child{padding-bottom:12svh}
  .step .txt{max-width:none;width:100%;padding:16px 18px}
  .step h3{font-size:var(--fs-lg)}
  .explore .row{grid-template-columns:minmax(0,1fr)}
  .claim{grid-template-columns:minmax(0,1fr)}
  .claim .said{border-right:0;border-bottom:1px solid var(--line)}
  .claim .q{font-size:var(--fs-lg)}
  .vchips{display:flex;flex-wrap:nowrap;width:100%}
  .vchip{flex:1 1 auto;min-height:44px;padding:0 6px;gap:5px;font-size:12.5px}
  .xfig,.detail{padding:14px 12px}
}
/* a narrow scorecard (a phone, or the explorer beside its detail): short column names, one line per row */
.sfig .datafig-body,.xfig .datafig-body{container-type:inline-size}
@container (max-width:580px){
  .score col.c-name{width:43%}.score col.c-s{width:14.5%}.score col.c-v{width:13.5%}
  .score thead th{padding:6px 4px 8px;font-size:11px;letter-spacing:0;text-transform:none}
  .score thead th span{display:none}
  .score thead .full,.verdict .full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .score thead .abbr,.verdict .abbr{display:inline}
  .score td,.score tbody th{padding:8px 3px}
  .score tbody th{padding-left:4px;font-size:12.5px;line-height:1.25}
  .score tbody th .bn{display:none}
  .m{gap:2px}.m i{width:9px;height:9px}
  .verdict{padding:4px 6px;font-size:11px}
  .verdict.fires::before{display:none}
  .score-key{gap:4px 10px;font-size:11.5px}
  .score-key .push{margin-left:0}
}
@container (max-width:360px){.m i{width:8px;height:8px}}
/* a wide scorecard beside the steps or the detail: bigger pips, names and rows (not on a tablet's docked figure) */
@media (min-width:861px){@container (min-width:700px){
  .score tbody th{font-size:var(--fs-ui)}
  .score td,.score tbody th{padding:13px 10px}
  .m{gap:4px}.m i{width:13px;height:13px}
  .verdict{padding:7px 12px;font-size:12.5px}
}}
/* a scorecard of 1,100px and more (screens from 2200px): its text and pips grow with it */
@media (min-width:2200px){@container (min-width:1100px){
  .score tbody th{font-size:var(--fs-lg)}
  .score tbody th .bn,.score thead th span{font-size:var(--fs-sm)}
  .score thead th{font-size:13px}
  .score td,.score tbody th{padding:16px 12px}
  .m{gap:5px}.m i{width:15px;height:15px}
  .verdict{padding:8px 14px;font-size:var(--fs-sm)}
}}
@media (prefers-reduced-motion:reduce){
  html.js .step .txt,.plot *,.score *,.skey li,.pkey b,.pkey .pk-v{transition:none!important}
}

/* share rows (ka-share.js, kind research): under the byline, and above the closing band */
.story-share{margin-top:14px}
.story-share-end{padding-bottom:28px}