/* ════════════════════════════════════════════════════════════════
   DTTASA — COMMAND BAR HEADER (Header 3, VP-selected 2026-06-14)
   ONE header language for the WHOLE portal. CSS-only, no JS change.

   The portal has NO unified header markup — pages invented their own
   class names over time. This stylesheet maps EVERY header vocabulary
   onto the same Command Bar look, under two scopes:

     • #hdr      — the 20 standard staff pages (header id="hdr")
     • .cmd-bar  — the 9 bespoke board headers, which each opt in with a
                   `cmd-bar` marker class added to their header element
                   (#hr-header, #it-header, #archive-header, #ops-header,
                    #exec-header, #cm-header, #lv-hdr, .eom-header, #vmem-hdr)

   Signature: dark command gradient, animated gold scan-line (#hdr pages),
   prominent mono-gold clock, gold-outlined command pills, segmented gold
   action icons, premium photo-filled user chip with a gold ring.
   Loaded AFTER each page's own CSS so it wins. !important throughout so it
   beats the pages' pre-existing header rules.
   ════════════════════════════════════════════════════════════════ */

/* ── The bar: PREMIUM command gradient — three layered backgrounds ───
   1) a travelling gold scan-line pinned to the bottom edge,
   2) an ambient gold aura bleeding from the top,
   3) the dark command base. Plus a pulsing gold box-shadow halo.
   Done with layered backgrounds (NOT a ::after pseudo) so it applies
   uniformly on the board headers too, none of which can be clobbered —
   every board's own ::after / ::before is left intact. This IS the
   portal's "Premium pass" motion language (gold scan-line + ambient
   glow + glow-lift), now carried by the header on every page. */
