/* ═══════════════════════════ MERIDIAN — CONSOLE THEMES ═══════════════════════════
   A registry of toggleable console skins (webapp/theme.js renders the picker). styles.css is
   token-driven — most surfaces paint from var(--bg) / --ink / --brand / --teal / --edge … — so a
   theme is mostly a redefinition of those TOKENS. This one file carries:

     1. the picker-menu chrome (token-driven, so it inherits each theme);
     2. a SHARED light-family structural layer under html[data-theme-kind="light"], which re-skins
        the ~30 surfaces styles.css paints with hardcoded DARK colours — written once, driven by
        tokens, so every light theme (Aqua Bridge, Google Material, Flybridge Hi-Vis) gets it for free;
     3. per-theme token blocks: moc, slate, aqua, google, hivis. The default "Deep Console" (dark)
        is the tokenless base in styles.css — no block here.
     Dark-family themes (moc, slate) need ONLY tokens: styles.css's dark structural surfaces already
        suit them. They add a few identity flourishes at the bottom.

   INVARIANTS
   * The GO/CAUTION/NO-GO verdict triad (--go/--caution/--nogo) and the wind ramp (--wind-r*) are
     NEVER redefined here — a comfort call and a gale band mean the same in every theme (safety).
   * TYPE FLOOR (tests/test_type_floor.py, which now lists this file): no font-size below 11px, and
     no `font:` shorthand carrying a sub-11px size, anywhere in this sheet.
   * CSS var alpha: never concatenate a 2-hex-digit alpha onto a color token; use
     color-mix(in srgb, TOKEN N%, transparent). (Guarded by test_no_dead_var_token_alpha_suffix.) */


