/* WEFT Landscape family. Base theme "landscape": generative HUD on black, Share Tech Mono for HUD labels,
   JetBrains Mono for data. Other themes override the tokens below (see the theme blocks at the end). */
@font-face { font-family: "Share Tech Mono"; src: url("fonts/share-tech-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #000;
  --panel: rgba(255, 255, 255, 0.018);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --ink: #eeeae6;
  --ink-2: #b5b0ab;
  --muted: #7d7874;
  --hud: #ff6a2b;               /* HUD annotations */
  --hud-dim: rgba(255, 106, 43, 0.5);
  --warm: #ff6a2b;              /* surge marks: $300 line, onset bars, IN SURGE */
  --hud-tint: rgba(255, 106, 43, 0.08);
  --row-hover: rgba(255, 255, 255, 0.025);
  --row-sel: rgba(77, 141, 255, 0.06);
  --cursor: rgba(255, 106, 43, 0.45);
  --tip-bg: rgba(4, 4, 6, 0.96);
  --wire: #3b33ff;              /* terrain wireframe */
  --weft: #6c63ff;              /* WEFT series (validated with --p5 on #000) */
  --weft-wash: rgba(108, 99, 255, 0.2);
  --p5: #e8489c;                /* AEMO P5 series */
  --actual: #eeeae6;
  --onset-30: #5a52e8;          /* ordinal ramp, validated on #000 */
  --onset-60: #8f89ff;
  --onset-120: #c8c5ff;
  --onset-720: #e6e4ff;
  --surge-wash: rgba(255, 106, 43, 0.16);
  --reticle: #4d8dff;
  --clock: #ff3df0;
  --good: #58b881;
  --warn: #e3a73a;
  --crit: #e5645a;
  --hudfont: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 13px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--hud); outline-offset: 2px; }

.app {
  position: relative; max-width: 1760px; margin: 0 auto; padding: 22px 32px 14px;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
}

