/*
 * VAAYU — the portal palette, both themes, in one place.
 *
 * Every page used to carry its own copy of these tokens. Four copies of a
 * palette drift, and the drift shows up as one page calling a tyre green while
 * another calls the same reading amber — so the tokens live here and the pages
 * carry only layout.
 *
 * Dark is not an automatic inversion of light. The status hues, the chart series
 * and the accent are each stepped for the surface they sit on: #22C55E reads at
 * 2.2:1 on white and #15803D reads at 2.9:1 on #0F1628, so neither palette can
 * borrow the other's greens. Both series pairs are validated against their own
 * surface (adjacent ΔE 24.7 protan on white, 26.8 on the dark surface).
 *
 * How the theme is chosen, in order:
 *   1. data-theme="light|dark" on <html>, written by the toggle and remembered
 *      in localStorage. An inline snippet in each page's <head> stamps it before
 *      first paint, so the page never flashes the wrong theme.
 *   2. the OS setting, for a viewer who has never touched the toggle.
 *   3. light, as the base declaration here.
 */

:root {
  color-scheme: light;

  /* Surfaces and ink */
  --bg:         #EEF1F7;
  --panel:      #FFFFFF;
  --panel-mid:  #F4F6FB;
  --border:     rgba(15,35,80,0.12);
  --shadow:     0 1px 2px rgba(15,35,80,0.05);
  --text-hi:    #0B1B33;
  --text-mid:   #4C5C75;
  --text-lo:    #6E7F99;

  /* Accent, and the tints built from it for hover and pressed states */
  --accent:            #2563EB;
  --accent-soft:       #60A5FA;
  --hover-tint:        rgba(37,99,235,0.08);
  --press-tint:        rgba(37,99,235,0.12);
  --press-tint-strong: rgba(37,99,235,0.16);
  --chip:              rgba(15,35,80,0.06);

  /* Status. Reserved for state; never used for series identity. */
  --green:     #15803D;
  --green-dim: rgba(21,128,61,0.12);
  --amber:     #B45309;
  --amber-soft:#F59E0B;
  --red:       #DC2626;
  --red-soft:  #EF4444;

  /* Risk bands, and the plates they sit on */
  --risk-low: #15803D; --band-low-bg: rgba(21,128,61,0.10);
  --risk-watch: #B45309; --band-watch-bg: rgba(180,83,9,0.10);
  --risk-elevated: #C2410C; --band-elevated-bg: rgba(194,65,12,0.12);
  --risk-critical: #DC2626; --band-critical-bg: rgba(220,38,38,0.12);

  /* Chart ink, read at draw time by vaayu-charts.js. --surface is what the
     endpoint marker's ring is drawn in, so it must match the panel behind it. */
  --surface: #FFFFFF;
  --grid:    rgba(15,35,80,0.10);
  --series-pressure: #2a78d6;
  --series-temp:     #eb6834;

  /* The vehicle and rig drawings. On a near-white ground the silhouette needs
     its own outline — the panel hairline leaves the car invisible. */
  --car-body:    #FFFFFF;
  --car-outline: rgba(15,35,80,0.28);
  --tyre:        #475569;
  /* Labels sit on the tyre itself, which is dark in both themes. */
  --tyre-ink:    #FFFFFF;
  --lamp:        rgba(11,27,51,0.22);
  --glass-strong: rgba(37,99,235,0.20);
  --glass-mid:    rgba(37,99,235,0.17);
  --glass-soft:   rgba(37,99,235,0.09);

  /* Map marker and the tread-scale ticks */
  --marker:      #2563EB;
  --marker-glow: rgba(37,99,235,0.55);
  --marker-halo: rgba(37,99,235,0.15);
  --tick:        rgba(15,35,80,0.35);
  --tick-legal:  rgba(220,38,38,0.55);
}

