/* ══════════════════════════════════════════════════════════════════════════
   watchgrid-command-grid.css  ·  WatchGrid tenant theme  ·  "COMMAND GRID"
   ──────────────────────────────────────────────────────────────────────────
   A premium re-skin layer for the NFEMS / WatchGrid app (nfems.css v3).
   It uses the app's OWN token system (the "token-driven for WatchGrid tenant
   re-skins" hook) — so it re-styles every screen with ZERO markup changes.

   HOW TO USE (production):
     Load this file AFTER nfems.css:
       <link rel="stylesheet" href="/css/nfems.css">
       <link rel="stylesheet" href="/css/watchgrid-command-grid.css">
     …or paste the two token blocks below into nfems.css's tenant token slot.

   WHAT IT CHANGES:
     • Warmer graphite surfaces (instrument, not flat black)
     • Signal red = apparatus red  #d7352a  (the app's canonical red — kept)
     • Refined command amber + ready green
     • Adds a premium BONE / platinum accent (live · register marks)
     • Tighter, warmer elevation + crisper radii
     • Keeps your chevron + HUD identity intact (they re-tint automatically)

   NOTE — the red: this build uses the app's canonical APPARATUS RED #d7352a
   everywhere (app, kiosk, marketing, logo). If you ever want the brighter pin
   red instead, set --red:#e30810 in the two token blocks below.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── COMMAND GRID · Night Watch (default / dark) ───────────────── */
:root{
  /* surfaces — warm graphite */
  --bg:#0a0a0c; --bg-2:#0d0e10; --panel:#131417; --panel-2:#191b1f;
  --line:rgba(233,227,214,.065); --line-2:rgba(233,227,214,.13);
  --ink:#f4f3f0; --ink-2:#9da2a9; --ink-3:#666b72;

  /* signal system */
  --red:#d7352a; --red-deep:#8f1e16; --amber:#e7a63c; --green:#4bae7d;
  --blue:#3b82c4; --cyan:#56c5d4;
  --red-rgb:215,53,42; --amber-rgb:231,166,60; --green-rgb:75,174,125; --blue-rgb:59,130,196;
  --flash:rgba(231,166,60,.18);
  --avail:#4bae7d; --oncall:#d7352a; --enroute:#e7a63c; --oos:#6b727b;
  --red-t:#ff7a70; --amber-t:#e7a63c; --green-t:#4bae7d; --blue-t:#7fb6d8; --oos-t:#6b727b;

  /* premium bone / platinum accent (NEW) */
  --bone:#e9e3d6; --bone-dim:#b7b2a6; --steel:#8b929b; --bone-rgb:233,227,214;

  /* theme plumbing — warmed to bone */
  --hov:rgba(233,227,214,.05);
  --sheen:linear-gradient(180deg,rgba(233,227,214,.045),rgba(233,227,214,0) 46%);
  --glass:linear-gradient(180deg,rgba(19,20,23,.92),rgba(10,10,12,.96));
  --side-bg:linear-gradient(180deg,#0e0f12,#0a0a0c);
  --input-bg:#0a0a0c;
  --scroll:#242429; --scroll-h:#33363c;
  --h1a:#ffffff; --h1b:#c7c7c2;

  /* engineered grid + grain + disciplined glows */
  --bg-tex:
    radial-gradient(900px 460px at 8% -6%,rgba(215,53,42,.10),transparent 55%),
    radial-gradient(700px 420px at 96% -10%,rgba(231,166,60,.045),transparent 55%),
    linear-gradient(90deg,rgba(233,227,214,.02) 1px,transparent 1px),
    linear-gradient(rgba(233,227,214,.016) 1px,transparent 1px);

  /* elevation — tighter, warmer falloff */
  --shadow:0 18px 44px -20px rgba(0,0,0,.80);
  --shadow-lift:0 30px 70px -28px rgba(0,0,0,.90);

  /* crisper instrument radii */
  --r:13px; --r-sm:8px;
}

/* ── COMMAND GRID · Day Shift (light / civic-boardroom) ────────── */
html[data-theme="light"]{
  --bg:#fbfaf7; --bg-2:#f2f0ea; --panel:#ffffff; --panel-2:#f5f3ee;
  --line:rgba(20,18,12,.09); --line-2:rgba(20,18,12,.16);
  --ink:#16191d; --ink-2:#4a5058; --ink-3:#7a7f86;

  --red:#b0271d; --red-deep:#7a1810; --amber:#b97e14; --green:#1d9e5c;
  --blue:#2b7fa8; --cyan:#1f8fa0;
  --red-rgb:176,39,29; --amber-rgb:185,126,20; --green-rgb:29,158,92; --blue-rgb:43,127,168;
  --flash:rgba(185,126,20,.16);
  --avail:#1d9e5c; --oncall:#b0271d; --enroute:#b97e14; --oos:#8a949c;
  --red-t:#9a2117; --amber-t:#8f6110; --green-t:#157347; --blue-t:#1f6d94; --oos-t:#6d777d;

  --bone:#8f897c; --bone-dim:#a8a294; --steel:#8b929b; --bone-rgb:143,137,124;

  --hov:rgba(20,18,12,.05);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 46%);
  --glass:linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,243,238,.96));
  --side-bg:linear-gradient(180deg,#f7f5f0,#fbfaf7);
  --input-bg:#ffffff;
  --scroll:#cfcbc0; --scroll-h:#b3aea2;
  --h1a:#1b1f24; --h1b:#4d565e;

  --bg-tex:
    radial-gradient(900px 460px at 8% -6%,rgba(176,39,29,.055),transparent 55%),
    radial-gradient(700px 420px at 96% -10%,rgba(185,126,20,.045),transparent 55%),
    linear-gradient(90deg,rgba(20,18,12,.03) 1px,transparent 1px),
    linear-gradient(rgba(20,18,12,.022) 1px,transparent 1px);

  --shadow:0 14px 34px -18px rgba(24,24,20,.20);
  --shadow-lift:0 24px 54px -22px rgba(24,24,20,.28);
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REFINEMENTS  (additive, non-breaking — new hooks only)
   ══════════════════════════════════════════════════════════════════════════ */

/* Material grain overlay on the app body (instrument finish) */
#app::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.02;
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{position:relative}
#app>*{position:relative;z-index:1}

/* Refined focus ring — apparatus red signal */
:focus-visible{outline-color:rgba(215,53,42,.7)!important}

/* Card gets an inner top-light for machined depth */
.card{box-shadow:var(--shadow),inset 0 1px 0 rgba(233,227,214,.05)}

/* BONE accent variants (opt-in) ------------------------------------------- */
.led.bone{background:var(--bone);box-shadow:0 0 8px rgba(var(--bone-rgb),.6)}
.eyebrow.bone{color:var(--bone-dim)}
.hud.bone::before{border-top-color:var(--bone);border-left-color:var(--bone)}
.hud.bone::after{border-bottom-color:var(--bone);border-right-color:var(--bone)}

/* LIVE pill — the premium bone/streaming state (opt-in: <span class="pill live">) */
.pill.live{
  background:rgba(var(--bone-rgb),.06); color:var(--bone-dim);
  border-color:rgba(var(--bone-rgb),.28);
}

/* Register corner-ticks on any surface (opt-in: class="ticked") ----------- */
.ticked{position:relative}
.ticked::before,.ticked::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  opacity:.7; border-color:var(--steel);
}
.ticked::before{top:6px;left:6px;border-top:1px solid;border-left:1px solid}
.ticked::after{bottom:6px;right:6px;border-bottom:1px solid;border-right:1px solid}