/* ══════════════════════ 1 · PICKER MENU ══════════════════════ */
.theme-menu{
  position:fixed; z-index:1200; min-width:236px; padding:6px;
  background:var(--card,#0d1626); border:1px solid var(--edge,#16233c); border-radius:14px;
  box-shadow:var(--shadow,0 24px 80px rgba(0,0,0,.5));
  display:flex; flex-direction:column; gap:1px;
}
.theme-menu[hidden]{ display:none; }
.theme-menu .tm-h{
  font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:800; letter-spacing:1.8px;
  color:var(--faint,#7488ab); padding:6px 10px 7px;
}
.theme-menu .tm-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-radius:9px; padding:8px 10px; color:var(--ink,#e9eff8);
}
.theme-menu .tm-item:hover{ background:color-mix(in srgb, var(--ink,#fff) 8%, transparent); }
.theme-menu .tm-item:focus-visible{ outline:2px solid var(--teal,#3fd0c9); outline-offset:-2px; }
.theme-menu .tm-sw{
  flex:none; width:26px; height:26px; border-radius:7px;
  border:1px solid color-mix(in srgb, var(--ink,#fff) 22%, transparent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.theme-menu .tm-name{ flex:1; font-family:var(--disp,sans-serif); font-size:13px; font-weight:600; letter-spacing:.2px; }
.theme-menu .tm-kind{
  font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:700; letter-spacing:1px;
  color:var(--faint,#7488ab);
}
.theme-menu .tm-item[aria-checked="true"]{
  background:color-mix(in srgb, var(--brand,#f2a93b) 14%, transparent);
}
.theme-menu .tm-item[aria-checked="true"] .tm-name{ color:var(--brand,#f2a93b); font-weight:800; }
.theme-menu .tm-item[aria-checked="true"]::after{
  content:"\2713"; margin-left:2px; color:var(--brand,#f2a93b); font-weight:800; font-size:13px;
}


/* ══════════════════════ 2 · SHARED LIGHT-FAMILY STRUCTURE ══════════════════════
   Applies to every light theme via data-theme-kind. Everything here is TOKEN-driven, so the theme's
   own token block below supplies the actual hues; this layer only says "on a light ground, these
   hardcoded-dark surfaces become clean Material ones." */

html[data-theme-kind="light"] body{ background:var(--page,#f1f3f4); }

/* top bar + brand */
html[data-theme-kind="light"] .topbar{ background:var(--topbar,#fff); }
html[data-theme-kind="light"] .lock::before{ text-shadow:0 0 10px color-mix(in srgb, var(--teal) 45%, transparent); }

/* left nav rail */
html[data-theme-kind="light"] #rail{ background:var(--rail,#f8f9fa); }
html[data-theme-kind="light"] #rail .tab:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent); }
html[data-theme-kind="light"] #rail .tab.active{ background:color-mix(in srgb, var(--brand) 10%, transparent); }
html[data-theme-kind="light"] .rail-sec + .rail-sec{ border-top-color:var(--edge); }
html[data-theme-kind="light"] #rail::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand) 32%, transparent); }

/* pill tab strip (topbar fallback layout) + weather sub-nav */
html[data-theme-kind="light"] .tabs{ background:var(--page,#f1f3f4); border-color:var(--edge); }
html[data-theme-kind="light"] .tab.active{ background:color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
html[data-theme-kind="light"] .topbar .tabs{ scrollbar-color:color-mix(in srgb, var(--brand) 40%, transparent) transparent; }
html[data-theme-kind="light"] .topbar .tabs::-webkit-scrollbar-thumb,
html[data-theme-kind="light"] .tabs::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand) 40%, transparent); }
html[data-theme-kind="light"] .weather-subnav{ background:var(--rail,#f8f9fa); border-bottom-color:var(--edge); }
html[data-theme-kind="light"] .wsub.on{ background:color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }

/* content panes */
html[data-theme-kind="light"] .view-pad{ background:var(--bg); }
html[data-theme-kind="light"] .panel{ background:var(--rail,#f8f9fa); }

/* cards / boxes / KPIs — flat white Material surface; drop the dark-glass gradient + teal sheen */
html[data-theme-kind="light"] .box,
html[data-theme-kind="light"] .cmp-card,
html[data-theme-kind="light"] .now-card,
html[data-theme-kind="light"] .stub-card,
html[data-theme-kind="light"] .ob-metric,
html[data-theme-kind="light"] .cmd-hero,
html[data-theme-kind="light"] .kpi{
  background:var(--card,#fff); border:1px solid var(--edge); box-shadow:var(--soft-shadow);
}
html[data-theme-kind="light"] .box::before,
html[data-theme-kind="light"] .now-card::before{ opacity:0; }
html[data-theme-kind="light"] .bh{ border-bottom-color:var(--edge); }

/* buttons — a coloured primary pill wants white text (base rule paints near-black) */
html[data-theme-kind="light"] .btn:not(.ghost):not(.ok):not(.no){
  color:#ffffff; box-shadow:0 1px 2px rgba(60,64,67,.30);
}
html[data-theme-kind="light"] .btn:not(.ghost):not(.ok):not(.no):hover{
  box-shadow:0 1px 3px rgba(60,64,67,.30),0 4px 8px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* forms + tables */
html[data-theme-kind="light"] .fld input[type=range]{ accent-color:var(--brand); }
html[data-theme-kind="light"] .atable td{ border-bottom-color:var(--grid); }
html[data-theme-kind="light"] .atable tr:hover td{ background:color-mix(in srgb, var(--ink) 4%, transparent); }

/* modals + overlays */
html[data-theme-kind="light"] .tnt-modal{ background:var(--card,#fff); box-shadow:var(--shadow); }
html[data-theme-kind="light"] .tnt-modal-bg,
html[data-theme-kind="light"] .search-modal,
html[data-theme-kind="light"] .ob-modal{ background:rgba(32,33,36,.50); }
html[data-theme-kind="light"] .tnt-empty{ border-color:var(--edge); background:var(--rail,#f8f9fa); }
html[data-theme-kind="light"] .tnt-empty.sm{ background:transparent; }

/* tooltips — Material dark-grey tooltip on a light theme */
html[data-theme-kind="light"] .tip-pop{ background:#3c4043; border-color:#3c4043; }
html[data-theme-kind="light"] .tip-pop b{ color:#ffffff; }
html[data-theme-kind="light"] .tip-pop span{ color:#e8eaed; }
html[data-theme-kind="light"] .tip-pop::after{ border-top-color:#3c4043; }
html[data-theme-kind="light"] .tip-pop.below::after{ border-top-color:transparent; border-bottom-color:#3c4043; }

/* map + topbar icon buttons */
html[data-theme-kind="light"] .map-btn{ background:var(--card,#fff); color:var(--dim); }
html[data-theme-kind="light"] .map-btn:hover{ background:var(--page,#f1f3f4); color:var(--ink); border-color:var(--brand); }
html[data-theme-kind="light"] .search-trigger{ background:var(--card,#fff); }
html[data-theme-kind="light"] .search-trigger:hover{ border-color:var(--brand); }
html[data-theme-kind="light"] .map-divider{ background:var(--edge); }

/* comfort gauge track + attachments */
html[data-theme-kind="light"] .g-bg{ stroke:var(--gauge-track,#e8eaed); }
html[data-theme-kind="light"] .att-row{ background:var(--rail,#f8f9fa); }

/* the safety disclaimer band — theme-invariant light-red so it reads on any light ground */
html[data-theme-kind="light"] .disclaimer{ background:#fdecea; color:#b3261e; }
html[data-theme-kind="light"] .disclaimer span{ color:var(--dim); }
html[data-theme-kind="light"] .guide-doc-footer{ color:#b3261e; }

/* scrollbars */
html[data-theme-kind="light"] .view-pad::-webkit-scrollbar-thumb,
html[data-theme-kind="light"] .panel::-webkit-scrollbar-thumb,
html[data-theme-kind="light"] .tnt-modal-bd::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 30%, transparent); }


/* ══════════════════════ 3 · PER-THEME TOKEN BLOCKS ══════════════════════ */

/* ── MOC · Maritime Operations Center — a dark command deck in the VTS / naval-C2 idiom:
      near-black green-tinted ground, phosphor-green primary (radar/PPI heritage), cyan secondary,
      amber caution. Watch-optimized for low light; monospace-forward chrome. ── */
html[data-theme="moc"]{
  --bg:#07130e; --bg2:#0a1a13; --pan:#0b1f17; --pan2:#0e261c; --edge:#16382b; --grid:#122c22;
  --ink:#dbf5ea; --dim:#8fc7b3; --faint:#6fa691;
  --brand:#2fe3b0; --brand2:#66f5cf; --teal:#3fe0d6;
  /* verdict triad + wind ramp inherited from :root — untouched */
  --shadow:0 24px 80px rgba(0,0,0,.6); --soft-shadow:0 14px 40px rgba(0,0,0,.4);
  --page:#07130e; --topbar:#081a12; --rail:#061710;
}

/* ── Slate Deck — a warmer, higher-contrast dark refresh of the default (not pure black) ── */
html[data-theme="slate"]{
  --bg:#12161c; --bg2:#161b22; --pan:#1a2029; --pan2:#1f2630; --edge:#252c36; --grid:#20272f;
  --ink:#eef2f6; --dim:#a7b4c2; --faint:#7d8b9b;
  --brand:#e8b54a; --brand2:#f5cd77; --teal:#57c8c0;
  --shadow:0 24px 70px rgba(0,0,0,.5); --soft-shadow:0 12px 34px rgba(0,0,0,.4);
  --page:#0e1217; --topbar:#161b22; --rail:#0e1217;
}

/* ── HELM — the editorial LAYOUT theme (see webapp/theme-helm.css, which restructures the shell).
      Warm paper · ink · brass · deep-sea, in a luxury-yacht-brochure register. The extra tokens
      below (--serif-disp / --sans-ui / --card-solid / --line2 / --sea / --brass-ink) exist only for
      this theme's layout sheet; they are namespaced with fallbacks there so no other theme is
      affected. Display face is Georgia — installed on every target platform, so nothing is fetched
      and font-src 'self' is untouched. ── */
html[data-theme="helm"]{
  --bg:#f4f1ea; --bg2:#ece7dd; --pan:#fbf9f4; --pan2:#f0ece2; --edge:#d9d1c2; --grid:#e7e0d2;
  --ink:#1b1712; --dim:#4a4338; --faint:#8a8071;
  --brand:#a9793a; --brand2:#c9a25e; --teal:#123a4a;
  --shadow:0 34px 80px -32px rgba(37,28,15,.55); --soft-shadow:0 22px 50px -24px rgba(37,28,15,.42);
  --page:#f4f1ea; --topbar:#fbf9f4; --rail:#f4f1ea; --gauge-track:#e7e0d2;
  /* HELM-only additions consumed by theme-helm.css */
  --card:rgba(255,255,255,.68); --card-solid:#fbf9f4; --line2:#e7e0d2;
  --brass-ink:#6f4e21; --sea:#123a4a; --sea2:#1d5568;
  --serif-disp:Georgia,'Times New Roman',Cambria,'Iowan Old Style',serif;
  --sans-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --disp:var(--sans-ui); --amber:var(--brand); --body:var(--disp);
}

/* ── Aqua Bridge — brand-native LIGHT: sea-glass surfaces, deep-teal primary ── */
html[data-theme="aqua"]{
  --bg:#ffffff; --bg2:#eef4f8; --pan:#ffffff; --pan2:#eaf1f6; --edge:#d3e1ea; --grid:#e3edf3;
  --ink:#0c2430; --dim:#4a6472; --faint:#6f8b9a;
  --brand:#0b7285; --brand2:#12a5b8; --teal:#0f8ea0;
  --shadow:0 20px 60px rgba(12,36,48,.18); --soft-shadow:0 6px 18px rgba(12,36,48,.10);
  --page:#eaf1f6; --topbar:#ffffff; --rail:#eef4f8; --gauge-track:#dbe8ee;
  --disp:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --amber:var(--brand); --body:var(--disp);
}

/* ── Google Material — white + Google blue + Roboto/Google Sans ── */
html[data-theme="google"]{
  --bg:#ffffff; --bg2:#f8f9fa; --pan:#ffffff; --pan2:#f1f3f4; --edge:#dadce0; --grid:#e8eaed;
  --ink:#202124; --dim:#5f6368; --faint:#80868b;
  --brand:#1a73e8; --brand2:#4285f4; --teal:#1a73e8;
  --shadow:0 1px 3px rgba(60,64,67,.30),0 4px 12px rgba(60,64,67,.15);
  --soft-shadow:0 1px 2px rgba(60,64,67,.30),0 2px 6px rgba(60,64,67,.12);
  --page:#f1f3f4; --topbar:#ffffff; --rail:#f8f9fa; --gauge-track:#e8eaed;
  --disp:'Google Sans','Roboto','Helvetica Neue',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SF Mono','JetBrains Mono','Menlo',monospace;
  --amber:var(--brand); --body:var(--disp);
}

/* ── Flybridge Hi-Vis — daylight/outdoor: white content, navy command bar, darkened verdict hues ── */
html[data-theme="hivis"]{
  --bg:#ffffff; --bg2:#f1f5f8; --pan:#ffffff; --pan2:#eef3f7; --edge:#c6d2dc; --grid:#dbe5ec;
  --ink:#101c26; --dim:#3d5361; --faint:#63798a;
  --brand:#0c2f4a; --brand2:#14507a; --teal:#0a8ea0;
  --shadow:0 18px 50px rgba(16,28,38,.20); --soft-shadow:0 3px 10px rgba(16,28,38,.12);
  --page:#eef3f7; --topbar:#0c2f4a; --rail:#f1f5f8; --gauge-track:#dbe5ec;
  --disp:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --amber:var(--brand); --body:var(--disp);
}
/* Hi-Vis paints its top bar navy, so the brand + icons there need light ink (the shared light layer
   assumes a white bar). Scoped to just the bar. */
html[data-theme="hivis"] .topbar{ background:#0c2f4a; }
html[data-theme="hivis"] .lock, html[data-theme="hivis"] .lock b, html[data-theme="hivis"] .lock::before{ color:#eaf2f8; }
html[data-theme="hivis"] .topbar .tag{ color:#9db8cc; }
html[data-theme="hivis"] .topbar .search-trigger{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); color:#dbe8f2; }
html[data-theme="hivis"] .topbar .search-trigger:hover{ border-color:#7fb2d8; color:#fff; }


/* ══════════════════════ 4 · MOC COMMAND-DECK FLOURISHES ══════════════════════
   MOC is a dark-kind theme, so it inherits styles.css's dark structure and needs only the token
   block above. These few rules give it its command-center identity beyond a recolour. */

/* phosphor-green wordmark + eyebrow glow */
html[data-theme="moc"] .lock::before{ color:var(--brand); text-shadow:0 0 16px color-mix(in srgb, var(--brand) 80%, transparent); }
html[data-theme="moc"] .bh::before{ background:var(--brand); box-shadow:0 0 10px var(--brand); }
html[data-theme="moc"] .vh-eyebrow{ color:var(--brand); }

/* a faint radar-grid wash on the working panes — the "operations room" texture, kept very low
   contrast so it never competes with data (style-src allows this static gradient) */
html[data-theme="moc"] .panel,
html[data-theme="moc"] .view-pad{
  background-image:
    repeating-linear-gradient(0deg,   color-mix(in srgb, var(--brand) 5%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg,  color-mix(in srgb, var(--brand) 5%, transparent) 0 1px, transparent 1px 26px);
  background-attachment:local;
}

/* active nav item gets a green command-rail edge + faint fill */
html[data-theme="moc"] #rail .tab.active{ background:color-mix(in srgb, var(--brand) 12%, transparent); }
html[data-theme="moc"] #rail .tab.active::before{ background:var(--brand); box-shadow:0 0 8px var(--brand); }

/* the current-status verdict word (now-card call) reads like a watch status line */
html[data-theme="moc"] .now-call{ text-shadow:0 0 18px color-mix(in srgb, var(--go) 45%, transparent); }