/* ════════════════════════════════════════════════════════════════════════
   MT1 telemetry-cloud — E-INK THEME (html[data-theme="eink"])
   Monochrome paper theme for e-paper displays (Kindle/Boox/DIY panels) and
   direct-sunlight field use. Design rules (docs/STYLE.md §e-ink):
     · Ink on paper: #000 on #FFF. Grays only where dither-safe
       (#404040 / #808080 / #BFBFBF) and only on large/quiet elements.
     · Borders over fills, zero blur/gradients/translucency, radius ≤ 2px.
     · Ink density = severity: OK = white + border · warning = 45° hatch ·
       critical/live = solid black (inverted).
     · Color coding → texture + icon + text (never a lone swatch).
     · No animation (e-ink can't; killed globally below).
   These rules are intentionally UNLAYERED so they beat every @layer rule
   in style.css/app.css at equal or lower specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
html[data-theme="eink"] {
  color-scheme: light;

  --ink: #000000;
  --paper: #FFFFFF;
  /* Dither-stable gray ramp (25 / 50 / 75%) — nothing in between. */
  --gray-25: #BFBFBF;
  --gray-50: #808080;
  --gray-75: #404040;

  /* Basic colors — ADDITIVE hue for color e-paper (Kaleido) and sunlight
     LCDs. Every one is DARK (≈ near-black in grayscale), so on a 1-bit
     panel the theme stays exactly the mono design: texture + icon + text
     remain the primary channels. */
  --e-green: #005F1E;
  --e-amber: #7A5A00;
  --e-red: #A00000;
  --e-blue: #1040A0;

  /* Brand grays re-quantized (gray-2 was the bright offline hero word). */
  --brand-gray-1: var(--ink);
  --brand-gray-2: var(--ink);
  --brand-gray-3: var(--gray-75);
  --brand-gray-4: var(--gray-25);
  --brand-gray-5: var(--paper);

  --bg: var(--paper);
  --bg-card: var(--paper);
  --bg-card-2: var(--paper);
  --border: var(--ink);
  --text: var(--ink);
  --text-2: var(--ink);
  --muted: var(--gray-75);
  --accent: var(--ink);
  --accent-hi: var(--ink);
  --ok: var(--ink);
  --warn: var(--ink);

  --plate: var(--paper);
  --surface-recess: var(--paper);
  --surface-console: var(--paper);
  --surface-flat: var(--paper);
  --surface-lab: var(--paper);
  --hairline: var(--ink);
  --bezel-hi: transparent;
  --bezel-lo: transparent;

  --lane-cluster: var(--ink);
  --lane-console: var(--ink);
  --lane-flights: var(--ink);
  --lane-story: var(--ink);

  /* Semantic status: dark basics where state matters, ink elsewhere; "-dim"
     washes become paper (chips stay outline chips via currentColor rings).
     In grayscale all of these read as near-black → pure mono fallback. */
  --st-idle: var(--ink);        --st-idle-dim: var(--paper);
  --st-armed: var(--e-amber);   --st-armed-dim: var(--paper);
  --st-flight: var(--e-red);    --st-flight-dim: var(--paper);
  --st-success: var(--e-green); --st-success-dim: var(--paper);
  --st-syncing: var(--ink);     --st-syncing-dim: var(--paper);
  --st-warning: var(--e-amber); --st-warning-dim: var(--paper);
  --st-offline: var(--gray-75); --st-offline-dim: var(--paper);
  --st-error: var(--e-red);     --st-error-dim: var(--paper);
  --st-on-dark: var(--paper);

  /* Chart series: ink; JS adds dash patterns + gray "raw" traces. */
  --series-1: #000000;  --series-2: #000000;  --series-3: #000000;
  --series-4: #000000;  --series-5: #000000;  --series-6: #000000;
  --series-7: #000000;  --series-8: #000000;
  --series-grid: #BFBFBF;  --series-axis: #000000;

  /* Crisp corners: big radii stair-step on e-paper. */
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px;

  /* Texture library (pitch ≥ 4px — finer moirés on e-ink).
     Angles match the canvas patterns in app.js (135deg CSS ⇢ "/" stripes). */
  --tx-hatch: repeating-linear-gradient(135deg, #000 0 1px, transparent 1px 7px);
  --tx-hatch-back: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 7px);
  --tx-hatch-dense: repeating-linear-gradient(135deg, #000 0 1px, transparent 1px 4px);
  --tx-hatch-bold: repeating-linear-gradient(135deg, #000 0 4px, #fff 4px 9px);
  --tx-horiz: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 6px);
  --tx-vert: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 6px);
  --tx-dots: radial-gradient(#000 1.1px, transparent 1.1px);
}