/* ---------------------------------------------------------------- header */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 36px; }
.ident { max-width: 860px; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.brand { margin: 0; font: 400 26px/1 var(--hudfont); letter-spacing: 0.12em; color: var(--ink); white-space: nowrap; }
.brand .br { color: var(--hud); }
.brand .sl { color: var(--hud); margin: 0 0.08em; }
.brand .tag { font-size: 12px; letter-spacing: 0.32em; color: var(--hud); vertical-align: 5px; margin-left: 14px; }
.byline { margin: 10px 0 0; color: var(--ink-2); font: 12px/1.55 var(--mono); }
/* the way home and to the other routes: top right, out of the header's flow (a row of its own on phones) */
.site { position: absolute; top: 24px; right: 32px; z-index: 2; display: flex; gap: 22px; font: 11px/1 var(--hudfont); letter-spacing: 0.2em; text-transform: uppercase; }
.site a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.site a:hover, .site a:focus-visible { color: var(--ink); }
.site a:first-child::before { content: "\2190"; margin-right: 7px; color: var(--hud); }
/* the call to action: a call with Polymorphic AI (Calendly, new tab) */
.site a.cta { color: var(--ink-2); border: 1px solid var(--hud-dim); padding: 6px 9px 5px; margin: -6px 0 0; }
.site a.cta:hover, .site a.cta:focus-visible { color: var(--ink); border-color: var(--hud); background: var(--hud-tint); outline: none; }
.controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 10px 18px; }
.ctl { display: flex; flex-direction: column; gap: 5px; }
.ctl-lbl { font: 11px/1 var(--hudfont); letter-spacing: 0.2em; color: var(--hud); }
.seg { display: inline-flex; gap: 2px; }
.seg button {
  position: relative; border: 1px solid var(--hair); background: transparent; color: var(--muted);
  font: 13px/1 var(--hudfont); letter-spacing: 0.1em; padding: 7px 10px 6px; cursor: pointer; min-height: 30px;
}
.seg button:hover { color: var(--ink); border-color: var(--hair-2); }
.seg button[aria-checked="true"] { color: var(--ink); border-color: transparent; background: var(--hud-tint); }
.seg button[aria-checked="true"]::before, .seg button[aria-checked="true"]::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 5px; border: 1px solid var(--hud);
}
.seg button[aria-checked="true"]::before { left: -1px; border-right: 0; }
.seg button[aria-checked="true"]::after { right: -1px; border-left: 0; }
.status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 5px;
  border: 1px solid var(--hair); font: 12px/1 var(--hudfont); letter-spacing: 0.16em; color: var(--ink-2); cursor: default;
}
.status .dot { width: 7px; height: 7px; background: currentColor; }
.status-good .dot { background: var(--good); box-shadow: 0 0 10px var(--good); animation: blink 2.6s steps(2, end) infinite; }
.status-warn { color: var(--warn); border-color: rgba(227, 167, 58, 0.4); }
.status-crit { color: var(--crit); border-color: rgba(229, 100, 90, 0.45); }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- layout */
.grid {
  display: grid; min-height: 0; gap: 16px 26px;
  grid-template-columns: minmax(0, 1.72fr) minmax(380px, 1fr);
  grid-template-rows: minmax(360px, 1fr) minmax(250px, 0.56fr);
  grid-template-areas: "scene board" "charts charts";
}
.scene-wrap { grid-area: scene; display: flex; flex-direction: column; min-height: 0; }
.board-wrap { grid-area: board; display: flex; flex-direction: column; min-height: 0; }
.charts { grid-area: charts; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; min-height: 0; }
.chart-wrap { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--hair); padding-top: 10px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.head-l { display: inline-flex; align-items: baseline; gap: 14px; }
.seg-xs { align-self: center; }
.seg-xs button { min-height: 0; padding: 1px 7px 0; font-size: 11px; line-height: 14px; letter-spacing: 0.12em; }
h2 { margin: 0; font: 400 13px/1.2 var(--hudfont); letter-spacing: 0.22em; color: var(--ink); white-space: nowrap; }
h2 .br { color: var(--hud); }
h2 .rg { color: var(--hud); margin-left: 0.6em; }
.desc { margin: 5px 0 6px; color: var(--muted); font: 11px/1.5 var(--mono); max-width: 1000px; }

/* ---------------------------------------------------------------- scene */
.scene { position: relative; flex: 1 1 auto; min-height: 280px; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.gl-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font: 12px var(--mono); }
.gl-fallback[hidden] { display: none; }
.hud .lbl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.hud .row-lbl { font: 12px/1 var(--hudfont); letter-spacing: 0.14em; color: var(--muted); }
.hud .row-lbl.sel { color: var(--ink); }
.hud .t-lbl { font: 10.5px/1 var(--mono); color: var(--muted); }
.hud .now-lbl { font: 11px/1 var(--hudfont); letter-spacing: 0.18em; color: var(--ink-2); }
.hud .lvl-lbl { font: 10.5px/1 var(--mono); color: var(--warm); }
.callout { position: absolute; font: 11px/1.35 var(--mono); color: var(--hud); white-space: nowrap; }
.callout .k { font: 12px/1.2 var(--hudfont); letter-spacing: 0.14em; }
.callout .v { color: var(--ink); }
.callout .m { color: var(--hud-dim); }
.callout.bracket { padding-left: 12px; }
.callout.bracket::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 5px; border: 1px solid var(--hud); border-right: 0; }
.clock-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--clock); vertical-align: 0; }
.state-callout { position: absolute; color: var(--hud); white-space: nowrap; padding-left: 14px; }
.state-callout::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; border-left: 1px solid var(--hud); }
.state-callout::after { content: ""; position: absolute; left: 0; top: 2px; width: 6px; border-top: 1px solid var(--hud); }
.state-callout .big { font: 30px/1 var(--hudfont); letter-spacing: 0.12em; }
.state-callout .sub { margin-top: 6px; font: 11.5px/1.45 var(--mono); }
.state-callout .sub b { font-weight: 400; color: var(--ink); }

