/* ============================================================================
   tool.css: the two research explorers on their own pages (/research/evidence-map/ and
   /research/three-outcome-test/). Layout only, on ka.css: every color is a ka.css token and the page
   has no :root of its own (DESIGN.md rule 1). Figures use the .datafig frame.
   Data colors, the same as the story (story.css):
     - verdicts in order, strongest first: Adopt --d1, Pilot --d2, Watch --d3, Hold --d4, and every
       verdict is also written as a word (labels, the key, the detail panel, the table);
     - ordinal 1 to 4 scores (evidence, the three outcomes): filled pips count the score; Moderate
       and up fill --d2, below that --data-dim;
     - momentum always carries an arrow icon and its name;
     - --warm marks a claim with no source.
   ========================================================================== */
body.tool{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))}
.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}

/* ---------- page scaffold ---------- */
.tool-hero h1{max-width:22ch}
.tool-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px;font-size:var(--fs-sm);color:var(--mut)}
.tool-meta .sep{width:1px;height:14px;background:var(--line-2)}
.tool-body .wrap>*+*{margin-top:24px}

/* ---------- controls: one row above the figure it scopes, segmented like the Insights tabs ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.fgroup{display:flex;align-items:center;gap:10px;min-width:0}
.fgroup>.label{margin:0;white-space:nowrap}
.fset,.viewtabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tint-line)}
.fbtn,.viewtabs button{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)}
.fbtn:hover,.viewtabs button:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.fbtn[aria-pressed="true"],.viewtabs button[aria-pressed="true"]{color:var(--blue);background:var(--surface);box-shadow:var(--sh)}
.fbtn:focus-visible,.viewtabs button:focus-visible{outline-offset:-2px}
.fcount{margin-left:auto;font-size:var(--fs-sm);color:var(--mut);white-space:nowrap}
.filters .opt{min-height:44px}

/* ---------- chips: evidence, momentum, verdict ---------- */
.ev,.mom,.verdict,.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:600 12.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.ev .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--data-dim)}
.ev[data-ev="3"] .dot,.ev[data-ev="4"] .dot{background:var(--d2)}
.mom svg{flex:none;color:var(--blue)}
.verdict{letter-spacing:.06em;text-transform:uppercase}
.pill.pass{background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tint-line);color:var(--blue)}

/* ---------- ordinal score meter (1 to 4) ---------- */
.meter{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.meter i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line)}
.meter[data-score="1"] i:nth-child(-n+1),.meter[data-score="2"] i:nth-child(-n+2){background:var(--data-dim)}
.meter[data-score="3"] i:nth-child(-n+3),.meter[data-score="4"] i:nth-child(-n+4){background:var(--d2)}

/* ---------- the figure ---------- */
.datafig-body.plotwrap{position:relative;overflow:visible}
.plotwrap svg{display:block;width:100%;height:auto;overflow:visible}
.vkey{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;list-style:none;padding:0;margin:16px 0 0;font-size:var(--fs-xs);color:var(--body)}
.vkey li{display:inline-flex;align-items:center;gap:7px}
.vkey .k-size{margin-left:auto;color:var(--mut)}
@media (max-width:700px){.plotwrap .tip{display:none}}
.plot-phone .quad-text,.plot-phone .quad-sub{display:none}
.grid-line{stroke:var(--grid);stroke-width:1}
.axis-line{stroke:var(--axis);stroke-width:1.5}
.axis-text{fill:var(--mut);font:500 12.5px var(--sans)}
.axis-title{fill:var(--mut);font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.quad-text{fill:var(--mut);font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.quad-sub{fill:var(--mut);font:500 11.5px var(--sans)}
.bubble{cursor:pointer;transition:opacity var(--dur-ui) var(--ease-ui)}
.bubble circle.mk{fill:var(--c);fill-opacity:.88;stroke:var(--surface);stroke-width:2}
.bubble.is-sel circle.mk,.bubble:hover circle.mk{fill-opacity:1}
.bubble.is-dim{opacity:.25}
.bubble .selring{fill:none;stroke:var(--ink);stroke-width:1.5}
/* paint-order puts the stroke behind the glyph, a halo that keeps crowded labels legible */
.bubble text{fill:var(--ink);font:600 12.5px var(--sans);pointer-events:none;stroke:var(--surface);stroke-width:3.5px;paint-order:stroke fill;stroke-linejoin:round}
.bubble text.vl{fill:var(--body);font:700 11px var(--sans);letter-spacing:.07em;text-transform:uppercase}
.bubble text.num{fill:var(--surface);font:700 12px var(--sans);stroke:none;paint-order:normal}
.bubble.v-hold text.num{fill:var(--ink)}
.bubble line.lead{stroke:var(--mut);stroke-width:1;opacity:.6}
.hit{fill:transparent;cursor:pointer}
.bubble:focus-visible,.bubble:focus{outline:none}
.bubble:focus-visible circle.mk{stroke:var(--focus);stroke-width:3}
/* phones: a number in each bubble, the names and verdicts in a key the reader can tap */
.bubble-key{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bubble-key button{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;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)}
.bubble-key button b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:var(--surface);font-size:12px}
.bubble-key button.v-hold b{color:var(--ink)}
.bubble-key button small{display:block;margin-top:2px;font:700 10.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.bubble-key button:active{background:var(--tint)}
.bubble-key button.is-sel{border-color:var(--blue2);background:var(--tint)}
.bubble-key button.is-dim{color:var(--mut);background:var(--bg)}
.bubble-key button.is-dim b{background:var(--data-dim);color:var(--ink)}

/* ---------- tooltip ---------- */
/* the same light card as the chart library's tooltip (ka.css .kc-tip) */
.tip{position:absolute;z-index:40;pointer-events:none;opacity:0;transition:opacity var(--dur-hover) var(--ease-ui);max-width:260px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-hover);font:500 12.5px/1.55 var(--sans);color:var(--body)}
.tip.on{opacity:1}
.tip b{display:block;margin-bottom:3px;font-size:13.5px;color:var(--ink)}
.tip .row{display:flex;justify-content:space-between;gap:14px;color:var(--mut)}
.tip .row span:last-child{font-weight:600;color:var(--ink)}

/* ---------- tables ---------- */
/* wide tables scroll inside their own box; the PAGE must never scroll sideways */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tblwrap>.tbl{min-width:560px}
.tbl{width:100%;border-collapse:collapse;margin-top:6px;font-size:var(--fs-sm)}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:700 var(--fs-xs)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);white-space:nowrap;border-bottom-color:var(--line-2)}
.tbl tbody th{font:600 var(--fs-sm)/1.35 var(--sans);color:var(--ink)}
.tbl td{color:var(--body)}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr:last-child>*{border-bottom:0}
.tablecard{padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,32px)}
.tablecard .datafig-table{margin-top:0;border-top:0}

