/* case.css: the shelf cards in the research explorers: the three-outcome test's use case card
   (three-outcome-test/card.js, on /research/three-outcome-test/ and in the story's part three explorer) and
   the evidence map's category card (.tm, evidence-map/card.js, on /research/evidence-map/ and in the story's
   map explorer). Layout only, every color a ka.css token (DESIGN.md rule 1). Color meanings, the same as the
   scorecard and the map's meters: a score at or above the bar (3 of 4) is --d2 and --blue on --tint, one
   below it --data-dim and --mut on --bg; a use case that passes all three gets --tint-2 and a check, one
   that falls short a hollow --data-dim ring; a category's verdict swatch is its map color (--d1 to --d4).
   --warm stays reserved for a claim with no source (.cite-item). Prefix tc- (test card, and the shared
   parts): ka.css already uses oc- for the offer card. Markup: the two card.js files; behavior and motion:
   shelves.js. */
.tc{container:tc/inline-size;--tc-g:30px;--tc-row:44px}
.tc .tc-head{position:relative;padding-right:52px}
.tc .tc-k{max-width:none;margin:0 0 3px;font:700 var(--fs-xs)/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tc .tc-h{max-width:none;margin:0;font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
/* the heading is where focus lands when a card opens (not a control), so it draws no ring; Tab goes on to Close */
.tc .tc-h:focus{outline:none}
.tc .tc-close{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--tint);color:var(--blue);cursor:pointer;transition:background-color var(--dur-hover) var(--ease-ui)}
.tc .tc-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tc .tc-close:hover{background:var(--tint-2)}
.tc .tc-close:active{background:var(--tint-2);scale:.96}
.tc .tc-lead{max-width:none;margin:10px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}

/* ---------- the lists: the outcomes (under the verdict), then the guidance ---------- */
.tc .tc-list{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tc .tc-list+.tc-list{margin-top:10px}
.tc .tc-list>*+*{border-top:1px solid var(--line)}

/* the verdict heads the outcomes it sums up */
.tc .tc-verdict{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 12px 10px 14px;border-radius:11px 11px 0 0;background:var(--bg)}
.tc .tc-verdict.is-pass{background:var(--tint-2)}
.tc .tc-vi{position:relative;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--data-dim)}
.tc .is-pass .tc-vi{background:var(--blue2);box-shadow:none}
.tc .is-pass .tc-vi::after{content:"";position:absolute;inset:5px;background:var(--surface);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.tc .tc-vb{font:600 var(--fs-sm)/1.3 var(--sans);color:var(--ink)}
.tc .is-pass .tc-vb{color:var(--blue)}
.tc .tc-total{font-size:12.5px;line-height:1.2;color:var(--mut);white-space:nowrap}
.tc .tc-total b{font:700 var(--fs-ui)/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}
.tc .tc-vs{grid-column:2/-1;font-size:12.5px;line-height:1.35;color:var(--mut)}
/* a use case's note under its verdict (the caveat on a pass), in body text so it reads as part of the verdict */
.tc .tc-note{grid-column:1/-1;margin-top:6px;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--tint-line) 70%,transparent);font-size:12.5px;line-height:1.4;color:var(--body)}

/* ---------- shelves ---------- */
.tc .tc-s>summary{display:grid;grid-template-columns:var(--tc-g) minmax(0,1fr) auto 8px;align-items:center;gap:0 12px;min-height:var(--tc-row);padding:6px 12px 6px 10px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  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)}
.tc .tc-s>summary::-webkit-details-marker{display:none}
.tc .tc-s>summary::after{content:"";grid-column:4;width:8px;height:14px;background:var(--mut);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:rotate var(--dur-ui) var(--ease-ui),translate var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.tc .tc-s[open]>summary::after{rotate:90deg;background:var(--blue)}
.tc .tc-list>.tc-s:first-child>summary{border-radius:11px 11px 0 0}
.tc .tc-list>.tc-s:last-child:not([open])>summary{border-radius:0 0 11px 11px}
.tc .tc-s>summary:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  .tc .tc-s>summary:hover{background-size:100% 100%}
  .tc .tc-s>summary:hover::after{translate:2px 0;background:var(--blue)}
}
.tc .tc-s>summary:active,.tc .tc-s[open]>summary{background-size:100% 100%}
.tc .tc-t{min-width:0;font:600 var(--fs-ui)/1.3 var(--sans);color:var(--ink)}
.tc .tc-v{display:inline-flex;align-items:center;gap:10px}
.tc .tc-w{min-width:62px;font:600 12.5px/1.2 var(--sans);color:var(--body);text-align:right}
.tc .tc-o.is-met .tc-w{color:var(--blue)}
.tc .tc-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:700 12.5px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}

