/* ============================================================================
   EXCELSIOR FLEET THEME
   Reusable foundation extracted from the Excelsior Fleet web consoles
   (cerbo / pepwave / easytouch / orbital / beacon panels + Hughes Bridge portal).

   Dark, techy, terminal/CRT-console aesthetic. Self-contained: no external
   fonts, no CDN, system monospace fallbacks only.

   Structure:
     1. Design tokens (:root custom properties)  -- the core Excelsior palette
     2. Base / background (body + CRT overlay layers)
     3. Layout helpers (.wrap, .grid)
     4. Header / banner
     5. Panel / card
     6. Headings & text utilities
     7. Nav / tabs / chips
     8. Buttons
     9. Status pills / tags / LEDs
    10. Gauge bars
    11. Footer
    12. Motion / reduced-motion
   ============================================================================ */

/* ---- 1. DESIGN TOKENS -----------------------------------------------------
   These hex values are the shared "core" palette, identical across every
   fleet console. Change them here to re-tune the whole site. */
:root{
  /* backgrounds */
  --bg:#03060d;                    /* deepest background */
  --bg2:#050b16;                   /* mid background (gradient stop) */
  --bg-glow:#0a1830;               /* top-of-sky gradient highlight */
  --panel:rgba(8,18,30,.62);       /* translucent surface / panel fill */

  /* accents */
  --cyan:#39e0ff;                  /* PRIMARY accent: active, focus, links, IDs */
  --amber:#ffb454;                 /* SECONDARY accent + warning */
  --green:#38ff9d;                 /* success / online / nominal */
  --red:#ff5069;                   /* danger / offline / critical (reserved) */
  --violet:#9d7bff;                /* tertiary accent / extra series */
  --blue:#5aa9ff;                  /* optional 2nd-tier accent (cool/info) */

  /* text */
  --ink:#cfe9f5;                   /* body text */
  --ink-bright:#eafcff;            /* headings, big numbers */
  --ink-soft:#dcf3fb;              /* secondary values / names */
  --dim:#4d7288;                   /* muted labels, captions, hairline text */

  /* lines & structure (note: cyan-tinted, never neutral grey) */
  --line:rgba(57,224,255,.22);     /* borders / hairlines */
  --grid:rgba(57,224,255,.05);     /* internal panel scan-grid */

  /* effects */
  --glow:0 0 8px currentColor;     /* generic self-color glow */
  --radius:4px;                    /* panels / header */
  --radius-sm:3px;                 /* chips / pills / inputs */
  --radius-xs:2px;                 /* gauges */

  /* one typeface for the whole UI: system monospace, no web font needed */
  --mono:'SFMono-Regular',ui-monospace,'Roboto Mono','DejaVu Sans Mono',Consolas,monospace;
}

/* ---- 2. BASE / BACKGROUND -------------------------------------------------
   Fixed radial "sky" gradient + monospace body. Drop the .fx overlay divs
   into the page (see markup note at the bottom) for the CRT treatment. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%,
             var(--bg-glow) 0%, var(--bg2) 45%, var(--bg) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-shadow:var(--glow)}

/* CRT overlay layers -- add <div class="fx vig"></div> etc. as fixed siblings.
   All are non-interactive and sit above content but below modals. */
.fx{position:fixed;inset:0;z-index:2;pointer-events:none}
.fx.scan{background:repeating-linear-gradient(0deg,
         rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);
         mix-blend-mode:multiply;opacity:.5}
.fx.vig{background:radial-gradient(120% 100% at 50% 45%,
         transparent 55%,rgba(0,0,0,.55) 100%)}
.fx.flick{background:rgba(57,224,255,.02);animation:flick 7s steps(60) infinite}
@keyframes flick{0%,96%,100%{opacity:.5}97%{opacity:.1}98%{opacity:.8}}

/* ---- 3. LAYOUT ------------------------------------------------------------ */
.wrap{position:relative;z-index:3;
  max-width:1180px;margin:0 auto;padding:20px clamp(12px,3vw,34px) 60px}
.grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.grid .span-all{grid-column:1/-1}   /* full-width hero panel */

/* ---- 4. HEADER / BANNER ---------------------------------------------------
   Bordered bar with a faint cyan gradient wash. Brand uses a <b> for the
   accent word: <div class="brand">EXCELSIOR <b>NAME</b><span class="sub">…</span></div> */
.header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 18px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(57,224,255,.06),transparent)}
.brand{font-weight:700;font-size:clamp(15px,2.4vw,24px);
  color:var(--ink-bright);text-shadow:0 0 14px rgba(57,224,255,.55)}
.brand b{color:var(--cyan)}
.brand .sub{display:block;margin-top:3px;font-weight:400;
  font-size:11px;letter-spacing:.42em;color:var(--dim)}
.spacer{flex:1}   /* push status/clocks to the right of the header */

/* optional targeting-reticle corner brackets on a header */
.header.reticle{position:relative}
.header.reticle::before,.header.reticle::after{content:'';position:absolute;
  width:14px;height:14px;border:2px solid var(--cyan);opacity:.7}
.header.reticle::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.header.reticle::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* ---- 5. PANEL / CARD ------------------------------------------------------
   The core container. The ::before draws the signature internal scan-grid. */
.panel{position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px 16px;backdrop-filter:blur(3px);
  box-shadow:inset 0 0 40px rgba(57,224,255,.03)}
.panel::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 26px}
.panel>*{position:relative}   /* keep content above the grid */
.panel.hover{transition:border-color .15s,box-shadow .15s}
.panel.hover:hover{border-color:rgba(57,224,255,.5);
  box-shadow:0 0 22px rgba(57,224,255,.09)}

/* panel header row: LED + uppercase title + right-aligned SEC id */
.phead{display:flex;align-items:center;gap:8px;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.phead .id{margin-left:auto;color:var(--cyan);opacity:.55;
  font-size:10px;letter-spacing:.1em}

/* ---- 6. HEADINGS & TEXT UTILITIES ----------------------------------------- */
.big{font-size:clamp(30px,5.2vw,52px);line-height:1;font-weight:700;
  color:var(--ink-bright);text-shadow:0 0 16px rgba(57,224,255,.4);
  font-variant-numeric:tabular-nums}
.unit{font-size:13px;font-weight:400;letter-spacing:.1em;color:var(--dim)}
.cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.group-title{font-size:11px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan);opacity:.85;text-shadow:var(--glow)}
/* explanatory prose: the one place we drop uppercase + wide tracking */
.prose{color:var(--dim);font-size:11.5px;letter-spacing:.03em;
  line-height:1.6;text-transform:none}

/* ---- 7. NAV / TABS / CHIPS ------------------------------------------------ */
/* chip button (range/mode/filter selectors) -- toggle with aria-pressed */
.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 12px;
  transition:.15s}
.chip:hover{color:var(--cyan);border-color:var(--cyan)}
.chip[aria-pressed="true"]{color:var(--cyan);border-color:var(--cyan);
  background:rgba(57,224,255,.09);box-shadow:var(--glow)}

/* underline tab bar */
.nav{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.nav button{background:none;border:none;cursor:pointer;
  font:11px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);padding:9px 14px;border-bottom:2px solid transparent}
.nav button[aria-selected="true"]{color:var(--cyan);border-bottom-color:var(--cyan);
  text-shadow:0 0 8px rgba(57,224,255,.4)}

/* ---- 8. BUTTONS ----------------------------------------------------------- */
/* secondary / ghost button (default) */
.btn{cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
  background:rgba(57,224,255,.05);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 16px;transition:all .12s}
.btn:hover{background:rgba(57,224,255,.15);color:var(--ink-bright);border-color:var(--cyan)}
.btn:active{transform:translateY(1px)}