/* ── Base: flat paper, no glow, no motion ───────────────────────────────── */
html[data-theme="eink"] body {
  background: var(--paper);
  -webkit-font-smoothing: auto;
}
html[data-theme="eink"] *,
html[data-theme="eink"] *::before,
html[data-theme="eink"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-theme="eink"] .brand-logo { filter: grayscale(1) contrast(1.2); }
html[data-theme="eink"] code { box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] a { color: var(--ink); text-decoration-thickness: 2px; }
html[data-theme="eink"] :focus-visible { outline: 3px solid var(--ink); }

/* ── Buttons: outline by default, invert for primary, fence for danger ──── */
html[data-theme="eink"] button:hover:not(:disabled) { filter: none; }
html[data-theme="eink"] .btn-primary { background: var(--e-green); color: var(--paper); }
html[data-theme="eink"] .btn-danger {
  background: var(--paper); color: var(--e-red);
  border: 4px double var(--e-red); box-shadow: none;
}
html[data-theme="eink"] .btn-neutral,
html[data-theme="eink"] .btn-mini {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="eink"] .btn-neutral:hover:not(:disabled),
html[data-theme="eink"] .btn-mini:hover:not(:disabled) {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
html[data-theme="eink"] .btn-mini.toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); box-shadow: none;
}
html[data-theme="eink"] button:disabled {
  background: var(--paper) !important; color: var(--gray-50) !important;
  box-shadow: inset 0 0 0 1px var(--gray-50); opacity: 1; border-style: dotted;
}
html[data-theme="eink"] .btn-unlock { box-shadow: inset 0 0 0 1px var(--ink); }

/* ── Pills / chips: outline; "active" = inverted. Status colors flow from
   the (now dark-basic) st tokens — no forced ink here. ─────────────────── */
html[data-theme="eink"] .pill { background: var(--paper); color: var(--ink); }
html[data-theme="eink"] .conn-pill.connected,
html[data-theme="eink"] .admin-pill.set { background: var(--paper); }
html[data-theme="eink"] .conn-pill.reconnecting {
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800;
}
html[data-theme="eink"] #theme-toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); box-shadow: none;
}

/* ── ZONE 1 · HERO ───────────────────────────────────────────────────────── */
html[data-theme="eink"] .hero {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
  border-inline-start: 6px solid var(--ink);
}
html[data-theme="eink"] .hero::after { display: none; }
/* The giant word takes the state's dark basic hue (≈ ink in grayscale);
   salience still does NOT depend on it: ARMED keeps the heavy underline and
   FLIGHT/ERROR keep the inverted plate. */
html[data-theme="eink"] .hero-word { color: var(--hue); }
html[data-theme="eink"] .hero.banner-armed .hero-word {
  border-block-end: 6px double currentColor; padding-block-end: 2px;
}
html[data-theme="eink"] .hero.banner-flight .hero-word,
html[data-theme="eink"] .hero.banner-error .hero-word {
  background: var(--e-red); color: var(--paper); padding-inline: 0.15em;
}
html[data-theme="eink"] .hero.banner-offline .hero-word { color: var(--gray-75); }
html[data-theme="eink"] .rec-dot { box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="eink"] .hero:is(.banner-armed, .banner-flight) .rec-dot { background: var(--ink); }
html[data-theme="eink"] .instr-link .uptime-bar-wrap { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }

/* Device group offline: grayscale is a no-op on paper, so the mono signal is
   TEXTURE — the group's solid rings turn into dashed ones + the console note. */
