/* Themes.
 *
 * "Slate" is the base look and lives in each page's own <style>; nothing here touches it.
 * It is what the page renders without an attribute, but it is no longer the default the
 * picker starts on - theme.js opens on cockpit.
 * A theme is only a block of variable overrides plus whatever cosmetic rules that
 * look needs — the markup and the JS are identical across themes, which is the whole
 * reason a theme is a CSS file and not a second page.
 *
 * ponytail: no build step, no CSS-in-JS. One attribute on <html> selects a block. */

/* Every theme here is dark, so tell the browser: without this the native dropdown list,
   the scrollbars and the focus rings are drawn light - which is how a <select> ends up
   showing white-on-white options while the closed control looks correct. */
:root { color-scheme: dark; }

/* Chrome still paints the popup from the control's own background, and a gradient
   background is not a colour it can use, so the options state their own. */
option { background: var(--panel); color: var(--text); }

/* The theme picker itself has to look native in every theme, so it borrows the same
   variables the page buttons use rather than carrying colours of its own. */
.theme-pick {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font: inherit; cursor: pointer;
}
.theme-pick:hover { border-color: var(--muted); }

/* ---------------------------------------------------------------------------
   M Cockpit — a car instrument cluster.

   Two colour ideas, both from the same dashboard: the M stripe (blue → violet → red)
   marks the chrome, and an amber backlight carries the readouts. Everything else is
   black plastic and a bevel, so the numbers are the only thing that glows.
   --------------------------------------------------------------------------- */
