/* instrument.css — the analog-instrument theme, scoped to the free web tools.
 *
 * Loaded AFTER v8-theme.css on tool pages only. It redefines that file's tokens
 * rather than editing it, because v8-theme.css is shared with ~72 pages including
 * the overlay — retheming there would repaint windows that sit over a running game.
 * Remove the one <link> line from a page to revert it completely.
 *
 * ── SEMANTIC MAPPING ──────────────────────────────────────────────────────
 * The deck pages use a single accent because they are indexes. Data tools cannot:
 * they encode meaning in colour (friendly vs threat, gain vs loss). Collapsing
 * three hues into one would delete that meaning. So the three brand slots are
 * remapped onto three instrument colours that stay distinguishable:
 *
 *   cyan   (info / primary)  → signal orange   #FF8A3D
 *   amber  (action / warning)→ brass           #E8C06A
 *   magenta(threat / hostile)→ cold steel      #7E9BB5   (cold reads hostile on a panel)
 */
:root{
  /* primary / info */
  --cy:#FF8A3D;
  --cy-b:#FFC08A;
  --cy-d:rgba(255,138,61,.55);

  /* action / warning */
  --am:#E8C06A;
  --am-b:#F3D79B;

  /* status colours left alone — they are not brand, and remapping them would
     break the one place colour genuinely means good/bad. */

  /* grounds: warm graphite instead of cold blue-steel */
  --steel-1:#232019;
  --steel-2:#1B1814;
  --steel-3:#100F0C;
  --bg:#0D0C09;
  --bg-elev-1:rgba(35,32,25,.62);
  --bg-elev-2:rgba(42,38,32,.55);
  --bg-soft:rgba(255,138,61,.04);

  /* rules */
  --border:rgba(237,231,217,.07);
  --border-strong:rgba(237,231,217,.13);
  --border-cyan:rgba(255,138,61,.20);

  /* type: bone rather than blue-white */
  --txt:rgba(237,231,217,.95);
  --txt-d:rgba(237,231,217,.70);
  --txt-dim:rgba(237,231,217,.46);
  --txt-faint:rgba(237,231,217,.28);

  /* new tokens the theme introduces */
  --sig:#FF8A3D;
  --sig-line:rgba(255,138,61,.30);
  --steel:#7E9BB5;
  --plate-hi:rgba(237,231,217,.07);
  --plate-lo:rgba(0,0,0,.55);
}

/* Panel grain. Fixed overlay, ignores pointer events, sits under any modal
   (z-index deliberately low). This is what makes the flat fills read as milled
   metal rather than CSS rectangles. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:overlay;
}
/* The overlay embed strips chrome and sits over a game — no grain there. */
body.embedded::after{display:none;}

@media (prefers-reduced-motion:reduce){
  body::after{opacity:.3;}
}

/* ══ TIER 1 — cross-cutting fixes applied to every tool page ═══════════
   These live here rather than in 33 separate files: this stylesheet is
   already linked on all of them, so the fixes land everywhere at once and
   revert everywhere at once. None of them change layout.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Visible keyboard focus. 32 of 33 tool pages had no focus style at all,
      so keyboard and screen-reader users had no idea where they were. The
      :where() wrapper keeps specificity at zero, so any page that DOES define
      its own focus style still wins. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--sig, #FF8A3D);
  outline-offset:2px;
  border-radius:2px;
}
/* Never leave a focused control invisible against its own background. */
:where(a, button, [tabindex]):focus-visible{ box-shadow:0 0 0 4px rgba(255,138,61,.18); }

/* 2. Lining figures for data. These are measurement tools — DPS, prices,
      yields, timers — and proportional digits change width as values update,
      so numbers visibly jitter in a column. Scoped to tabular contexts and
      the numeric class names these pages actually use. */
:where(table, td, th,
       .stat, .stat-row, .stat-value, .val, .value, .metric, .num,
       .v, .n, .px, .price, .total, .count, output, time){
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 3. Wide tables scroll inside themselves, never the whole page.
      max-width alone is safe here — it does not alter table layout the way
      display:block would. */
:where(table){ max-width:100%; }
:where(.table-scroll){ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

/* 4. Reduced motion, as a blanket. Nine tool pages honoured no motion
      preference at all. Site rule is that every animated effect respects it. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Visually-hidden, still announced by screen readers and indexed by search.
   Used for the page <h1> on tool layouts that have no visual slot for one —
   the heading is real markup, it simply doesn't occupy space. */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}