html[data-theme="eink"] .deck.dev-offline :is(.cluster, .console) {
  box-shadow: none;
  outline: 2px dashed var(--ink); outline-offset: -2px;
}
html[data-theme="eink"] .console-offline-note {
  background: var(--paper); color: var(--e-amber);
  box-shadow: inset 0 0 0 2px var(--e-amber);
}

/* ── Thumb dock ──────────────────────────────────────────────────────────── */
html[data-theme="eink"] .thumb-dock {
  background: var(--paper);
  border-block-start: 2px solid var(--ink);
  box-shadow: none;
}

/* ── ZONE 2 · INSTRUMENT CLUSTER ────────────────────────────────────────── */
html[data-theme="eink"] .cluster {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  border-inline-start: 4px solid var(--ink);
}
/* Battery cell: ink density = charge state (dots → hatch → solid). */
html[data-theme="eink"] .battery-body { border-color: var(--ink); background: var(--paper); }
html[data-theme="eink"] .battery-nub { background: var(--ink); }
html[data-theme="eink"] .battery-fill { background: radial-gradient(var(--e-green) 1.2px, transparent 1.2px) 0 0 / 5px 5px var(--paper); }
html[data-theme="eink"] .battery-fill.low { background: repeating-linear-gradient(135deg, var(--e-amber) 0 4px, var(--paper) 4px 9px) var(--paper); }
html[data-theme="eink"] .battery-fill.critical { background: var(--e-red); }
/* Fuel gauge (microSD): same density scale. */
html[data-theme="eink"] .fuel { border-color: var(--ink); background: var(--paper); }
html[data-theme="eink"] .fuel-fill { background: var(--tx-dots) 0 0 / 5px 5px var(--paper); }
html[data-theme="eink"] .fuel-fill.warn { background: repeating-linear-gradient(135deg, var(--e-amber) 0 4px, var(--paper) 4px 9px) var(--paper); }
html[data-theme="eink"] .fuel-fill.crit { background: var(--e-red); }
html[data-theme="eink"] .fuel::after {
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), var(--ink) calc(25% - 1px) 25%);
}
html[data-theme="eink"] .fuel.untested { background-image: var(--tx-hatch); }
/* Warning feet get an icon (color used to carry this). */
html[data-theme="eink"] .instr-foot.warn::before { content: "⚠ "; }
html[data-theme="eink"] .instr-foot.crit::before { content: "⚠ "; }
/* RSSI staircase: empty steps outlined, lit steps solid ink. */
html[data-theme="eink"] .rssi-bars i {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="eink"] .rssi-bars.lvl1 i:nth-child(-n+1),
html[data-theme="eink"] .rssi-bars.lvl2 i:nth-child(-n+2),
html[data-theme="eink"] .rssi-bars.lvl3 i:nth-child(-n+3),
html[data-theme="eink"] .rssi-bars.lvl4 i:nth-child(-n+4) { background: var(--rssi-col, var(--ink)); }
/* Module LEDs: OK = filled dot (green) · DEAD = red ✕ · UNKNOWN = dotted hollow. */
html[data-theme="eink"] .led { background: var(--paper); }
html[data-theme="eink"] .led::before {
  background: var(--led-c, var(--paper));
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
html[data-theme="eink"] .led-ok::before { background: var(--e-green); box-shadow: none; }
html[data-theme="eink"] .led-dead {
  box-shadow: inset 0 0 0 2px var(--e-red); font-weight: 800;
}
html[data-theme="eink"] .led-dead::before {
  content: "✕"; background: none; box-shadow: none; border-radius: 0;
  inline-size: auto; block-size: auto; font-size: 1em; line-height: 1;
}
html[data-theme="eink"] .led-unknown::before {
  background: var(--paper); box-shadow: none; border: 1px dashed var(--ink);
}
/* System meters. */
html[data-theme="eink"] .meter { background: var(--gray-25); }
html[data-theme="eink"] .meter i { background: var(--ink); }
html[data-theme="eink"] .meter i.low { background: repeating-linear-gradient(135deg, var(--e-amber) 0 4px, var(--paper) 4px 9px); }
html[data-theme="eink"] .meter i.critical { background: var(--e-red); }

/* ── ZONE 3 · COMMAND CONSOLE ───────────────────────────────────────────── */
html[data-theme="eink"] .console {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  border-inline-start: 4px solid var(--ink);
}
html[data-theme="eink"] .keyswitch {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
}
html[data-theme="eink"] .ks-btn { color: var(--gray-75); box-shadow: inset 0 0 0 1px var(--gray-50); }
html[data-theme="eink"] .ks-btn small { color: var(--gray-75); }
html[data-theme="eink"] .ks-btn:hover:not([aria-checked="true"]) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="eink"] .ks-btn .ks-led { background: var(--paper); box-shadow: inset 0 0 0 1px var(--gray-50); }
/* Selected detent: inverted (the strongest signal on paper) — ARMED in dark
   amber, STANDBY in ink; both collapse to a dark plate in grayscale. */