/* ---------------------------------------------------------------- board */
.board { display: grid; gap: 0; }
.b-head, .b-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 70px 64px repeat(var(--hz, 3), 44px); column-gap: 10px; align-items: center; }
.b-head { font: 10.5px/1 var(--hudfont); letter-spacing: 0.16em; color: var(--hud); padding: 0 10px 8px; border-bottom: 1px solid var(--hair); }
.b-head span:nth-child(n+3) { text-align: right; }
.b-head .hz { text-align: center !important; }
.b-row {
  position: relative; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--hair);
  background: transparent; text-align: left; cursor: pointer;
}
.b-row:hover { background: var(--row-hover); }
.b-row[aria-pressed="true"] { background: var(--row-sel); }
.b-row[aria-pressed="true"]::before, .b-row[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 6px; border: 1px solid var(--reticle);
}
.b-row[aria-pressed="true"]::before { left: 2px; border-right: 0; }
.b-row[aria-pressed="true"]::after { right: 2px; border-left: 0; }
.b-code { font: 15px/1 var(--hudfont); letter-spacing: 0.12em; color: var(--ink); }
.b-state { font: 11px/1 var(--hudfont); letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-state.hot { color: var(--hud); }
.b-now { font: 500 15px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.b-next { font: 12.5px/1 var(--mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.b-next i { font-style: normal; color: var(--weft); margin-right: 4px; }
.b-cell {
  position: relative; height: 26px; display: grid; place-items: center; font: 500 12px/1 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink); border: 1px solid var(--hair); overflow: hidden;
}
.b-cell .fill { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--warm); }
.b-cell span { position: relative; }
.b-cell.small { color: var(--muted); }
.b-surge { grid-column: span var(--hz, 3); height: 26px; display: grid; place-items: center; border: 1px solid var(--warm); color: var(--warm); font: 12px/1 var(--hudfont); letter-spacing: 0.2em; background: var(--surge-wash); }
.readout { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ro { border: 1px solid var(--hair); padding: 8px 10px; position: relative; }
.ro .k { font: 10.5px/1 var(--hudfont); letter-spacing: 0.18em; color: var(--hud); }
.ro .v { margin-top: 6px; font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ro .m { margin-top: 4px; font: 10.5px/1.3 var(--mono); color: var(--muted); }

/* ---------------------------------------------------------------- charts */
.plot { position: relative; flex: 1 1 auto; min-height: 160px; }
.plot > .uplot { position: absolute; inset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px/1.4 var(--mono); color: var(--ink-2); }
.key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.key .line { width: 16px; height: 2px; background: currentColor; }
.key .wash { width: 14px; height: 10px; }
.key.off { opacity: 0.4; }
.u-legend { display: none; }
.uplot { font-family: var(--mono); }
.uplot .u-cursor-x { border-right: 1px solid var(--cursor); }
.empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font: 12px var(--mono); }

/* ---------------------------------------------------------------- footer + tooltip */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--muted); font: 10.5px/1.4 var(--mono); }
.foot a, .byline a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.foot a:hover, .byline a:hover { color: var(--ink); }
.brand a.home { color: inherit; text-decoration: none; }
/* the page's other looks: three small dots, named on hover */
.skins { display: inline-flex; align-items: center; gap: 8px; }
.skins a { display: block; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--c); opacity: 0.32; }
.skins a:hover, .skins a:focus-visible { opacity: 1; }
.skins a[aria-current="page"] { opacity: 0.85; outline: 1px solid var(--c); outline-offset: 2px; }
.tooltip {
  position: fixed; z-index: 20; pointer-events: none; max-width: 360px; padding: 9px 11px 8px;
  background: var(--tip-bg); border: 1px solid var(--hud-dim); color: var(--ink-2);
  font: 11.5px/1.5 var(--mono); white-space: pre-line; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}
