/* ═══════════════════════════════════════════════════════════════════════
   MARINE INSTRUMENT — "brass over glass" naval console
   ───────────────────────────────────────────────────────────────────────
   A unified material language for every panel on marine-report.html:
   antique engraved brass bezels + Apple liquid-glass depth + etched ink
   labels + a live cyan "signal" for powered/active states.

   DESIGN LAW (so future edits stay coherent):
     • BRASS is the frame      → --br-* tokens, .brass / .brass-key
     • GLASS is the depth       → reuse the existing --lg-* bodies, never
                                   stack NEW backdrop-filter per small pill
     • INK is the label         → --ink, letterpress via .engrave
     • SIGNAL (cyan) is "alive"  → --sig, only on active/live state
     • Each layer key lights in ITS data color (--key-sig) when active.

   This file is MATERIAL-ONLY: it never changes geometry (position / size /
   flex / top / left) of existing panels — only their surface (background,
   border, shadow, color, ::before/::after texture). Loads AFTER
   bridge-pro.css so it wins at matched specificity. The LEFT RAIL's own
   look lives in marine-ocean-ui.js (its injected <style> wins at runtime),
   so the brass tokens below are consumed there too.

   Battery Contract: nothing here animates continuously. The only motion is
   event-driven (button press, SST marker easing on data refresh). No rAF,
   no setInterval, no always-on glow.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS — scoped to the marine page so nothing else is touched ─────── */
body.earth-page-marine {
  /* DEEP-OCEAN GLASS face — matches the rest of the page's glassmorphic
     chrome (no brass/gold). Translucent so the panel reads as glass over
     the map via backdrop-filter on the host element. */
  --br-metal: linear-gradient(180deg,
      rgba(15, 21, 36, 0.82) 0%, rgba(9, 13, 25, 0.90) 100%);
  --br-metal-soft: linear-gradient(180deg,
      rgba(12, 17, 30, 0.92) 0%, rgba(8, 11, 22, 0.96) 100%);
  --br-edge-hi: rgba(255, 255, 255, 0.16);   /* soft glass top bevel        */
  --br-edge-lo: rgba(0, 0, 0, 0.45);         /* underside / cut shadow      */
  --br-line:    rgba(255, 255, 255, 0.00);   /* no engraved texture on glass */
  --br-patina:  rgba(34, 211, 238, 0.06);    /* faint cyan wash in recesses */

  --ink:     rgba(216, 233, 245, 0.92);      /* cool glass label            */
  --ink-dim: rgba(172, 196, 215, 0.58);
  --ink-faint: rgba(172, 196, 215, 0.32);

  --sig:      #22d3ee;                        /* live signal cyan            */
  --sig-rgb:  34, 211, 238;
  --sig-glow: rgba(34, 211, 238, 0.55);

  --glass-well: rgba(5, 9, 15, 0.60);        /* recessed display glass      */
  --metal-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --instr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── PRIMITIVE: .brass ─ a milled metal surface (4-layer light stack) ──── */
.mi-brass {
  position: relative;
  background-image:
    /* fine engine-turned guilloché */
    repeating-linear-gradient(90deg, transparent 0 2px, var(--br-line) 2px 3px),
    var(--br-metal);
  background-blend-mode: soft-light, normal;
  border: 1px solid transparent;
  box-shadow:
    0 1px 0 var(--br-edge-hi) inset,        /* top catch-light  */
    0 -1px 0 var(--br-edge-lo) inset,       /* underside shade  */
    inset 0 0 12px rgba(0, 0, 0, 0.38),     /* recess AO        */
    0 6px 18px rgba(0, 0, 0, 0.50);         /* lift off the map */
}
.mi-brass::after {                           /* 1px cut-edge ring */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--br-edge-lo);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ── PRIMITIVE: letterpress engraving for text ───────────────────────── */
.mi-engrave {
  color: var(--ink);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10),       /* cool highlight below */
    0 -1px 0 rgba(0, 0, 0, 0.50);            /* shadow above         */
  letter-spacing: 0.10em;
}
.mi-engrave-dim { color: var(--ink-dim); }