/* The OS setting, for a viewer who has not chosen. The :not() guard lets an
   explicit light choice win over an OS set to dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:         #080D1A;
    --panel:      #0F1628;
    --panel-mid:  #141D35;
    --border:     rgba(59,130,246,0.15);
    --shadow:     none;
    --text-hi:    #EEF2FF;
    --text-mid:   #94A3B8;
    --text-lo:    #4B5A72;

    --accent:            #3B82F6;
    --accent-soft:       #60A5FA;
    --hover-tint:        rgba(59,130,246,0.08);
    --press-tint:        rgba(59,130,246,0.12);
    --press-tint-strong: rgba(59,130,246,0.16);
    --chip:              rgba(148,163,184,0.12);

    --green:     #22C55E;
    --green-dim: rgba(34,197,94,0.15);
    --amber:     #F59E0B;
    --amber-soft:#FCD34D;
    --red:       #EF4444;
    --red-soft:  #F87171;

    --risk-low: #22C55E; --band-low-bg: rgba(34,197,94,0.15);
    --risk-watch: #F59E0B; --band-watch-bg: rgba(245,158,11,0.15);
    --risk-elevated: #FB923C; --band-elevated-bg: rgba(251,146,60,0.15);
    --risk-critical: #EF4444; --band-critical-bg: rgba(239,68,68,0.15);

    --surface: #0F1628;
    --grid:    rgba(148,163,184,0.16);
    --series-pressure: #3987e5;
    --series-temp:     #d95926;

    --car-body:    #141D35;
    --car-outline: rgba(59,130,246,0.15);
    --tyre:        #0B1120;
    --lamp:        rgba(148,163,184,0.35);
    --glass-strong: rgba(59,130,246,0.16);
    --glass-mid:    rgba(59,130,246,0.13);
    --glass-soft:   rgba(59,130,246,0.06);

    --marker:      #3B82F6;
    --marker-glow: rgba(59,130,246,0.8);
    --marker-halo: rgba(59,130,246,0.15);
    --tick:        rgba(148,163,184,0.45);
    --tick-legal:  rgba(239,68,68,0.6);
  }
}

/* The toggle's own choice, which must win in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #080D1A;
  --panel:      #0F1628;
  --panel-mid:  #141D35;
  --border:     rgba(59,130,246,0.15);
  --shadow:     none;
  --text-hi:    #EEF2FF;
  --text-mid:   #94A3B8;
  --text-lo:    #4B5A72;

  --accent:            #3B82F6;
  --accent-soft:       #60A5FA;
  --hover-tint:        rgba(59,130,246,0.08);
  --press-tint:        rgba(59,130,246,0.12);
  --press-tint-strong: rgba(59,130,246,0.16);
  --chip:              rgba(148,163,184,0.12);

  --green:     #22C55E;
  --green-dim: rgba(34,197,94,0.15);
  --amber:     #F59E0B;
  --amber-soft:#FCD34D;
  --red:       #EF4444;
  --red-soft:  #F87171;

  --risk-low: #22C55E; --band-low-bg: rgba(34,197,94,0.15);
  --risk-watch: #F59E0B; --band-watch-bg: rgba(245,158,11,0.15);
  --risk-elevated: #FB923C; --band-elevated-bg: rgba(251,146,60,0.15);
  --risk-critical: #EF4444; --band-critical-bg: rgba(239,68,68,0.15);

  --surface: #0F1628;
  --grid:    rgba(148,163,184,0.16);
  --series-pressure: #3987e5;
  --series-temp:     #d95926;

  --car-body:    #141D35;
  --car-outline: rgba(59,130,246,0.15);
  --tyre:        #0B1120;
  --lamp:        rgba(148,163,184,0.35);
  --glass-strong: rgba(59,130,246,0.16);
  --glass-mid:    rgba(59,130,246,0.13);
  --glass-soft:   rgba(59,130,246,0.06);

  --marker:      #3B82F6;
  --marker-glow: rgba(59,130,246,0.8);
  --marker-halo: rgba(59,130,246,0.15);
  --tick:        rgba(148,163,184,0.45);
  --tick-legal:  rgba(239,68,68,0.6);
}

/* ── The toggle itself, identical on every page ─────────────────────────── */
.theme-toggle {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-mid); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--text-hi); background: var(--hover-tint); }
.theme-toggle svg { width: 15px; height: 15px; }

/*
 * One button, two glyphs: it shows the theme it will switch you to, so the moon
 * appears while you are in light. The head snippet always stamps data-theme, so
 * the default case here is "anything that is not dark"; the media query only
 * covers a viewer with JavaScript off.
 */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/*
 * Where it sits. The vehicle and lab headers space three items across, so the
 * toggle joins the live pill in a right-hand cluster rather than becoming a
 * fourth item and pulling the nav off centre; the other two headers end with
 * the toggle, which an auto margin carries to the right.
 */
.header-right { display: flex; align-items: center; gap: 10px; }
header > .theme-toggle:last-child { margin-left: auto; }

/*
 * The "Usecases" nav menu.
 *
 * FuelSense and CaneSense are applications built on the portal's telemetry
 * rather than views of it, so they sit behind one menu instead of spreading
 * the header wider with every use case added. The tab styling itself is still
 * per-page (.page-tab lives in each page's <style>); only the menu chrome is
 * here, because six copies of a popup are six chances for one to drift.
 *
 * The button borrows .page-tab, so it needs the UA button defaults cleared —
 * a <button> does not inherit font or background from the nav.
 */
.page-menu { position: relative; display: flex; }
.page-menu-btn {
  background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-family: var(--grotesk); font-size: 11px; font-weight: 500;
  letter-spacing: .04em;
}
.page-menu-caret { width: 11px; height: 11px; transition: transform .18s; opacity: .75; }
.page-menu[data-open="true"] .page-menu-caret { transform: rotate(180deg); }

.page-menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 190px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 6px 20px rgba(15,35,80,0.14); padding: 5px; display: flex; flex-direction: column;
}
/* display:flex above outranks the UA's [hidden]{display:none}, so a shut menu
   would otherwise render open on every page. Needed on the element itself
   rather than relying on the attribute alone. */
.page-menu-list[hidden] { display: none; }
:root[data-theme="dark"] .page-menu-list { box-shadow: 0 6px 22px rgba(0,0,0,0.45); }

.page-menu-item {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 6px;
  text-decoration: none; color: var(--text-mid); transition: color .15s, background .15s;
  font-family: var(--grotesk); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.page-menu-item span {
  font-family: var(--inter, 'Inter', system-ui, sans-serif); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0; color: var(--text-lo);
}
.page-menu-item:hover, .page-menu-item:focus-visible { color: var(--text-hi); background: var(--hover-tint); outline: none; }
.page-menu-item[aria-current="page"] { color: var(--text-hi); background: var(--press-tint); }

@media (max-width: 720px) {
  .page-menu-btn { padding: 4px 8px; font-size: 10px; }
  .page-menu-list { min-width: 165px; }
}