:root[data-theme="cockpit"] {
  --bg: #05070a; --panel: #0d1117; --line: #1d242e;
  --text: #f2f5f9; --muted: #7c8798;

  --over: #e4002b; --under: #00c389; --warn: #ff9e00;

  /* Window series: M blue, M violet, and the amber backlight. */
  --c5h: #2e8fff; --c7d: #9b5cff; --cfable: #ff8a00;

  /* Model ramp on the spend page, same family. */
  --m1: #2e8fff; --m2: #9b5cff; --m3: #e4002b; --m4: #00c389; --m5: #ff8a00;

  --stripe: linear-gradient(90deg, #2e8fff 0 34%, #9b5cff 34% 67%, #e4002b 67%);
  --bevel: 0 1px 0 #ffffff12 inset, 0 -1px 0 #00000080 inset, 0 12px 28px #000000a6;
  --dial: "Bahnschrift", "DIN Alternate", ui-sans-serif, system-ui, sans-serif;
}

/* Carbon weave under a soft overhead light. Both layers are cheap gradients — a
   texture image would be a request and a cache entry for something nobody looks at. */
:root[data-theme="cockpit"] body {
  background:
    radial-gradient(1100px 520px at 50% -15%, #16202c 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 3px, #ffffff06 3px 4px),
    var(--bg);
  background-attachment: fixed;
}

:root[data-theme="cockpit"] h1 {
  font-family: var(--dial); font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
:root[data-theme="cockpit"] #updated { letter-spacing: .08em; text-transform: uppercase; }

:root[data-theme="cockpit"] button,
:root[data-theme="cockpit"] .actions a,
:root[data-theme="cockpit"] .btn,
:root[data-theme="cockpit"] .theme-pick {
  background: linear-gradient(180deg, #171e27, #0b0f15);
  border: 1px solid #273040; border-radius: 3px;
  font-family: var(--dial); text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; box-shadow: var(--bevel);
}
:root[data-theme="cockpit"] button:hover,
:root[data-theme="cockpit"] .actions a:hover,
:root[data-theme="cockpit"] .btn:hover,
:root[data-theme="cockpit"] .theme-pick:hover {
  border-color: #2e8fff; box-shadow: 0 0 0 1px #2e8fff40, 0 0 18px #2e8fff33;
}

:root[data-theme="cockpit"] .card,
:root[data-theme="cockpit"] .chart {
  background: linear-gradient(180deg, #131a23, #0a0d12);
  border: 1px solid #212936; border-radius: 4px;
  box-shadow: var(--bevel);
  position: relative; overflow: hidden;
}

/* The M stripe across the top of every pod. A card that is over pace drops the stripe
   for solid red — same place, same thickness, so the eye reads it as a state and not
   as decoration that moved. */
:root[data-theme="cockpit"] .card::before,
:root[data-theme="cockpit"] .chart::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe);
  opacity: .85;
}
:root[data-theme="cockpit"] .card.over  { border-left: 1px solid #212936; }
:root[data-theme="cockpit"] .card.under { border-left: 1px solid #212936; }
:root[data-theme="cockpit"] .card.over::before  { background: var(--over);  opacity: 1; }
:root[data-theme="cockpit"] .card.under::before { background: var(--under); opacity: .9; }
:root[data-theme="cockpit"] .card.over { box-shadow: var(--bevel), 0 0 30px #e4002b26; }

:root[data-theme="cockpit"] .card h2,
:root[data-theme="cockpit"] .chart h2 {
  font-family: var(--dial); letter-spacing: .18em; text-transform: uppercase;
  color: #93a1b5;
}

/* The readout. Backlit type is the one place a glow earns itself: it is what makes a
   number look lit from behind rather than printed. */
:root[data-theme="cockpit"] .pace,
:root[data-theme="cockpit"] .big {
  font-family: var(--dial); font-size: 38px; font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 0 22px currentColor;
}
:root[data-theme="cockpit"] .big { color: #ff8a00; }
:root[data-theme="cockpit"] .pct { font-family: var(--dial); letter-spacing: .06em; }

/* The bar as a sunk channel with a lit fill, and the pace marker as the red line on
   a tachometer face. */
:root[data-theme="cockpit"] .bar {
  height: 10px; border-radius: 2px; background: #04060a;
  box-shadow: 0 1px 2px #000 inset, 0 0 0 1px #1b2230 inset;
}
:root[data-theme="cockpit"] .bar i {
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 100%, white 25%), var(--c));
  box-shadow: 0 0 12px var(--c);
}
:root[data-theme="cockpit"] .bar b {
  background: var(--over); width: 2px; box-shadow: 0 0 8px var(--over);
}

/* The dial. Wider than the default because it now has a scale to read against, and the
   needle is the only part that glows - a face where everything glows reads as noise. */
:root[data-theme="cockpit"] .gauge { width: 92px; }
:root[data-theme="cockpit"] .gauge.idle { width: 92px; }

:root[data-theme="cockpit"] .band { stroke-width: 4; opacity: .55; }
:root[data-theme="cockpit"] .band path:last-child { opacity: 1; }   /* the redline stays lit */

:root[data-theme="cockpit"] .ticks line {
  stroke: #5d6a7d; stroke-width: .8; stroke-linecap: round;
}
:root[data-theme="cockpit"] .ticks .major { stroke: #9fb0c6; stroke-width: 1.2; }
:root[data-theme="cockpit"] .ticks .hot   { stroke: var(--over); }

:root[data-theme="cockpit"] .needle {
  stroke: var(--over); stroke-width: 2.2;
  filter: drop-shadow(0 0 3px var(--over));
}
:root[data-theme="cockpit"] .tail {
  stroke: var(--over); stroke-width: 3; stroke-linecap: round; opacity: .75;
}
:root[data-theme="cockpit"] .hub {
  fill: #0a0d12; stroke: #6b7789; stroke-width: 1.6;
}
:root[data-theme="cockpit"] .read {
  font-family: var(--dial); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  filter: drop-shadow(0 0 5px currentColor);
  /* Pushed to the bottom of the viewBox so the digits clear the needle's counterweight. */
  transform: translateY(1.5px);
}

:root[data-theme="cockpit"] th {
  font-family: var(--dial); text-transform: uppercase; letter-spacing: .12em;
}
:root[data-theme="cockpit"] td, :root[data-theme="cockpit"] th { border-bottom-color: #1a212c; }
:root[data-theme="cockpit"] tr:hover td { background: #ffffff06; }