/* Shared control primitives — the .chip / .btn language every tool speaks.
   Extracted 2026-07-06; the core rules below were byte-identical in eight places.
   Load AFTER tokens.css and BEFORE the tool's own styles so per-tool variants
   (.chip.on, .btn.primary, .btn.danger, …) keep winning by source order. */
/* screen-reader-only: visually hidden, still reachable by AT (aria-live regions,
   validation error text that doesn't need its own visible banner) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Swiss control language (Phase 1, 2026-07-30): square, 1px ink border, uppercase
   micro labels; hover inverts to ink. Per-tool variants (.chip.on, .btn.primary,
   .btn.danger) still win by source order until their Phase-3 sweeps. */
.chip{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border:1px solid var(--ink);border-radius:0;
  background:none;color:var(--ink);cursor:pointer;font-family:inherit}
.chip:hover{background:var(--ink);color:var(--bg)}
.btn{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--ink);border-radius:0;
  background:none;color:var(--ink);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--ink);color:var(--bg)}
/* The ONE brand-filled action per surface (Swiss 6b). White fails on the dark
   brand red, so the label rides --brand-on (#fff light / #121212 dark). */
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}

/* --- The segmented control (Swiss 6c, 2026-07-30) ---
   ONE pattern for every mode/view switch on the suite. Before 6c there were
   eight near-identical local copies (fermi .pagemode/.cfseg/.viewseg, gauge +
   why .viewtoggle, flow + merit-order .seg, bets + premortem .vtseg, the
   workspace .zoomctl) and every one of them filled its ACTIVE segment with
   --accent — the data hue leaking into page chrome, which the completeness
   audit called the loudest single "old design" signal. The active segment is
   now INK, the same inversion .btn:hover already performs.
   Put .segmented on the CONTAINER; the buttons keep whatever class their tool's
   JS and the browser suites select on. Active state is read from .on,
   aria-pressed="true" OR aria-selected="true", so radiogroup, tablist and
   pressed-button markup all light up from this one rule. */
.segmented{display:inline-flex;border:1px solid var(--ink);border-radius:0;overflow:hidden}
.segmented button{font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 14px;border:none;border-radius:0;
  background:none;color:var(--muted);cursor:pointer}
.segmented button + button{border-left:1px solid var(--ink)}
.segmented button:hover{color:var(--ink)}
.segmented button.on,
.segmented button[aria-pressed="true"],
.segmented button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
/* overflow:hidden on the group clips an outset ring — inset it instead */
.segmented button:focus-visible{outline:2px solid var(--data);outline-offset:-3px}
/* A phone-sized window can still report a fine pointer (desktop responsive
   testing, an external pointing device, and a few embedded webviews). Treat
   either condition as touch-scale territory: controls remain compact on the
   desktop, but never become precision targets once the layout has crossed its
   narrow breakpoint. */
@media (max-width: 520px), (pointer: coarse){
  .segmented button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion: no-preference){
  .segmented button{transition:color .15s,background-color .15s}
}

/* Author display rules (flex/grid) must never defeat the hidden attribute —
   the trap that made gauge's export row visible pre-reveal (2026-07-05). */
[hidden]{display:none!important}

/* fingers get full-size controls */
@media (max-width: 520px), (pointer: coarse){
  .chip,.btn{min-height:44px;display:inline-flex;align-items:center}
  /* iOS Safari zooms the page whenever a focused field is under 16px. Hold every
     editable field at the threshold so tapping a value never triggers a zoom-and-pinch.
     !important because per-tool inline styles (fermi/rank size fields by id) otherwise
     win by source order — this is one deliberate cross-cutting usability floor.
     Sliders (type=range) are untouched; a field already ≥16px just settles to 16. */
  input[type="text"],input[type="number"],input:not([type]),textarea,.cm-content{font-size:16px!important}
}
@media (prefers-reduced-motion: no-preference){
  .chip,.btn{transition:border-color .15s,color .15s,background-color .15s}
}

/* Home crumb: every tool page links back to the suite, top-left above the h1.
   Big enough for thumbs on coarse pointers. */
.crumb{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  margin-bottom:10px;border-radius:0}
.crumb:hover{color:var(--ink)}
@media (pointer: coarse){
  .crumb{padding:10px 12px;margin:-10px 0 2px -12px}
}
/* chip-row lead label, warning list, and saved-item chips — extracted
   2026-07-13 from per-tool copies (byte-identical in 6-14 places; .savedchip is
   the CSS companion to the already-shared saved-items.js). NB the .chips row
   container stays per-tool: it has genuine margin variants a shared rule would
   cascade-override. */
.chips .lead{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
/* on-ramp chip: opens the row, accented so it reads as the way in (why: app-common.js) */
.chip.start{border-color:var(--accent);color:var(--accent-ink)}
.chip.start:hover{background:var(--accent);color:var(--bg)}
#warns{margin:8px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--err)}
.savedchip{display:inline-flex;align-items:stretch;border:1px solid var(--border);
  border-radius:0;overflow:hidden}
.savedchip button{border:none;background:none;color:var(--ink);cursor:pointer;
  font-family:inherit;font-size:12.5px;padding:4px 6px 4px 12px}
.savedchip button:hover{color:var(--accent-ink)}
.savedchip .chipdel{padding:4px 10px 4px 4px;color:var(--muted)}
.savedchip .chipdel:hover{color:var(--err)}
@media (max-width: 520px), (pointer: coarse){
  .savedchip button{min-height:44px;display:inline-flex;align-items:center}
}