/* ── PRIMITIVE: illuminated gauge window (recessed backlit display) ───── */
.mi-gauge {
  position: relative;
  background: var(--glass-well);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 var(--br-edge-hi);
  color: var(--ink);
  font-family: var(--bp-mono, 'JetBrains Mono', monospace);
}
.mi-gauge::before {                          /* glass top sliver */
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: 4px 4px 30% 30% / 4px 4px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}

/* ── PRIMITIVE: scored seam (engraved groove between sections) ────────── */
.mi-seam {
  height: 2px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--br-edge-lo) 0 1px, var(--br-edge-hi) 1px 2px);
  opacity: 0.6;
  margin: 6px 9px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SST THERMOMETER — the hero instrument. Built inside #mr-layer-rail by
   marine-ocean-ui.js. A mercury-style brass-cased column: the SST gradient
   is the permanent scale (warm top → cold bottom), with engraved numerals
   and a live brass marker that eases to the current aggregate SST.
   ═══════════════════════════════════════════════════════════════════════ */
#mr-thermo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;            /* never spill out of the faceplate */
  padding: 4px 5px 2px;
  gap: 4px;
}
/* head: tiny label + illuminated value window */
#mr-thermo .mi-th-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
#mr-thermo .mi-th-label {
  font: 700 0.42rem/1 var(--bp-mono, monospace);
  letter-spacing: 0.16em;
}
#mr-thermo .mi-th-val {
  padding: 2px 4px 1px;
  min-width: 34px;
  text-align: center;
  font: 700 0.62rem/1 var(--bp-mono, monospace);
  text-shadow: 0 0 6px var(--sig-glow);
  color: #eaf9fc;
}
/* body: tube + scale share a row */
#mr-thermo .mi-th-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;               /* shrink rather than overflow on short rails */
  display: flex;
  gap: 3px;
  padding: 2px 0;
}
/* the brass-cased glass tube holding the thermal gradient */
#mr-thermo .mi-th-tube {
  position: relative;
  width: 16px;
  flex: 0 0 16px;
  border-radius: 8px;
  /* SST gradient — WARM at top, COLD at bottom (heat rises) */
  background: linear-gradient(180deg,
      #c2343b 0%, #eb8034 16%, #f2c94c 32%,
      #69c97a 52%, #2d9fc2 72%, #3b5ba8 88%, #2c1e5a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 2px 0 4px rgba(0, 0, 0, 0.45),     /* cylindrical wall shadow */
    inset -1px 0 2px rgba(255, 255, 255, 0.10),
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 0 0 3px var(--br-edge-lo);
}
#mr-thermo .mi-th-tube::before {             /* curved-glass specular */
  content: "";
  position: absolute;
  left: 3px; top: 4px; bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.06));
  filter: blur(0.4px);
  pointer-events: none;
}
/* the live marker — a brass pointer riding the tube, eased by JS */
#mr-thermo .mi-th-marker {
  position: absolute;
  left: -2px;
  width: 22px;
  height: 0;
  top: 50%;                                   /* JS overrides via --th-pos */
  top: var(--th-pos, 50%);
  transform: translateY(-50%);
  transition: top 600ms var(--instr-ease);
  pointer-events: none;
  z-index: 3;
}
#mr-thermo .mi-th-marker::before {            /* the etched arrow */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--sig);
  filter: drop-shadow(0 0 4px var(--sig-glow));
}
#mr-thermo .mi-th-marker::after {             /* signal line across tube */
  content: "";
  position: absolute;
  left: 6px; right: 0; top: 50%;
  height: 1px;
  background: var(--sig);
  box-shadow: 0 0 5px var(--sig-glow);
  opacity: 0.8;
}
/* scale: engraved numerals beside the tube */
#mr-thermo .mi-th-scale {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0;
}
#mr-thermo .mi-th-tick {
  font: 600 0.40rem/1 var(--bp-mono, monospace);
  white-space: nowrap;
  position: relative;
  padding-left: 5px;
}
#mr-thermo .mi-th-tick::before {              /* engraved tick mark */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 1px;
  background: var(--br-edge-hi);
  box-shadow: 0 1px 0 var(--br-edge-lo);
}
/* maker's mark at the foot */
#mr-thermo .mi-th-mark {
  flex: 0 0 auto;
  text-align: center;
  font: 600 0.32rem/1.1 var(--bp-mono, monospace);
  letter-spacing: 0.14em;
  padding-top: 2px;
}
/* when SST layer is OFF, dim the thermometer (instrument idle, not lying) */
#mr-layer-rail.mi-sst-off #mr-thermo { opacity: 0.42; filter: saturate(0.5); }