/* primary / CTA -- the one solid, inverted-fill button */
.btn.primary{color:var(--bg);background:var(--cyan);border-color:var(--cyan);font-weight:700}
.btn.primary:hover{background:#5fe8ff;color:var(--bg)}

/* danger / warn variants */
.btn.danger{color:var(--red);background:transparent;border-color:rgba(255,80,105,.5)}
.btn.warn{color:var(--amber);background:transparent;border-color:rgba(255,180,84,.5)}

/* focus is always a crisp cyan ring */
.chip:focus-visible,.btn:focus-visible,.nav button:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}

/* ---- 9. STATUS PILLS / TAGS / LEDs ----------------------------------------
   Recipe everywhere: full-strength hue text, ~6% hue bg, ~30% hue border. */
.pill{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:12px;letter-spacing:.16em;padding:7px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(56,255,157,.05);color:var(--green)}    /* default = OK/green */
.pill.warn{color:var(--amber);background:rgba(255,180,84,.06);border-color:rgba(255,180,84,.3)}
.pill.crit{color:var(--red);background:rgba(255,80,105,.07);border-color:rgba(255,80,105,.35)}
.pill.idle{color:var(--dim);background:rgba(77,114,136,.1);border-color:var(--line)}
.pill.info{color:var(--violet);background:rgba(157,123,255,.08);border-color:rgba(157,123,255,.34)}
/* pulsing status dot inside a pill */
.pill .dot{width:10px;height:10px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor;animation:pulse 1.6s ease-in-out infinite}

/* small tag chip (route/label markers) */
.tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-xs);border:1px solid currentColor;color:var(--dim)}
.tag.public,.tag.amber{color:var(--amber);background:rgba(255,180,84,.09)}
.tag.ok,.tag.green{color:var(--green);background:rgba(56,255,157,.08)}
.tag.info,.tag.violet{color:var(--violet);background:rgba(157,123,255,.1)}
.tag.new,.tag.cyan{color:var(--cyan);background:rgba(57,224,255,.1);text-shadow:var(--glow)}

/* LED status dot (panel headers, list rows) */
.led{width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--green);box-shadow:0 0 9px var(--green)}
.led.off{background:var(--dim);box-shadow:none}
.led.warn{background:var(--amber);box-shadow:0 0 9px var(--amber)}
.led.crit,.led.down{background:var(--red);box-shadow:0 0 9px var(--red);
  animation:blink .7s steps(1) infinite}

/* ---- 10. GAUGE BARS ------------------------------------------------------- */
.bar{position:relative;height:12px;margin-top:8px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-xs);background:rgba(0,0,0,.35)}
.bar>i{display:block;height:100%;width:0;border-radius:var(--radius-xs);
  background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .6s ease}
.bar.warn>i{background:linear-gradient(90deg,var(--amber),#ffd489)}
.bar.crit>i{background:linear-gradient(90deg,var(--red),#ff98a8)}

/* text input (search / fields) */
.input{width:100%;font:13px var(--mono);letter-spacing:.06em;color:var(--ink);
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 13px;outline:none}
.input:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(57,224,255,.22)}
.input::placeholder{color:var(--dim);letter-spacing:.12em}

/* ---- 11. FOOTER ----------------------------------------------------------- */
.footer{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:10px;
  border-top:1px solid var(--line);text-transform:uppercase;
  font-size:10.5px;letter-spacing:.16em;color:var(--dim)}
.footer .ok{color:var(--green)}

/* ---- 12. MOTION ----------------------------------------------------------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Respect reduced-motion: kill decorative animation, keep the layout intact. */
@media (prefers-reduced-motion:reduce){
  .fx.flick,.pill .dot,.led.crit,.led.down{animation:none}
}

/* small-screen niceties */
@media (max-width:520px){
  .wrap{padding-left:14px;padding-right:14px}
}

/* ----------------------------------------------------------------------------
   MARKUP NOTE — to get the full CRT treatment, place these once in <body>,
   before .wrap:

     <div class="fx vig"></div>
     <div class="fx scan"></div>
     <div class="fx flick"></div>

   (Optionally add a full-viewport <canvas id="stars"> behind them for the
   animated starfield seen on the fleet consoles.)
   ---------------------------------------------------------------------------- */