/* css/03-header.css — header brand rail.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- header: the wave10 BRAND RAIL ----------
   A physical rail, not glass: a Tadweer-green → teal-blue gradient bar, 52px
   tall, on top of every screen (it sits above the .overlay screens too, so
   Start and End carry it as well; only the boot splash keeps a clean stage).
   No backdrop blur here — the bar is opaque and reads as hardware. */
header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:52;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:linear-gradient(90deg,#26D07C 0%,#22C784 21%,#19B09D 50%,#0A8BC4 83%,#0072E0 100%);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.75)}
/* the boot splash owns the whole screen; the rail appears with the Start view */
#boot:not(.out) ~ header{display:none}
/* ...and it does not pop: on the boot handoff the rail drops in from above the
   viewport, starting 150 ms into the crossfade so the Start screen is already
   resolving underneath it. */
@keyframes tdwRailDrop{from{transform:translateY(-44px)}to{transform:translateY(0)}}
body.boothandoff header{animation:tdwRailDrop var(--rail-dur,400ms) var(--rail-delay,150ms) var(--ease-out-cubic) both}
@media (prefers-reduced-motion: reduce){ body.boothandoff header{animation:none} }
/* the two logo blocks flex 1 from a 0 basis, so they are always equal in width
   and the instrument cluster is genuinely centred in the bar */
.brand,.famsmark{flex:1 1 0;min-width:0;display:flex;align-items:center;pointer-events:none}
.brand{justify-content:flex-start}
.famsmark{justify-content:flex-end}
/* flex:0 0 auto — the logo blocks are shrinkable so the instruments stay
   centred, but the artwork itself must never be squeezed narrower than its
   aspect ratio (that clipped the Tadweer mark at 604 wide). */
.brand img{height:24px;width:auto;display:block;flex:0 0 auto}
.famsmark img{height:17px;width:auto;display:block;flex:0 0 auto}
.vhid{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hinst{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:0}
/* header pills: the visual capsule is 36px (drawn by ::before) but the hit
   area stays the 44px in-vehicle floor — the element itself is 44px with no
   border, so clientHeight reads 44 and the touch target is honest. */
.hpill{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  --pill-bg:rgba(8,14,12,.78);--pill-bd:rgba(255,255,255,.14);--pill-tx:#fff;
  font-size:var(--fz-body);font-weight:600;color:var(--pill-tx);white-space:nowrap}
/* the visual capsule is 32px (44px hit area inset by 6px top and bottom) */
.hpill::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;border-radius:999px;
  background:var(--pill-bg);border:1px solid var(--pill-bd);pointer-events:none}
.hpill>*{position:relative}
.hpill .cap{font-size:var(--fz-cap);font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:1;color:rgba(255,255,255,.62)}
.hpill .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.hpill.warn .dot{background:var(--minor)}
.hpill.bad{--pill-bd:rgba(255,90,95,.55);--pill-bg:rgba(52,14,16,.86);--pill-tx:#FF8A8E}
.hpill.bad .dot{background:var(--crit)}
.hpill.off .dot{background:var(--tx3)}
#hpSector b{color:#fff;font-size:var(--fz-body);font-weight:600}
#clock{font-size:var(--fz-body);font-weight:600;letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
button.hpill{min-width:44px;justify-content:center;transition:color .15s,transform .15s}
button.hpill::before{transition:background .15s,border-color .15s}
button.hpill:active{transform:scale(.96)}
button.hpill:active::before{background:rgba(255,255,255,.12)}
button.hpill svg.i{width:18px;height:18px}
button.hpill.on{--pill-bd:rgba(34,200,130,.55);--pill-bg:rgba(9,42,29,.86);--pill-tx:var(--acc)}
button.hpill .lab{font-size:var(--fz-body);font-weight:600;letter-spacing:.04em;color:#fff}
button.hpill .badge{min-width:20px;height:20px;border-radius:10px;background:var(--info);color:#04150D;font-size:var(--fz-cap);font-weight:800;display:grid;place-items:center;padding:0 5px}
/* wave11: the single summary pill became two — GPS and NET. The label is
   constant; the 8px dot carries the state, and aria-label/title carry the full
   sentence, so one typographic scale survives every state. */
#hpSignal,#hpNet{gap:6px}
#hpSignal .dot,#hpNet .dot{flex:0 0 auto;width:8px;height:8px}
.hpill.st-ok .dot{background:#22C882}
.hpill.st-warn .dot{background:#F5B841}
.hpill.st-bad .dot{background:#F0554D}
.hpill.st-bad{--pill-bd:rgba(240,85,77,.55)}
.hpill.st-bad .dot{animation:hdotpulse 1.5s var(--ease) infinite}
@keyframes hdotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@media (prefers-reduced-motion: reduce){.hpill.st-bad .dot{animation:none}}
#hpQuiet{--pill-tx:var(--minor);--pill-bd:rgba(255,209,102,.5);--pill-bg:rgba(46,36,10,.86)}
#hpQuiet .num{font-size:var(--fz-body);font-weight:600;font-variant-numeric:tabular-nums}
/* iconbtn: the brief's ≥56px primary-action target */
.iconbtn{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--tx2);transition:background .15s,color .15s,transform .15s}
.iconbtn:active{background:rgba(255,255,255,.07);color:var(--tx);transform:scale(.96)}


/* revamp 8 (client): the "Perception active" chip is OFF the rail. The node
   stays in the DOM — setGate()/setSpeed() still write #gateTxt / #gateShort and
   toggle .paused/.fast on it — but it never paints. Everything below it that
   styles .gate is kept so the chip can be restored in one line. */
.hinst .gate[hidden]{display:none}

/* ---------- revamp 5: the rail carries live state and the two chrome controls
   The bar used to be two logos and nothing else — 44 px of brand across the
   top of a cockpit. It now holds the one readout that says whether the Edge AI
   is looking (the perception gate, moved off the deleted guidance strip) and
   the two controls that are chrome rather than navigation (Settings, Full
   screen), which left the dock. Everything here is drawn AGAINST the green
   gradient, so the glass is a dark scrim with a light hairline — the inverse
   of the panels on the map. */
.hinst .gate{height:32px;box-sizing:border-box;padding:0 12px;border-radius:999px;
  background:rgba(4,16,12,.40);border:1px solid rgba(255,255,255,.20);
  color:#fff;font-size:var(--fz-meta);font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
/* THE glow exception (2 of 3) keeps its dot, tuned for the bright rail */
.hinst .gate i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;
  background:#BFF6DE;box-shadow:0 0 9px rgba(191,246,222,.9)}
.hinst .gate.paused{background:rgba(46,34,6,.62);border-color:rgba(255,209,102,.55);color:#FFE39A}
.hinst .gate.paused i{background:var(--minor);box-shadow:0 0 9px rgba(255,209,102,.8)}
.hinst .gate.fast{background:rgba(52,12,14,.66);border-color:rgba(255,90,95,.6);color:#FFB3B5}
.hinst .gate.fast i{background:var(--crit);box-shadow:0 0 9px rgba(255,90,95,.8)}
.hinst #gateShort{text-transform:uppercase;letter-spacing:.06em}

/* revamp 8 (client): the two chrome controls are BARE ICONS — no chip, no
   hairline, no box. A 26 px glyph at --tx2, lifting to --tx on hover/press,
   with the 44 px in-vehicle hit floor supplied by padding rather than by a
   drawn button. 6 px apart, right-aligned immediately before the FAMS mark. */
.hacts{display:flex;align-items:center;gap:6px;margin-right:12px;pointer-events:auto;flex:0 0 auto}
.hbtn{-webkit-appearance:none;appearance:none;flex:0 0 auto;
  display:grid;place-items:center;padding:9px;border:0;border-radius:10px;
  background:none;color:var(--tx2);cursor:pointer;
  transition:color .16s var(--ease),transform .16s var(--ease)}
/* revamp 11: 28 px — the two bare icons are the only chrome on the rail, so
   they carry the glance weight a boxed button used to. */
.hbtn svg.i{width:28px;height:28px;display:block;stroke-width:1.7}
.hbtn:hover{color:var(--tx)}
.hbtn:active{color:var(--tx);transform:scale(.94)}
.hbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hbtn[aria-pressed="true"]{color:var(--tx)}
@media (prefers-reduced-motion: reduce){ .hbtn,.hinst .gate{transition:none} }