/* The faceplate thermometer IS the SST legend now — retire the orphaned
   floating legend the user flagged as "hanging in the middle of nowhere." */
body.earth-page-marine #bridge-conditions-legend { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   STRIP SKIN (#bp-status-strip) — brass console lip. MATERIAL ONLY.
   ═══════════════════════════════════════════════════════════════════════ */
body.earth-page-marine #bp-status-strip {
  border-bottom: 1px solid var(--br-edge-lo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.0),
    0 1px 0 var(--br-edge-hi),               /* brass bottom bevel */
    0 7px 22px rgba(0, 0, 0, 0.5);
}
/* stat pills → illuminated gauge windows */
body.earth-page-marine #bp-status-strip .bp-tile {
  background: var(--glass-well) !important;
  border: 1px solid var(--br-edge-lo) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.6),
    0 1px 0 var(--br-edge-hi) !important;
  border-radius: 5px !important;
}
body.earth-page-marine #bp-status-strip .bp-tile-label,
body.earth-page-marine #bp-status-strip .bp-tile-k {
  color: var(--ink-dim) !important;
  letter-spacing: 0.12em;
}

/* ── ENSO: half-size + ⓘ plain-language explainer ────────────────────── */
body.earth-page-marine #mr-strip-extras #ocean-enso.mr-enso-compact {
  position: relative;                /* anchor the explainer to the pill */
  font-size: 0.5rem !important;
  padding: 2px 7px !important;
  gap: 4px !important;
}
body.earth-page-marine #mr-strip-extras #ocean-enso.mr-enso-compact .enso-tag {
  letter-spacing: 0.08em;
}
/* the ⓘ glyph sits INSIDE the ENSO button */
#ocean-enso .mr-enso-i {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.50);
  color: #9fe9f4;
  font: italic 700 8px/1 Georgia, 'Times New Roman', serif;
  margin-left: 1px;
}
#ocean-enso:hover .mr-enso-i { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.75); }
#mr-enso-explain {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                          /* anchor to pill's right edge (it sits at the strip edge) */
  left: auto;
  width: 252px;
  max-width: 80vw;
  background: rgba(8, 12, 20, 0.97);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  z-index: 1200;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#mr-enso-explain.on { display: block; }
#mr-enso-explain .mee-h {
  font: 700 0.56rem/1.2 var(--bp-mono, monospace);
  letter-spacing: 0.08em;
  color: #9fe9f4;
  margin-bottom: 5px;
}
#mr-enso-explain .mee-b { font-size: 0.62rem; line-height: 1.5; color: rgba(220, 232, 242, 0.9); }
#mr-enso-explain .mee-b b { color: #eaf7fb; font-weight: 700; }

/* ── INLINE READINGS CLUSTER — compact, scrolls, no hamburger ─────────────
   The readings (stat tiles + ENSO) live INLINE in the second bar as one
   compact cluster. It takes the flexible middle and scrolls horizontally if
   the tiles overflow a narrow phone — nothing wraps, clips, or hides in a
   popup. HARBOR LIVE, the ticker and the ^/×/gear controls stay pinned. */
#mr-stats-group {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
#mr-stats-group::-webkit-scrollbar { display: none; }

/* the tile BOX flows to content & lets the cluster own the scroll (the page's
   mobile rule pins it to width:100%/overflow:hidden which would clip tiles).
   order:0 keeps the tiles BEFORE ENSO — the page sets #bp-tiles order:1 on
   mobile which otherwise flips ENSO in front of the important readings. */