html[data-theme="eink"] .ks-btn[data-state="idle"][aria-checked="true"] {
  background: var(--ink); color: var(--paper); box-shadow: none;
}
html[data-theme="eink"] .ks-btn[data-state="armed"][aria-checked="true"] {
  background: var(--e-amber); color: var(--paper); box-shadow: none;
}
html[data-theme="eink"] .ks-btn[aria-checked="true"] small { color: var(--paper); }
html[data-theme="eink"] .ks-btn[data-state="idle"][aria-checked="true"] .ks-led,
html[data-theme="eink"] .ks-btn[data-state="armed"][aria-checked="true"] .ks-led {
  background: var(--paper); box-shadow: none;
}
html[data-theme="eink"] .console-calib { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .cfg-actual.pending { font-weight: 800; }
html[data-theme="eink"] .cfg-actual.pending::before { content: "⧗ "; }
/* Danger zone: hazard fence in dark red (reads as black-on-white in mono). */
html[data-theme="eink"] .danger-zone {
  background: var(--paper);
  border: 2px solid var(--e-red);
  box-shadow: none;
  position: relative;
  padding-block-start: calc(12px + 8px);
}
html[data-theme="eink"] .danger-zone::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 8px;
  background: repeating-linear-gradient(135deg, var(--e-red) 0 8px, #fff 8px 16px);
  border-block-end: 1px solid var(--e-red);
}
html[data-theme="eink"] .confirm-panel {
  background: var(--paper);
  box-shadow: none; border: 2px solid var(--e-red); border-inline-start-width: 6px;
}

/* ── ZONE 4 · FLIGHT SELECTOR ───────────────────────────────────────────── */
html[data-theme="eink"] .flights { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .flight-row { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .flight-row:hover { background: var(--paper); }
html[data-theme="eink"] .flight-row.selected {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
  border-inline-start-color: var(--ink);
}
html[data-theme="eink"] .flight-row.selected::before {
  background: var(--ink); color: var(--paper); padding: 1px 4px;
}
html[data-theme="eink"] .flight-row.acc-offline { border-inline-start-color: var(--gray-25); }
html[data-theme="eink"] .flight-row.v-device-only { opacity: 1; }
html[data-theme="eink"] .flight-row.v-device-only .fr-id,
html[data-theme="eink"] .flight-row.v-device-only .fr-onlydev { color: var(--gray-75); }
html[data-theme="eink"] .flight-row.v-device-only .fr-spark { opacity: 1; }
html[data-theme="eink"] .flight-row.live::after { box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="eink"] .fr-onlydev::before { background: var(--paper); border: 1px dashed var(--ink); box-sizing: border-box; }
html[data-theme="eink"] .btn-load {
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-weight: 800;
}
html[data-theme="eink"] .btn-load:hover { background: var(--ink); color: var(--paper); }
html[data-theme="eink"] .btn-stop {
  background: var(--paper); color: var(--ink); border: 4px double var(--ink);
}
html[data-theme="eink"] .btn-stop:hover { background: var(--paper); }
html[data-theme="eink"] .fr-upbar { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .fr-upbar > i { background: var(--tx-hatch-bold); }
/* Sync dots: done = ● filled (green) · in-progress = ◍ hatched · pending = ○ dashed. */
html[data-theme="eink"] .sync-mini::before { background: var(--paper); border: 1px dashed var(--ink); box-sizing: border-box; }
html[data-theme="eink"] .sync-mini.ok::before { background: var(--e-green); border: none; }
html[data-theme="eink"] .sync-mini.syncing::before { background: var(--tx-hatch-dense) var(--paper); border: 1px solid var(--ink); }
/* State chips: outline in their dark-basic hue; IN FLIGHT inverted (loudest). */
html[data-theme="eink"] .state-chip { background: var(--paper); }
html[data-theme="eink"] .state-chip.s-flight { background: var(--e-red); color: var(--paper); box-shadow: none; }
html[data-theme="eink"] .state-chip.s-ended_unclean { box-shadow: inset 0 0 0 1px var(--ink); font-weight: 800; }
html[data-theme="eink"] .state-chip.s-ended_unclean::before { content: "⚠ "; }
html[data-theme="eink"] .state-chip.s-idle { color: var(--gray-75); }
html[data-theme="eink"] .skeleton-row {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--gray-25);
}

/* ── ZONE 5 · STORY (charts) ────────────────────────────────────────────── */
html[data-theme="eink"] .story { border-inline-start: 4px solid var(--ink); }
html[data-theme="eink"] .altitude-hero,
html[data-theme="eink"] .film-card {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="eink"] .altitude-hero:fullscreen, html[data-theme="eink"] .film-card:fullscreen,
html[data-theme="eink"] .chart-maximized { background: var(--paper); }
html[data-theme="eink"] .live-chip.live { background: var(--ink); color: var(--paper); }
html[data-theme="eink"] .live-chip.done { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .live-chip.preview { background: var(--paper); color: var(--e-amber); box-shadow: inset 0 0 0 2px var(--e-amber); }
html[data-theme="eink"] .chart-subtoolbar {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="eink"] .filter-btn { background: var(--paper); color: var(--ink); }
html[data-theme="eink"] .filter-btn:hover:not(.active) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="eink"] .filter-btn.active { background: var(--ink); color: var(--paper); }
html[data-theme="eink"] .phase-swatch { box-shadow: inset 0 0 0 1px var(--ink); background-color: var(--paper); }
html[data-theme="eink"] .crosshair-readout {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
}
html[data-theme="eink"] .pipe-track { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
html[data-theme="eink"] .pipe-track > i { background: var(--tx-hatch-bold); }
html[data-theme="eink"] .pipe-lane.lane-complete .pipe-track > i { background: var(--e-green); }
html[data-theme="eink"] .pipe-lane.lane-pending .pipe-track > i { background: var(--paper); }

/* ── Uptime (F3) ────────────────────────────────────────────────────────── */
html[data-theme="eink"] .uptime {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
  border-inline-start: 4px solid var(--ink);
}
html[data-theme="eink"] .uptime-bar-wrap { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }

/* ── States: toasts, stale, empty ───────────────────────────────────────── */
html[data-theme="eink"] .toast {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), inset 6px 0 0 var(--ink);
}
html[data-theme="eink"] .toast.ok { box-shadow: inset 0 0 0 2px var(--ink), inset 6px 0 0 var(--e-green); }
html[data-theme="eink"] .toast.warn {
  box-shadow: inset 0 0 0 2px var(--e-amber), inset 6px 0 0 var(--e-amber);
}
html[data-theme="eink"] .toast.warn::before { content: "⚠"; color: var(--e-amber); font-weight: 800; }
html[data-theme="eink"] .toast.warn span, html[data-theme="eink"] .toast.error span { font-weight: 700; }
html[data-theme="eink"] .toast.error { background: var(--e-red); color: var(--paper); box-shadow: none; }
html[data-theme="eink"] .toast.error .toast-x { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
html[data-theme="eink"] .stale-badge {
  background: var(--paper); color: var(--e-amber); box-shadow: inset 0 0 0 2px var(--e-amber);
}
html[data-theme="eink"] .stale-badge::before { content: "⚠ "; font-weight: 800; }