/* Shared page scaffold — the tool-agnostic page chrome every tool inherits.
   Linked BEFORE each tool's own style.css, so a tool can still override any
   rule here. Extracted 2026-07-13 from the per-tool copies (they were
   byte-identical bar imperceptible drift in .tagline/.actions, converged here).
   Tokens come from tokens.css; this file assumes it is already linked. */

*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  padding:40px 0 40px;
}
h1{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,sans-serif;font-size:34px;
  font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance}
/* Swiss micro-labels — the uppercase wayfinding voice (Phase 1, 2026-07-30) */
.micro{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.micro-ink{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700}
.tagline{color:var(--muted);margin:6px 0 0;font-size:15.5px;max-width:62ch}

/* --- Swiss 6b: the shared header / verdict anatomy (2026-07-30) ---
   kicker above the h1 · metrics row on a 2px ink rule opening the artefact ·
   one verdict block with exactly one brand-coloured key figure. Values are
   transcribed from the Claude Design pattern sheet (file 60). */
.kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--muted);line-height:1.7;margin:0 0 8px}
.kicker .num{color:var(--brand-text);font-weight:700}
.metrics{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;
  margin:26px 0 0;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.metrics .model{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--ink)}
.metrics .counts{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--muted)}
.verdict-block{margin:40px 0 32px}
.verdict-block .vkick{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--muted);margin:0 0 10px}
.verdict-block .vline{font-size:24px;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;max-width:60ch;margin:0;color:var(--ink);text-wrap:pretty}
.verdict-block .fig{color:var(--brand-text)}
/* Below the narrow bucket the metrics stack and the verdict keeps its own,
   smaller display size — it never degrades to body copy (pattern sheet, E). */
@media (max-width:520px){
  .metrics{display:block;margin-top:18px}
  .metrics .counts{display:block;margin-top:4px}
  .verdict-block{margin:28px 0 24px}
  .verdict-block .vline{font-size:17px;letter-spacing:-.01em;line-height:1.35;max-width:none}
}
.actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
/* Secondary actions stay close to the artefact without making the toolbar read
   like an undifferentiated button bank. Native details/summary supplies the
   disclosure state and keyboard semantics; the panel is only presentation. */
.action-disclosure{position:relative}
.action-disclosure > summary{list-style:none;display:inline-flex;align-items:center;gap:8px}
.action-disclosure > summary::-webkit-details-marker{display:none}
.action-disclosure > summary::after{content:"+";font-size:13px;line-height:1;letter-spacing:0}
.action-disclosure[open] > summary::after{content:"\2212"}
.action-disclosure > summary:focus-visible{outline:2px solid var(--data);outline-offset:2px}
.action-menu{position:absolute;z-index:40;left:0;top:calc(100% + 6px);min-width:220px;
  padding:5px;background:var(--card);border:1px solid var(--ink);box-shadow:var(--shadow)}
.action-disclosure.history .action-menu{left:auto;right:0;min-width:250px}
.action-menu .btn{display:flex;width:100%;justify-content:flex-start;text-align:left;
  border-color:transparent;padding:9px 11px}
.action-menu .btn:hover{border-color:var(--ink)}
.action-menu .ctl{width:100%;min-height:36px;margin:2px 0;padding:7px 9px;
  border:1px solid var(--border);border-radius:0;background:var(--card);color:var(--ink);
  font:inherit;font-size:12px}
.action-menu .ctl:focus-visible{outline:2px solid var(--data);outline-offset:1px}
.placeholder{color:var(--muted);font-size:14.5px;margin:0;padding:30px 10px;text-align:center}
button:focus-visible{outline:2px solid var(--data);outline-offset:2px}
footer{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.6}
footer a{color:var(--muted)}
footer a:hover{color:var(--brand-text)}


/* Copy-the-verdict chip (2026-08-02): muted ghost, sibling of the block; red
   stays the figure's. Hidden with its block; always-visible ≥44px on coarse. */
.vcopy{font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 0;
  padding: 4px 8px; margin: 2px 0 0; cursor: pointer; min-height: 28px}
.vcopy:hover, .vcopy:focus-visible{border-color: var(--border); color: var(--ink); outline: none}
.verdict-block[hidden] + .vcopy{display: none}
@media (max-width: 520px), (pointer: coarse){ .vcopy{min-height: 44px; padding: 10px 12px} }
@media (max-width: 520px), (pointer: coarse){
  .action-disclosure > summary{min-height:44px}
  .action-menu .btn,.action-menu .ctl{min-height:44px}
}
@media (pointer: fine){
  .vcopy{opacity: 0}
  .vcopy:focus-visible, .verdict-block:hover + .vcopy, .vcopy:hover{opacity: 1}
}