/* CF DEFCON Mission Control — dark ops/HUD aesthetic borrowed from
   circuitforge-orch's coordinator dashboard. Palette + accent roles are
   the exact values given in the theme-packs plan's Task 1 brief;
   --text-2 and --danger-dark aren't in that source list, so they're
   picked here for WCAG-rigor luminance fit with the rest of the palette
   (verified with the standard relative-luminance contrast formula:
   --text-2 >=7.7:1 against all three grounds, --danger vs --danger-dark
   is 4.96:1, clearing the >=4.5:1 TOKEN CONTRACT bar in theme.css).
   See: circuitforge-plans/vaportrade-clone/superpowers/specs/
   2026-08-13-ui-redesign-design.md §3 "Theme-pack roadmap". */
/* Eternal Mono + Workbench (2026-09-02, swapped in from JetBrains Mono via
   the font-gallery-generator drag-and-drop tool's exported picks --
   confirmed deliberate). Both SIL OFL, self-hosted under
   static/fonts/eternal-mono/ and static/fonts/workbench/. JetBrains Mono
   stays self-hosted (tron-neon.css still uses it for --font-mono there). */
@font-face{
  font-family:"Eternal Mono";
  src:url("/vaportrade/static/fonts/eternal-mono/EternalMono-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* Quaxiculo (2026-09-02, --font-mono, superseding Workbench via a later
   drag-and-drop export round): a real dot-matrix-printer-style face
   (9-pin nine-dot-high glyph matrix), SIL OFL, self-hosted under
   static/fonts/quaxiculo/. Workbench stays self-hosted, currently unused
   by any pack. --font-size-display/--font-size-mono also set this round
   (new tokens, see theme.css's h1/body rules) -- smaller than the app-
   wide 2rem/15px default, since Quaxiculo/Eternal Mono both read dense
   at large sizes. */
@font-face{
  font-family:"Quaxiculo";
  src:url("/vaportrade/static/fonts/quaxiculo/Quaxiculo-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* Sixtyfour (2026-09-02, --font-h2, the new 3rd font role): SIL OFL,
   self-hosted under static/fonts/sixtyfour/. */
@font-face{
  font-family:"Sixtyfour";
  src:url("/vaportrade/static/fonts/sixtyfour/Sixtyfour-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
[data-theme="cf-defcon"]{
  --bg:#080d12; --bg2:#0f1620; --bg3:#141c28; --border:#1e2d3d;
  --text:#cdd9e5; --text-2:#9fb0c0; --muted:#7a8fa0;
  --accent-1:#22d3ee; --accent-2:#4ade80; --accent-3:#fbbf24;
  --success:#4ade80; --danger:#f85149; --danger-dark:#3d0d0e; --warning:#fbbf24;
  --font-display:"Eternal Mono","Fira Code",ui-monospace,monospace;
  --font-mono:"Quaxiculo","Fira Code",ui-monospace,monospace;
  --font-h2:"Sixtyfour",monospace;
  --font-size-display:1.2rem; --font-size-mono:.8rem; --font-size-h2:1rem;
}
/* 28px cyan grid-line overlay — mission-control HUD ground, same
   fixed-full-viewport ::before trick neon-casino.css uses for its
   ambient glow, just a grid instead of a radial glow. */
[data-theme="cf-defcon"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(34,211,238,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.06) 1px,transparent 1px);
  background-size:28px 28px,28px 28px;
}
[data-theme="cf-defcon"] h1 .grad{
  background:linear-gradient(90deg,#22d3ee,#4ade80,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 2026-08-28 button glow-up: removed this pack's own flat gradient fill
   (and its dark-navy text color, tuned for that light fill and now
   illegible against the new fixed near-black button fill) -- the base
   button{} rule (theme.css) now gives every pack an animated gradient-
   border CTA via --accent-1/2/3, already this pack's own cyan/green/
   amber tactical trio, no per-pack override needed. */
/* Corner-bracket panel framing — 8 tiny background-image gradients draw an
   L-shaped bracket at each of the 4 corners, so .card doesn't need extra
   markup or a pseudo-element (::before is free for other packs' own
   framing choices on the same selector if they ever need it). */
[data-theme="cf-defcon"] .card,
[data-theme="cf-defcon"] .tile{
  position:relative;
  background-image:
    linear-gradient(var(--accent-1),var(--accent-1)),linear-gradient(var(--accent-1),var(--accent-1)),
    linear-gradient(var(--accent-1),var(--accent-1)),linear-gradient(var(--accent-1),var(--accent-1)),
    linear-gradient(var(--accent-1),var(--accent-1)),linear-gradient(var(--accent-1),var(--accent-1)),
    linear-gradient(var(--accent-1),var(--accent-1)),linear-gradient(var(--accent-1),var(--accent-1));
  background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right;
  background-size:12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px;
  background-repeat:no-repeat;
}
/* ▸ LABEL tactical section dividers — a ::before prefix + uppercase/
   letter-spacing on every h2, so existing emoji+text h2 markup ("📊
   status...") doesn't need to change, it just gets the HUD divider
   treatment applied on top. */
[data-theme="cf-defcon"] h2{
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--border);padding-bottom:8px;
}
[data-theme="cf-defcon"] h2::before{content:"▸";color:var(--accent-1)}
/* Selected-chip override — theme.css's .chip.on ships a Neon-Casino-specific
   hardcoded violet that doesn't belong on this HUD palette. Same override
   pattern as lisa-frank.css/8bit.css/etc: swap in this pack's own
   --accent-1 (cyan) instead of the leaked literal. */
[data-theme="cf-defcon"] .chip.on{
  background:rgba(34,211,238,.18);border-color:var(--accent-1);color:var(--text);
}
/* Cyan hover-scanline on table rows. */
[data-theme="cf-defcon"] tbody tr:hover td{
  background:rgba(34,211,238,.08);
  box-shadow:inset 0 1px 0 rgba(34,211,238,.3),inset 0 -1px 0 rgba(34,211,238,.3);
}
/* Status-dot pulse — ported verbatim from circuitforge-orch
   (feature/defcon-sysmetrics, commit 9fab883, dashboard.html's
   .live-dot / @keyframes pulse-dot) and applied to this app's existing
   .badge.live (theme.css) via a ::before dot, so no markup changes are
   needed to pick it up. */
[data-theme="cf-defcon"] .badge.live{position:relative;padding-left:16px}
[data-theme="cf-defcon"] .badge.live::before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--success);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  50%{opacity:.7;box-shadow:0 0 0 4px rgba(74,222,128,0)}
}
/* "Armed" control ring pulse — ported verbatim from circuitforge-orch
   (feature/defcon-sysmetrics, commit e927dec ancestor a530fe4,
   dashboard.html's .flush-arm.armed / @keyframes flush-arm-pulse) and
   swapped onto this app's button.confirm-armed (static/js/confirm-button.js)
   in place of theme.css's generic confirm-arm-pulse, for pack-specific
   flavor. Same red tint, same 1.5s timing. */
[data-theme="cf-defcon"] button.confirm-armed{
  animation:flush-arm-pulse 1.5s ease-in-out infinite;
}
@keyframes flush-arm-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,0)}
  50%{box-shadow:0 0 0 3px rgba(248,81,73,.2)}
}
@media (prefers-reduced-motion: reduce){
  [data-theme="cf-defcon"] .badge.live::before{animation:none;box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  [data-theme="cf-defcon"] button.confirm-armed{animation:none;box-shadow:0 0 0 3px rgba(248,81,73,.2)}
}
:root:is([data-motion="reduced"],[data-motion="off"]) [data-theme="cf-defcon"] .badge.live::before{animation:none;box-shadow:0 0 0 0 rgba(74,222,128,.5)}
:root:is([data-motion="reduced"],[data-motion="off"]) [data-theme="cf-defcon"] button.confirm-armed{animation:none;box-shadow:0 0 0 3px rgba(248,81,73,.2)}