/* ---------- two-pane layout ---------- */
/* minmax(0,…) and min-width:0 are both required: a grid item defaults to min-width:auto, so a wide
   table inside it blows the page out sideways and the item's own overflow-x:auto never clamps. */
.pane{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.pane>*{min-width:0}
/* the detail column: 380 to 400px. In a narrower column the three-outcome test card (case.css) wraps onto more
   lines and no longer fits one laptop screen. */
@media (min-width:1000px){.pane.has-detail{grid-template-columns:minmax(0,1fr) clamp(380px,28vw,400px)}}
/* the wide frame, as on the story page: from 1000px the figure, its controls and the detail beside it may run
   past the 1120px text frame (--fig-max plus the detail column, the gap and the gutters); the reading blocks
   under them keep the text frame's left edge and width */
@media (min-width:1000px){
  .tool-body>.wrap{max-width:min(1320px,calc(clamp(800px,58vw,960px) + 468px))}
  .tool-body>.wrap>:not(.filters):not(.pane):not(.datafig-foot){margin-left:max(0px,calc((100% - 1072px) / 2))}
  .tool-body>.wrap>:is(.method,.tablecard,.tool-share-end){max-width:1072px}
}
/* very large screens: the figure may reach 1,200px, as on the story page (story.css --fig-max) */
@media (min-width:2200px){.tool-body>.wrap{max-width:calc(min(1200px,48vw) + 468px)}}
.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(18px,2.4vw,26px)}
@media (min-width:1000px){.detail{position:sticky;top:calc(var(--hdr-h) + 16px);max-height:calc(100vh - var(--hdr-h) - 32px);overflow-y:auto}}

/* ---------- sourced claims ---------- */
.cite-item{margin:0 0 8px;padding:10px 0 10px 14px;border-left:2px solid var(--tint-line);font-size:var(--fs-sm);line-height:1.6;color:var(--body)}
.cite-item .cite{display:block;margin-top:4px;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}

/* ---------- sequencing (three-outcome test, second view) ---------- */
.roadmap{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:8px}
.rail{position:absolute;top:15px;left:8%;right:8%;height:2px;border-radius:1px;background:var(--line-2)}
@media (max-width:700px){.rail{display:none}}
.rstep{position:relative;text-align:center}
.rdot{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 auto 12px;border:3px solid var(--blue2);border-radius:50%;background:var(--surface)}
.rdot i{display:block;width:11px;height:11px;border-radius:50%;background:var(--blue2)}
.rstep h3{font-size:var(--fs-lg);margin-bottom:3px}
.rstep .when{font-size:12.5px;color:var(--mut);margin-bottom:10px}
.rdesc{max-width:26ch;margin:0 auto 12px;font-size:12.5px;line-height:1.55;color:var(--mut)}
.rlist{display:flex;flex-direction:column;align-items:center;gap:6px}
.rpill{max-width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--body);font:600 12.5px/1.35 var(--sans);cursor:pointer;transition:border-color var(--dur-hover) var(--ease-ui),color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.rpill:hover{border-color:var(--blue2);color:var(--ink)}
.rpill[aria-pressed="true"]{border-color:var(--blue2);background:var(--tint-2);color:var(--blue)}
.rnone{font-size:12.5px;color:var(--mut);font-style:italic}