.tooltip::before { content: ""; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-left: 2px solid var(--hud); border-top: 2px solid var(--hud); }
.tooltip .t-h { color: var(--hud); font: 11px/1.4 var(--hudfont); letter-spacing: 0.14em; margin-bottom: 3px; }
.tooltip .t-row { display: grid; grid-template-columns: 12px 72px 1fr; gap: 8px; align-items: center; white-space: nowrap; }
.tooltip .t-row .line { width: 12px; height: 2px; }
.tooltip .t-row b { color: var(--ink); font-weight: 500; text-align: right; }
.tooltip .t-sub { color: var(--muted); margin-top: 5px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .top { grid-template-columns: minmax(0, 1fr); }
  .controls { justify-content: flex-start; }
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "scene" "board" "charts"; }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .scene { min-height: 420px; }
  .plot { min-height: 240px; }
  .app { min-height: 0; }
}
@media (max-width: 760px) {
  .site { position: static; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 2px; }
  .site a.cta { margin: 0; }
}
@media (max-width: 640px) {
  .app { padding: 14px 14px 12px; }
  .brand { font-size: 21px; }
  .brand .tag { margin-left: 10px; letter-spacing: 0.24em; }
  .controls { gap: 10px 12px; }
  .seg button { padding: 6px 7px 5px; font-size: 12px; }
  .scene { min-height: 340px; }
  .b-head, .b-row { grid-template-columns: 40px minmax(0, 1fr) 56px repeat(var(--hz, 3), 38px); column-gap: 6px; padding-left: 8px; padding-right: 8px; }
  .b-state, .b-head span:nth-child(2) { display: none; }
  .readout { grid-template-columns: minmax(0, 1fr); }
  .callout:not(.keep) { display: none; }
  .state-callout .big { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .status-good .dot { animation: none; } }

/* ================================================================ theme: terra
   The original Landscape with only its colours swapped, role for role (see theme.js): lime accent,
   azure terrain/WEFT/onset, copper-brown P5 and dispatch dot. Series validated on #000. */
:root[data-theme="terra"] {
  --hud: #b4e03a;
  --hud-dim: rgba(180, 224, 58, 0.5);
  --warm: #b4e03a;
  --hud-tint: rgba(180, 224, 58, 0.08);
  --row-sel: rgba(44, 156, 255, 0.07);
  --cursor: rgba(180, 224, 58, 0.45);
  --wire: #2c9cff;              /* crystal azure */
  --weft: #1d9cef;              /* top of the lightness band; vs copper ΔE 24.9 protan */
  --weft-wash: rgba(29, 156, 239, 0.2);
  --p5: #c07a3e;
  --onset-30: #1f7fd6;          /* lighter electric azure ramp, validated on #000 */
  --onset-60: #45a9f5;
  --onset-120: #95cff5;
  --onset-720: #d8edfb;
  --surge-wash: rgba(180, 224, 58, 0.14);
  --reticle: #7fcfff;
  --clock: #c9864a;
}

/* ================================================================ theme: powerlines
   The landscape as transmission lines (see theme.js). Near-monochrome: warm near-black, beige ink, sand
   HUD accent, gold for surges, light blue for electricity and WEFT. Series validated on #0c0b0a. */
:root[data-theme="powerlines"] {
  --bg: #0c0b0a;
  --panel: rgba(240, 228, 206, 0.02);
  --hair: rgba(240, 228, 206, 0.08);
  --hair-2: rgba(240, 228, 206, 0.15);
  --ink: #ece6da;
  --ink-2: #b9b1a4;
  --muted: #877f73;
  --hud: #cdbb9e;
  --hud-dim: rgba(205, 187, 158, 0.55);
  --warm: #e2b566;
  --hud-tint: rgba(205, 187, 158, 0.09);
  --row-hover: rgba(240, 228, 206, 0.03);
  --row-sel: rgba(154, 214, 255, 0.06);
  --cursor: rgba(205, 187, 158, 0.45);
  --tip-bg: rgba(14, 13, 11, 0.96);
  --wire: #958f87;
  --weft: #389fd5;
  --weft-wash: rgba(56, 159, 213, 0.18);
  --p5: #b77f39;
  --actual: #ece6da;
  --onset-30: #37708f;
  --onset-60: #509cc2;
  --onset-120: #8fc7e2;
  --onset-720: #d5e4ec;
  --surge-wash: rgba(226, 181, 102, 0.14);
  --reticle: #9ad6ff;
  --clock: #9ad6ff;
}

/* ================================================================ theme: powerlines-terra
   A variant for comparison: the Powerlines scene with Terra's page colours, role for role (pure black,
   neutral ink, lime HUD, azure reticle). Series stay Powerlines' (validated again on #000). */
:root[data-theme="powerlines-terra"] {
  --hud: #b4e03a;
  --hud-dim: rgba(180, 224, 58, 0.5);
  --hud-tint: rgba(180, 224, 58, 0.08);
  --cursor: rgba(180, 224, 58, 0.45);
  --row-sel: rgba(44, 156, 255, 0.07);
  --warm: #e2b566;
  --wire: #958f87;
  --weft: #389fd5;
  --weft-wash: rgba(56, 159, 213, 0.18);
  --p5: #b77f39;
  --onset-30: #37708f;
  --onset-60: #509cc2;
  --onset-120: #8fc7e2;
  --onset-720: #d5e4ec;
  --surge-wash: rgba(226, 181, 102, 0.14);
  --reticle: #7fcfff;
  --clock: #9ad6ff;
}

/* ================================================================ theme: verdant
   A bioluminescent forest at night: our own interpretation, not the video's. Near-black with a green
   cast, pale spring green as the dominant hue, sun-gold for surge chances, ember for realised surges.
   Space Grotesk (display) + JetBrains Mono (data). Series colours validated on #040a07. */
:root[data-theme="verdant"] {
  --bg: #040a07;
  --panel: rgba(190, 240, 205, 0.02);
  --hair: rgba(190, 240, 205, 0.09);
  --hair-2: rgba(190, 240, 205, 0.18);
  --ink: #e9efe6;
  --ink-2: #b6c5b9;
  --muted: #809287;
  --hud: #bfeecb;               /* pale green: labels, callouts, selection */
  --hud-dim: rgba(191, 238, 203, 0.55);
  --sage: #5f8a6d;
  --warm: #f4c25e;              /* sun-gold: $300 marks, surge chances */
  --ember: #b85112;             /* realised surges, SPIKE (darkened so it stays apart from green for CVD) */
  --hud-tint: rgba(143, 227, 166, 0.1);
  --row-hover: rgba(190, 240, 205, 0.03);
  --row-sel: rgba(143, 227, 166, 0.075);
  --cursor: rgba(191, 238, 203, 0.42);
  --tip-bg: rgba(6, 16, 11, 0.96);
  --weft: #3eac66;              /* WEFT series (validated with --p5 on #040a07) */
  --weft-wash: rgba(62, 172, 102, 0.16);
  --p5: #3a9ed3;                /* AEMO P5: sky / water blue */
  --actual: #efeee4;            /* warm ivory reference line */
  --onset-30: #2d7b48;          /* ordinal green ramp, validated on #040a07 */
  --onset-60: #4aa969;
  --onset-120: #8cd19e;
  --onset-720: #c1eacb;
  --surge-wash: rgba(244, 194, 94, 0.15);
  --reticle: #9fdcb0;
  --clock: #ffd36b;
  --hudfont: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="verdant"] body { font-size: 13px; }
[data-theme="verdant"] .br { display: none; }

/* header */
[data-theme="verdant"] .brand { font: 500 26px/1 var(--hudfont); letter-spacing: 0.04em; display: inline-flex; align-items: center; }
[data-theme="verdant"] .brand .sprout { color: #8fdca6; margin-right: 10px; flex: none; }
[data-theme="verdant"] .brand .w { font-weight: 600; }
[data-theme="verdant"] .brand .sl { color: var(--sage); margin: 0 0.35em; }
[data-theme="verdant"] .brand .tag { font: 500 11px/1 var(--hudfont); letter-spacing: 0.34em; color: var(--hud); margin-left: 16px; vertical-align: 0; }
[data-theme="verdant"] .byline { font: 13px/1.6 var(--hudfont); color: var(--ink-2); }
[data-theme="verdant"] .ctl-lbl { font: 500 10.5px/1 var(--hudfont); letter-spacing: 0.18em; color: var(--hud); opacity: 0.85; }
[data-theme="verdant"] .seg { gap: 4px; }
[data-theme="verdant"] .seg button { border-radius: 999px; font: 500 12px/1 var(--hudfont); letter-spacing: 0.06em; padding: 7px 12px; }
[data-theme="verdant"] .seg button[aria-checked="true"] { background: var(--hud-tint); border-color: rgba(143, 227, 166, 0.55); color: var(--ink); box-shadow: 0 0 14px -4px rgba(143, 227, 166, 0.55); }
[data-theme="verdant"] .seg button[aria-checked="true"]::before, [data-theme="verdant"] .seg button[aria-checked="true"]::after { display: none; }
[data-theme="verdant"] .seg-xs button { padding: 2px 9px 1px; font-size: 11px; letter-spacing: 0.04em; }
[data-theme="verdant"] .status { border-radius: 999px; font: 500 11.5px/1 var(--hudfont); letter-spacing: 0.14em; padding: 6px 12px 6px 10px; }
[data-theme="verdant"] .status .dot { border-radius: 50%; }

/* section titles: a small leaf instead of brackets */
[data-theme="verdant"] h2 { font: 500 13px/1.2 var(--hudfont); letter-spacing: 0.16em; }
[data-theme="verdant"] h2::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 0 1px; vertical-align: 1px;
  border-radius: 0 70% 0 70%; background: linear-gradient(135deg, #8fdca6, #3eac66);
}
[data-theme="verdant"] h2 .rg { color: var(--hud); margin-left: 0.5em; }
[data-theme="verdant"] .desc { font: 12px/1.55 var(--hudfont); color: var(--muted); }
[data-theme="verdant"] .chart-wrap { border-top-color: var(--hair); }

/* scene labels + callouts */
[data-theme="verdant"] .hud .row-lbl { font: 500 12px/1 var(--hudfont); letter-spacing: 0.1em; }
[data-theme="verdant"] .hud .now-lbl { font: 500 11px/1 var(--hudfont); letter-spacing: 0.16em; color: var(--hud); }
[data-theme="verdant"] .callout { color: var(--hud-dim); }
[data-theme="verdant"] .callout .k { font: 500 12.5px/1.3 var(--hudfont); letter-spacing: 0.02em; color: var(--hud); margin-bottom: 2px; }
[data-theme="verdant"] .callout .v { color: var(--ink); }
[data-theme="verdant"] .callout .m { color: var(--muted); }
[data-theme="verdant"] .callout.bracket { padding-left: 14px; }
[data-theme="verdant"] .callout.bracket::before { width: 0; border: 0; border-left: 1px solid rgba(95, 138, 109, 0.9); top: 7px; bottom: 2px; }
[data-theme="verdant"] .callout.bracket::after { content: ""; position: absolute; left: -3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--hud); box-shadow: 0 0 8px rgba(191, 238, 203, 0.7); }
[data-theme="verdant"] .clock-dot { width: 9px; height: 9px; background: radial-gradient(circle, #fff6d0 0 30%, #ffd36b 55%, rgba(255, 211, 107, 0) 72%); box-shadow: 0 0 10px rgba(255, 211, 107, 0.8); vertical-align: -1px; }
[data-theme="verdant"] .state-callout::before { border-left-color: var(--sage); }
[data-theme="verdant"] .state-callout::after { border-top-color: var(--sage); }
[data-theme="verdant"] .state-callout .big { font: 300 32px/1 var(--hudfont); letter-spacing: 0.16em; color: #a6efbd; text-shadow: 0 0 22px rgba(143, 227, 166, 0.35); }
[data-theme="verdant"] .state-callout[data-state="ELEVATED"] .big { color: var(--warm); text-shadow: 0 0 22px rgba(244, 194, 94, 0.35); }
[data-theme="verdant"] .state-callout[data-state="SPIKE"] .big { color: #e07434; text-shadow: 0 0 22px rgba(224, 116, 52, 0.4); }
[data-theme="verdant"] .state-callout[data-state="REFRACTORY"] .big { color: var(--muted); text-shadow: none; }
[data-theme="verdant"] .state-callout .sub { color: var(--muted); font: 12px/1.5 var(--hudfont); }

/* board */
[data-theme="verdant"] .b-head { font: 500 10.5px/1 var(--hudfont); letter-spacing: 0.16em; color: var(--hud); opacity: 0.85; }
[data-theme="verdant"] .b-row { border-radius: 10px; border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--hair); }
[data-theme="verdant"] .b-row[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(143, 227, 166, 0.28); }
[data-theme="verdant"] .b-row[aria-pressed="true"]::before { left: 0; top: 10px; bottom: 10px; width: 3px; border: 0; border-radius: 3px; background: var(--hud); box-shadow: 0 0 10px rgba(191, 238, 203, 0.7); }
[data-theme="verdant"] .b-row[aria-pressed="true"]::after { display: none; }
[data-theme="verdant"] .b-code { font: 600 15px/1 var(--hudfont); letter-spacing: 0.08em; }
[data-theme="verdant"] .b-state { font: 500 11px/1 var(--hudfont); letter-spacing: 0.12em; color: #6fae82; }
[data-theme="verdant"] .b-state[data-state="ELEVATED"] { color: var(--warm); }
[data-theme="verdant"] .b-state[data-state="SPIKE"] { color: #e07434; }
[data-theme="verdant"] .b-state[data-state="REFRACTORY"] { color: var(--muted); }
[data-theme="verdant"] .b-cell { border-radius: 7px; }
[data-theme="verdant"] .b-cell .fill { border-radius: 0 2px 0 0; }
[data-theme="verdant"] .b-surge { border-radius: 7px; border-color: var(--ember); color: var(--ink); background: rgba(184, 81, 18, 0.2); font: 600 11.5px/1 var(--hudfont); }
[data-theme="verdant"] .ro { border-radius: 12px; background: var(--panel); }
[data-theme="verdant"] .ro .k { font: 500 10.5px/1 var(--hudfont); letter-spacing: 0.14em; color: var(--hud); opacity: 0.9; }

/* tooltip */
[data-theme="verdant"] .tooltip { border-radius: 12px; border-color: rgba(191, 238, 203, 0.28); }
[data-theme="verdant"] .tooltip::before { display: none; }
[data-theme="verdant"] .tooltip .t-h { font: 500 12px/1.4 var(--hudfont); letter-spacing: 0.04em; }

/* terrain colour key (themes with a hypsometric terrain) */
.scene-legend { display: flex; align-items: flex-start; gap: 0 10px; font: 11px/1 var(--hudfont); color: var(--muted); }
.scene-legend .lg-k { color: var(--muted); letter-spacing: 0.06em; padding-top: 2px; }
.scene-legend .lg-bar { position: relative; width: 250px; height: 22px; margin: 3px 14px 0 6px; }
.scene-legend .lg-grad { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; box-shadow: 0 0 12px rgba(143, 227, 166, 0.18); }
.scene-legend .lg-t { position: absolute; top: 10px; transform: translateX(-50%); font: 9.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .scene-legend .lg-k, .scene-legend .lg-t.minor { display: none; }
  .scene-legend .lg-bar { width: 170px; }
  [data-theme="verdant"] .brand { font-size: 21px; }
}
[data-theme="verdant"] .hud .lbl, [data-theme="verdant"] .callout { text-shadow: 0 0 3px #040a07, 0 0 6px #040a07, 0 0 10px rgba(4, 10, 7, 0.9); }