#hdr, .cmd-bar{
  background-color:#0e1a0c !important;
  background-image:
    linear-gradient(90deg,transparent,rgba(240,200,50,.92),transparent),
    radial-gradient(130% 200% at 50% -60%, rgba(240,200,50,.12), transparent 62%),
    linear-gradient(180deg,#0e1a0c,rgba(10,19,8,.94)) !important;
  background-repeat:no-repeat, no-repeat, no-repeat !important;
  background-size:200% 1.6px, 100% 100%, 100% 100% !important;
  background-position:200% 100%, 0 0, 0 0 !important;
  border-bottom:1px solid var(--gglow,rgba(240,200,50,.22)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  /* ── STATIC (non-scrolling) HEADER, portal-wide (VP 2026-07-26) ──────
     This was `position:relative`, and because this file loads AFTER each
     page's own CSS it beat every page's `position:fixed`, so the header
     scrolled away on ALL 30 pages that link it. Measured, not inferred:
     computed position was `relative` and the header left the viewport.

     `sticky` rather than `fixed` on purpose. Only 2 of the 10 pages that
     declare a fixed header actually reserve top padding for it, so
     restoring `fixed` portal-wide would hide the first block of content on
     the other 8. Sticky keeps the header IN FLOW, so it needs no
     reservation anywhere and cannot overlap content, and it is also what
     the Claude Design prototype specified. */
  position:sticky !important;
  top:0 !important;
  z-index:200 !important;
  animation:hdrCmdScan 5s cubic-bezier(.16,1,.3,1) infinite, hdrCmdGlow 6s ease-in-out infinite !important;
}
/* Travelling gold scan-line (moves the 1st background layer along the bottom) */
@keyframes hdrCmdScan{
  0%  {background-position:200% 100%, 0 0, 0 0;}
  100%{background-position:-200% 100%, 0 0, 0 0;}
}
/* Ambient gold halo — soft pulsing aura under the bar */
@keyframes hdrCmdGlow{
  0%,100%{box-shadow:0 2px 22px -14px rgba(240,200,50,.32);}
  50%    {box-shadow:0 5px 36px -12px rgba(240,200,50,.58);}
}

/* ── Prominent mono-gold clock (command-bar centrepiece) ──────────── */
#hdr .hdr-clock, #hdr #hdr-clock,
.cmd-bar .hdr-clock, .cmd-bar #hdr-clock, .cmd-bar .hdr-wclock{
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  font-size:17px !important; font-weight:600 !important; letter-spacing:1px !important;
  color:var(--gold,#f0c832) !important; line-height:1.05; text-shadow:0 0 14px rgba(240,200,50,.28);
  background:rgba(0,0,0,.22) !important; border:1px solid var(--gglow,rgba(240,200,50,.22)) !important;
  border-radius:9px !important; padding:6px 11px !important;
}
.cmd-bar .hdr-wclock-time{ color:var(--gold,#f0c832) !important; font-family:var(--mono,'IBM Plex Mono',monospace) !important; font-weight:600 !important; }
#hdr .hdr-clock-tz, #hdr .hdr-date, #hdr #hdr-date,
.cmd-bar .hdr-clock-tz, .cmd-bar .hdr-date, .cmd-bar .hdr-wclock-temp{
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  font-size:13px !important; letter-spacing:2px !important; text-transform:uppercase;
  color:var(--t3,rgba(242,247,238,.6)) !important;
}

/* ── Command pills — every page-label variant → gold command outline ─ */
#hdr .page-pill, #hdr .hdr-page, #hdr .hdr-title-pill, #hdr .hdr-page-title,
#hdr .hdr-page-pill, #hdr .hdr-week-pill, #hdr .hdr-admin-chip,
.cmd-bar .page-pill, .cmd-bar .hdr-page, .cmd-bar .hdr-title-pill, .cmd-bar .hdr-page-title,
.cmd-bar .hdr-page-pill, .cmd-bar .hdr-week-pill, .cmd-bar .page-title-pill, .cmd-bar .hdr-admin-chip{
  background:rgba(240,200,50,.07) !important;
  border:1px solid var(--gglow,rgba(240,200,50,.34)) !important;
  color:var(--gold,#f0c832) !important;
  letter-spacing:.9px !important; text-transform:uppercase !important;
  font-size:13px !important; font-weight:700 !important;
  border-radius:8px !important; padding:6px 12px !important;
  font-family:var(--mono,'IBM Plex Mono',monospace) !important;
  /* premium ambient glow + soft pulse */
  box-shadow:0 0 18px -6px rgba(240,200,50,.4), 0 0 0 1px rgba(240,200,50,.06) inset !important;
  animation:hdrPillPulse 4.5s ease-in-out infinite !important;
}
@keyframes hdrPillPulse{
  0%,100%{box-shadow:0 0 14px -7px rgba(240,200,50,.34), 0 0 0 1px rgba(240,200,50,.06) inset;}
  50%    {box-shadow:0 0 22px -5px rgba(240,200,50,.6),  0 0 0 1px rgba(240,200,50,.1) inset;}
}
/* Plain title TEXT variants (not pills) — just lift to gold accent */
.cmd-bar .hdr-title, .cmd-bar .vmem-hdr-title, .cmd-bar .vmem-hdr-title-major{
  color:var(--gold,#f0c832) !important;
}

/* ── Status / live pills → gold-tinted command chips ──────────────── */
#hdr .hdr-live, #hdr .sys-pill, #hdr .hdr-status,
.cmd-bar .hdr-live, .cmd-bar .sys-pill, .cmd-bar .hdr-status{
  background:rgba(240,200,50,.06) !important;
  border:1px solid var(--gglow,rgba(240,200,50,.28)) !important;
  color:var(--t2,rgba(242,247,238,.88)) !important;
  border-radius:8px !important; letter-spacing:1px; text-transform:uppercase; font-size:13px !important;
}

/* ── Segmented gold action icons — every button variant ───────────── */
#hdr .hdr-icon-btn, #hdr .sys-notif-btn, #hdr .hdr-btn, #hdr .hdr-mute-btn,
#hdr .hdr-signout, #hdr .hdr-back, #hdr .hdr-back-btn,
.cmd-bar .hdr-icon-btn, .cmd-bar .sys-notif-btn, .cmd-bar .hdr-btn, .cmd-bar .hdr-mute-btn,
.cmd-bar .hdr-signout, .cmd-bar .hdr-back, .cmd-bar .hdr-back-btn, .cmd-bar .back-btn,
.cmd-bar .notif-bell-btn, .cmd-bar .notif-bell, .cmd-bar #hdr-notif-btn,
.cmd-bar .vmem-icon-btn, .cmd-bar .vmem-back-btn, .cmd-bar .ha-link-btn{
  width:auto; min-width:38px; height:38px !important; border-radius:10px !important;
  background:rgba(0,0,0,.3) !important;
  border:1px solid var(--border,rgba(255,255,255,.16)) !important;
  color:var(--t2,rgba(242,247,238,.88)) !important;
  transition:all .22s cubic-bezier(.16,1,.3,1) !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
#hdr .hdr-icon-btn:hover, #hdr .sys-notif-btn:hover, #hdr .hdr-btn:hover,
#hdr .hdr-mute-btn:hover, #hdr .hdr-signout:hover, #hdr .hdr-back:hover, #hdr .hdr-back-btn:hover,
.cmd-bar .hdr-icon-btn:hover, .cmd-bar .sys-notif-btn:hover, .cmd-bar .hdr-btn:hover,
.cmd-bar .hdr-mute-btn:hover, .cmd-bar .hdr-signout:hover, .cmd-bar .hdr-back:hover,
.cmd-bar .hdr-back-btn:hover, .cmd-bar .back-btn:hover, .cmd-bar .notif-bell-btn:hover,
.cmd-bar .notif-bell:hover, .cmd-bar #hdr-notif-btn:hover, .cmd-bar .vmem-icon-btn:hover,
.cmd-bar .vmem-back-btn:hover, .cmd-bar .ha-link-btn:hover{
  background:var(--gdim,rgba(240,200,50,.12)) !important;
  border-color:var(--gglow,rgba(240,200,50,.34)) !important;
  color:var(--gold,#f0c832) !important; transform:translateY(-1px) !important;
  /* premium glow-lift */
  box-shadow:0 6px 18px -8px rgba(240,200,50,.5), 0 0 0 1px rgba(240,200,50,.12) inset !important;
}
/* back buttons carry a "Dashboard"/label — let them widen for the text */
#hdr .hdr-back-btn, #hdr .hdr-back,
.cmd-bar .hdr-back-btn, .cmd-bar .hdr-back, .cmd-bar .back-btn, .cmd-bar .vmem-back-btn{ padding:0 13px !important; gap:8px; }
/* active alert state keeps its gold glow + shake (don't kill the animation) */
#hdr .sys-notif-btn.has-alerts, .cmd-bar .sys-notif-btn.has-alerts{ color:var(--gold,#f0c832) !important; border-color:var(--gglow,rgba(240,200,50,.4)) !important; }

/* Badges — crisp red count pill */
#hdr .hdr-icon-badge, #hdr .sys-notif-count,
.cmd-bar .hdr-icon-badge, .cmd-bar .sys-notif-count, .cmd-bar .notif-count,
.cmd-bar .notif-badge, .cmd-bar .hdr-notif-badge{
  background:var(--red,#ff4848) !important; color:#fff !important; font-weight:800 !important;
  border:2px solid #0a1308 !important;
}

/* ── User chip variants → premium, photo fills ───────────────────── */
#hdr .hdr-user-chip, #hdr .hdr-user,
.cmd-bar .hdr-user-chip, .cmd-bar .hdr-user, .cmd-bar .vmem-user-chip{
  background:rgba(0,0,0,.3) !important;
  border:1px solid var(--border,rgba(255,255,255,.16)) !important;
  border-radius:30px !important; padding:4px 12px 4px 4px !important; gap:9px !important;
  transition:border-color .22s cubic-bezier(.16,1,.3,1) !important;
  display:inline-flex !important; align-items:center;
}
#hdr .hdr-user-chip:hover, #hdr .hdr-user:hover,
.cmd-bar .hdr-user-chip:hover, .cmd-bar .hdr-user:hover, .cmd-bar .vmem-user-chip:hover{ border-color:var(--gglow,rgba(240,200,50,.34)) !important; }
#hdr .hdr-user-av, #hdr .hdr-avatar, #hdr .hdr-av, #hdr #hdr-av, #hdr #hdr-avatar,
.cmd-bar .hdr-user-av, .cmd-bar .hdr-avatar, .cmd-bar .hdr-av, .cmd-bar #hdr-av,
.cmd-bar #hdr-avatar, .cmd-bar .vmem-user-av, .cmd-bar #vmem-hdr-av{
  border:1px solid var(--gglow,rgba(240,200,50,.34)) !important; overflow:hidden !important;
}
#hdr .hdr-user-av img, #hdr .hdr-avatar img, #hdr .hdr-av img, #hdr #hdr-av img, #hdr #hdr-avatar img,
.cmd-bar .hdr-user-av img, .cmd-bar .hdr-avatar img, .cmd-bar .hdr-av img, .cmd-bar #hdr-av img,
.cmd-bar #hdr-avatar img, .cmd-bar .vmem-user-av img, .cmd-bar #vmem-hdr-av img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  border-radius:50% !important; display:block;
}
#hdr .hdr-name, #hdr #hdr-name,
.cmd-bar .hdr-name, .cmd-bar #hdr-name, .cmd-bar .hdr-uname, .cmd-bar .vmem-user-name{
  color:var(--t2,rgba(242,247,238,.88)) !important; font-weight:600 !important;
}

/* ── Brand wordmark — keep gold accent across variants ────────────── */
#hdr .hdr-logo, #hdr .brand-logo, #hdr .hdr-brand-logo,
.cmd-bar .hdr-logo, .cmd-bar .brand-logo, .cmd-bar .hdr-brand-logo, .cmd-bar .vmem-brand-logo,
.cmd-bar .hdr-brand-name{
  color:var(--gold,#f0c832) !important; letter-spacing:1.2px;
}
#hdr .hdr-divider, .cmd-bar .hdr-divider, .cmd-bar .hdr-sep, .cmd-bar .vmem-hdr-divider{
  background:var(--gglow,rgba(240,200,50,.22)) !important;
}

/* ── Mobile: shrink the clock, drop the long bits ─────────────────── */
@media(max-width:640px){
  #hdr .hdr-clock, #hdr #hdr-clock,
  .cmd-bar .hdr-clock, .cmd-bar #hdr-clock, .cmd-bar .hdr-wclock{ font-size:13px !important; padding:5px 8px !important; }
  #hdr .hdr-clock-tz, #hdr .hdr-date, #hdr #hdr-date,
  .cmd-bar .hdr-clock-tz, .cmd-bar .hdr-date, .cmd-bar .hdr-wclock-temp{ display:none !important; }
}

/* ── Touch: the header controls clear 44px on a finger ─────────────
   VP 2026-09-14, after the My Desk pass measured .hdr-back-btn at 40px on a
   phone and the header buttons at 38px.

   38px is right for a mouse and it is what the desktop header is designed
   around (--hdh is 70px and the cluster has to sit inside it), so this does
   NOT change the desktop header. It raises the controls only where the input
   is a finger, which is the case the 44px floor in CLAUDE.md is about.

   Why here. This file loads LAST on every page and sizes the cluster with
   `height:38px !important`, so a rule anywhere else loses. css/shared-ui.css
   also sets these to min-height:40px under 540px, and loads before this file,
   so this supersedes that too. This is the portal's header stylesheet and the
   change is deliberately portal-wide: a header control that is 44px on one
   board and 40px on another is worse than either.

   `pointer:coarse` rather than a width, because a phone held in landscape is
   still a phone, and a narrow desktop window is still a mouse. `height:auto`
   is required: `min-height` cannot raise a definite `height`, so the fixed
   38px has to be released first.

   Enumerated: 33 pages link this file, 37 carry a #hdr or .cmd-bar header. */
@media (pointer:coarse){
  #hdr .hdr-icon-btn, #hdr .sys-notif-btn, #hdr .hdr-btn, #hdr .hdr-mute-btn,
  #hdr .hdr-signout, #hdr .hdr-back, #hdr .hdr-back-btn,
  .cmd-bar .hdr-icon-btn, .cmd-bar .sys-notif-btn, .cmd-bar .hdr-btn, .cmd-bar .hdr-mute-btn,
  .cmd-bar .hdr-signout, .cmd-bar .hdr-back, .cmd-bar .hdr-back-btn, .cmd-bar .back-btn,
  .cmd-bar .notif-bell-btn, .cmd-bar .notif-bell, .cmd-bar #hdr-notif-btn,
  .cmd-bar .vmem-icon-btn, .cmd-bar .vmem-back-btn, .cmd-bar .ha-link-btn{
    height:auto !important;
    min-height:44px !important;
    min-width:44px !important;
  }
  /* The back controls carry a label, so they widen for the text rather than
     stretching to a square. The 44px floor still applies to the height. */
  #hdr .hdr-back-btn, #hdr .hdr-back,
  .cmd-bar .hdr-back-btn, .cmd-bar .hdr-back, .cmd-bar .back-btn, .cmd-bar .vmem-back-btn{
    min-width:44px !important;
  }
}

/* A press the finger can feel. The cluster had a :hover lift and nothing for
   touch, where there is no hover at all, so a tap gave no feedback. */
#hdr .hdr-icon-btn:active, #hdr .sys-notif-btn:active, #hdr .hdr-btn:active,
#hdr .hdr-mute-btn:active, #hdr .hdr-signout:active, #hdr .hdr-back:active,
#hdr .hdr-back-btn:active,
.cmd-bar .hdr-icon-btn:active, .cmd-bar .sys-notif-btn:active, .cmd-bar .hdr-btn:active,
.cmd-bar .hdr-mute-btn:active, .cmd-bar .hdr-signout:active, .cmd-bar .hdr-back:active,
.cmd-bar .hdr-back-btn:active, .cmd-bar .back-btn:active, .cmd-bar .notif-bell-btn:active,
.cmd-bar .notif-bell:active, .cmd-bar #hdr-notif-btn:active, .cmd-bar .vmem-icon-btn:active,
.cmd-bar .vmem-back-btn:active, .cmd-bar .ha-link-btn:active{
  transform:scale(.93) !important;
  background:var(--gdim,rgba(240,200,50,.18)) !important;
  transition-duration:.06s !important;
}
/* An iOS tap leaves :hover applied until the next tap elsewhere, so the lift
   sticks and the control reads as stuck on. Let :active carry it instead. */
@media (hover:none){
  #hdr .hdr-icon-btn:hover, #hdr .sys-notif-btn:hover, #hdr .hdr-btn:hover,
  #hdr .hdr-mute-btn:hover, #hdr .hdr-signout:hover, #hdr .hdr-back:hover,
  #hdr .hdr-back-btn:hover,
  .cmd-bar .hdr-icon-btn:hover, .cmd-bar .sys-notif-btn:hover, .cmd-bar .hdr-btn:hover,
  .cmd-bar .hdr-mute-btn:hover, .cmd-bar .hdr-signout:hover, .cmd-bar .hdr-back:hover,
  .cmd-bar .hdr-back-btn:hover, .cmd-bar .back-btn:hover, .cmd-bar .notif-bell-btn:hover,
  .cmd-bar .notif-bell:hover, .cmd-bar #hdr-notif-btn:hover, .cmd-bar .vmem-icon-btn:hover,
  .cmd-bar .vmem-back-btn:hover, .cmd-bar .ha-link-btn:hover{
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #hdr .hdr-icon-btn:active, #hdr .hdr-back-btn:active,
  .cmd-bar .hdr-icon-btn:active, .cmd-bar .hdr-back-btn:active{ transform:none !important; }
}