/* the icon: a tile, tinted when the outcome meets the bar and grey when it falls below; the guidance rows
   carry the icon without a tile, so a tile always means a score */
.tc .tc-g{display:grid;place-items:center;width:var(--tc-g);height:var(--tc-g);border-radius:9px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line);color:var(--blue2)}
.tc .tc-g svg{display:block;width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
.tc .tc-g .g-dot{fill:var(--sky);stroke:none}
.tc .tc-g .g-dash{stroke-width:2.4;stroke-dasharray:2.5 4.5;opacity:.6}
.tc .tc-o.is-low .tc-g{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)}
.tc .tc-o.is-low .tc-g .g-dot{fill:var(--data-dim)}
.tc .tc-x .tc-g{background:none;box-shadow:none;color:var(--blue)}
.tc .tc-x .tc-g svg{width:22px;height:22px;stroke-width:3}

/* the pips (the scorecard's .m), with the bar drawn between Emerging and Moderate */
.tc .tc-pips{display:inline-flex;align-items:center;gap:4px}
.tc .tc-pips i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.tc .tc-pips i.f{background:var(--data-dim)}
.tc .tc-pips.is-met i.f{background:var(--d2)}
.tc .tc-pips .tc-bar{width:2px;height:16px;margin:0 1px;border-radius:1px;background:var(--axis)}

/* the horizon: four stops on a line, this use case's in --blue2 (the roadmap view's dot) */
.tc .tc-rail{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(var(--line-2),var(--line-2)) center/100% 2px no-repeat}
.tc .tc-rail i{width:8px;height:8px;border-radius:50%;background:var(--data-dim);box-shadow:0 0 0 2px var(--surface)}
.tc .tc-rail i.on{width:10px;height:10px;background:var(--blue2)}

