/* ─── OSS shared header + audio rack ───────────────────────────────
   Styled to match index.html's chunky chip-mod skeuomorphic look so
   every page has the same visual header.  Same brass-bordered chips,
   amber LEDs, vintage-CRT-display look.

   Used by every page EXCEPT index.html (which has its own full Beat
   synth engine but the same visual identity). */

/* @import MUST come before any other rule per CSS spec — moved here
   from line 847 so Orbitron actually loads (Captain 2026-06-02). */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

:root {
  --oss-deep: #0A2540;
  --oss-mid: #143552;
  --oss-rim: #1f4a6f;
  --oss-pearl: #FFF5DC;
  --oss-sun: #caa23c;
  --oss-amber: #caa23c;
  --oss-teal: #4DBFB8;
  /* crew-selected display blue (Captain 2026-07-05): #6FCBFF — ONE space-age
     blue for every chip display/value (VOL, TONE, MAIN, SPACE, REEF).
     WCAG AA/AAA on the navy chip bezel #0A1F2A (~9.4:1). */
  --oss-display-blue: #6FCBFF;
  --oss-coral: #e8745f;
  --oss-mono: ui-monospace, "JetBrains Mono", monospace;
  --oss-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Header font lock — every page renders the header with the SAME
     stack regardless of page-level body font-family inheritance.
     The brand + nav links + CTA inherit oss-sans; chips use oss-mono. */
.oss-header,
.oss-header *,
.oss-header *::before,
.oss-header *::after {
  font-family: var(--oss-sans);
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.oss-chip,
.oss-chip *,
.oss-chip-label,
.oss-chip-val,
.oss-chip select,
.oss-chip button,
.oss-chip input {
  font-family: var(--oss-mono) !important;
}

.oss-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 37, 64, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
}
/* Three-row stacked header: identity | audio | nav.  Each row is its
   own max-width container so they stay balanced and never overflow. */
.oss-header-row {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-content: center;
}
.oss-header-identity { padding: 6px 14px; }
.oss-header-identity .oss-header-spacer { flex: 1; min-width: 0; }
.oss-header-audio-row {
  padding: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 37, 64, 0.55);
}
.oss-header-nav-row { padding: 5px 8px; }
/* Captain 2026-06-10 §P1 3-band header — band 2 (.oss-header-clockrow):
   MAIN + space clock + VOL + TONE, centered, same background treatment
   as the identity row above it. */
.oss-header-clockrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: inherit;
  padding: 4px 8px;
}
/* Legacy aliases so older CSS rules that targeted .oss-header-top /
   .oss-header-bottom still apply. */
.oss-header-top { /* aliased by .oss-header-identity */ }
.oss-header-bottom { /* aliased by .oss-header-nav-row */ }
.oss-header-brand {
  color: var(--oss-sun);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.oss-header-cta {
  background: linear-gradient(135deg, var(--oss-sun) 0%, var(--oss-coral) 100%);
  color: var(--oss-deep);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.oss-header-cta:hover { filter: brightness(1.08); }

/* Horizontal nav strip */
.oss-nav-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 6px;
  justify-content: center;
}
.oss-nav-strip::-webkit-scrollbar { display: none; }
.oss-nav-link {
  color: rgba(255, 245, 220, 0.80);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  /* Captain 2026-05-31 nav-mistap fix: ensure each link has a real
     touch target (Apple HIG min 44px).  Without this, finger taps on
     "Gallery" land on neighboring "Studio" because the hit zone is
     ~25px tall and the 8px gap isn't enough buffer. */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Larger gap between mobile nav links so adjacent taps don't bleed
   into the next button. */
@media (max-width: 540px) {
  .oss-nav-strip { gap: 14px; padding: 4px 10px; }
  .oss-nav-link { padding: 10px 14px; font-size: 13px; }
}
/* Captain 2026-06-16: scope nav hover to real-hover devices so the button
   doesn't STAY highlighted after a tap on touchscreens (sticky-button bug). */
@media (hover: hover) and (pointer: fine) {
  .oss-nav-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--oss-sun); }
}
/* On touch, clear any lingering focus highlight immediately. */
.oss-nav-link:focus:not(:focus-visible) { background: transparent; color: rgba(255,245,220,0.80); }
.oss-nav-link.active { background: rgba(202, 162, 60, 0.16); color: var(--oss-sun); }