body.earth-page-marine #mr-stats-group #bp-tiles {
  order: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
body.earth-page-marine #mr-stats-group #ocean-enso { order: 1 !important; }

/* tiles size to their OWN content so a value never overflows its pill
   (fixes "VESSELS 200" spilling its box) */
body.earth-page-marine #mr-stats-group .bp-tile {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.earth-page-marine #mr-stats-group .bp-tile .bp-tile-value,
body.earth-page-marine #mr-stats-group .bp-tile .bp-tile-label {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* ENSO carries its own absolute positioning from ocean-enso.js (top:130px;
   left:50%). Inside the cluster, force it inline (relative, no offsets) at ALL
   widths — otherwise on desktop it floats into the middle of the map. Relative
   (not static) keeps it as the positioning context for its ⓘ explainer. */
#mr-stats-group #ocean-enso {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto;
}

/* ── narrow widths: keep ONE row, ticker yields first, compact the readings ── */
@media (max-width: 1180px) {
  /* keep the strip a single horizontal row (override the page's column-stack) */
  body.earth-page-marine #bp-status-strip {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: var(--bp-strip-h, 36px) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.earth-page-marine #bp-status-strip .bp-strip-nav,
  body.earth-page-marine #bp-status-strip .bp-strip-state {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    align-items: center !important;
    order: 0 !important;
  }
  body.earth-page-marine #bp-status-strip .bp-strip-state {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* the rotating ticker yields space first — readings matter more */
  body.earth-page-marine #bp-ticker {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 36vw !important;
    width: auto !important;
    position: static !important;
    order: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) {
  /* compact the readings so more fit before any horizontal scroll kicks in */
  body.earth-page-marine #mr-stats-group { gap: 5px; }
  body.earth-page-marine #mr-stats-group .bp-tile { padding: 0 4px !important; }
  body.earth-page-marine #mr-stats-group .bp-tile .bp-tile-label {
    font-size: 0.34rem !important; letter-spacing: 0.05em !important;
  }
  body.earth-page-marine #mr-stats-group .bp-tile .bp-tile-value { font-size: 0.6rem !important; }
  body.earth-page-marine #mr-stats-group #ocean-enso.mr-enso-compact {
    font-size: 0.46rem !important; padding: 2px 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM DECK SKIN (#bp-deck-*) — brass deck rail with engraved readouts.
   ═══════════════════════════════════════════════════════════════════════ */
body.earth-page-marine #bp-compass-strip,
body.earth-page-marine #bp-deck-left,
body.earth-page-marine #bp-deck-center,
body.earth-page-marine #bp-deck-right {
  text-shadow:
    0 1px 0 rgba(255, 248, 220, 0.10),
    0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
/* iPad: trim thermometer numerals breathing room */
@media (max-width: 1024px) {
  #mr-thermo .mi-th-tick { font-size: 0.38rem; }
}
/* iPhone portrait: slim ribbon — hide numerals, keep the colored column */
@media (max-width: 767px) {
  #mr-thermo { padding: 3px 3px 1px; }
  #mr-thermo .mi-th-scale { display: none; }
  #mr-thermo .mi-th-tube { width: 12px; flex-basis: 12px; }
  #mr-thermo .mi-th-mark { display: none; }
  #mr-thermo .mi-th-val { font-size: 0.54rem; min-width: 0; }
}
/* Short viewports (landscape phone): the column would overflow — hide the
   thermometer body, keep only the head value chip. Toggle bank stays. */
@media (max-height: 600px) {
  #mr-thermo .mi-th-body,
  #mr-thermo .mi-th-mark { display: none; }
}

/* ── ACCESSIBILITY ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #mr-thermo .mi-th-marker { transition: none; }
}
@media (prefers-contrast: more) {
  body.earth-page-marine {
    --ink: rgba(255, 250, 235, 1);
    --br-line: rgba(255, 245, 200, 0.28);
  }
  .mi-brass { background-image: var(--br-metal); }   /* drop texture for clarity */
}