/* ============================================================
   ARSA Basic Safety Guard - "Edge Instrument" design system
   Dark graphite + maroon brand + machine-cyan. Self-hosted,
   offline-only. Tokens + signature classes live here; Tailwind
   (vendored JIT) handles layout utilities + color tokens.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/SpaceGrotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/SpaceGrotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/SpaceGrotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/SpaceGrotesk-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexMono-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexSans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexSans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexSans-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --bg:#0A0D12; --panel:#10141B; --raised:#151A23;
  --line:#1E2530; --line2:#2B3543;
  --ink:#E8ECF2; --muted:#868FA0; --faint:#525B6B;
  --maroon:#9A2233; --maroonb:#C42C42; --maroond:#6F1622;
  --scan:#38E0D6;
  --ok:#1FBF6B; --warn:#F2A516; --danger:#FF3D45;
  --font-display:'Space Grotesk','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-sans:'IBM Plex Sans','Segoe UI',sans-serif;
}

/* ---------- Base ---------- */
html, body { background:var(--bg); }
body { font-family:var(--font-sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
.font-display { font-family:var(--font-display); }
.font-mono { font-family:var(--font-mono); }
.font-sans { font-family:var(--font-sans); }

/* faint blueprint grid - technical atmosphere, near-invisible */
body.ei-grid::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 85%);
}

::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#3a3f4b; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--scan); outline-offset:2px;
}

/* ---------- Signature: eyebrow / panel ---------- */
.eyebrow {
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.14em; font-size:13.5px; color:var(--muted);
}
.panel { background:var(--panel); border:1px solid var(--line); }
.raised { background:var(--raised); }

/* ---------- Signature: detection viewfinder corner brackets ---------- */
.vf { position:relative; }
.vf > .c { position:absolute; width:13px; height:13px; border:1.5px solid var(--vc,var(--line2)); z-index:2; }
.vf > .tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.vf > .tr { top:-1px; right:-1px; border-left:0; border-bottom:0; }
.vf > .bl { bottom:-1px; left:-1px; border-right:0; border-top:0; }
.vf > .br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------- Sidebar nav ---------- */
.nav-item { position:relative; }
.nav-item.active { background:linear-gradient(90deg,rgba(154,34,51,.9),rgba(154,34,51,.18)); color:#fff; }
.nav-item.active .ic { color:#fff; }
.nav-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--maroonb); }

/* ---------- Motion ---------- */
.pulse { animation:ei-pulse 2s infinite; }
@keyframes ei-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.scanline {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(56,224,214,.66),transparent);
  animation:ei-sweep 6s linear infinite; opacity:.5; pointer-events:none;
}
@keyframes ei-sweep { 0%{top:0} 100%{top:100%} }
@media (prefers-reduced-motion:reduce) {
  .scanline, .pulse { animation:none; }
}

/* ---------- Instrument gauge ---------- */
.gauge { display:flex; gap:3px; height:1.75rem; }
.gauge .seg { flex:1; height:100%; border-radius:1px; background:var(--line); }

/* ---------- AI threshold cards (tc-*) ---------- */
.tc-card { display:flex; flex-direction:column; gap:10px; }
.tc-row { display:flex; align-items:center; }
.tc-row-sb { display:flex; align-items:center; justify-content:space-between; }
.tc-badge { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line2); }
.tc-tips { display:flex; flex-direction:column; gap:3px; }
.tc-slider-row { display:flex; align-items:center; gap:10px; }
.tc-slider { flex:1; accent-color:var(--maroonb); height:4px; }
.tc-section-hdr { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tc-section-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line2); }
.tc-section-rule { flex:1; height:1px; background:var(--line); }
.tc-state-msg { font-family:var(--font-mono); font-size:14px; color:var(--faint); text-align:center; padding:40px 0; }
.tc-grid-1 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.tc-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.tc-grid-n { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }

/* ---------- Status helpers ---------- */
.text-ok{color:var(--ok)} .text-warn{color:var(--warn)} .text-danger{color:var(--danger)}
.text-scan{color:var(--scan)} .text-maroonb{color:var(--maroonb)}
.text-ink{color:var(--ink)} .text-muted{color:var(--muted)} .text-faint{color:var(--faint)}