/* Audio rack — centered, chunky chip-mod look */
.oss-header-audio {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1;
  flex-wrap: nowrap;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.oss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #1a4360 0%, #0A2540 100%);
  border: 1.5px solid var(--oss-amber);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(202, 162, 60, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 0 rgba(0, 0, 0, 0.6);
  color: var(--oss-pearl);
  font-family: var(--oss-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  line-height: 1;
  white-space: nowrap;
  height: 28px;
  flex-shrink: 0;
}

.oss-chip-led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.oss-chip-led.on {
  background: var(--oss-coral);
  box-shadow: 0 0 8px rgba(255, 138, 107, 1),
              inset 0 0 2px rgba(255, 245, 220, 0.6);
}

.oss-chip-label {
  color: var(--oss-amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

.oss-chip select {
  background: #000;
  border: 1px solid var(--oss-amber);
  color: var(--oss-amber);
  font-family: var(--oss-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 0 4px;
  height: 22px;
  /* 2026-05-31 visual debug: bumped from 90px so longer reef names
     ("Mangrove Estuary · Atlantic") don't truncate mid-word. */
  max-width: 140px;
  border-radius: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.oss-chip input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 6px;
  background: linear-gradient(90deg, #0a0a0a 0%, #2a1a0a 100%);
  border: 1px solid var(--oss-amber);
  border-radius: 1px;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}
.oss-chip input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 22px;
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  border: 2px solid #5a3a0a;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.oss-chip input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px;
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  border: 2px solid #5a3a0a;
  border-radius: 2px;
  cursor: pointer;
}

.oss-chip button {
  background: linear-gradient(180deg, #2C8FA8 0%, #1B5A6F 100%);
  border: 1px solid #0a0a0a;
  color: var(--oss-pearl);
  font-family: var(--oss-mono);
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  padding: 0 8px;
  min-width: 26px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(202, 162, 60, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  touch-action: manipulation;
}
.oss-chip button:hover {
  background: linear-gradient(180deg, var(--oss-amber) 0%, #c8992f 100%);
  color: var(--oss-deep);
}

.oss-chip-val {
  color: var(--oss-display-blue); /* Captain 2026-07-05: one display blue */
  font-family: var(--oss-mono);
  font-size: 9.5px;
  min-width: 22px;
  text-align: right;
}

/* Mobile compaction */
@media (max-width: 899.98px) {
  .oss-header-top { padding: 3px 8px; gap: 6px; }
  .oss-header-brand { font-size: 12px; }
  .oss-header-cta {
    padding: 8px 12px;
    font-size: 11px;
    min-height: 36px; /* 44px touch target inc. label vertical space */
  }
  .oss-nav-link {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 540px) {
  /* Captain 2026-06-04 (1788200000): tighter mobile chip sizing so the audio
     row + REEF + clocks fit on 2 mobile rows instead of 4-5.  Single-row
     identity row with smaller chips; clocks wrap below. */
  .oss-header-audio {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    gap: 4px;
    scrollbar-width: none;
  }
  .oss-header-audio::-webkit-scrollbar { display: none; }
  .oss-chip { height: 22px; padding: 0 4px; font-size: 8.5px; }
  .oss-chip input[type="range"] { width: 40px; }
  .oss-chip select { max-width: 56px; font-size: 8.5px; }
  .oss-chip-label { font-size: 8px; letter-spacing: 0.05em; }
  .oss-chip-val { font-size: 8px; }
  .oss-chip button { min-height: 22px; min-width: 24px; padding: 0 4px; font-size: 8.5px; }
  /* Force identity row to one or two lines max; brand+chips wrap reasonably */
  .oss-header-identity { gap: 4px !important; padding: 4px 8px !important; }
}
@media (max-width: 400px) {
  /* Extra-narrow phones: shrink chip internals one more notch and let
     each chip take its own row if it has to. */
  .oss-chip { height: 22px; padding: 1px 4px; font-size: 9px; }
  .oss-chip input[type="range"] { width: 48px; }
  .oss-chip select { max-width: 64px; height: 20px; }
  .oss-chip button { height: 20px; min-height: 20px; padding: 0 6px; }
  .oss-header-audio { gap: 4px 6px; }
}

/* Captain 2026-06-04 (1788200000): .oss-admin-anchor neutralized — no floating anchor per product spec. */
.oss-admin-anchor { display: none !important; }

/* ─── Universal responsive guards ───────────────────────────────────
   These rules apply on EVERY page that loads oss-header.css so the
   whole suite gets the same baseline mobile behavior. */

/* Stop iOS Safari from auto-zooming form inputs (anything < 16px font
   triggers the zoom + a layout shift the user can't undo). */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-size: 16px;
}
/* The audio rack's range/select chips intentionally use smaller font
   for the chip look — that's NOT a focusable text input, so it doesn't
   trigger iOS zoom.  Restore the small chip font. */
.oss-chip select,
.oss-chip input[type="range"] {
  font-size: 10px;
}

/* Defensive: no page should ever horizontal-scroll the whole body.
   If a child overflows, contain it locally. */
html, body { overflow-x: hidden; }

/* Headings: prevent cramped multi-line on mobile. */
@media (max-width: 640px) {
  h1, h2, h3 {
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Touch target floor: any button or anchor inside a tappable card
   gets a minimum 44px height per WCAG.  Doesn't affect inline links
   inside paragraphs. */
@media (max-width: 640px) {
  button:not(.oss-chip button),
  .oss-cta,
  .oss-pagenav-cta,
  a[role="button"] {
    min-height: 44px;
  }
}

/* ── No-hover for touch-only devices ──
   Hover effects (tooltips, popups, color shifts) get stuck visible on
   touch devices because there's no mouseout event to dismiss them.
   Suppress every :hover style globally when the device has no fine
   pointer (= phones, tablets).  Mouse-only desktops/laptops keep
   the full hover experience. */
@media (hover: none), (pointer: coarse) {
  /* Captain 2026-06-27: REMOVED `*:hover { all: revert !important; }`. That
     rule reverted EVERY CSS property on ANY hovered element, so on a
     touchscreen / hybrid device (where this media query matches) hovering the
     sticky header stripped its position/background/layout and it VANISHED —
     the "header disappears on hover" bug. The targeted stuck-tooltip
     suppressors below are kept. If a broader touch-hover guard is ever needed,
     scope it to known hover-effect classes — never the universal `*`. */
  /* Specifically nuke common stuck-tooltip patterns */
  [data-hover-label],
  .tooltip,
  .hover-tooltip { display: none !important; }
}

/* ─── Captain 2026-05-31 mobile audit #285 ──────────────────────────
   Lock nav-link color across :link/:visited/.active/:hover states so
   Gallery doesn't render purple after first visit.  Also add overflow
   guards for narrow viewports. */
a.oss-nav-link,
a.oss-nav-link:link,
a.oss-nav-link:visited {
  color: rgba(255, 245, 220, 0.80) !important;
  text-decoration: none !important;
}
a.oss-nav-link.active,
a.oss-nav-link:hover {
  color: #caa23c !important;
}
@media (max-width: 480px) {
  h1 {
    font-size: clamp(24px, 9vw, 36px) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  section, header, footer { padding-left: 14px !important; padding-right: 14px !important; }
}
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ─── Captain 2026-05-31 audit: header elements must stay BALANCED, in
   view, and CENTERED at any window size or zoom level.  This block
   overrides any earlier flex-start or width-based mobile breakpoint
   that was knocking the nav strip off-center. */
.oss-header-row {
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.oss-header-identity {
  justify-content: space-between !important;
}
.oss-nav-strip {
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.oss-header-audio {
  justify-content: center !important;
  flex-wrap: wrap !important;
}
/* On narrow viewports, allow rows to wrap but stay centered. */
@media (max-width: 899.98px) {
  .oss-header-row { gap: 8px !important; padding: 4px 10px !important; }
  .oss-nav-strip { justify-content: center !important; }
}

/* ─── Captain 2026-06-02: dual-clock cluster in header ─────────────
   MASTER (Pacific 24h) + VOYAGER 1 chips — same amber-LCD bezel
   aesthetic as the HABITAT/VOL/TONE audio switches.  Auto-shrinks
   via clamp() so it stays balanced at any viewport width. */
.oss-clock-cluster {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.oss-chip.oss-clock-master,
.oss-chip.oss-clock-voyager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #0F2A3A;
  border: 1px solid #1f4d63;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(9px, 0.95vw, 11px);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
              inset 0 -1px 0 rgba(0,0,0,0.35);
  transition: border-color 0.2s;
}
/* Member 2026-08-03: no hover treatment on MAIN — it is a readout, not a
   control; nothing invites a pointer. SPACE keeps its hover (its title
   carries the onboard-time explanation). */
.oss-chip.oss-clock-voyager:hover {
  border-color: #caa23c;
}
.oss-chip .oss-chip-label {
  color: #caa23c;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.oss-chip .oss-chip-display {
  color: var(--oss-display-blue); /* Captain 2026-07-05: one display blue */
  background: #0A1F2A;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #1f4d63;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: center;
  text-shadow: 0 0 6px rgba(202,162,60,0.25);
}
.oss-chip .oss-chip-suffix {
  color: rgba(255,245,220,0.55);
  font-size: 0.85em;
  letter-spacing: 0.10em;
}
@media (max-width: 899.98px) {
  .oss-clock-cluster { gap: 5px; width: 100%; margin-top: 4px; }
  .oss-chip.oss-clock-master,
  .oss-chip.oss-clock-voyager { padding: 3px 7px; font-size: 9px; }
  .oss-chip .oss-chip-display { min-width: 55px; padding: 2px 4px; }
}

/* ─── Captain 2026-06-02: subtle crew font tweak ──────────────────
   Captain spec: 'change all of our fonts just slightly so we can
   have a unique self-created font by the crew.'  We keep the base
   stack (Space Grotesk / Inter / Fraunces) but apply a small
   letter-spacing + weight bias that becomes the OSS visual
   signature.  Identifiable as 'OSS Crew Type' without needing a
   custom font file. */
:root {
  --oss-crew-letter-spacing: -0.011em;
  --oss-crew-weight-bias: 0;  /* +0 = neutral; -50 = lighter; +50 = bolder */
}
body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, textarea {
  letter-spacing: var(--oss-crew-letter-spacing);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'kern' on;
  font-variant-numeric: tabular-nums proportional-nums;
}
h1, h2, h3, h4 {
  letter-spacing: -0.022em;
  font-feature-settings: 'ss01' on, 'cv01' on, 'kern' on;
}
.mono, code, kbd, samp, .oss-chip-display {
  /* Mono stays mono — but with our subtle wider tracking signature. */
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
}

/* ─── Captain 2026-06-02: STACK + CENTER responsive header ─────────
   Spec: "make sure these all stack and or center depending on the
   browser." Every header row uses flex-wrap with center justification
   so the audio chips, clock cluster, and nav buttons reflow gracefully
   without ever clipping or going off-balance. Single source of truth
   for all 4 page header layouts.

   Layout intent across viewports:
     ≥ 1024px (desktop):  identity | audio chips + clocks all on one row, nav on row 2 — both centered.
     720-1023px (tablet): identity row + audio/clock row + nav row — each centered, wraps as needed.
     ≤ 719px (mobile):    everything stacks vertically, each chip/link is centered, with a sensible gap.
*/
.oss-header,
.oss-header-row,
.oss-header-audio-row,
.oss-header-nav-row,
.oss-nav-strip,
.oss-clock-cluster,
.oss-pagenav-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: 6px;
  column-gap: clamp(6px, 1vw, 14px);
}
.oss-header {
  flex-direction: column !important;
  width: 100%;
  padding: clamp(6px, 1vw, 12px) clamp(8px, 2vw, 18px);
  box-sizing: border-box;
}
.oss-header-row,
.oss-header-audio-row,
.oss-header-nav-row {
  width: 100%;
  min-width: 0;   /* allow flex children to shrink below intrinsic width */
}
.oss-nav-strip,
.oss-clock-cluster {
  max-width: 100%;
}
/* Every immediate header child shrinks gracefully — never pushes layout
   off-screen, never clips the OSS brand. */
.oss-header > *,
.oss-header-row > *,
.oss-header-audio-row > *,
.oss-header-nav-row > * {
  min-width: 0;
  max-width: 100%;
}

/* Stack threshold #1 — at <= 900px, push the clock cluster to its own
   visual row beneath the audio chips, both still centered. */
@media (max-width: 900px) {
  .oss-clock-cluster {
    flex-basis: 100%;
    margin-top: 4px;
  }
}

/* Stack threshold #2 — at <= 640px, audio chips + clocks each take
   their own row.  Nav links keep tap targets ≥ 44px (Apple HIG). */
@media (max-width: 899.98px) {
  .oss-header-audio-row { gap: 4px; }
  .oss-chip,
  .oss-clock-master,
  .oss-clock-voyager { flex: 0 0 auto; }
  .oss-nav-strip { gap: 6px; padding-top: 4px; }
  .oss-nav-link {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px !important;
  }
}

/* Stack threshold #3 — at <= 380px (small phones), audio chips can
   stack one-per-row if they'd otherwise crowd. */
@media (max-width: 380px) {
  .oss-header-audio-row > .oss-chip {
    flex: 1 0 80%;
    justify-content: center;
  }
  .oss-clock-master,
  .oss-clock-voyager { flex: 1 0 45%; }
}

/* Defensive: kill horizontal scroll bars from any rogue rule. */
.oss-header, .oss-header-row, .oss-header-audio-row, .oss-header-nav-row {
  overflow-x: visible;
}

/* ─── Captain 2026-06-02: fade transitions + destruction graphics ────
   When a stamped composition slides into a wall tile, it fades in.
   When the Main Showcase work expires (or a blank tile gets purged),
   we play a 5s palette-colored bubble/shard explosion before the next
   piece fades in. */

/* Chip pulse — used by oss-clock-sync.js when the deep-space craft
   changes (different chronicle in Final Call). */
@keyframes ossChipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(202,162,60,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(202,162,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(202,162,60,0); }
}

/* Tile arrival fade — apply .oss-tile-arriving to any chronicle tile
   when it's freshly placed.  3-step keyframe: invisible → soft scale
   in → settled. */
@keyframes ossTileFadeIn {
  0%   { opacity: 0; transform: scale(0.94) translateY(6px); filter: blur(3px); }
  60%  { opacity: 0.95; transform: scale(1.02) translateY(-1px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
.oss-tile-arriving,
.gallery-piece.fresh-from-live,
.gallery-piece.arriving {
  animation: ossTileFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

/* Tile fade-out — applied to the OLD work when it slides off its
   current position, before being re-placed at the next position. */
@keyframes ossTileFadeOut {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  100% { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(2px); }
}
.oss-tile-departing,
.gallery-piece.departing {
  animation: ossTileFadeOut 0.9s cubic-bezier(0.55, 0, 0.55, 0.2) both;
  will-change: opacity, transform, filter;
}

/* Main Showcase destruction — 5-second palette-tinted bubble/shard
   field that plays when a Final-Call work is destroyed (or a blank
   placeholder tile is purged).  We project two overlays:
     1. Bubble field via radial-gradients fading up + drifting.
     2. Shard burst via clip-path triangles in the chronicle palette.
   The chronicle palette is read from data-palette on .gallery-piece. */
@keyframes ossExplodeBubbles {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.8) translateY(-180px); }
}
@keyframes ossExplodeShards {
  0%   { opacity: 0; transform: scale(0.6) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6) rotate(45deg) translate(20px, -40px); }
}
@keyframes ossShockwave {
  0%   { opacity: 0.85; transform: scale(0.2); border-width: 4px; }
  100% { opacity: 0; transform: scale(2.4); border-width: 0; }
}

.oss-destruction-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 12;
}
.oss-destruction-stage .oss-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 60%; aspect-ratio: 1;
  margin-left: -30%; margin-top: -30%;
  border: 4px solid var(--oss-palette-1, #caa23c);
  border-radius: 50%;
  animation: ossShockwave 1.2s ease-out both;
}
.oss-destruction-stage .oss-bubble {
  position: absolute;
  width: var(--bw, 18px); height: var(--bh, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.35),
    var(--oss-palette-1, #caa23c) 65%,
    transparent 100%);
  bottom: 0; left: var(--bx, 50%);
  animation: ossExplodeBubbles var(--bd, 4s) ease-out var(--bdelay, 0s) both;
}
.oss-destruction-stage .oss-shard {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--sw, 24px); height: var(--sh, 6px);
  background: var(--oss-palette-2, #e8745f);
  transform-origin: left center;
  transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  opacity: 0;
  animation: ossExplodeShards var(--sd, 2.4s) cubic-bezier(0.16, 1, 0.3, 1) var(--sdelay, 0s) both;
}
.oss-destruction-stage.dim::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%,
    rgba(10,37,64,0.0) 0%,
    rgba(10,37,64,0.6) 70%,
    rgba(10,37,64,0.95) 100%);
  animation: ossShardDim 5s ease-in both;
}
@keyframes ossShardDim {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ─── Captain 2026-06-02: clickable craft label on space clock ──── */
.oss-clock-craft-link {
  color: #caa23c;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.10em;
  transition: color 0.15s, text-shadow 0.15s;
}
.oss-clock-craft-link:hover,
.oss-clock-craft-link:focus {
  color: #FFE39E;
  text-shadow: 0 0 8px rgba(202,162,60,0.55);
  text-decoration: underline;
  outline: none;
}

/* ─── Captain 2026-06-02 (1785200000) — identity row IS THE ONE LINE
   Spec: "move clocks, logo, and sign in to same line, recenter,
   balance, etc. in all browsers please". Replace the prior 3-column
   grid with a flex row so OSS brand + clock cluster + reef chip (home)
   + Sign in all sit on ONE line at desktop, and collapse gracefully
   at narrower widths via flex-wrap. */
.oss-header-identity {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(6px, 1vw, 12px) clamp(8px, 2vw, 18px);
}
/* Brand pinned left, sign-in pinned right via auto margins — clocks
   + reef chip naturally float between them, centered by the gap. */
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-header-brand-cell {
  flex: 0 0 auto;
  margin-right: auto;
}
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 10px);
  min-width: 0;
}
.oss-header-identity > #oss-clock-mount-identity .oss-clock-cluster,
.oss-header-identity > .oss-clock-identity-cell .oss-clock-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
}
/* Captain 2026-06-12 (1792300000) §P1 HEADER BALANCE — band 1 was three
   ragged islands (brand · reef floating · sign-in) because the reef chip
   had no margins while brand used margin-right:auto and sign-in used
   margin-left:auto, dumping ALL the slack between brand↔reef. Center the
   reef + any middle chips/clocks as one group with equal auto-margins so
   the row reads: [brand]——[ centered group ]——[sign-in], evenly. */
.oss-header-identity > .oss-chip-reef-compact {
  flex: 0 0 auto;
  margin-left: auto;
}
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .oss-header-signin-cell,
.oss-header-identity > .oss-header-cta,
.oss-header-identity > .relative,
.oss-header-identity > [class*=sign-in],
.oss-header-identity > [class*=signin] {
  flex: 0 0 auto;
  margin-left: auto;
}
/* Captain 2026-06-02 (1785400000) — OSS + Sign in ALWAYS on the
   same row (Captain screenshot showed header wrapping into 3 stacked
   rows on Edge). Strategy: use flex `order` so brand+reef+sign-in
   render first on row 1, with clocks forced to row 2 whenever the
   content would otherwise wrap. The auto-margin trick stays in place
   so brand sits at the left edge and sign-in at the right edge of
   row 1 regardless of viewport. */
/* Captain 2026-06-03 night (1786300000) — Sign-in MUST be in the far
   right corner per screenshot. New order: brand(0) → reef(1) → clocks(2)
   → sign-in(3). Sign-in keeps margin-left:auto to pin against right edge. */
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-header-brand-cell {
  order: 0;
}
.oss-header-identity > .oss-chip-reef-compact {
  order: 1;
}
/* Captain 2026-06-03 night (1786600000) — audio chips (VOL + TONE) now live in row 1 between reef and sign-in. New order: brand(0) → reef(1) → audio(2) → clocks(3) → sign-in(4 far right). */
.oss-header-identity > .oss-chip:not(.oss-chip-reef-compact) {
  order: 2 !important;
}
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
  order: 3 !important;
}
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .oss-header-signin-cell,
.oss-header-identity > .oss-header-cta,
.oss-header-identity > .relative,
.oss-header-identity > [class*=sign-in],
.oss-header-identity > [class*=signin] {
  order: 4 !important;
  margin-left: auto !important;
}
/* Captain 2026-06-03 (1787900000) — Identity row stays on ONE line per
   locked-in design "OSS | REEF | VOL | TONE | MAIN | VOYAGER 1 | Sign in
   on row 1, nav on row 2". The 1280px breakpoint that previously forced
   clocks to wrap is REMOVED — at narrower widths the chips shrink via
   clamp() font-size instead of breaking the row. Only on true mobile
   (<=720px) does the row wrap into stack mode. */
@media (max-width: 720px) {
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell {
    flex-basis: 100%;
    justify-content: center;
  }
}
@media (max-width: 720px) {
  /* Mobile: tight gap, identity row stays brand+(reef)+sign-in row 1,
     clocks row 2 (already forced via flex-basis 100% above). */
  .oss-header-identity {
    gap: 6px !important;
    padding: 5px 8px !important;
    row-gap: 4px !important;
  }
}
/* Reef chip view-only lock — disable pointer + dropdown arrow for users.
   Admin mode re-enables via body.is-admin override below. */
.oss-reef-select-locked {
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: inherit !important;
  cursor: default !important;
  text-align: center !important;
  padding-right: 4px !important;
}
.oss-reef-select-locked::-ms-expand { display: none !important; }
body.is-admin .oss-reef-select-locked { pointer-events: auto !important; cursor: pointer !important; }
body.is-admin #chip-reef-cycle.hidden { display: inline-flex !important; }
/* Compact reef chip — small footprint on the identity row */
.oss-chip-reef-compact {
  font-size: 11px !important;
  padding: 3px 8px !important;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .oss-chip-reef-compact { font-size: 10px !important; padding: 2px 6px !important; max-width: 140px; }
  .oss-chip-reef-compact select { max-width: 90px; font-size: 10px !important; }
}
/* Tagline hidden on very small mobile (Captain spec: less technical, fits one line) */
@media (max-width: 540px) {
  .oss-chip .oss-craft-tagline,
  span.oss-craft-tagline.oss-craft-tagline { display: none !important; }
}
/* Captain 2026-06-02 (1784500000): Δ MAIN chip dropped. Hide defensively
   in case any cached/stray cluster mounts the old chip. */
.oss-clock-cluster .oss-clock-tdelta,
.oss-chip.oss-clock-tdelta { display: none !important; }
/* Clock cluster: keep MAIN + Voyager chip on one row on tablet/desktop.
   On phones they wrap to 2 rows (1 chip each) which is unavoidable when
   the V1 chip is wide. */
.oss-clock-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
}
@media (max-width: 899.98px) {
  .oss-clock-cluster { flex-wrap: wrap; justify-content: center; }
}

/* Sparks 2026-08-13 (shared-modules audit) — REMOVED: the amber-LCD styling
   for the time-difference chip (.oss-chip.oss-clock-tdelta) and its three
   phase-fresh / phase-counting-down / phase-aged label colours. The chip was
   dropped from the header on 2026-06-02 and no page has ever mounted it; the
   1s JS ticker that wrote its FRESH / NEXT / AGED text is removed from
   oss-clock-sync.js in the same pass. The defensive
   `display: none !important` guard a few rules above is KEPT on purpose:
   cosmetics for a chip that cannot appear are dead weight, but a hide rule
   is cheap insurance if a stale cached bundle somewhere ever mounts one. */

/* ─── Captain 2026-06-02: blue space-age craft label + tagline ──────
   Use Orbitron (loaded via Google Fonts on every page) on the craft
   label (clickable link) and the three-word tagline so they read as
   'space age' relative to the rest of the chip cluster.

   Specificity NOTE: .oss-header * and .oss-chip * both have
   font-family !important at specificity (0,1,1). To win, our rules
   must reach (0,2,0)+ — hence the .oss-chip ancestor selectors. */

/* Sparks 2026-08-13 (shared-modules audit) — REMOVED: the .oss-clock-craft-link
   resting + :hover/:focus rules (Orbitron, display-blue, underline-on-hover).
   The class is carried by no element anywhere in the repo — no HTML page, no
   static module — because the external mission link was taken off the SPACE
   chip on 2026-06-28 ("external mission links removed from the header. The
   SPACE label is plain display text now"). Twenty lines of !important
   styling, including a hover transition, for a link that no longer exists.
   The specificity NOTE above still governs the tagline rules that follow. */
.oss-chip .oss-craft-tagline,
span.oss-craft-tagline.oss-craft-tagline {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
  color: rgba(111,203,255,0.78) !important;
  font-size: 0.78em !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: lowercase !important;
  margin-left: 6px !important;
  white-space: nowrap;
}
@media (max-width: 899.98px) {
  .oss-chip .oss-craft-tagline,
  span.oss-craft-tagline.oss-craft-tagline {
    font-size: 0.70em !important;
    margin-left: 4px !important;
  }
}

/* Sparks 2026-08-13 (shared-modules audit) — REMOVED with the rest of the
   time-diff chip: its .oss-chip-label and .oss-chip-suffix refinements. Both
   were scoped inside .oss-chip.oss-clock-tdelta, so they could only ever
   match children of the chip that is never mounted — the live MAIN chip's
   own "PT" suffix is styled by the unscoped .oss-chip-suffix rules and is
   untouched by this removal. */

/* Captain 2026-06-03 night (1786100000) — visual balance fix:
   tighten brand/reef/signin/clocks vertical alignment in the identity row. */
.oss-header-identity {
    align-items: center !important;
}
.oss-header-identity > .oss-header-brand,
.oss-header-identity > .oss-chip-reef-compact,
.oss-header-identity > .oss-header-signin,
.oss-header-identity > .relative.shrink-0,
.oss-header-identity > #oss-clock-mount-identity,
.oss-header-identity > .oss-clock-identity-cell {
    align-self: center !important;
}


/* Captain 2026-06-03 night (1786300000) — even spacing + balanced rows.
   Audio row, nav row are independently centered with consistent vertical rhythm. */
.oss-header-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 0 !important;
}
.oss-header-identity {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Tighten nav spacing visually with the header above */
nav.oss-nav, .oss-nav, [role="navigation"] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.5vw, 18px);
    padding: 6px 0;
}
.oss-nav .oss-nav-link, .oss-nav a {
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.oss-nav .oss-nav-link:hover, .oss-nav a:hover {
    background: rgba(202,162,60,0.10);
}
/* ^ Captain 2026-06-11 (1792000000) PARSE-BUG FIX: this rule previously
   ended mid-`rgba(` with no closing paren/brace. Per CSS error-recovery
   the unbalanced "(" made browsers consume the REST OF THE FILE as one
   broken declaration — every rule below this line (audio-locked pulse,
   the 640px chip compaction, the 1789800000 mobile rebalance) was DEAD.
   That is why the mobile header never collapsed despite the fixes. */

/* ─── Captain 2026-06-04 (1788600000): VOL slider audio-locked hint ──
   Per sec 50 there is no audio pill. Instead, when audio.muted or
   audio.paused (managed by oss-audio-continuity.js setLockedState),
   the body gets class .audio-locked and the VOL chip pulses with a
   coral border + soft glow to draw the user's eye to it as the sole
   unlock + volume control surface. Pulse stops the instant audio
   starts playing audibly. */
@keyframes ossVolHintPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(202, 162, 60, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      1px 1px 0 rgba(0, 0, 0, 0.6),
      0 0 0 0 rgba(255, 138, 107, 0);
    border-color: var(--oss-amber);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(202, 162, 60, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      1px 1px 0 rgba(0, 0, 0, 0.6),
      0 0 0 6px rgba(255, 138, 107, 0.35);
    border-color: var(--oss-coral);
  }
}
body.audio-locked .oss-chip:has(#oss-vol),
body.audio-locked .oss-chip:has(#chip-vol),
body.audio-locked #oss-vol,
body.audio-locked #chip-vol {
  animation: ossVolHintPulse 1.6s ease-in-out infinite;
}
/* Cursor + accessible affordance hint */
body.audio-locked .oss-chip:has(#oss-vol),
body.audio-locked .oss-chip:has(#chip-vol) {
  cursor: pointer;
}


/* ─── Captain 2026-06-04 (1788600000) — mobile header balance fix ───
   Captain reported "bugs in header on mobile, unbalanced, centered
   elements not functioning". Force the identity row and audio row
   to true-center even when content wraps; ensure brand stays left,
   sign-in stays right, audio chips center between them. */
@media (max-width: 720px) {
  .oss-header-identity {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    width: 100%;
  }
  .oss-header-identity > .oss-header-brand,
  .oss-header-identity > .oss-header-brand-cell {
    margin-right: auto !important;
    flex: 0 0 auto !important;
    order: 0 !important;
  }
  .oss-header-identity > .oss-header-signin,
  .oss-header-identity > .oss-header-signin-cell,
  .oss-header-identity > .oss-header-cta,
  .oss-header-identity > [class*=sign-in],
  .oss-header-identity > [class*=signin] {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    order: 99 !important;
  }
  .oss-header-identity > .oss-chip,
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell {
    flex: 0 0 auto !important;
    order: 5 !important;
  }
  .oss-nav-strip {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 6px 8px !important;
    width: 100%;
  }
}

/* Footer utility links — global hover state (overrides the inline opacity) */
.oss-footer-util:hover,
.oss-footer-util:focus {
  color: rgba(202, 162, 60, 0.95) !important;
  background: rgba(202, 162, 60, 0.06);
  border-radius: 4px;
  outline: none;
}


/* ─── Captain 2026-06-04 (1789800000) — mobile header rebalance ───
   Captain debug-zip "Header Elements BuG": REEF/VOL/TONE wrap to 2 rows,
   MAIN+PARKER overlap, Sign-in pushed below clocks. Fix by collapsing
   the identity row + audio row into tighter chip widths on narrow
   viewports and forcing single-line flow with horizontal scroll fallback. */
@media (max-width: 899.98px) {
  .oss-header-identity { padding: 4px 6px !important; gap: 4px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .oss-header-identity > .oss-header-brand-cell { margin-right: auto !important; }
  .oss-header-identity > [class*="signin"], .oss-header-identity > .oss-header-cta { margin-left: auto !important; }
  .oss-header-audio-row { padding: 3px 4px !important; }
  .oss-header-audio { gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 0 !important; justify-content: flex-start !important; }
  .oss-header-audio::-webkit-scrollbar { display: none; }
  .oss-chip { height: 24px !important; padding: 2px 5px !important; font-size: 9.5px !important; flex-shrink: 0 !important; }
  .oss-chip-label { font-size: 8.5px !important; letter-spacing: 0.06em !important; }
  .oss-chip select, .oss-chip input[type=range], .oss-chip button { height: 18px !important; }
  .oss-chip input[type=range] { width: 56px !important; }
  .oss-nav-strip { gap: 8px !important; padding: 3px 8px !important; }
  .oss-clock-cluster { gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
}

/* ─── Captain 2026-06-11 (1792000000) §P9.1 MOBILE HEADER COLLAPSE ───
   Captain phone screenshots (412px): header ate 40-50% of the viewport —
   chips wrapped into 5+ sparse rows, MAIN + space clocks became full-width
   rows, Sign-in floated with huge empty space. Design intent (index.html):
   collapsed header ≈ 10% of mobile viewport.

   Collapsed contract, <640px ONLY (desktop ≥640px untouched):
     BAND 1 (~34px): mascot 24px + wordmark 16px + compact reef chip
                     (LED + habitat name only) + small Sign-in pill pinned
                     right — ONE row, flex-wrap:nowrap, never wraps.
     BAND 2 (~32px): MAIN clock + space clock + VOL (70px) + TONE (60px)
                     in ONE horizontally-scrollable row (overflow-x:auto,
                     scrollbar chrome hidden). Clock chips are flex:0 0 auto
                     with flex-basis:auto — they can NEVER become the
                     full-width rows the 720px/380px legacy rules forced.
     BAND 3 (~40px): nav strip, single centered row, 36px links, 12px font.
   Total ≈ 106-112px ≤ the ~120px target.

   Touch targets: Sign-in pill is visually ~23px but an ::after pseudo
   extends its tap zone to ≥44px. Nav links are 36px visual + 2px row
   padding (compactness trade-off per spec). Slider thumbs are bumped to
   16×24px (≥24px rule) — a full 44px thumb cannot fit a 36px band.

   Every rule is !important because the legacy blocks above (stack+center
   2026-06-02, rebalance 1788600000/1789800000) use !important wholesale. */
@media (max-width: 899.98px) {

  /* Sticky shell: SOLID navy (no translucent gap), content scrolls UNDER. */
  .oss-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #0A2540 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }
  .oss-header-row { row-gap: 0 !important; }

  /* ── BAND 1: brand + reef + Sign-in — ONE row, never wraps. */
  .oss-header-row.oss-header-identity {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    min-height: 34px;
  }
  .oss-header-identity > .oss-header-brand,
  .oss-header-identity > .oss-header-brand-cell {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    gap: 6px !important;
  }
  .oss-header-brand img[src*="oss_mark_mascot"] { height: 24px !important; width: auto !important; }
  .oss-header-brand img[src*="oss_wordmark"]    { height: 16px !important; width: auto !important; }
  .oss-header-identity > .oss-chip-reef-compact {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 24px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    max-width: 190px !important;   /* Captain 2026-06-29: was 132px — clipped longer habitat names ("Mangrove Estuary"); Band 2 scrolls, so give the name room */
    overflow: hidden !important;
  }
  /* Reef chip = LED + habitat name ONLY on mobile (drop the REEF label). */
  .oss-chip-reef-compact .oss-chip-label { display: none !important; }
  .oss-chip-reef-compact .oss-chip-display {
    min-width: 0 !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
  }
  .oss-chip-reef-compact select { max-width: 84px !important; font-size: 10px !important; }
  /* Sign-in pill: small, pinned right on the SAME row. */
  .oss-header-identity > .relative,
  .oss-header-identity > .oss-header-signin,
  .oss-header-identity > .oss-header-signin-cell,
  .oss-header-identity > [class*="sign-in"],
  .oss-header-identity > [class*="signin"],
  .oss-header-identity > .oss-header-cta {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .oss-header .oss-header-cta {
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 0 !important;
    position: relative !important;
  }
  /* Invisible tap-zone extension: ~23px visual pill → ≥44px effective. */
  .oss-header .oss-header-cta::after {
    content: '';
    position: absolute;
    inset: -11px -6px;
  }
  /* Defensive: if a cached page still mounts clocks in band 1, hide them
     there — band 2 below is the only clock home on mobile. */
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell { display: none !important; }

  /* ── BAND 2: MAIN + space clock + VOL + TONE — ONE scrollable row.
     Clock chips must NOT become full-width rows. */
  .oss-header-row.oss-header-clockrow {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    min-height: 32px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .oss-header-row.oss-header-clockrow::-webkit-scrollbar { display: none !important; }
  .oss-header-clockrow > * { flex: 0 0 auto !important; }
  .oss-header-clockrow > #oss-clock-mount-identity,
  .oss-header-clockrow > .oss-clock-identity-cell {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important; /* kills legacy 720px flex-basis:100% */
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .oss-header-clockrow .oss-clock-cluster {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
    gap: 6px !important;
  }
  .oss-header-clockrow .oss-chip,
  .oss-header-clockrow .oss-chip.oss-clock-master,
  .oss-header-clockrow .oss-chip.oss-clock-voyager {
    flex: 0 0 auto !important; /* kills legacy 380px flex:1 0 45% */
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
  .oss-header-clockrow .oss-chip-label {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }
  .oss-header-clockrow .oss-chip .oss-chip-display {
    min-width: 0 !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
  }
  .oss-header-clockrow .oss-chip-val { font-size: 9px !important; min-width: 18px !important; }
  /* Sliders: VOL 70px / TONE 60px tracks; thumb kept ≥24px for touch. */
  .oss-header-clockrow .oss-chip input[type="range"] { height: 24px !important; }
  .oss-header-clockrow input[type="range"]#chip-vol,
  .oss-header-clockrow input[type="range"]#oss-vol { width: 70px !important; }
  .oss-header-clockrow input[type="range"]#chip-eq,
  .oss-header-clockrow input[type="range"]#oss-eq { width: 60px !important; }
  .oss-header-clockrow .oss-chip input[type="range"]::-webkit-slider-thumb {
    width: 16px !important;
    height: 24px !important;
  }
  .oss-header-clockrow .oss-chip input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 24px !important;
  }

  /* ── BAND 3: nav strip — single centered compact row. */
  .oss-header-row.oss-header-nav-row { padding: 2px 6px !important; }
  .oss-header-nav-row .oss-nav-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 2px 6px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  .oss-header-nav-row .oss-nav-strip::-webkit-scrollbar { display: none !important; }
  .oss-header .oss-nav-link {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    line-height: 1.2 !important;
  }
}

/* ═══ Captain 2026-06-15 — HEADER UNIFY (desktop ≥640px) ════════════════
   Single authoritative desktop block, LAST in the file so it wins the
   specificity ties created by the layered 2026-06-02..06-11 rules. Goals:
     · Strict 3 bands: [brand —— reef —— sign-in] / [clocks · VOL · TONE] / [nav]
     · ONE bezel size + style for every display module + slider (reef, VOL,
       TONE, MAIN clock, space clock all match).
     · Reef + all readouts render space-blue like the space clock.
     · Each band centered + balanced. */
@media (min-width: 900px) {
  /* All three bands: centered, even vertical rhythm. */
  .oss-header-row {
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 16px !important;
    flex-wrap: nowrap !important;
  }

  /* BAND 1 — brand pinned left, sign-in pinned right, reef centered between
     (the two auto-margins split the slack so reef floats dead-center). */
  .oss-header-identity > .oss-header-brand,
  .oss-header-identity > .oss-header-brand-cell { order: 0 !important; margin-right: auto !important; }
  .oss-header-identity > .oss-chip-reef-compact { order: 1 !important; margin: 0 !important; }
  .oss-header-identity > .oss-header-cta,
  .oss-header-identity > .oss-header-signin,
  .oss-header-identity > [class*="signin"] { order: 2 !important; margin-left: auto !important; }
  /* Clocks/audio never belong in band 1 on desktop — band 2 owns them. */
  .oss-header-identity > #oss-clock-mount-identity,
  .oss-header-identity > .oss-clock-identity-cell,
  .oss-header-identity > .oss-chip:not(.oss-chip-reef-compact) { display: none !important; }

  /* BAND 2 — clocks + VOL + TONE, one centered group. */
  .oss-header-clockrow { gap: 12px !important; flex-wrap: nowrap !important; justify-content: center !important; }
  .oss-header-clockrow .oss-clock-cluster { gap: 12px !important; }

  /* ── ONE bezel for EVERY display module + slider chip ── */
  .oss-header .oss-chip,
  .oss-header .oss-chip.oss-clock-master,
  .oss-header .oss-chip.oss-clock-voyager,
  .oss-header .oss-chip-reef-compact {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    background: linear-gradient(180deg, #1a4360 0%, #0A2540 100%) !important;
    border: 1.5px solid var(--oss-amber) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(202,162,60,0.2),
                inset 0 -1px 0 rgba(0,0,0,0.5),
                1px 1px 0 rgba(0,0,0,0.6) !important;
    font-family: var(--oss-mono) !important;
    font-size: 10.5px !important;
    max-width: none !important;
  }
  /* Uniform amber label across all modules. */
  .oss-header .oss-chip .oss-chip-label {
    color: var(--oss-amber) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }
  /* Uniform readout: space-blue digits/labels like the space clock, in a
     recessed dark bezel — applies to MAIN clock, space clock, and reef.
     Captain 2026-07-08 v3.3 (job 2): #chip-reef-display REMOVED from this
     selector list — it is the INNER text span inside the #chip-reef-link
     display window, so boxing it too rendered a double bezel (box-in-box)
     on the REEF chip at >=900px. Only the wrapper gets the window. */
  .oss-header .oss-chip .oss-chip-display,
  .oss-header #chip-reef-link,
  .oss-header .oss-habitat-display {
    color: var(--oss-display-blue) !important;
    background: #0A1F2A !important;
    border: 1px solid #1f4d63 !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    text-shadow: 0 0 5px rgba(111,203,255,0.40) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.045em !important;
  }
  /* Matching slider tracks so VOL + TONE are identical width. */
  .oss-header .oss-chip input[type="range"] { width: 72px !important; height: 6px !important; }

  /* All five modules share ONE text scheme: GOLD labels + BLUE values, same
     size — so MAIN clock, space clock, reef, VOL and TONE read as one set.
     The slider values (were green) and the space-clock craft label (was a
     bigger Orbitron sky-blue) are pulled into the uniform blue readout. */
  .oss-header .oss-chip-val {
    color: var(--oss-display-blue) !important;
    font-family: var(--oss-mono) !important;
    font-size: 10.5px !important;
    text-align: center !important;
    letter-spacing: 0.045em !important;
  }
  .oss-header .oss-clock-craft-link,
  .oss-header a.oss-clock-craft-link,
  .oss-header .oss-craft-tagline {
    font-family: var(--oss-mono) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.045em !important;
    color: var(--oss-display-blue) !important;
    text-transform: none !important;
    text-shadow: 0 0 5px rgba(111,203,255,0.40) !important;
  }
}

@media (min-width: 900px) {
  /* Captain 2026-06-15: all five control modules (MAIN, space clock, reef,
     VOL, TONE) ride ONE centered, non-wrapping row; give each value display a
     shared minimum width so MAIN/reef don't look tiny next to the wider space
     clock — gold label left, blue value inside, even + balanced. */
  .oss-header-clockrow { justify-content: center !important; flex-wrap: nowrap !important; gap: 12px !important; }
  /* Captain 2026-07-08 v3.3 (job 2): #chip-reef-display removed here too —
     a min-width on the inner span padded a phantom second column inside the
     REEF display window. */
  .oss-header .oss-chip .oss-chip-display,
  .oss-header .oss-habitat-display { min-width: 58px !important; text-align: center !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Captain 2026-06-16: header chip UNIFORMITY (desktop). All 5 chips share
   one centered row at EQUAL width; gold labels on the left, blue values in
   the display. Overrides earlier per-chip sizing/color. */
@media (min-width: 900px) {
  .oss-header-clockrow {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .oss-header-clockrow .oss-chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .oss-header-clockrow .oss-chip-label,
  .oss-header-clockrow .oss-craft-label {
    color: var(--oss-amber) !important;
    font-size: 9.5px !important;
  }
  .oss-header-clockrow .oss-chip-display,
  .oss-header-clockrow .oss-chip-val,
  .oss-header-clockrow .oss-chip select,
  .oss-header-clockrow .oss-craft-tagline {
    color: var(--oss-display-blue) !important;
    font-size: 10.5px !important;
  }
  .oss-header-clockrow .oss-chip-display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   Captain 2026-06-16: full chip-text uniformity. Every text bit in every
   chip matches — only the gold LABEL differs; all value text (display, val,
   suffix, craft tagline, select) is the same blue at the same size, so the
   SPACE clock reads identically to the MAIN clock and the rest. */
@media (min-width: 900px) {
  .oss-header-clockrow .oss-chip-suffix,
  .oss-header-clockrow .oss-craft-tagline {
    color: var(--oss-display-blue) !important;
    opacity: 0.8;
    font-size: 10.5px !important;
  }
  .oss-header-clockrow .oss-chip-display,
  .oss-header-clockrow .oss-chip-val,
  .oss-header-clockrow .oss-chip select {
    font-size: 10.5px !important;
  }
  .oss-header-clockrow .oss-chip-label,
  .oss-header-clockrow .oss-craft-label {
    font-size: 9.5px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   Captain 2026-06-16: final chip uniformity — ALL labels uppercase (was a
   mix of MAIN/SPACE upper + reef/vol/tone lower) and TRUE equal width
   (overflow lets flex shrink the wider clock chips to match). */
@media (min-width: 900px) {
  .oss-header-clockrow .oss-chip { overflow: hidden; }
  .oss-header-clockrow .oss-chip-label,
  .oss-header-clockrow .oss-craft-label { text-transform: uppercase !important; }
}

/* Captain 2026-06-16: ALL FIVE clock-row chips identical width. MAIN+SPACE
   live in a 2-chip identity cell while reef/vol/tone are single chips; give
   the identity cell flex-grow 2.3 (empirically tuned incl. internal gap) so
   each of its inner chips lands at the same width as the three single chips. */
@media (min-width: 900px) {
  .oss-header-clockrow .oss-clock-identity-cell { flex: 2.3 1 0 !important; min-width: 0 !important; }
  .oss-clock-cluster { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; }
  .oss-clock-master, .oss-clock-voyager { min-width: 0 !important; }
}

/* Captain 2026-06-29: BAND 2 (MAIN + SPACE + REEF) is ONE compact, horizontally
   scrollable row per §P9.1 — NOT a vertical stack. The earlier 2026-06-16 rule
   forced `flex-direction:column`, which sprawled the clocks down the page and
   (together with the 06-19 full-width VOL/TONE rule) blew the mobile header up
   to ~8 rows, eating ~40% of the phone screen. Horizontal scroll handles any
   right-edge overflow without stacking. */
@media (max-width: 899.98px) {
  .oss-header-clockrow { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; padding: 3px 10px !important; overflow-x: auto !important; }
  .oss-header-clockrow .oss-clock-identity-cell { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  .oss-clock-cluster { flex-direction: row !important; width: auto !important; }
  .oss-clock-master, .oss-clock-voyager { width: auto !important; min-width: 0 !important; }
  .oss-header-clockrow > .oss-chip { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
}

/* Captain 2026-06-19: top-band layout - brand + reef group LEFT, sign-in pushed
   RIGHT (reef was stranded centered). SPACE label gold to match MAIN/VOL/TONE.
   Space chip shows its delta line without cutoff. */
@media (min-width:900px){
  /* TOP line = brand + VOL + TONE + sign-in. */
  nav.oss-header .oss-header-identity{ justify-content:flex-start !important; gap:12px !important; align-items:center !important; }
  nav.oss-header .oss-header-identity > .oss-header-brand{ margin-right:6px !important; flex:0 0 auto !important; }
  nav.oss-header .oss-header-identity > .oss-chip{ display:flex !important; flex:0 1 240px !important; min-width:0 !important; margin:0 !important; }
  nav.oss-header .oss-header-identity > #oss-pagenav-account,
  nav.oss-header .oss-header-identity > .oss-header-cta{ margin-left:auto !important; flex:0 0 auto !important; }
  /* CLOCK line = MAIN + SPACE + REEF, all equal-width. */
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact{ flex:1 1 0 !important; margin:0 !important; }
}
/* Captain 2026-06-29: BAND 1 (brand + VOL + TONE + Sign-in) stays ONE compact
   row — the earlier 06-19 rule stretched VOL/TONE to `flex:1 1 100%`, making
   each slider its own full-width row and sprawling the header. Keep the chips
   inline + auto-width; sliders are sized down so brand + both chips + Sign-in
   fit a ~390px phone (with horizontal scroll as a graceful fallback). The reef
   stays inline in BAND 2's scroll row, not full-width. */
@media (max-width:899.98px){
  nav.oss-header .oss-header-identity{ flex-wrap:nowrap !important; gap:7px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none !important; }
  nav.oss-header .oss-header-identity::-webkit-scrollbar{ display:none !important; }
  nav.oss-header .oss-header-identity > .oss-chip{ display:inline-flex !important; flex:0 0 auto !important; width:auto !important; height:24px !important; padding:2px 5px !important; }
  nav.oss-header .oss-header-identity > .oss-chip .oss-chip-label{ font-size:8.5px !important; letter-spacing:0.05em !important; }
  nav.oss-header .oss-header-identity > .oss-chip input[type="range"]{ height:22px !important; }
  nav.oss-header .oss-header-identity > .oss-chip input#oss-vol{ width:58px !important; }
  nav.oss-header .oss-header-identity > .oss-chip input#oss-eq{ width:44px !important; }
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact{ flex:0 0 auto !important; width:auto !important; }
  /* Captain 2026-07-02: Band 2 scrolled with a VISIBLE grey scrollbar on
     Windows Chrome (the clock row + its inner .oss-clock-cluster both get
     overflow-x:auto with no scrollbar hiding). §§P1m: bands scroll under a
     HIDDEN scrollbar - hide it on both scroll containers. */
  nav.oss-header .oss-header-clockrow, nav.oss-header .oss-clock-cluster{ scrollbar-width:none !important; -ms-overflow-style:none !important; }
  nav.oss-header .oss-header-clockrow::-webkit-scrollbar, nav.oss-header .oss-clock-cluster::-webkit-scrollbar{ display:none !important; height:0 !important; }
}
nav.oss-header .oss-header-clockrow .oss-craft-label{ color:var(--oss-amber) !important; }
nav.oss-header .oss-clock-voyager .oss-chip-display{ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }


/* Captain 2026-06-19 §P1 UNIFORM CHIPS — all five header chips identical size,
   content centered, no indicator LED. TOP line: brand + VOL + TONE + sign-in;
   CLOCK line: MAIN + SPACE + REEF (clock cell unwrapped so all three are equal
   siblings). max-width defeats the legacy flex-grow rules that stretched them. */
@media (min-width:900px){
  nav.oss-header .oss-header-clockrow{ display:flex !important; justify-content:center !important; align-items:center !important; gap:14px !important; }
  /* the clocks are nested cell > .oss-clock-cluster > chip, so flatten BOTH
     wrappers and target the chips by DESCENDANT (a direct-child selector misses
     them). This is what lets pure CSS size all five chips equally - no JS. */
  nav.oss-header .oss-header-clockrow .oss-clock-identity-cell,
  nav.oss-header .oss-header-clockrow .oss-clock-cluster{ display:contents !important; }
  nav.oss-header .oss-clock-master,
  nav.oss-header .oss-clock-voyager,
  nav.oss-header .oss-chip-reef-compact,
  nav.oss-header .oss-header-identity > .oss-chip{
    /* Captain 2026-07-05 (job 1): fixed 340px chips overflowed 900-1100px
       windows — chips are now FLUID equal-width (flex:1 1 0, capped 340px)
       so the clock row always fits the window. */
    flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:340px !important;
    justify-content:center !important; text-align:center !important;
  }
  nav.oss-header .oss-header-identity{ display:flex !important; align-items:center !important; gap:14px !important; justify-content:flex-start !important; }
  nav.oss-header .oss-header-identity > .oss-header-brand{ flex:0 0 auto !important; margin-right:4px !important; }
  nav.oss-header .oss-header-identity > #oss-pagenav-account,
  nav.oss-header .oss-header-identity > .oss-header-cta{ flex:0 0 auto !important; margin-left:auto !important; }
}
/* reef is a display chip like the clocks — no coral status LED. */
nav.oss-header .oss-chip-reef-compact #chip-reef-led{ display:none !important; }

/* SPACE label is a link — match it to the other chip labels (same font/size/weight). */
nav.oss-header .oss-clock-craft-link{ font-family:inherit !important; font-size:9.5px !important; font-weight:700 !important; letter-spacing:0.95px !important; }


/* OSS-EVENSPACE-DISPLAYBOX-20260619 — even top-row spacing + all value display-windows boxed alike
   (VOL/TONE values match the clock displays) + labels fully uniform. */
@media (min-width:900px){
  nav.oss-header .oss-header-identity{ justify-content:space-between !important; }
  nav.oss-header .oss-header-identity > .oss-header-brand{ margin-right:0 !important; }
  nav.oss-header .oss-header-identity > #oss-pagenav-account,
  nav.oss-header .oss-header-identity > .oss-header-cta{ margin-left:0 !important; }
}
nav.oss-header .oss-chip-label,
nav.oss-header .oss-clock-craft-link{
  color:#caa23c !important; font-family:ui-monospace,'JetBrains Mono',monospace !important;
  font-size:9.5px !important; font-weight:700 !important; letter-spacing:0.95px !important;
  text-transform:uppercase !important; text-decoration:none !important;
  text-shadow:1px 1px 0 #000 !important;   /* OSS-SPACELABEL-20260628: kill leftover blue space-age glow so SPACE reads like the other gold labels */
}
/* SPACE label is a link, but must look identical to the static gold labels — no blue glow / underline on hover or focus. */
nav.oss-header .oss-clock-craft-link:hover,
nav.oss-header .oss-clock-craft-link:focus{
  color:#F5C046 !important; text-shadow:1px 1px 0 #000 !important; text-decoration:none !important; outline:none !important;
}
nav.oss-header .oss-chip-val,
nav.oss-header .oss-chip-display{
  color:var(--oss-display-blue) !important; background:#0A1F2A !important; /* Captain 2026-07-05: one display blue */
  border:1px solid #1f4d63 !important; padding:2px 6px !important; border-radius:3px !important;
  font-size:10.5px !important; font-weight:600 !important; font-variant-numeric:tabular-nums !important;
  text-decoration:none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Captain 2026-06-30 — MOBILE HEADER · SINGLE AUTHORITATIVE BLOCK (last wins)
   [HISTORY] The mobile header had accumulated ~15 conflicting @media blocks
   (305/389/400/477/536/632/647/956/1017/1186/1226/1605/1632) fighting each
   other: it wrapped to ~8 rows, chips overflowed / clipped, VOL/TONE were
   mis-sized, spacing was uneven. The 06-30 block consolidated them.
   Captain 2026-07-04: that block's RULES are superseded and were removed from
   here — the single authoritative mobile block is now the v2 block at the END
   of this file (it must stay last so it wins every source-order tie). This
   comment is kept in place as history per standing practice. ════════════════ */


/* OSS-VOLTONE-BLUE-20260619 — VOL/TONE value text must be the SAME space-age blue as the
   clock displays. --oss-teal is #4DBFB8 (teal-green) at root, so target the
   value IDs directly with the clock blue (now var(--oss-display-blue),
   Captain 2026-07-05). */
nav.oss-header #oss-vol-val,
nav.oss-header #oss-eq-val{ color:var(--oss-display-blue) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Captain 2026-07-04 — MOBILE HEADER · SINGLE AUTHORITATIVE BLOCK v2 (last wins)
   Captain 2026-07-05 (lane A job 2): collapse breakpoint RAISED 640 → 899.98px
   so the 4-band compact header engages as a desktop window narrows; every
   paired min/max query in this file moved to 900/899.98 together. True-mobile
   particulars (heading wrap + 44px touch floor + §P3.4m particle halving in
   page JS) intentionally stay at <640.
   Supersedes the 2026-06-30 block (comment kept at its old ~line 1710 spot as
   history; its rules were removed). Tightened per the Captain's 390px
   screenshot review tonight:
     · VOL/TONE must not read as fat slabs — the amber border/gradient moves
       off the <input> onto a 6px visual track; the input keeps a 22px touch
       surface. Chips are a uniform ~26px tall across BOTH chip bands.
     · Uniform chip typography: 8.5px labels, 10px tabular-num value windows
       (steady widths — no jitter while dragging VOL 25→100 / TONE MID→TREBLE).
     · Sign-in pill ALWAYS fully visible: position:sticky at the right edge of
       Band 1's scroll row. No overflow:hidden on the pill (it would clip the
       639.98px block's ::after 44px tap-zone extension, which STILL applies on
       purpose — do not override it here); oss-header.js truncates the
       signed-in email prefix instead.
     · Band 2 (MAIN + SPACE + REEF) FITS 390px WITHOUT scrolling: the clock
       cell/cluster flatten via display:contents, SPACE + REEF displays
       flex-shrink + ellipsize, MAIN (the master clock) never truncates, and
       REEF is always visible.
     · Band 3 nav centered with 40px touch targets.
   This block must remain LAST in the file. ═══════════════════════════════════ */
@media (max-width: 899.98px) {
  nav.oss-header { padding: 0 !important; }

  /* every band: ONE horizontal row; hidden scrollbar where a band may scroll */
  nav.oss-header .oss-header-row {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 6px !important; padding: 4px 10px !important;
    min-height: 36px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  nav.oss-header .oss-header-row::-webkit-scrollbar { display: none !important; height: 0 !important; }

  /* ── BAND 1 — brand + VOL + TONE + Sign-in ─────────────────────────────── */
  nav.oss-header .oss-header-identity { justify-content: flex-start !important; }
  nav.oss-header .oss-header-brand { flex: 0 0 auto !important; margin: 0 !important; gap: 6px !important; }
  nav.oss-header .oss-header-brand img[src*="mascot"]   { height: 24px !important; width: auto !important; }
  nav.oss-header .oss-header-brand img[src*="wordmark"] { height: 15px !important; width: auto !important; }

  /* uniform 26px chips across BOTH chip bands */
  nav.oss-header .oss-header-identity > .oss-chip,
  nav.oss-header .oss-header-clockrow .oss-chip,
  nav.oss-header .oss-header-clockrow .oss-chip-reef-compact {
    flex: 0 0 auto !important; height: 26px !important; width: auto !important; min-width: 0 !important;
    max-width: 220px !important; margin: 0 !important; padding: 2px 6px !important; overflow: hidden !important;
  }

  /* sliders: 22px touch surface, 6px visual track (kills the slab look) */
  nav.oss-header .oss-header-identity input[type="range"] {
    height: 22px !important; border: none !important; background: transparent !important;
  }
  nav.oss-header .oss-header-identity input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; background: linear-gradient(90deg, #0a0a0a, #2a1a0a);
    border: 1px solid var(--oss-amber); border-radius: 1px;
  }
  nav.oss-header .oss-header-identity input[type="range"]::-webkit-slider-thumb { margin-top: -8px; }
  nav.oss-header .oss-header-identity input[type="range"]::-moz-range-track {
    height: 6px; background: linear-gradient(90deg, #0a0a0a, #2a1a0a);
    border: 1px solid var(--oss-amber); border-radius: 1px;
  }
  nav.oss-header .oss-header-identity input[type="range"]#oss-vol { width: 52px !important; }
  nav.oss-header .oss-header-identity input[type="range"]#oss-eq  { width: 40px !important; }

  /* Sign-in: sticky at the right edge of the scrolling band — never scrolls off */
  nav.oss-header .oss-header-cta {
    flex: 0 0 auto !important; margin-left: auto !important; min-height: 0 !important;
    position: sticky !important; right: 0 !important; z-index: 2 !important;
    padding: 4px 10px !important; font-size: 11px !important; white-space: nowrap !important;
    box-shadow: -6px 0 8px rgba(10, 37, 64, 0.85) !important; /* scrolled content fades under it */
  }

  /* ── BAND 2 — MAIN + SPACE + REEF fit 390px, NO scrolling ──────────────── */
  nav.oss-header .oss-header-clockrow {
    gap: 4px !important; padding: 4px 8px !important; overflow: hidden !important;
  }
  /* flatten the nested clock cell + cluster so all three chips are equal
     flex siblings of the row (same trick as the desktop ≥641px block) */
  nav.oss-header .oss-header-clockrow .oss-clock-identity-cell,
  nav.oss-header .oss-header-clockrow .oss-clock-cluster { display: contents !important; }
  /* MAIN (master clock) keeps its full date+time — never truncates */
  nav.oss-header .oss-header-clockrow .oss-clock-master { flex: 0 0 auto !important; max-width: none !important; }
  /* SPACE + REEF give way: shrink + ellipsis; REEF stays visible */
  nav.oss-header .oss-header-clockrow .oss-clock-voyager { flex: 0 1 auto !important; }
  nav.oss-header .oss-header-clockrow .oss-chip-reef-compact { flex: 1 1 auto !important; }
  nav.oss-header .oss-chip-reef-compact .oss-chip-label { display: none !important; }
  nav.oss-header .oss-clock-voyager .oss-chip-display,
  nav.oss-header .oss-chip-reef-compact .oss-chip-display {
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    /* Captain 2026-07-04: 116px cap so MAIN(time-only)+SPACE+REEF all
       fit 390px with no scrolling (REEF was pushed off at 170px). */
    min-width: 4ch !important; max-width: 116px !important;
  }

  /* uniform chip typography + steady value windows */
  nav.oss-header .oss-header-row .oss-chip-label { font-size: 8.5px !important; letter-spacing: 0.04em !important; }
  nav.oss-header .oss-header-row .oss-chip-display,
  nav.oss-header .oss-header-row .oss-chip-val {
    font-size: 10px !important; padding: 1px 4px !important;
    font-variant-numeric: tabular-nums !important;
  }
  nav.oss-header .oss-header-identity .oss-chip-val { text-align: center !important; }
  nav.oss-header #oss-vol-val { min-width: 3ch !important; }
  nav.oss-header #oss-eq-val  { min-width: 6ch !important; }

  /* ── BAND 3 — nav centered, 40px touch targets ─────────────────────────── */
  nav.oss-header .oss-header-nav-row { padding: 2px 8px !important; }
  nav.oss-header .oss-nav-strip {
    display: flex !important; flex-wrap: nowrap !important; justify-content: center !important;
    gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    overflow-x: auto !important; scrollbar-width: none !important;
  }
  /* "safe" keeps the left-most link reachable if the strip ever overflows
     (admin pages add a 5th link); browsers without `safe` ignore this line. */
  nav.oss-header .oss-nav-strip { justify-content: safe center !important; }
  nav.oss-header .oss-nav-strip::-webkit-scrollbar { display: none !important; }
  nav.oss-header .oss-nav-link {
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important;
    min-height: 40px !important; font-size: 12px !important; padding: 8px 12px !important;
  }
}

/* ================================================================== */
/* Captain 2026-07-05 — SHARED 3D TILE FRAME (.oss-frame3d)            */
/* One class for every wall tile: home 4-tile wall, gallery 28-tile    */
/* wall, main showcase (Spot 5), crosspost crew-pick panel — and the   */
/* BLANK tiles, so blanks read as physical empty frames on the wall.   */
/* Layered box-shadow = ambient depth + key light + gold aura, plus a  */
/* subtle top border highlight. Slight lift on hover (desktop pointers */
/* only). Navy/gold palette. Selector doubled so it wins over the      */
/* page-local .gallery-card / .gallery-piece rules that load later.    */
/* ================================================================== */
.oss-frame3d.oss-frame3d {
  position: relative;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.14),          /* top rim highlight  */
    0 0 0 1px rgba(8, 24, 40, 0.9),                   /* dark frame line    */
    0 2px 6px rgba(0, 0, 0, 0.45),                    /* key shadow         */
    0 16px 36px -12px rgba(0, 0, 0, 0.68),            /* ambient drop       */
    0 0 24px -8px rgba(202, 162, 60, 0.22);           /* faint gold aura    */
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Lift on hover — desktop fine pointers only; phones never hover-lift. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .oss-frame3d.oss-frame3d:hover {
    transform: translateY(-5px);
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 220, 0.18),
      0 0 0 1px rgba(8, 24, 40, 0.9),
      0 4px 10px rgba(0, 0, 0, 0.5),
      0 26px 48px -14px rgba(0, 0, 0, 0.75),
      0 0 30px -6px rgba(202, 162, 60, 0.32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .oss-frame3d.oss-frame3d,
  .oss-frame3d.oss-frame3d:hover { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Captain 2026-07-05 — LANE A NIGHT ORDERS (jobs 3/4/5) · keep LAST in file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Job 3: SIGN-IN PILL rebuild ─────────────────────────────────────────
   One clean pill: coral→gold gradient, navy 600-weight text, 999px radius,
   consistent height with the 30px chips, no clipped text, visible focus
   ring. Overrides every legacy padding/radius patch above (last wins). */
.oss-header .oss-header-cta,
.oss-header-identity > .oss-header-cta {
  background: linear-gradient(135deg, var(--oss-coral) 0%, var(--oss-sun) 100%) !important;
  color: var(--oss-deep) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: 1px solid rgba(10, 37, 64, 0.35) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 245, 220, 0.35) !important;
}
.oss-header .oss-header-cta:hover { filter: brightness(1.07); }
.oss-header .oss-header-cta:focus-visible {
  outline: 2px solid var(--oss-display-blue) !important;
  outline-offset: 2px !important;
}
@media (max-width: 899.98px) {
  /* compact bands: slightly smaller pill; keep the sticky right-edge fade
     from the v2 block + the 44px ::after tap zone (both still apply). */
  .oss-header .oss-header-cta {
    min-height: 26px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    box-shadow: -6px 0 8px rgba(10, 37, 64, 0.85),
                0 1px 4px rgba(0, 0, 0, 0.35) !important;
  }
}

/* ── Job 4: CHIP ANTI-FLASH — reserve chip geometry BEFORE hydration ────
   MAIN/SPACE/REEF displays get ch-based minimum widths + the clock band a
   min-height, so the placeholder text oss-header.js renders at mount is
   the SAME size as the hydrated values — zero layout shift, no flashing
   resize while oss-clock-sync.js connects. No animation on first paint. */
.oss-header-row.oss-header-clockrow { min-height: 42px; }
.oss-header .oss-clock-master .oss-chip-display   { min-width: 19ch !important; }
.oss-header .oss-clock-voyager .oss-chip-display  { min-width: 22ch !important; }
.oss-header .oss-chip-reef-compact .oss-chip-display { min-width: 20ch !important; }
.oss-header .oss-clock-master,
.oss-header .oss-clock-voyager { animation: none !important; }
@media (max-width: 899.98px) {
  .oss-header-row.oss-header-clockrow { min-height: 34px; }
  /* compact bands: MAIN is time-only (8ch); SPACE/REEF keep the v2 block's
     shrink+ellipsis behavior (116px cap) — only a floor here. */
  .oss-header .oss-clock-master .oss-chip-display   { min-width: 8ch !important; }
  .oss-header .oss-clock-voyager .oss-chip-display,
  .oss-header .oss-chip-reef-compact .oss-chip-display { min-width: 4ch !important; }
}

/* ── Job 5: CAROUSEL CONVEYOR TICK — synchronized site-wide step ────────
   window.ossCarouselTick() (oss-clock-sync.js) stamps these classes on
   every wall/gallery tile when the newest slug rolls over: a slide-left +
   settle so the whole carousel visibly advances one conveyor step together.
   Reduced-motion users get the gold frame pulse instead.
   Captain 2026-07-08 (lane C job 5): the 350ms near-linear nudge read as a
   twitch — now a 1000ms two-phase glide (deep 42% keyframe, long decel
   tail) with the GOLD PULSE riding as the settle accent (second animation,
   1000ms-delayed so it fires exactly when the tile lands). ossCarouselTick
   sets a per-animation two-value animation-delay (step, step+1000ms) and
   staggers ~40ms/tile up to 400ms in grid order, and dispatches the
   'oss:cycle' CustomEvent so the walls reload content in the SAME motion
   (FLIP re-render — see _ossFlipCapture/_ossFlipPlay in oss-clock-sync.js). */
@keyframes ossConveyorStep {
  0%   { transform: translateX(0); }
  42%  { transform: translateX(-22px); }
  100% { transform: translateX(0); }
}
.oss-carousel-step {
  animation: ossConveyorStep 1000ms cubic-bezier(0.22, 1, 0.36, 1) both,
             ossGoldFramePulse 700ms ease-out 1000ms both;
  will-change: transform;
}
@keyframes ossGoldFramePulse {
  0%   { box-shadow: 0 0 0 0 rgba(202, 162, 60, 0); }
  35%  { box-shadow: 0 0 0 3px rgba(202, 162, 60, 0.55), 0 0 18px rgba(202, 162, 60, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(202, 162, 60, 0); }
}
.oss-carousel-pulse {
  animation: ossGoldFramePulse 700ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .oss-carousel-step { animation: ossGoldFramePulse 700ms ease-out both; }
}

/* ── Hardware display chip (Member direction 2026-07-25) ────────────────
   The Live Beat / Live Pixel infograph chip rig (index.html .bi-chip:
   navy gradient body, 1.5px accent rim, 4px radius, bevel insets, mono
   type) promoted to a SHARED class for status/readout DISPLAYS across
   the site — never for action buttons or navigation.  Same custom-
   property contract as .bi-chip: --chip-accent (rim) + --chip-ink
   (text); each chip keeps its own accent color. */
.oss-display-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #1a4360 0%, #0A2540 100%);
  border: 1.5px solid var(--chip-accent, rgba(202, 162, 60, .75));
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(202, 162, 60, .18),
              inset 0 -1px 0 rgba(0, 0, 0, .5),
              1px 1px 0 rgba(0, 0, 0, .6);
  color: var(--chip-ink, #FFF5DC);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  padding: 4px 8px; line-height: 1.25;
}
/* Sold/alert state — coral accent (mirrors the old .oss-pill.sold). */
.oss-display-chip.sold {
  --chip-accent: rgba(232, 116, 95, .75); --chip-ink: #e8745f;
}

/* ==========================================================================
   Captain 2026-07-07 (SECOND PASS, v3) - TOP-BAND REGROUP + DETERMINISTIC
   CHIP GROUPING . AUTHORITATIVE (LAST IN FILE, last-wins layering practice)
   ==========================================================================
   Supersedes the 2026-07-07 first-pass "wrap-centered" tail. Three bands:
     BAND 1 .oss-header-identity : brand (subtle WATERMARK, FAR LEFT, still
              legible + clickable to Home) + AUTH cluster (Sign-in pill OR
              avatar + separate Admin pill) FAR RIGHT. justify-content:
              space-between; the MIDDLE stays OPEN/transparent so the deep-sea
              plankton creature (#oss-header-plankton, z-index:0 behind) swims
              across it. No element or solid fill occupies the middle gap.
     BAND 2 .oss-header-clockrow : DETERMINISTIC per-breakpoint grouping via
              flex `order` + explicit 100%-basis row-break elements (NOT natural
              width-wrap):
                PC  (>=760px): Row A = VOL, MAIN, TONE ; Row B = SPACE, REEF.
                MOBILE (<760): VOL+TONE | MAIN | SPACE | REEF (each centered).
              The clock cell + cluster are display:contents so MAIN + SPACE are
              INDEPENDENT flex items (MAIN rides Row A, SPACE rides Row B on PC;
              each takes its own line on mobile). DOM nesting is preserved, so
              oss-clock-sync.js's mountHeaderClocks() still finds
              '.oss-clock-master' inside #oss-clock-mount-identity via its
              per-host guard and does NOT remount a duplicate cluster.
     BAND 3 .oss-header-nav-row  : Home / Gallery / Studio / Crosspost (one
              centered row, unchanged).
   KEPT: readable content-fit chips (no truncation/ellipsis), the #6FCBFF
   display blue, the anti-flash ch floors + no-resize contract, admin/user
   separation. This block must stay LAST in the file.
   ========================================================================== */

/* Shell — no scroll, no padding on the nav itself. */
nav.oss-header { padding: 0 !important; overflow: visible !important; }

/* All three bands: flex rows, centered vertically, capped width, auto-centered. */
nav.oss-header .oss-header-row,
nav.oss-header .oss-header-row.oss-header-identity,
nav.oss-header .oss-header-row.oss-header-clockrow,
nav.oss-header .oss-header-row.oss-header-nav-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 6px 16px !important;
  overflow: visible !important;
  min-height: 0 !important;
}
nav.oss-header .oss-header-row::-webkit-scrollbar { display: none !important; }

/* ------------------------------------------------------------------ BAND 1
   Brand FAR LEFT (watermark) . AUTH FAR RIGHT . middle OPEN for the creature. */
nav.oss-header .oss-header-row.oss-header-identity {
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: relative !important;   /* #oss-header-plankton absolute-positions here */
  padding: 8px 16px !important;
}
/* Brand: subtle watermark, lower-key but legible + clickable; above plankton. */
nav.oss-header .oss-header-identity > .oss-header-brand {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 0.72 !important;
  transition: opacity 160ms ease !important;
}
nav.oss-header .oss-header-identity > .oss-header-brand:hover,
nav.oss-header .oss-header-identity > .oss-header-brand:focus-visible {
  opacity: 1 !important;
}
nav.oss-header .oss-header-brand img[src*="mascot"]   { height: 34px !important; width: auto !important; }
nav.oss-header .oss-header-brand img[src*="wordmark"] { height: 24px !important; width: auto !important; }
/* Auth cluster: FAR right, above plankton. */
nav.oss-header .oss-header-identity > .oss-header-auth {
  order: 2 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
/* Plankton band + rare creature: behind band-1 content; middle stays visible. */
nav.oss-header .oss-header-identity > #oss-header-plankton { z-index: 0 !important; }

/* AUTH AREA container - admin pill + user avatar side by side but apart. */
nav.oss-header .oss-header-auth {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}
nav.oss-header .oss-user-wrap { position: relative !important; display: inline-flex !important; }

/* ------------------------------------------------------------------ BAND 2
   Controls + clocks, DETERMINISTIC grouping (order + row-breaks). */
nav.oss-header .oss-header-row.oss-header-clockrow {
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 8px 12px !important;
  padding: 6px 16px !important;
}
/* Flatten the clock cell + cluster so MAIN + SPACE become INDEPENDENT flex
   items of the clockrow. The ID selector out-specifies the legacy <=899px
   '#oss-clock-mount-identity' rule so this wins at every width. DOM nesting is
   preserved -> oss-clock-sync.js mountHeaderClocks() still short-circuits. */
nav.oss-header .oss-header-clockrow #oss-clock-mount-identity,
nav.oss-header .oss-header-clockrow .oss-clock-identity-cell,
nav.oss-header .oss-header-clockrow .oss-clock-cluster {
  display: contents !important;
}
/* Row-break elements: 100%-basis forces the following (higher-order) items onto
   a fresh centered line. break-a is shared (PC: after Row A; mobile: after
   VOL+TONE); break-b / break-c are mobile-only. */
nav.oss-header .oss-header-clockrow > .oss-cr-break {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: none !important; pointer-events: none !important;
}

/* PC (>=760px) DETERMINISTIC ORDER:
   Row A -> VOL(10) MAIN(20) TONE(30) ; break-a(40) ; Row B -> SPACE(50) REEF(60).
   break-b / break-c are hidden so exactly TWO rows render. */
nav.oss-header .oss-header-clockrow > .oss-chip-vol      { order: 10 !important; }
nav.oss-header .oss-header-clockrow   .oss-clock-master  { order: 20 !important; }
nav.oss-header .oss-header-clockrow > .oss-chip-tone     { order: 30 !important; }
nav.oss-header .oss-header-clockrow > .oss-cr-break-a    { order: 40 !important; display: block !important; }
nav.oss-header .oss-header-clockrow   .oss-clock-voyager { order: 50 !important; }
nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact { order: 60 !important; }
nav.oss-header .oss-header-clockrow > .oss-cr-break-b,
nav.oss-header .oss-header-clockrow > .oss-cr-break-c    { display: none !important; }

/* MOBILE (<760px) stack -> see the Captain 2026-07-08 MOBILE HEADER v3.1
   block appended at END OF FILE (kept last to win equal-specificity
   layering). It reuses the PC orders above (VOL·MAIN·TONE Row 1 / SPACE
   Row 2 / REEF Row 3) and only un-hides break-b so REEF stacks below SPACE
   on mobile. */

/* UNIFORM CONTENT-FIT CHIPS — one style for VOL, TONE, MAIN, SPACE, REEF:
   ~30px tall, gold mono label, space-age-blue boxed display window. Width FITS
   the full content up to a sane max — NO ellipsis, NO clipping; a chip too wide
   for its row simply takes its own centered row. */
nav.oss-header .oss-header-row .oss-chip,
nav.oss-header .oss-clock-master,
nav.oss-header .oss-clock-voyager,
nav.oss-header .oss-chip-reef-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  height: 30px !important;
  min-height: 30px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 460px) !important;
  padding: 0 10px !important;
  margin: 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, #1a4360 0%, #0A2540 100%) !important;
  border: 1.5px solid var(--oss-amber) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(202,162,60,0.2),
              inset 0 -1px 0 rgba(0,0,0,0.5),
              1px 1px 0 rgba(0,0,0,0.6) !important;
  font-family: var(--oss-mono) !important;
  font-size: 10.5px !important;
}

/* Uniform gold mono labels (reef label un-hidden for a consistent chip). */
nav.oss-header .oss-header-row .oss-chip-label,
nav.oss-header .oss-header-row .oss-craft-label,
nav.oss-header .oss-chip-reef-compact .oss-chip-label {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--oss-sun) !important;
  font-family: var(--oss-mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-shadow: 1px 1px 0 #000 !important;
  white-space: nowrap !important;
}

/* Uniform space-age-blue boxed display window — VOL/TONE value + all clocks +
   reef habitat. Full content shown, NEVER truncated (no ellipsis, no clip). */
nav.oss-header .oss-header-row .oss-chip-display,
nav.oss-header .oss-header-row .oss-chip-val {
  color: var(--oss-display-blue) !important;
  background: #0A1F2A !important;
  border: 1px solid #1f4d63 !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  font-family: var(--oss-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.045em !important;
  text-align: center !important;
  text-decoration: none !important;
}
nav.oss-header .oss-clock-master .oss-chip-display,
nav.oss-header .oss-clock-voyager .oss-chip-display,
nav.oss-header .oss-chip-reef-compact .oss-chip-display,
nav.oss-header .oss-chip-reef-compact .oss-habitat-display {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
}
/* PT / craft suffixes read like the rest of the chip text. */
nav.oss-header .oss-header-clockrow .oss-chip-suffix {
  color: var(--oss-display-blue) !important;
  opacity: 0.8 !important;
  font-size: 10px !important;
}

/* Uniform slider tracks for VOL + TONE inside the chip band. */
nav.oss-header .oss-header-clockrow .oss-chip input[type="range"] {
  width: 72px !important;
  height: 6px !important;
  border: 1px solid var(--oss-amber) !important;
  background: linear-gradient(90deg, #0a0a0a 0%, #2a1a0a 100%) !important;
}

/* Reef LED stays hidden — reef reads like the clock chips (no status dot). */
nav.oss-header .oss-chip-reef-compact #chip-reef-led { display: none !important; }

/* ── ANTI-FLASH (keep the 2026-07-05 no-resize contract) ──────────────────
   Reserve each display window's geometry from first paint so the dash
   placeholders oss-header.js renders don't resize when oss-clock-sync.js
   hydrates. Floors are sized to the LONGEST real content so SPACE and REEF
   (full habitat name) never grow AND never clip. No first-paint animation. */
nav.oss-header .oss-header-row.oss-header-clockrow { min-height: 44px !important; }
nav.oss-header .oss-clock-master .oss-chip-display      { min-width: 12ch !important; }
nav.oss-header .oss-clock-voyager .oss-chip-display     { min-width: 24ch !important; }
nav.oss-header .oss-chip-reef-compact .oss-chip-display { min-width: 30ch !important; }
nav.oss-header .oss-clock-master,
nav.oss-header .oss-clock-voyager,
nav.oss-header .oss-chip-reef-compact { animation: none !important; }

/* ── BAND 3 — nav wraps centered; the four buttons reflow onto more rows. ── */
nav.oss-header .oss-header-nav-row .oss-nav-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
nav.oss-header .oss-nav-strip::-webkit-scrollbar { display: none !important; }
nav.oss-header .oss-nav-link {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  font-size: 12.5px !important;
  padding: 6px 14px !important;
  line-height: 1.3 !important;
}

/* ════ AUTH AREA styling — user (avatar/menu) and admin (pill) are visually
   DISTINCT so they are never confused: coral->gold Sign-in pill . round navy
   avatar thumb . navy anchor Admin pill. No email is rendered anywhere. ════ */

/* Sign-in pill: reaffirm the coral->gold 999px pill LAST. */
nav.oss-header .oss-header-cta,
nav.oss-header .oss-header-auth > .oss-header-cta {
  position: static !important;
  right: auto !important;
  background: linear-gradient(135deg, var(--oss-coral) 0%, var(--oss-sun) 100%) !important;
  color: var(--oss-deep) !important;
  font-family: var(--oss-sans) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  min-height: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: 1px solid rgba(10,37,64,0.35) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,245,220,0.35) !important;
  flex: 0 0 auto !important;
}
nav.oss-header .oss-header-cta:hover { filter: brightness(1.07); }
nav.oss-header .oss-header-cta:focus-visible {
  outline: 2px solid var(--oss-display-blue) !important;
  outline-offset: 2px !important;
}

/* Round user avatar thumb (~30px). Default = friendly octopus placeholder
   (gold on navy) with a coral "+" badge = "add a photo"; avatar_url fills it. */
nav.oss-header .oss-user-avatar {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--oss-amber) !important;
  background: radial-gradient(circle at 50% 36%, #1a4360 0%, #0A2540 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  box-shadow: inset 0 1px 0 rgba(202,162,60,0.25), 0 1px 3px rgba(0,0,0,0.4) !important;
}
nav.oss-header .oss-user-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
nav.oss-header .oss-user-avatar svg { width: 25px !important; height: 25px !important; display: block !important; }
nav.oss-header .oss-user-avatar.is-placeholder::after {
  content: '+';
  position: absolute !important;
  right: -3px !important;
  bottom: -3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--oss-coral) !important;
  color: #0A2540 !important;
  font-family: var(--oss-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #0A2540 !important;
}
nav.oss-header .oss-user-avatar:hover { filter: brightness(1.08); }
nav.oss-header .oss-user-avatar:focus-visible {
  outline: 2px solid var(--oss-display-blue) !important;
  outline-offset: 2px !important;
}

/* User popover menu — anchored under the avatar, right-aligned. */
nav.oss-header .oss-user-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 130 !important;
  min-width: 194px !important;
  padding: 6px !important;
  background: #0A2540 !important;
  border: 1px solid var(--oss-amber) !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
nav.oss-header .oss-user-menu[hidden] { display: none !important; }
nav.oss-header .oss-user-menu button,
nav.oss-header .oss-user-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 9px 11px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--oss-pearl) !important;
  font-family: var(--oss-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
/* Sparks 2026-07-25 — TAP-FEEDBACK PARITY (Member: "log out button doesn't
   highlight like the others on the dropdown"). Phones have no hover, and a
   link row (Log out / My Locker / Create one in Studio) navigates before any
   hover flash paints — only the photo BUTTON rows kept a sticky highlight
   after a tap. :active + .is-pressed (set on pointerdown by oss-header.js)
   give every row the IDENTICAL gold treatment the moment it is pressed, and
   the brand-gold -webkit-tap-highlight-color replaces the transparent one
   Tailwind's preflight sets on the Tailwind-CDN pages. */
nav.oss-header .oss-user-menu button,
nav.oss-header .oss-user-menu a {
  -webkit-tap-highlight-color: rgba(202, 162, 60, 0.25) !important;
}
nav.oss-header .oss-user-menu button:hover,
nav.oss-header .oss-user-menu a:hover,
nav.oss-header .oss-user-menu button:focus-visible,
nav.oss-header .oss-user-menu a:focus-visible,
nav.oss-header .oss-user-menu button:active,
nav.oss-header .oss-user-menu a:active,
nav.oss-header .oss-user-menu button.is-pressed,
nav.oss-header .oss-user-menu a.is-pressed {
  background: rgba(202,162,60,0.14) !important;
  color: var(--oss-sun) !important;
  outline: none !important;
}

/* Captain 2026-07-07 — the avatar file input: CSS visually-hidden (NOT
   display:none / [hidden]) so iOS + Android reliably open the picker when the
   menu's tap handler calls .click(). It stays in the DOM, focusable, 1px. */
nav.oss-header .oss-user-avatar-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}
/* Captain 2026-07-07 — inline upload result (success/error) so the Captain is
   never left guessing after a tap. */
nav.oss-header .oss-user-menu-msg {
  order: 99 !important;
  margin: 4px 4px 2px !important;
  padding: 6px 9px !important;
  font-family: var(--oss-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  border-radius: 6px !important;
  white-space: normal !important;
  cursor: default !important;
}
nav.oss-header .oss-user-menu-msg[hidden] { display: none !important; }
nav.oss-header .oss-user-menu-msg.is-error {
  color: #ffd7cf !important;
  background: rgba(232,116,95,0.16) !important;
  border: 1px solid rgba(232,116,95,0.55) !important;
}
nav.oss-header .oss-user-menu-msg.is-ok {
  color: var(--oss-display-blue) !important;
  background: rgba(111,203,255,0.12) !important;
  border: 1px solid rgba(111,203,255,0.35) !important;
}

/* Admin pill — SEPARATE navy indicator + quick-exit; only when admin_enabled.
   Visually distinct from the coral Sign-in pill and the round avatar thumb. */
nav.oss-header .oss-admin-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #143552 0%, #0A2540 100%) !important;
  border: 1.5px solid var(--oss-amber) !important;
  color: var(--oss-sun) !important;
  font-family: var(--oss-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  box-shadow: inset 0 1px 0 rgba(202,162,60,0.25), 0 1px 3px rgba(0,0,0,0.4) !important;
}
nav.oss-header .oss-admin-pill .oss-admin-anchor-icon { font-size: 12px !important; line-height: 1 !important; }
nav.oss-header .oss-admin-pill:hover { background: linear-gradient(180deg, #1a4360 0%, #0f2a44 100%) !important; filter: brightness(1.05); }
nav.oss-header .oss-admin-pill:focus-visible {
  outline: 2px solid var(--oss-display-blue) !important;
  outline-offset: 2px !important;
}

/* ── True-mobile particulars (<640): 44px touch targets. The invisible tap
   zones extend the ~30px avatar / admin pill to >=44px without changing their
   visual size (same technique as the Sign-in pill's ::after tap zone). ── */
@media (max-width: 639.98px) {
  nav.oss-header .oss-nav-link { min-height: 44px !important; padding: 8px 14px !important; }
  nav.oss-header .oss-user-avatar::before,
  nav.oss-header .oss-admin-pill::before {
    content: '' !important;
    position: absolute !important;
    inset: -7px !important;
    z-index: 1 !important;
  }
}


/* ==========================================================================
   Captain 2026-07-08 — MOBILE HEADER v3.1 UNIFORM REFINEMENT (appended LAST so
   it wins every equal-specificity layer above; CSS-only, DOM/JS unchanged).
   Refines the <760px band the first pass split as VOL+TONE / MAIN / SPACE /
   REEF (SPACE visibly wider than REEF). NEW <760px layout:
     Row 1 : VOL · MAIN · TONE  (same trio + same PC order so MAIN never jumps
             across the 760px break) — compacted to share ONE line down to ~360px.
     Row 2 : SPACE              (own centered line)
     Row 3 : REEF               (own centered line)
   SPACE and REEF render the SAME WIDTH (one shared width sized above the wider
   chip's content; the shorter is space-padded + centered — 'fill with space to
   even it out'). PC (>=760) [VOL·MAIN·TONE]/[SPACE·REEF] is untouched.
   ========================================================================== */
@media (max-width: 759.98px) {
  /* (1) REGROUP: the unconditional PC orders above already lay Row 1 as
     VOL(10) MAIN(20) TONE(30) then break-a(40); un-hiding break-b (order 55,
     between SPACE 50 and REEF 60) drops REEF onto its own line. break-a stays
     shown; break-c stays hidden.  ->  VOL·MAIN·TONE / SPACE / REEF. */
  nav.oss-header .oss-header-clockrow > .oss-cr-break-b {
    order: 55 !important; display: block !important;
  }

  /* Tighter inter-chip column gap so the trio has room on one line. */
  nav.oss-header .oss-header-row.oss-header-clockrow { gap: 8px 4px !important; }

  /* (2) COMPACT Row 1 so VOL·MAIN·TONE fit ONE line down to ~360px. NOTE: CSS
     flex line-breaking decides wrap from each item's MAX-CONTENT width (shrink
     only kicks in after the line is chosen), so the three chips' NATURAL widths
     must themselves fit ~328px at 360 — hence the aggressive trims below. These
     selectors carry ID / clockrow specificity to beat the legacy pre-v3 layer
     (#oss-vol/#oss-eq 70/60px, #oss-vol-val 3ch / #oss-eq-val 6ch, all
     !important). flex 0 1 + min-width:0 add a small shrink cushion on top. */
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-clockrow .oss-clock-master {
    padding: 0 5px !important;
    gap: 3px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  /* VOL + TONE slider tracks trimmed (beat the legacy #oss-vol 70px / #oss-eq
     60px !important via matching ID specificity + later source). */
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-eq,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-eq {
    width: 26px !important;
    min-width: 0 !important;
  }
  /* VOL/TONE value readouts compact to content (beat #oss-vol-val 3ch /
     #oss-eq-val 6ch !important). "TREBLE" is the widest TONE value; it still
     shows in full — content-fit, never clipped. */
  nav.oss-header .oss-header-clockrow #oss-vol-val,
  nav.oss-header .oss-header-clockrow #chip-vol-val,
  nav.oss-header .oss-header-clockrow #oss-eq-val,
  nav.oss-header .oss-header-clockrow #chip-eq-val {
    min-width: 0 !important;
    font-size: 8.5px !important;
    padding: 0 2px !important;
    letter-spacing: 0.02em !important;
  }
  /* MAIN display on mobile — font 10.5 -> 9px narrows the chip enough for
     the trio to share one line at 360px (ch scales with the font, so the
     19ch window shrinks with it). Member 2026-08-02: the old 8ch floor is
     raised to the full 19ch line ("23:59:59 · Δ…h") — an 8ch floor under
     the chip's flex-shrink allowance was exactly how MAIN got clipped on
     phones once Δ joined the value. */
  nav.oss-header .oss-header-clockrow .oss-clock-master .oss-chip-display {
    min-width: 19ch !important;
    font-size: 9px !important;
    padding: 2px 4px !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-master .oss-chip-suffix {
    font-size: 8.5px !important;
  }

  /* (3) SPACE + REEF EQUAL WIDTH: one shared width for both stacked chips,
     sized above the wider chip's content (REEF's longest habitat
     "California Kelp Forest · Pacific" ~279px; SPACE ~227px) and capped to the
     viewport so it never overflows a 360px phone. justify-content:center (from
     the uniform chip rule) centers each chip's content inside the shared box,
     so the shorter chip is padded with space to match — uniform, balanced,
     centered, NEITHER truncated. */
  nav.oss-header .oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact {
    width: min(92vw, 300px) !important;
    max-width: 92vw !important;
    flex: 0 0 auto !important;
    /* Captain 2026-07-08 v3.2 (change 4): LEFT-ALIGN the SPACE + REEF labels
       into ONE shared vertical column. justify-content:flex-start bumps each
       chip's gold label to the left edge; the display window then flex-fills to
       pad out the equal-width box, so both chips keep the SAME width with
       "SPACE" and "REEF" starting in the same left column. */
    justify-content: flex-start !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-chip-display,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact .oss-chip-display {
    flex: 1 1 auto !important;
  }
}


/* ==========================================================================
   Captain 2026-07-08 v3.3 (job 1) - BRAND MASTHEAD, FULL-WINDOW ONLY — PROMINENT.
   Captain: the v3.2 masthead was INVISIBLE on PC — at z-index:-1 it painted
   below the in-flow rows, and .oss-header-clockrow carries `background:inherit`
   (an opaque-navy repaint of the nav background) which blanked the whole layer
   below band 1. v3.3 keeps the z-index:-1 layering contract (chips/labels/nav
   always paint ABOVE the art, so no control text is ever obscured) and instead
   makes the layer visible + letterhead-scale:
     · clockrow background -> transparent at >=1000px (the nav's own navy is
       directly beneath it, so the band looks identical; the masthead at
       z-index:-1 now shows through the open far-left water).
     · mascot 190px + wordmark 54px, pinned to the FAR-LEFT corner, spanning
       all three header bands (rows are centered/max-width 1200px, so the
       far-left column is open water on PC; any chip overlap at the corners
       paints over the art, never under it).
     · the small in-flow .oss-header-brand IMAGES go opacity:0 at >=1000px
       (layout box + clickability + focus ring kept — zero reflow, and the
       brand anchor doubles as the click target over the masthead's crown).
   Still: anchored to .oss-header-identity (position:relative), display:none +
   fully unchanged small brand below 1000px, pointer-events:none always.
   ========================================================================== */
nav.oss-header .oss-brand-masthead { display: none !important; }
@media (min-width: 1000px) {
  nav.oss-header .oss-brand-masthead {
    display: inline-flex !important;
    align-items: flex-start !important;
    /* Captain 2026-07-09 (lane A job 1): pair scaled DOWN to a tighter
       top-left corner fit — letterhead ratios kept exactly (wordmark =
       0.762 x mascot, gap = 0.222 x, top = 0.126 x). At the 126px mascot:
       96px wordmark, 28px gap, 16px top. */
    gap: 28px !important; /* 0.222 x mascot-h, letterhead-measured */
    position: absolute !important;
    /* Captain 2026-07-10 (lane A job 1): MASTHEAD SNUG — the whole
       mascot+wordmark combo bumps tighter into the top-LEFT corner
       (4px/16px → 3px/4px, inside the ~2-6px window). Size, letterhead
       ratio and the wordmark fade are untouched; the layer stays
       absolute + z-index:-1 + pointer-events:none, so ZERO chip
       movement by construction. */
    /* Captain 2026-07-10 (lane A W5 job 2): left margin HALVED 4px → 2px
       (>=1000px masthead block only). Nothing else moves — the layer is
       absolute + z-index:-1 + pointer-events:none, so no chip, pill or
       nav link can shift by construction. */
    /* Captain 2026-07-10 (lane B W6 job 2): MASTHEAD FLUSH — size approved;
       the whole mascot+wordmark combo bumps tight to the left margin,
       left 2px → 0px (flush). Top stays 3px; nothing else moves (the
       layer is absolute + z-index:-1 + pointer-events:none — toggle-test
       verified: only the masthead shifts, every chip/pill is pixel-
       identical). */
    /* Captain 2026-07-11 (lane B W6 job 1): MASTHEAD < 1 CM FROM THE WINDOW
       EDGE AT EVERY WIDTH. The bug: this layer is absolute inside
       .oss-header-identity, which is max-width:1200px + margin:auto, so on a
       wide window the row's left edge (the masthead's containing block) is
       already (100vw-1200px)/2 in from the viewport — left:0 planted the mark
       ~360px in at 1920px, ~120px at 1440px, ~40px at 1280px. We can't move
       the DOM node or drop the row's position:relative (it anchors
       #oss-header-plankton), so instead we CANCEL the centering gap with a
       negative left. The 16px cap (not 0) leaves a hair of margin so the
       vertical-scrollbar / vw mismatch (vw counts the scrollbar, the nav's
       100% width does not) can never pull the mark OFF-screen: the offset
       lands ~8.5px in on a scrollbar'd page, at most 16px without one — both
       well under 1cm (≈38px). min(16px, calc(616px - 50vw)) holds that ≤16px
       at every width ≥1000px (below ~1232px the row already spans full width
       so the 16px cap applies; above it the negative term cancels the
       centering gap to a constant offset). Measured headless AFTER:
       8.5px from the window edge at 1280 / 1440 / 1920 (was 32.5 / 112.5 /
       352.5). Layer stays absolute + z-index:-1 + pointer-events:none, so the
       sticky header still sticks and NOTHING else moves (toggle-verified: the
       Sign-in pill's right edge + brand's left edge are pixel-identical with
       left:0 vs the new value at all three widths). */
    top: 3px !important;
    left: min(16px, calc(616px - 50vw)) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 60vw !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)) !important;
  }
  nav.oss-header .oss-masthead-mark {
    /* Captain 2026-07-09 (lane A job 1): 190px → 126px corner fit. Mascot
       stays FULL-STRENGTH — the fade below is on the wordmark only. */
    height: 126px !important;
    width: auto !important;
    display: block !important;
  }
  nav.oss-header .oss-masthead-word {
    /* Captain 2026-07-08 v3.3.1 — LETTERHEAD PROPORTIONS, measured from
       26_visual_baseline/letterhead_raster.jpg: wordmark = 0.762 x mascot
       height, gap = 0.222 x, top offset = 0.126 x (optically centered).
       Captain 2026-07-09 (lane A job 1): rescaled with the 126px mascot —
       96px wordmark, 28px gap, 16px top. Corner overlap stays blessed;
       z-index:-1 + pointer-events:none keep it painting UNDER the chips —
       it can never move or block a display. */
    height: 96px !important;
    width: auto !important;
    display: block !important;
    margin-top: 16px !important;
    /* Captain 2026-07-09 (lane A job 1): FADE-OUT treatment — the gold OSS
       wordmark BLENDS behind the chip displays instead of competing with
       them (Captain: "fade the OSS out similar to the wordmark so it
       blends behind the display elements"), like the letterhead's banner
       fade: overall reduced opacity + a right-side mask fading toward
       transparent under the chip cluster. Mascot untouched. */
    opacity: 0.58 !important;
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0) 100%) !important;
  }
  /* The opaque repaint that hid the masthead: nav's navy sits directly under
     this row, so dropping the row's own copy is visually a no-op for the band
     itself while letting the z-index:-1 masthead show through. */
  nav.oss-header .oss-header-row.oss-header-clockrow { background: transparent !important; }
  /* Small in-flow brand: keep the box + the Home click/focus target, hide the
     tiny duplicate art under the letterhead crown. No layout change. */
  nav.oss-header .oss-header-identity > .oss-header-brand img { opacity: 0 !important; }
  /* Captain 2026-07-10 (lane A job 2): SIGN-IN SNUG — the auth cluster
     (Sign-in pill / avatar + admin pill) tucks tighter into the top-RIGHT
     corner, symmetric with the masthead's corner fit on the left. The
     cluster is position:relative (set unconditionally above), so these
     top/left offsets are PAINT-ONLY relative shifts — no reflow, and the
     band-2 chips cannot move. left:+12px eats the row's 16px right
     padding down to ~4px; top:-6px lifts the centered pill to ~4px
     (avatar to ~2px) from the band top. Gated to the same >=1000px
     window as the masthead treatment. The user-menu popover is anchored
     inside .oss-user-wrap, so it rides along untouched. */
  nav.oss-header .oss-header-identity > .oss-header-auth {
    top: -6px !important;
    left: 12px !important;
  }
}

/* ==========================================================================
   Captain 2026-07-08 v3.3 (job 2) — SPACE + REEF SINGLE-LAYER GUARANTEE.
   Kills the residual doubled layers so SPACE and REEF render ONE bezel +
   ONE display window each, uniform with VOL/MAIN/TONE. Keep LAST in file.
   ========================================================================== */
/* The INNER text spans inside each display window (MAIN time, SPACE craft
   line, REEF habitat name) must be PLAIN TEXT — any legacy by-ID box rule
   (background/border/padding/min-width) rendered a second nested bezel. */
nav.oss-header .oss-chip .oss-chip-display .oss-clock-main-val,
nav.oss-header .oss-chip .oss-chip-display .oss-clock-voyager-val,
nav.oss-header .oss-chip .oss-chip-display #oss-craft-link,
nav.oss-header .oss-chip .oss-chip-display #chip-reef-display,
nav.oss-header #chip-reef-link #chip-reef-display {
  /* Captain 2026-07-08 v3.3.1 — PAINT-ONLY de-dup. The first cut also zeroed
     padding/margin/min-width/display here, which RESIZED the display windows
     and killed the anti-flash ch floors — Captain: the elements must be the
     same size as before, "those weren't supposed to move". Only the second
     bezel's PAINT is removed; geometry is untouched. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* v3.3.1: RETIRED — hiding the legacy tagline span narrowed the SPACE chip.
   Captain: geometry must match the prior build exactly, so the (empty)
   span rides again and the chip keeps its prior width. */
/* nav.oss-header .oss-chip .oss-craft-tagline { display: none !important; } */
/* ONE display-window glow for every chip at EVERY width (the pre-v3 base rule
   left a gold-tinted text-shadow on mobile while >=900px used the blue one). */
nav.oss-header .oss-header-row .oss-chip-display,
nav.oss-header .oss-header-row .oss-chip-val {
  text-shadow: 0 0 5px rgba(111, 203, 255, 0.40) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Captain 2026-07-08 (lane C job 6) — BOOMBOX RECORD transport (shared by the
   home Beat/Pixel crew popups and the Studio Beat panel; DOM built by
   window.ossBoombox in oss-header.js). OSS gold/navy deck with a cassette
   window: the reels spin while recording/playing (.running), the status LED
   blinks while recording (.recording).
   ══════════════════════════════════════════════════════════════════════════ */
.oss-boombox {
  margin-top: 8px;
  border: 1px solid rgba(202, 162, 60, 0.45);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #123252 0%, #0A2540 70%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.12),
              0 4px 12px -6px rgba(0, 0, 0, 0.6);
}
.oss-bb-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oss-bb-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(202, 162, 60, 0.55);
  background: linear-gradient(180deg, #f1d978, #c8992f);
  color: #112a43;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.06em;
}
.oss-bb-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.oss-bb-btn.rec {
  background: linear-gradient(180deg, #ff8a7a, #c8442f);
  border-color: rgba(255, 138, 122, 0.6);
  color: #2a0f0a;
}
.oss-bb-btn.ghost {
  background: rgba(248, 243, 231, 0.08);
  color: #FFF5DC;
  border-color: rgba(248, 243, 231, 0.25);
}
.oss-bb-cassette {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin: 0 0 7px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(5, 31, 38, 0.75);
  border: 1px solid rgba(202, 162, 60, 0.3);
}
.oss-bb-reel {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #caa23c;
  position: relative; flex: 0 0 auto;
  background: radial-gradient(circle, #0A2540 30%, #143552 70%);
}
.oss-bb-reel::before {
  content: ''; position: absolute; left: 50%; top: -2px;
  width: 2px; height: 8px; margin-left: -1px;
  background: #caa23c;
  transform-origin: 1px 11px;
}
.oss-boombox.running .oss-bb-reel::before { animation: ossBbSpin 1.2s linear infinite; }
@keyframes ossBbSpin { to { transform: rotate(360deg); } }
.oss-bb-tape {
  flex: 1; max-width: 110px; height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #6e5410 0 6px, #caa23c 6px 12px);
  opacity: 0.8;
}
.oss-bb-status {
  font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 245, 220, 0.75);
}
.oss-boombox.recording .oss-bb-status { color: #ff8a7a; animation: ossBbBlink 1s step-end infinite; }
@keyframes ossBbBlink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .oss-boombox.running .oss-bb-reel::before,
  .oss-boombox.recording .oss-bb-status { animation: none; }
}

/* ==========================================================================
   Captain 2026-07-10 (lane A W5 job 1) — HARD UNIFORM CHIP BLOCK GEOMETRY.
   AUTHORITATIVE — keep LAST in file (last-wins layering practice).
   Captain: "reef and space display are unstable, flashing, not uniform
   size, realign so the blocks are all uniform."
   ROOT CAUSE (confirmed): the v3 chips are CONTENT-FIT with anti-flash
   floors far below the longest real content — SPACE floor 24ch vs the
   57-char "JUICE (Jupiter Icy Moons Explorer) · 224 M km · Δ 0.208 h"
   line, REEF floor 30ch vs the 32-char "California Kelp Forest ·
   Pacific" — so every craft/reef rotation resized the chip and re-flowed
   the whole centered band; PLUS renderDeepSpaceChips wrote a SHORT
   distance string into the same node the 1s ticker rewrites LONG
   (shrink-grow flash; fixed in oss-clock-sync.js, same date).
   THE CONTRACT NOW: every one of the five chips (VOL / MAIN / TONE /
   SPACE / REEF) is a FIXED-HEIGHT block, and every value window has a
   FIXED WIDTH per breakpoint sized to the longest realistic content —
   value swaps can NEVER change any chip's geometry. Overflow beyond the
   measured longest content (defensive only) ellipsizes inside the fixed
   window instead of resizing it.
   Member 2026-08-02 ("fix the clocks … the displays are cut off"): the
   07-31 F4 ticker change made MAIN write date+time+Δ (28ch) into the
   19ch window and SPACE write craft·distance·OB (up to 62ch) into the
   57ch one — the windows below were never re-measured, so both clocks
   ellipsized. The ticker now writes the Member-specified two-fact
   strings, identical at every width, and these windows are re-measured
   to exactly those strings:
   Measured longest-content candidates (mono, tabular):
     MAIN  everywhere "23:59:59 · Δ0.0553h"                          = 19ch
     SPACE everywhere "14:03 (-1d) · 25.35 B km"                     = 24ch
                      (ship name lives in the gold label now —
                       longest short label "NEW HORIZONS" = 12ch)
     REEF  everywhere "California Kelp Forest · Pacific"             = 32ch
     VOL   "100" = 3ch · TONE "TREBLE" = 6ch
   ========================================================================== */
/* Fixed chip blocks — height is already pinned at 30px by the v3 uniform
   rule; re-assert it here so no later patch can float it. */
nav.oss-header .oss-header-row .oss-chip,
nav.oss-header .oss-clock-master,
nav.oss-header .oss-clock-voyager,
nav.oss-header .oss-chip-reef-compact {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
/* Value windows: FIXED width (not a floor), one line, defensive ellipsis.
   box-sizing:content-box keeps the ch measure = text columns (padding is
   additive), so 57ch really holds 57 mono characters. */
nav.oss-header .oss-clock-master .oss-chip-display,
nav.oss-header .oss-clock-voyager .oss-chip-display,
nav.oss-header .oss-chip-reef-compact .oss-chip-display {
  box-sizing: content-box !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
nav.oss-header .oss-clock-master .oss-chip-display {
  width: 19ch !important; min-width: 19ch !important; max-width: 19ch !important;
}
nav.oss-header .oss-clock-voyager .oss-chip-display {
  width: 24ch !important; min-width: 24ch !important; max-width: 24ch !important;
}
nav.oss-header .oss-chip-reef-compact .oss-chip-display {
  width: 32ch !important; min-width: 32ch !important; max-width: 32ch !important;
}
/* VOL / TONE value windows: fixed to their widest values (100 / TREBLE). */
nav.oss-header .oss-header-clockrow .oss-chip-val {
  box-sizing: content-box !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
nav.oss-header .oss-header-clockrow .oss-chip-vol .oss-chip-val {
  width: 3ch !important; min-width: 3ch !important; max-width: 3ch !important;
}
nav.oss-header .oss-header-clockrow .oss-chip-tone .oss-chip-val {
  width: 6ch !important; min-width: 6ch !important; max-width: 6ch !important;
}
/* The chips themselves stay content-fit AROUND their now-fixed windows —
   label + window + padding are all constant, so each BLOCK is constant.
   Cap raised so the 57ch SPACE window is never squeezed by the old
   min(92vw,460px) chip cap on PC. */
nav.oss-header .oss-clock-voyager { max-width: min(96vw, 560px) !important; }
/* The (empty, display:none'd) legacy tagline span must never add width. */
nav.oss-header .oss-clock-voyager .oss-craft-tagline { display: none !important; }

/* (Member 2026-08-02: the 760–899.98px 8ch MAIN override is GONE — the
   ticker writes the same "HH:MM:SS · Δ…h" string at every width now, so
   the one 19ch window above serves every band and nothing is cut off.) */

/* <760px — the stacked band: SPACE + REEF are the SAME fixed-width block
   (equal width, left-aligned label column, per the v3.1 layout). The
   ticker now writes the SHORT craft_label line (<=35ch) below 760px
   (oss-clock-sync.js W5), and the value windows FLEX-FILL the fixed
   chip instead of sizing it — so chip geometry is constant no matter
   which craft/reef is shown; any overrun ellipsizes inside the window. */
@media (max-width: 759.98px) {
  nav.oss-header .oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact {
    width: min(92vw, 300px) !important;
    min-width: min(92vw, 300px) !important;
    max-width: min(92vw, 300px) !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-chip-display,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact .oss-chip-display {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    text-align: left !important;
  }
  /* Member 2026-08-02: the SPACE value window is FIXED at its 24ch
     two-fact line ("14:03 (-1d) · 25.35 B km") — the facts can never be
     squeezed. The gold ship-name label yields instead: it flexes down
     and defensively ellipsizes when the longest name meets the narrowest
     band, because clipping "NEW HORIZONS" beats clipping the time. */
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-chip-display {
    flex: 0 0 auto !important;
    width: 24ch !important; min-width: 24ch !important; max-width: 24ch !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-craft-label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* MAIN mobile — Member 2026-08-02: the ticker writes the same
     "HH:MM:SS · Δ…h" 19ch line at every width now (the time-only 8ch
     mobile variant is gone), so the mobile window matches it exactly.
     The compact 9px font keeps the chip narrow enough for its band. */
  nav.oss-header .oss-header-clockrow .oss-clock-master .oss-chip-display {
    width: 19ch !important; min-width: 19ch !important; max-width: 19ch !important;
    font-size: 9px !important;
  }
  /* SPACE mobile — the gold label now carries the SHIP NAME (Member
     2026-08-02), which is wider than the old constant "SPACE"; trim the
     label a step and ease the value tracking so the 24ch two-fact line
     still clears the fixed stacked chip down to ~300px viewports. */
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-craft-label {
    font-size: 8.5px !important;
    letter-spacing: 0.06em !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-voyager .oss-chip-display {
    letter-spacing: 0.02em !important;
  }
  /* VOL / TONE mobile: same fixed 3ch / 6ch windows (compact font). The
     +~18px over the old shrink-to-content windows is paid for by the
     22px slider tracks below, so the VOL·MAIN·TONE trio still shares one
     line at 360px. */
  nav.oss-header .oss-header-clockrow .oss-chip-vol .oss-chip-val,
  nav.oss-header .oss-header-clockrow #oss-vol-val,
  nav.oss-header .oss-header-clockrow #chip-vol-val {
    width: 3ch !important; min-width: 3ch !important; max-width: 3ch !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip-tone .oss-chip-val,
  nav.oss-header .oss-header-clockrow #oss-eq-val,
  nav.oss-header .oss-header-clockrow #chip-eq-val {
    width: 6ch !important; min-width: 6ch !important; max-width: 6ch !important;
  }
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-eq,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-eq {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
  }
}
/* Captain 2026-07-10 (lane A W5 job 1) hard uniform chip geometry — end. */

/* ==========================================================================
   Captain 2026-07-10 (lane B W6 job 1) — EQUAL-WIDTH CHIP ROWS (PC >=760px).
   AUTHORITATIVE — keep LAST in file (last-wins layering practice).
   Captain: "vol, main and tone need to equal same length, width, as space
   and reef combined on the line below" — the two PC rows must read as ONE
   uniform rectangular block: identical total width, identical left/right
   edges, both centered.
   HOW: every one of the five chips gets an EXPLICIT border-box width built
   from the SAME two units (the chip's own 10.5px mono `ch` + a px constant),
   so row totals are equal BY ARITHMETIC in every font/browser:
     Row B  = SPACE(57ch+84px) + 12px gap + REEF(32ch+84px)   = 89ch + 180px
     Row A  = VOL(35ch+30px) + 12 + MAIN(19ch+96px) + 12
              + TONE(35ch+30px)                               = 89ch + 180px
   (column-gap is 12px on the PC clockrow — v3 block.)
   The wave-6 (lane A W5 job 1) fixed VALUE-WINDOW discipline is kept and
   extended: windows keep their measured ch floors (MAIN 19ch/8ch · SPACE
   57ch · REEF 32ch · VOL 3ch · TONE 6ch) and now FLEX-FILL their fixed
   chip, so the EXTRA row-A width lands exactly where ordered — in the
   VOL/TONE slider tracks and the MAIN value window. Nothing is content-
   sized: chip widths are constants, so value swaps can never change any
   geometry (anti-flash contract intact; defensive ellipsis kept).
   760–899.98px: MAIN's window is 8ch (wave-6) — VOL/TONE rebalance to
   40.5ch+30px each so equality holds band-wide; the whole block steps its
   mono to 9.5px so the pair of 89ch+180px rows still fits a 760px window.
   MOBILE (<760px) stack: untouched (media-gated below).
   ========================================================================== */
@media (min-width: 760px) {
  /* All five chips: explicit border-box widths (border+padding INSIDE the
     constant, so 3-chip row A and 2-chip row B sum with no skew). */
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  /* Row B — the reference pair (from the wave-6 57ch/32ch windows). */
  nav.oss-header .oss-header-clockrow .oss-clock-voyager {
    width: calc(57ch + 84px) !important;
    min-width: calc(57ch + 84px) !important;
    max-width: calc(57ch + 84px) !important;
  }
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact {
    width: calc(32ch + 84px) !important;
    min-width: calc(32ch + 84px) !important;
    max-width: calc(32ch + 84px) !important;
  }
  /* Row A — sized UP to match Row B exactly (see arithmetic above).
     Member order 2026-07-31 (F4): Δ moved onto MAIN, so MAIN's window
     grows 19ch → 30ch (widest line "2026-08-02 23:59:59 · Δ0.0553h") and
     VOL/TONE give back exactly half the difference each, 35ch → 29.5ch.
     Row A = 29.5 + 30 + 29.5 = 89ch + 180px — the SAME constant Row B
     is, so the equal-rows contract above survives verbatim. The 11ch
     comes out of the VOL/TONE SLIDER TRACKS (flex:1 1 auto, min 40px —
     still ~90px each at 900px), never out of a value window. */
  nav.oss-header .oss-header-clockrow .oss-clock-master {
    width: calc(30ch + 96px) !important;
    min-width: calc(30ch + 96px) !important;
    max-width: calc(30ch + 96px) !important;
  }
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone {
    width: calc(29.5ch + 30px) !important;
    min-width: calc(29.5ch + 30px) !important;
    max-width: calc(29.5ch + 30px) !important;
  }
  /* Value windows FLEX-FILL their fixed chip (ch floors kept, so content
     still never clips; the chip is a constant, so the window is too). */
  nav.oss-header .oss-clock-master .oss-chip-display,
  nav.oss-header .oss-clock-voyager .oss-chip-display,
  nav.oss-header .oss-chip-reef-compact .oss-chip-display {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  /* F4: MAIN's floor tracks its chip (19ch → 30ch, see above). */
  nav.oss-header .oss-clock-master .oss-chip-display      { min-width: 30ch !important; }
  nav.oss-header .oss-clock-voyager .oss-chip-display     { min-width: 57ch !important; }
  nav.oss-header .oss-chip-reef-compact .oss-chip-display { min-width: 32ch !important; }
  /* VOL / TONE: the extra row-A width goes into the SLIDER TRACKS (value
     windows stay fixed 3ch/6ch per wave-6). ID-carrying selectors beat the
     legacy by-ID 70/60px !important layers; class selectors cover both the
     index (#oss-*) and oss-header.js (#chip-*) mounts. */
  nav.oss-header .oss-header-clockrow .oss-chip-vol input[type="range"],
  nav.oss-header .oss-header-clockrow .oss-chip-tone input[type="range"],
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-eq,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-eq {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 40px !important;
    max-width: none !important;
  }
}
/* 760–899.98px: MAIN window is 8ch here (wave-6 + the <900px time-only
   ticker) — rebalance VOL/TONE so Row A still equals Row B, and compact
   the block's mono to 9.5px so two 89ch+180px rows fit a 760px window.
   (ch in each chip's width resolves against the chip's OWN font-size, so
   the display windows step to 9.5px with the chips — units stay aligned.) */
@media (min-width: 760px) and (max-width: 899.98px) {
  /* Member order 2026-07-31 (F4): the <900px ticker writes time-only MAIN
     plus the compact Δ — "23:59:59 Δ0.0553h" = 17 columns. 8ch → 17ch,
     VOL/TONE 40.5ch → 36ch each, so Row A = 36 + 17 + 36 = 89ch + 180px,
     still exactly Row B. */
  nav.oss-header .oss-header-clockrow .oss-clock-master {
    width: calc(17ch + 96px) !important;
    min-width: calc(17ch + 96px) !important;
    max-width: calc(17ch + 96px) !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-master .oss-chip-display {
    min-width: 17ch !important;
  }
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone {
    width: calc(36ch + 30px) !important;
    min-width: calc(36ch + 30px) !important;
    max-width: calc(36ch + 30px) !important;
  }
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact,
  nav.oss-header .oss-header-clockrow .oss-chip-display,
  nav.oss-header .oss-header-clockrow .oss-chip-val {
    font-size: 9.5px !important;
  }
}
/* Captain 2026-07-10 (lane B W6 job 1) equal-width chip rows — end. */

/* ===========================================================================
   Sparks 2026-07-20 — RESPONSIVE HEADER FINAL AUTHORITY.
   There is one MAIN clock. At compact widths the five instruments become five
   equal full-width rows; navigation remains one edge-to-edge four-button row.
   ========================================================================== */
nav.oss-header .oss-clock-master-mobile { display: none !important; }

@media (max-width: 899.98px) {
  nav.oss-header,
  nav.oss-header .oss-header-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  nav.oss-header .oss-header-identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  /* MOBILE MASTHEAD — Member order 2026-07-26: "make the oss mascot and
     wordmark larger, more like the pc site and letterhead, but stay behind
     the other elements in the background without changing their position,
     same fade pattern gradient."
     The art was a 150x68 box clipped small at a FLAT .20 opacity with a
     blur — nothing like the letterhead crown the PC header wears. It is
     now scaled 1.5x — box 150x68 -> 225x102, mark 72 -> 108, word 82 ->
     123, with the inset and the word's offsets scaled by the same factor
     so the COMPOSITION is identical, just bigger. The old .15px blur is
     dropped so the enlarged mark reads cleanly.
     THE FADE IS DELIBERATELY UNTOUCHED: this layer's letterhead gradient
     (opacity + right-to-transparent mask) is applied to the CONTAINER by
     the later max-width:899.98px block below, which owns it. Re-masking
     the wordmark here would compound two gradients and wash the gold out
     — "same fade pattern gradient" means exactly the one already there.
     POSITION SAFETY: the layer stays absolute + pointer-events:none
     inside the identity cell — it cannot move, cover, or block any chip,
     pill, or link. Verified on a 375px viewport: 0 of 12 header elements
     moved. */
  nav.oss-header .oss-header-identity > .oss-brand-masthead {
    display: block !important;
    position: absolute !important;
    inset: -15px auto auto -12px !important;
    width: 225px !important;
    height: 102px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden !important;
    filter: saturate(.9) !important;
  }
  nav.oss-header .oss-header-identity > .oss-brand-masthead .oss-masthead-mark {
    position: absolute !important;
    left: 0 !important;
    top: -3px !important;
    width: 108px !important;
    height: auto !important;
  }
  nav.oss-header .oss-header-identity > .oss-brand-masthead .oss-masthead-word {
    position: absolute !important;
    left: 87px !important;
    top: 30px !important;
    width: 123px !important;
    height: auto !important;
  }
  nav.oss-header .oss-header-identity > .oss-header-brand {
    display: inline-flex !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  nav.oss-header .oss-header-identity > .oss-header-brand img {
    opacity: 0 !important;
  }
  nav.oss-header .oss-header-identity > .oss-header-auth {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  nav.oss-header .oss-header-clockrow {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }
  nav.oss-header #oss-clock-mount-identity,
  nav.oss-header #oss-clock-mount-identity .oss-clock-cluster {
    display: contents !important;
  }
  nav.oss-header .oss-header-clockrow .oss-clock-master { display: flex !important; order: 10 !important; }
  nav.oss-header .oss-header-clockrow > .oss-chip-vol { order: 20 !important; }
  nav.oss-header .oss-header-clockrow > .oss-chip-tone { order: 30 !important; }
  nav.oss-header .oss-header-clockrow .oss-clock-voyager { order: 40 !important; }
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact { order: 50 !important; }
  nav.oss-header .oss-header-clockrow > .oss-cr-break { display: none !important; }
  nav.oss-header .oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-clockrow > .oss-chip-reef-compact {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip-label,
  nav.oss-header .oss-header-clockrow .oss-chip-suffix {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  nav.oss-header .oss-header-clockrow input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: none !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip-display,
  nav.oss-header .oss-header-clockrow .oss-chip-val {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip-vol .oss-chip-val {
    flex: 0 0 3ch !important;
    width: 3ch !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip-tone .oss-chip-val {
    flex: 0 0 6ch !important;
    width: 6ch !important;
  }
  nav.oss-header .oss-header-nav-row { padding: 0 !important; }
  nav.oss-header .oss-nav-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  nav.oss-header .oss-nav-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    text-align: center !important;
  }
}

/* ===========================================================================
   Sparks 2026-07-20b — COMPACT CASCADE REPAIR (§P1.7m).
   The FINAL AUTHORITY block above states the right compact layout but loses
   the cascade to older UNCONDITIONAL and higher-specificity rules (identity
   flex ~2039, clockrow wrap ~2102, chip centering ~2157, nav flex-wrap
   ~2251, gap/padding ~2518, MAIN 8ch pin ~2960, #oss-vol 22px pins ~2978).
   This block restates it with matching-or-higher specificity so the five
   instruments really render as five EQUAL edge-to-edge rows and the nav as
   one equal four-button row. Desktop (>=900px) is untouched.
   ========================================================================== */
@media (max-width: 899.98px) {
  /* Band 1 — the identity grid actually engages; watermark stays clipped. */
  nav.oss-header .oss-header-row.oss-header-identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
  }
  /* Band 2 — one column, no wrap, even 6px rhythm. */
  nav.oss-header .oss-header-row.oss-header-clockrow {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }
  /* Five equal instrument rows — identical width, height, and alignment. */
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-reef-compact {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* Sliders stretch inside their windows (outranks the 22px ID pins). */
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-vol,
  nav.oss-header .oss-header-clockrow input[type="range"]#oss-eq,
  nav.oss-header .oss-header-clockrow input[type="range"]#chip-eq {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: none !important;
  }
  /* Every display window fills its row and reads from the left. */
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-val {
    text-align: left !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master .oss-chip-display {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 8ch !important;
    max-width: none !important;
    font-size: 10px !important;
    text-align: left !important;
  }
  /* Nav — one equal edge-to-edge row (auto-flow fits admin's 5th link). */
  nav.oss-header .oss-header-row.oss-header-nav-row .oss-nav-strip {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
}

/* ===========================================================================
   Sparks 2026-07-20c — COMPACT POLISH (Captain's orders).
   (1) LOGOUT UN-CLIP: the identity row's overflow:hidden was swallowing the
       avatar dropdown below 900px — clicks fell through to the clock chips,
       so "Log out" neither highlighted nor fired.  The row goes back to
       overflow:visible; the watermark clips ITSELF via clip-path instead.
   (2) LETTERHEAD FADE: the mascot + wordmark watermark gradient-fades to
       the right like the letterhead instead of a flat 20% wash.
   (3) TIGHTER FIT: instrument rows 44px→36px, gap 6→4px (~50px shorter).
   (4) BLUE DISPLAYS: centered, even, FULLY visible — the 3ch/6ch pins and
       ellipsis rules were clipping "100"/"TREBLE" by one pixel.
   Desktop (>=900px) untouched.
   ========================================================================== */
@media (max-width: 899.98px) {
  nav.oss-header .oss-header-row.oss-header-identity {
    overflow: visible !important;
  }
  nav.oss-header .oss-header-identity > .oss-brand-masthead {
    /* Member 2026-07-26: scaled 1.5x with the enlarged masthead above
       (10px/8px -> 15px/12px) so the same amount of art is trimmed at the
       new size — the crown grows without the crop creeping inward. */
    clip-path: inset(15px 0 0 12px) !important;
    /* Captain 2026-07-21: darker on the LEFT to begin the letterhead
       gradient fade, matching the PC masthead treatment. */
    opacity: .7 !important;
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 32%,
      rgba(0,0,0,.3) 72%, rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 32%,
      rgba(0,0,0,.3) 72%, rgba(0,0,0,0) 100%) !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow {
    gap: 4px !important;
    padding: 4px 8px !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-reef-compact {
    flex: 0 0 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 4px 8px !important;
  }
  /* Gold labels pinned to one column so the five rows read evenly.
     Member 2026-08-02: 5ch → 12ch. The SPACE row's label now carries the
     chosen SHIP'S NAME (longest: "NEW HORIZONS" = 12ch) instead of the
     constant word "SPACE"; at 5ch the name was crushed to two letters.
     One shared width keeps the five-row column alignment the 07-20c
     block established — the display windows flex-fill the remainder of
     the full-width row, which still comfortably holds the 24ch value. */
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-label {
    /* 13ch, not 12: ch measures the "0" glyph, and the uppercase letters
       plus the 0.06em label tracking run ~5% wider — measured, "NEW
       HORIZONS" clipped its final S at exactly 12ch. */
    flex: 0 0 13ch !important;
    text-align: left !important;
  }
  /* Blue display windows: centered, no ellipsis, nothing cut. */
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-val {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-reef-compact .oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master .oss-chip-display {
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* VOL/TONE readouts — ID specificity beats the old 3ch/6ch pins. */
  nav.oss-header .oss-header-clockrow #oss-vol-val,
  nav.oss-header .oss-header-clockrow #chip-vol-val,
  nav.oss-header .oss-header-clockrow #oss-eq-val,
  nav.oss-header .oss-header-clockrow #chip-eq-val,
  nav.oss-header .oss-header-clockrow .oss-chip-vol .oss-chip-val,
  nav.oss-header .oss-header-clockrow .oss-chip-tone .oss-chip-val {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 3ch !important;
    max-width: none !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
}

/* ===========================================================================
   Sparks 2026-07-21b — COMPACT INSET (Captain: "too stretched — tighten the
   blocks in from the margins like before, blue text centered and in view").
   The instrument rows and nav pull in from the screen edges; the centered,
   fully-visible blue displays from 07-20c are kept. Desktop untouched.
   ========================================================================== */
@media (max-width: 899.98px) {
  nav.oss-header .oss-header-row.oss-header-clockrow {
    padding: 6px 16px !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-reef-compact {
    width: min(100%, 540px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  nav.oss-header .oss-header-row.oss-header-nav-row {
    padding: 0 12px 6px !important;
  }
  nav.oss-header .oss-header-row.oss-header-nav-row .oss-nav-strip {
    width: min(100%, 540px) !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }
  nav.oss-header .oss-nav-link {
    border-radius: 8px !important;
  }
}

/* ===========================================================================
   Sparks 2026-07-21c — COMPACT SQUEEZE (Captain: "about 1 cm from the
   edges"). Instrument rows + nav inset ~38px (≈1cm) per side on phones,
   still centered, blue displays unchanged. Desktop untouched.
   ========================================================================== */
@media (max-width: 899.98px) {
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-vol,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-tone,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager,
  nav.oss-header .oss-header-row.oss-header-clockrow > .oss-chip-reef-compact {
    width: min(calc(100% - 44px), 500px) !important;
  }
  nav.oss-header .oss-header-row.oss-header-nav-row .oss-nav-strip {
    width: min(calc(100% - 44px), 500px) !important;
  }
}


/* ===========================================================================
   Member order 2026-08-03 — SPACE CLOCK: "still a bug on the space clock,
   the text is sticking out past the borders it should be the same style as
   the other displays."

   ROOT CAUSE, measured on the deployed header: the SPACE display was the
   only one of the three clock windows carrying its own special-case rule —

     nav.oss-header .oss-clock-voyager .oss-chip-display{
       overflow:visible !important; text-overflow:clip !important; }

   overflow:visible means the text is NOT bounded by the window it sits in,
   so any content longer than the window paints straight out past the amber
   border instead of being contained. MAIN is fixed-format (HH:MM:SS + delta)
   and effectively never exceeds its window, which is why only SPACE showed
   it: SPACE's line is craft-dependent, and both halves vary — a distance can
   run from "89 M km" to "24,183 M km" and the craft label from JUICE to
   NEW HORIZONS. On top of that the three windows had drifted apart
   (measured: MAIN 381.9px, SPACE 401.9px; min-width 48px vs 0; max-width
   none vs 100%), so they were not the same control any more.

   This block is deliberately LAST in the file. The geometry above is ~3,600
   lines of layered !important from a dozen dated passes, and adding a
   thirteenth override higher up would just lose to the next one. One
   authoritative statement, applied identically to all three clock windows:

   1. The window CONTAINS its text — overflow hidden with an ellipsis, the
      same treatment .oss-chip-label already uses for craft names. Text can
      no longer cross the border under any content.
   2. The floors are sized to the LONGEST REAL content each window carries,
      so containing the overflow can never re-create the 2026-07-31 "displays
      are cut off" complaint — the ellipsis is a backstop, not the normal
      case. MAIN "00:00:00 · Δ12.345h" = 19ch; SPACE "00:00 · 24,183 M km"
      = 19ch, given 24ch of room; REEF carries full habitat names at 30ch.
   3. Identical width basis on all three so they read as one instrument.

   WHY THE SELECTORS ARE THIS LONG: the rule that actually won at the
   Member's width was, inside @media (max-width:899.98px),

     nav.oss-header .oss-header-row.oss-header-clockrow
       .oss-clock-voyager .oss-chip-display { overflow:visible !important }

   — five classes, so a shorter selector loses to it no matter how late it
   appears. Above 900px the clock row already contains its text (the desktop
   band sets overflow:hidden + ellipsis), which is why the spill only showed
   on narrower windows and looked like it came and went. These selectors tie
   that weight and sit last, so the whole range behaves the same way. */
nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master .oss-chip-display.oss-chip-display,
nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-display.oss-chip-display,
nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-reef-compact .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-clock-master .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-clock-voyager .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-chip-reef-compact .oss-chip-display.oss-chip-display {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-clock-master .oss-chip-display.oss-chip-display {
  min-width: 20ch !important;
}
nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-clock-voyager .oss-chip-display.oss-chip-display {
  min-width: 24ch !important;
}
nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-reef-compact .oss-chip-display.oss-chip-display,
nav.oss-header .oss-clock-cluster .oss-chip-reef-compact .oss-chip-display.oss-chip-display {
  min-width: 30ch !important;
}

/* Nothing inside a chip may paint outside its border — the craft tagline
   span still sits outside the box (it was emptied, not removed, on
   2026-06-02) and a cached render could put text back into it. */
nav.oss-header .oss-clock-master,
nav.oss-header .oss-clock-voyager,
nav.oss-header .oss-chip-reef-compact { overflow: hidden !important; }

/* Phones: the floors above are wider than a 390px chip can hold, so they
   would force the window past the chip. Below the desktop band the windows
   shrink together and the ellipsis carries whatever will not fit. */
@media (max-width: 899.98px) {
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-master .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-chip-reef-compact .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-clock-cluster .oss-clock-master .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-clock-cluster .oss-clock-voyager .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-clock-cluster .oss-chip-reef-compact .oss-chip-display.oss-chip-display {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ── Member order 2026-08-07: "space clock display is sticking outside the
   borders slightly again" (screenshot: PIONEER 11's P bleeding through the
   left border ring on desktop).
   MEASURED CAUSE — different from the 08-03 defect. The desktop chip band
   renders the display at ~15px, so the 08-03 anti-flash floor of 24ch
   computes to ~359px there; with the ship-name label (67-80px) the row
   totals more than the ~443px chip. The clock row is CENTER-justified on
   desktop, so the overflow spills out BOTH sides — the label pokes under
   the left border, the display under the right — and the 08-03
   overflow:hidden then clips it AT the ring, which reads as text sticking
   past the border. A ch-based floor is font-relative and the desktop band's
   font outgrew it.
   FIX: the floor may never exceed the room the chip actually has. The
   display floor becomes min(24ch, 100% - 100px) — 100px reserves the
   longest real craft label (NEW HORIZONS, 80px at the 9.5px label font)
   plus the gap — and the label itself gets a shrink-and-ellipsize backstop
   so even a longer future craft name stays inside the ring. Anti-flash
   holds: the floor still exceeds the widest real content line, so
   hydration never resizes the window. Applies at ≥900px only — the phone
   bands size the chip by width and measured clean. */
@media (min-width: 900px) {
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-display.oss-chip-display,
  nav.oss-header .oss-clock-cluster .oss-clock-voyager .oss-chip-display.oss-chip-display {
    min-width: min(24ch, calc(100% - 100px)) !important;
  }
  nav.oss-header .oss-header-row.oss-header-clockrow .oss-clock-voyager .oss-chip-label,
  nav.oss-header .oss-clock-cluster .oss-clock-voyager .oss-chip-label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ═══ Member order 2026-08-20 — SPACE ROW LABELS IN THE RIGHT SPOT ═══
   The Member's phone screenshot: the five instrument rows read MAIN / VOL /
   TONE / BEPICOLOMBO / REEF — a ship name sitting where every other row
   carries its control name — and the enlarged masthead octopus painted OVER
   the MAIN row's label (the absolutely-positioned .oss-brand-masthead, z 0,
   paints above the STATIC chip content below it; "behind the other
   elements" per the 7/26 order requires the chips to hold their own paint
   order, not just a lower z-index).
   The label is now two spans (oss-header.js / oss-clock-sync.js, lockstep):
   .oss-craft-kind ("SPACE") + .oss-craft-name (the ship). Desktop keeps the
   Member's 2026-08-02 rule — the ship name IS the gold label, so the kind
   span hides ≥900px. The phone band stacks SPACE over the ship name inside
   the same 13ch gold column: the row is labelled like its neighbours AND
   the chosen ship stays visible (§P1). Appended LAST per the file's own
   cascade doctrine; selectors carry ≥5 class dots; nothing below the 8/03
   marker gains overflow: visible; the 20ch/24ch display floors are
   untouched. */
@media (min-width: 900px) {
  nav.oss-header .oss-header-clockrow .oss-chip.oss-clock-voyager .oss-chip-label.oss-craft-label .oss-craft-kind {
    display: none !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip.oss-clock-voyager .oss-chip-label.oss-craft-label .oss-craft-name {
    display: inline !important;
  }
}
@media (max-width: 899.98px) {
  /* The chips take a real paint order so the masthead art stays BEHIND
     every row — position:relative creates the stacking the 7/26 order's
     "behind the other elements" always intended. No geometry changes. */
  nav.oss-header .oss-header-clockrow .oss-chip.oss-chip {
    position: relative !important;
    z-index: 1 !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip.oss-clock-voyager .oss-chip-label.oss-craft-label {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip.oss-clock-voyager .oss-chip-label.oss-craft-label .oss-craft-kind {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.14em !important;
  }
  nav.oss-header .oss-header-clockrow .oss-chip.oss-clock-voyager .oss-chip-label.oss-craft-label .oss-craft-name {
    display: block !important;
    font-size: 6.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    opacity: 0.72 !important;
    max-width: 13ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ═══ Member order 2026-08-21 — GOLD SAYS SPACE, THE CRAFT RIDES THE BLUE ═══
   "yellow text is supposed to be 'space' and the actual craft inside as
   blue text."  Supersedes the 8/02 name-as-label rule AND yesterday's 8/20
   stacked two-span arrangement: the label is the plain word SPACE on every
   width (written by renderDeepSpaceChips; both pre-renders match) and the
   craft's short name now LEADS the value string ("VOYAGER 1 · 00:42:11 ·
   25.15 B km" — tickHeaderClocks is the one writer).  The 8/20 block's
   .oss-craft-kind/.oss-craft-name rules above are inert (the spans are
   gone) and are left as history.  What the swap needs from CSS: the phone
   label column was widened to 13ch on 8/02 PRECISELY to fit ship names —
   with the longest label back to five characters, the column returns that
   width to the value window, which now carries the longest line ("NEW
   HORIZONS · 00:00:00 · 24,183 M km" = 38ch against ~43ch of window at the
   9.5px mono).  Appended LAST per the cascade doctrine; ≥5 class dots; no
   overflow: visible below the 8/03 marker; the 20ch/24ch floors stand. */
@media (max-width: 899.98px) {
  nav.oss-header .oss-header-clockrow .oss-chip.oss-chip .oss-chip-label.oss-chip-label {
    flex: 0 0 7ch !important;
    min-width: 7ch !important;
  }
}

/* ═══ Sparks 2026-08-27 — USER-MENU PAINT LIFT (Member: "the drop downs
   are hidden behind the header text").  MEASURED on the live grid-era
   phone layout, not deduced: with the popover open, elementFromPoint down
   its centre line returned oss-clock-master, the VOL slider, the TONE
   slider and oss-clock-voyager — the chip bands were painting OVER the
   menu.  WHY: BAND 1 carries `isolation: isolate`, which makes it a
   stacking context at level 0 (z-index auto), so the menu's z-index:130
   is trapped INSIDE it while the clockrow's chips sit at z-index:1 in the
   nav's context — one level above the whole band, menu included.  Raising
   z on the auth wrap or the menu itself measurably did nothing; raising
   the ROW freed all five probe points.  The fix is state-gated:
   oss-header.js puts .oss-user-menu-open on the nav ONLY while the
   popover is open, and this rule lifts BAND 1's whole context above the
   chips for exactly that window.  overflow:visible rides along for the
   header eras whose rows still clip (the 2026-08 phone block's
   overflow-x:auto rows).  Scope note for the 2026-08-03 SPACE-CLOCK
   doctrine: this selector touches the IDENTITY row only; the clockrow and
   the three clock windows keep their containment untouched. */
nav.oss-header.oss-user-menu-open .oss-header-row.oss-header-identity {
  overflow: visible !important;
  position: relative !important;
  z-index: 120 !important;
}

/* ═══ THE WORK CAPTION — ONE DEFINITION FOR BOTH WALLS ═══════════════════
   Member 2026-08-29: "the captions need to all be uniform on gallery and
   home page."

   WHAT WAS TRUE BEFORE, measured on the deployed pages: the gallery wall
   rendered its caption rows at 14px/22.4px with 11px labels, and the home
   wall rendered the same three fields at 11px/16.5px with 10px labels —
   a caption a quarter smaller, in a different family (Inter vs the
   gallery's ui-sans-serif stack).

   THE CAUSE is written in gallery.html's own margin note beside its
   readability floor: "an inline style outranks any stylesheet rule, so
   the first draft of this floor measured 11px at 375px and did nothing."
   The gallery moved its caption typography OFF inline style attributes so
   that floor could bite.  The home wall never did — it still built the
   rows with inline styles copied from the gallery's OLD values, so the
   floor could not reach it and the two walls drifted apart the moment the
   gallery's numbers moved.

   These are the gallery's RENDERED values, in a file both pages already
   link, so the home wall can stop carrying a copy of them.  A caption is
   one thing; it gets one definition. */
/* THE FACE IS NAMED, not inherited.  Measured after the sizes matched,
   the two walls still read differently: the gallery's caption came out in
   `ui-sans-serif` and the home wall's in Inter.  Neither page had chosen
   that for the caption — home sets Inter on body (with !important, so
   deliberately) and the gallery sets no body font at all, so it fell
   through to Tailwind's system stack.  BOTH pages already load Inter, so
   naming it here makes the two identical AND puts the caption on the
   brand face rather than propagating the gallery's accidental fallback. */
.cap-row, .cap-artist {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* The row's own colour is named too.  Nothing but the space between the
   label and the value actually wears it — both spans set their own — but
   it was the last measured difference between the walls (the gallery
   inherited pearl, the home wall a warmer white), and an unspanned word
   added to a row later would have rendered differently on each. */
.cap-row { font-size: 14px; line-height: 1.6; margin-top: 2px;
  color: rgba(255, 245, 220, 0.85); }
.cap-lab { color: #caa23c; font-family: ui-monospace, SFMono-Regular,
  Menlo, monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; }
.cap-val { color: rgba(255, 245, 220, 0.85); }
.cap-title { font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #F5C046; font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 0 12px rgba(202,162,60,0.15); }
.cap-artist { color: rgba(255, 245, 220, 0.6); font-size: 11px;
  margin-top: 3px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.cap-accession { font-family: ui-monospace, SFMono-Regular, Menlo,
  monospace; font-size: 9px; color: rgba(202,162,60,0.6);
  letter-spacing: 0.06em; margin-top: 3px; }

/* ══ THE WALL CARD — ONE DEFINITION FOR BOTH WALLS (Member 2026-09-03) ═══
   "captions on home page need to be identical format as Gallery page,
    they are missing the metadata etc." · "style and font same as gallery
    page captions".
   gallery.html's rules for the caption box, the rows, the footer and its
   two actions used to live in that page alone, and the home wall dressed
   its tiles with rules of its own — so the same work read at two sizes in
   two boxes with one action here and two there.  They live HERE now, for
   the gallery's .gallery-card and Home's .gallery-piece alike, and neither
   page keeps a private copy of the values.  The base .cap-* faces above
   stand; these are the card-scoped sizes the gallery always rendered. */
.gallery-card .meta, .gallery-piece .meta {
  display: flex; flex-direction: column; flex: 1;
  min-height: 218px;
  padding: 11px 13px 13px;
  background: linear-gradient(180deg, rgba(13,42,66,0.55) 0%, rgba(8,28,44,0.82) 100%);
  border-top: 1px solid rgba(255,245,220,0.12);
  box-shadow: inset 0 1px 0 rgba(255,245,220,0.09);
}
.gallery-card .caption-core, .gallery-piece .caption-core { flex: 1 1 auto; }
.gallery-card .portfolio-footer, .gallery-piece .portfolio-footer {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(202,162,60,0.22);
  display: flex; align-items: center; gap: 7px;
  min-height: 30px;
}
.gallery-card .portfolio-footer .price, .gallery-piece .portfolio-footer .price {
  flex: 0 0 auto; margin: 0; white-space: nowrap;
}
.gallery-card .portfolio-actions, .gallery-piece .portfolio-actions {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 5px;
  align-items: stretch;
}
.gallery-card .portfolio-actions a, .gallery-piece .portfolio-actions a { white-space: nowrap; }
.gallery-card .title, .gallery-piece .title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #F5C046; font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 0 12px rgba(202,162,60,0.15);
}
.gallery-card .artist, .gallery-piece .artist { color: rgba(255, 245, 220, 0.6); font-size: 11px; margin-top: 3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.gallery-card .price, .gallery-piece .price { color: #4DBFB8; font-weight: 700; font-size: 12px; margin-top: 6px; }
.gallery-card .cap-row, .gallery-piece .cap-row { font-size: 11px; line-height: 1.5; margin-top: 2px; }
.gallery-card .cap-lab, .gallery-piece .cap-lab { color: #caa23c; font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery-card .cap-val, .gallery-piece .cap-val { color: rgba(255, 245, 220, 0.85); }
.gallery-card .inquire, .gallery-piece .inquire {
  display: block; text-align: center; margin-top: 6px;
  color: #caa23c; font-size: 11px; text-decoration: none;
}
.gallery-card .inquire:hover, .gallery-piece .inquire:hover { text-decoration: underline; }
/* the phone floor gallery.html applies to its own cards, so the home
   wall's rows and actions rise the same way on the same width */
@media (max-width: 639.98px) {
  .gallery-piece .meta { min-height: 0; }
  .gallery-piece .cap-row { font-size: 14px; line-height: 1.6; }
  .gallery-piece .cap-lab { font-size: 11px; }
  .gallery-piece .portfolio-actions a {
    min-height: 44px; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-piece .portfolio-footer { gap: 9px; flex-wrap: wrap; }
}