/* ---------- shelf bodies ---------- */
.tc .tc-b{padding:0 16px 14px calc(10px + var(--tc-g) + 12px)}
.tc .tc-b p{max-width:none;margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--body)}
.tc .tc-b .tc-q{margin:0 0 4px;font:600 var(--fs-xs)/1.4 var(--sans);color:var(--mut)}
/* the sources: ui.js proof(), the same on both pages (tool.css and story.css pad .cite-item differently) */
.tc .tc-b .cite-item{margin:0 0 10px;padding:4px 0 4px 12px;font-size:var(--fs-sm);line-height:1.55}
.tc .tc-b .cite-item:last-child{margin-bottom:0}
.tc .tc-hz{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;max-width:none;padding:0;margin:2px 0 12px}
.tc .tc-hz::before{content:"";position:absolute;left:5px;right:20%;top:5px;height:2px;background:var(--line-2)}
.tc .tc-hz li{position:relative;display:grid;align-content:start;gap:1px;margin:0;padding-right:6px;font-size:12px;line-height:1.3;color:var(--mut)}
.tc .tc-hz i{width:12px;height:12px;margin-bottom:5px;border-radius:50%;background:var(--data-dim);box-shadow:0 0 0 3px var(--surface)}
.tc .tc-hz b{font:600 12.5px/1.3 var(--sans);color:var(--body)}
.tc .tc-hz span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tc .tc-hz li.on i{background:var(--blue2)}
.tc .tc-hz li.on b{color:var(--blue)}
.tc .tc-hz li.on span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;color:var(--ink)}
@container tc (max-width:380px){
  .tc .tc-b{padding-left:12px}
  .tc .tc-w{min-width:0}
}
/* ---------- the evidence map's category card (.tm) ---------- */
/* no kicker above the title: the head keeps the Close button's height, so the problem text starts under it */
.tm .tc-head{min-height:38px}
/* the verdict: its map color and its word (what it means opens Why this verdict) */
.tm .tm-vi{width:22px;height:22px;border-radius:50%;background:var(--c,var(--d2));box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.tm .tc-vb{font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tm .tm-vl{font:600 12.5px/1.2 var(--sans);color:var(--mut)}
/* what is pushing it forward, what is holding it back: the evidence map's arrows (tool.css .wind) */
.tc .tm-w{display:grid;gap:8px;list-style:none;max-width:none;margin:0;padding:0}
.tc .tm-w li{position:relative;margin:0;padding-left:20px;font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.tc .tm-w li::before{position:absolute;left:0;top:0;font-weight:700;font-size:13px}
.tc .tm-w.up li::before{content:"\2191";color:var(--blue)}
.tc .tm-w.down li::before{content:"\2193";color:var(--mut)}
.tc .tc-b .tm-ud{margin-bottom:10px}
/* the use cases: a caption over their list */
.tc .tm-cap{max-width:none;margin:14px 2px 6px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tc .tm-cap+.tc-list{margin-top:0}
@media (prefers-reduced-motion:reduce){.tc *,.tc *::after{transition:none!important}}

/* ---------- the hosts ---------- */
/* beside the scorecard: sticky and held to one screen on both pages (the tool's .detail already is) */
.detail.tc-host{padding:20px}
@media (min-width:861px){
  /* no overscroll-behavior here: the wheel must pass to the page when the card has nothing (more) to scroll */
  .explore .detail.tc-host{position:sticky;top:calc(var(--hdr-h) + 16px);max-height:calc(100svh - var(--hdr-h) - 32px);overflow-y:auto}
}
/* a short laptop window (a 1366x768 screen leaves the page about 657px once the browser's bars are counted):
   with a mouse, the rows tighten to 34px and the panel takes up to 440px of width, so the problem text wraps
   onto fewer lines and the longest card still fits the panel with every shelf closed. Touch screens keep the
   44px rows. */
@media (max-height:740px) and (hover:hover) and (pointer:fine){
  .pane.has-detail:has(>.tc-host){grid-template-columns:minmax(0,1fr) clamp(380px,32vw,440px)}
  .explore:has(>.row>.tc-host){--det-w:clamp(380px,32vw,440px)}
  .detail.tc-host{padding:12px 18px}
  .tc-host .tc{--tc-g:28px;--tc-row:34px}
  .tc-host .tc .tc-s>summary{padding-block:3px}
  .tc-host .tc .tc-g{border-radius:8px}
  .tc-host .tc .tc-g svg{width:18px;height:18px}
  .tc-host .tc .tc-x .tc-g svg{width:20px;height:20px}
  .tc-host .tc .tc-lead{margin-top:6px;line-height:1.4}
  .tc-host .tc .tc-list{margin-top:10px}
  .tc-host .tc .tc-list+.tc-list{margin-top:8px}
  .tc-host .tc .tm-cap{margin:10px 2px 5px}
  .tc-host .tc .tc-verdict{padding-block:5px}
  .tc-host .tc .tc-note{margin-top:4px;padding-top:5px}
}
/* laptop windows under 900px tall, with a mouse: the rows tighten to 38px, so the category card (three scores, three
   guides and up to three use cases) and a use case card with a note fit the panel there too (34px under 740px) */
@media (max-height:899px) and (min-height:741px) and (hover:hover) and (pointer:fine){
  .tc-host .tc{--tc-row:38px}
  .tc-host .tc .tc-s>summary{padding-block:3px}
  .tc-host .tm .tm-cap{margin:10px 2px 5px}
}
/* one column: the card opens in the house sheet (problems.css .px-sheet) */
.tc-sheet{width:min(600px,calc(100vw - 32px));max-height:min(85vh,800px);margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--body);box-shadow:0 24px 60px rgb(15 23 42/.28)}
.tc-sheet::backdrop{background:rgb(15 23 42/.45)}
.tc-sheet-in{max-height:inherit;overflow:auto;padding:22px 24px 26px;overscroll-behavior:contain}
@media (max-width:640px){
  .tc-sheet{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .tc-sheet-in{padding:18px 16px calc(24px + env(safe-area-inset-bottom))}
}