/* Instrument masthead helper (opt-in thin mono strip above topbar) -------- */
.instrument-bar{
  height:28px; display:flex; align-items:center; background:var(--bg-2);
  border-bottom:1px solid var(--line); font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; color:var(--ink-3);
}
.instrument-bar .seg{padding:0 14px; height:100%; display:flex; align-items:center; gap:7px; border-right:1px solid var(--line)}
.instrument-bar .seg b{color:var(--bone-dim); font-weight:500}
.instrument-bar .seg .dot{width:6px; height:6px; border-radius:50%; background:var(--bone)}
.instrument-bar .seg.crit{margin-left:auto; border-right:0; border-left:1px solid var(--line); color:var(--red-t)}
.instrument-bar .seg.crit .dot{background:var(--red)}

/* Page-title numerals lean a touch more premium */
.page-h h1{letter-spacing:.01em}

/* ══════════════════════════════════════════════════════════════════════════
   KIOSK / COMMAND-WALL  (site/kiosk.html)
   The kiosk reads nfems.css tokens, so it re-skins with the blocks above.
   These rules align its few HARDCODED reds (rgba(229,57,47,…) ≈ #e5392f) to the
   canonical apparatus red #d7352a so the whole wall display is consistent.
   ══════════════════════════════════════════════════════════════════════════ */
.kiosk-page,.k-topbar{background:#060708}
/* hardcoded #e5392f → apparatus red, at the exact alphas the kiosk uses */
.rk-capt{background:rgba(215,53,42,.16)!important;color:var(--red-t)!important;border-color:rgba(215,53,42,.35)!important}
.inc-badge.active{background:rgba(215,53,42,.15)!important;color:var(--red-t)!important;border-color:rgba(215,53,42,.35)!important}
.ir-u.oncall{border-color:rgba(215,53,42,.5)!important;background:rgba(215,53,42,.12)!important}
.ub-row.oncall{background:rgba(215,53,42,.05)!important}
.ub-row.sec_oncall{background:rgba(215,53,42,.03)!important}
.lpin-dot{box-shadow:0 0 0 7px rgba(215,53,42,.24),0 8px 26px rgba(0,0,0,.6)!important}
.ut.oncall .ut-led{box-shadow:0 0 12px var(--red),0 0 0 3px rgba(215,53,42,.24)!important}
/* the command-wall keeps a bold bottom-rule; align it to the signal red */
.k-topbar{border-bottom-color:var(--red)}