/* ---------- scorecard (three-outcome test) ---------- */
.matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* fixed layout is what bounds the name column; without it the longest name runs into the scores */
.sc-table{min-width:540px;table-layout:fixed}
.sc-table th:first-child{width:31%}
.sc-table th:not(:first-child){width:16%}
.sc-table th:last-child{width:21%}
/* these headers carry a second line of descriptive text and wrap inside their fixed column */
.sc-table thead th{vertical-align:bottom;white-space:normal}
.sc-table thead th .bn{display:block;margin-top:3px;font:500 12px var(--sans);color:var(--mut);text-transform:none;letter-spacing:0}
.sc-table tbody th{white-space:normal;overflow-wrap:anywhere}
.sc-table tbody th .nm{display:block}
.sc-table tbody th .bn{display:block;margin-top:2px;font:500 12.5px var(--sans);color:var(--mut)}
.scrow{cursor:pointer;transition:background-color var(--dur-hover) var(--ease-ui)}
.scrow:hover,.scrow:focus-visible{background:var(--tint)}
.scrow:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.scrow.is-sel{background:var(--tint-2);box-shadow:inset 3px 0 0 var(--blue2)}
.cell{white-space:nowrap}
.cellval{display:block;margin-top:5px;font:500 12.5px var(--sans);color:var(--mut)}
.fire{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--sans);color:var(--ink)}
.fire::before{content:"";flex:none;width:9px;height:9px;border-radius:50%}
.fire.yes{color:var(--blue)}
.fire.yes::before{background:var(--d2)}
.fire.no{color:var(--body)}
.fire.no::before{box-shadow:inset 0 0 0 2px var(--data-dim)}
/* a <p>: max-width:none, or the site's paragraph measure stops its top rule partway across the table */
.sc-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;max-width:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--body)}
.sc-key .k{display:inline-flex;align-items:center;gap:7px}
.sc-key .push{margin-left:auto;color:var(--mut)}

/* ---------- method ---------- */
.empty{padding:48px 20px;text-align:center;font-size:var(--fs-ui);color:var(--mut)}
.method{padding:clamp(22px,3vw,32px) clamp(18px,3vw,32px)}
.method h2{font-size:var(--fs-2xl);margin-bottom:12px}
.method h3{font-size:var(--fs-lg);margin:22px 0 8px}
.method p,.method li{font-size:var(--fs-ui);line-height:1.6;color:var(--body)}
.method ul{margin:0 0 10px 20px}
.method li{margin-bottom:7px}
.method .axis-h{margin-top:16px}
.method .axis-h span{font-weight:400;color:var(--mut)}
.srcnote{padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--mut)}

@media (max-width:760px){
  .tool-meta .sep{display:none}
  .tool-meta{flex-direction:column;align-items:flex-start;gap:2px}
  .fcount{width:100%;margin-left:0}
  .fgroup{flex-wrap:wrap}
  .fbtn,.viewtabs button{min-height:44px;padding:0 8px}
  .vkey .k-size{margin-left:0}
  .sc-key .push{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.tool *{transition:none!important}}

/* ---------- tables on a phone: each row becomes a block, each cell a labeled line ----------
   (cells carry data-label; the scorecard and both table views use this) */
@media (max-width:600px){
  .tblwrap>.tbl.stack,.sc-table.stack{min-width:0}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:auto}
  .tbl.stack tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl.stack tbody tr:last-child{border-bottom:0}
  .tbl.stack th[scope=row]{padding:0 0 6px;border:0;font:600 15px/1.35 var(--sans);color:var(--ink);white-space:normal}
  .tbl.stack td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;border:0;white-space:normal;text-align:right}
  .tbl.stack td::before{content:attr(data-label);font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:left}
  .tbl.stack td[colspan]{display:block;text-align:left}
  .tbl.stack td[colspan]::before{content:none}
  .sc-table.stack .cell{display:flex}
  .sc-table.stack .cellval{display:inline;margin:0 0 0 8px}
  .sc-table.stack .cell .meter{margin-left:auto}
  .scrow.is-sel{box-shadow:inset 3px 0 0 var(--blue2);padding-left:10px}
}

/* share rows (ka-share.js, kind research): under the hero line, and after the source note */
.tool-share{margin-top:14px}
.tool-share-end{margin-top:18px}