/*
 * GARAGE skin - complete stylesheet.
 *
 * Rebuilt from scratch against the supplied "GARAGE SKIN - UI components &
 * states" design sheet. The garage-only rules that used to live in
 * cartoon-dashboard.css have been removed from that file; what remains there
 * is the cockpit skeleton shared with ALIEN. Everything the garage skin looks
 * like is in this file.
 *
 * Scope rule: every selector starts with html[data-skin="garage"], so this
 * file is inert for CLASSIC / TECH / RETRO / ALIEN.
 * tests/test_dashboard_html.py parses the sheet and fails on any escape.
 *
 * ---------------------------------------------------------------------------
 * Honesty notes - the design sheet shows a few things Wingcheck cannot back:
 *
 *  - STATION HEALTH in the reference lists ANEMOMETER / BAROMETER / POWER
 *    SUPPLY / BACKUP BATTERY. Wingcheck has none of those. The panel renders
 *    one row per REAL station in station_health.
 *  - The reference legend hardcodes GOOD >=75% / MARGINAL 40-74%. The real
 *    cutoffs come from final_weights.tier_thresholds and are rendered from it.
 *  - The 4th gauge stays AIR TEMP, not LAKE water temp, because that is what
 *    the live lake reading actually carries. lake_water_temperature is a
 *    separate, currently-null field and is not dressed up as this gauge.
 *  - The reference puts BEST WINDOW inline in the middle of the hour rail. A
 *    single scroll rail cannot be split around it, so it sits as a full-width
 *    phosphor hero above the rail - which is what the supplied mobile layout
 *    does too.
 *  - No ACTUAL vs FORECAST chart in the cockpit: that chart already exists in
 *    the detailed dashboard below, and a second Chart.js canvas would add
 *    another CDN-dependent surface for the same data.
 *
 * Presentation only. Every value still comes from dashboard_data.json and
 * missing data still renders "--".
 */

/* ============================================================== tokens === */
/* Hexes are the design sheet's own colour tokens, verbatim. */

html[data-skin="garage"] {
  --g-metal:#4A6F73;          /* TEAL METAL      */
  --g-metal-dark:#2F4C4F;     /* TEAL DARK       */
  --g-rust:#7C4A2E;           /* RUST            */
  --g-tape:#E8DEC6;           /* CREAM TAPE      */
  --g-tape-shadow:#CDBFA8;    /* TAPE SHADOW     */
  --g-paper:#F4EBD8;          /* PAPER           */
  --g-screen:#0A160F;         /* PHOSPHOR SCREEN */
  --g-screen-glow:#19FF77;    /* SCREEN GLOW     */
  --g-bolt:#3F4348;           /* BOLT STEEL      */
  --g-steel:#6D747A;          /* STEEL           */

  --g-acid:#7CFF4A;           /* ACID GREEN */
  --g-cyan:#62D1FF;           /* CYAN       */
  --g-amber:#FFB335;          /* AMBER      */
  --g-coral:#FF6B6B;          /* CORAL      */
  --g-green-dim:#2BBE4A;
  --g-blue-dim:#3A8DCC;
  --g-amber-dim:#CC8A1E;
  --g-coral-dim:#CC5A5A;

  --g-hand:'Permanent Marker','Special Elite',cursive;
  --g-type:'Special Elite','IBM Plex Mono',monospace;
  --g-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Base-sheet variables, for the detailed dashboard below the cockpit. */
  --ice:#E9E3D5;
  --card:#F3EDDF;
  --line:#887D67;
  --line-soft:#CFC5AF;
  --ink:#17201D;
  --ink-2:#46534D;
  --ink-3:#6E7268;
  --blue:#1F6D8C;
  --good:#2F7D32;  --good-soft:#E4EFD9;  --good-ink:#2A6B2C;
  --warn:#9A6714;  --warn-soft:#F6EBD4;  --warn-ink:#7E540F;
  --bad-soft:#EDE7D8;  --bad-ink:#5C6157;
  --crit:#B03A3A;  --crit-soft:#F7E2E0;  --crit-ink:#8E2C2C;
  --radius:6px;
  --radius-lg:8px;
  --shadow:0 9px 18px rgba(58,48,32,.16),0 2px 2px rgba(58,48,32,.18);
  color-scheme:light;
}

/* ================================================================ page === */

html[data-skin="garage"] body {
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(124,74,46,.08),transparent 22%),
    linear-gradient(90deg,rgba(47,76,79,.035) 1px,transparent 1px),
    linear-gradient(rgba(47,76,79,.035) 1px,transparent 1px),
    var(--ice);
  background-size:auto,32px 32px,32px 32px,auto;
}

/* ------------------------------------------------------- bolted plate === */

/* The skin's most repeated object. Bolts are four radial gradients rather
   than four elements, so any box becomes a plate with no extra markup. */
html[data-skin="garage"] .cs-hour-bank,
html[data-skin="garage"] .cs-outlook,
html[data-skin="garage"] .cs-system {
  position:relative;
  border:1px solid rgba(12,22,23,.5);
  border-radius:7px;
  background-color:var(--g-metal);
  background-image:
    radial-gradient(circle at 9px 9px,#5B7A7E 0 2.2px,var(--g-bolt) 2.6px 4.4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) 9px,#5B7A7E 0 2.2px,var(--g-bolt) 2.6px 4.4px,transparent 5px),
    radial-gradient(circle at 9px calc(100% - 9px),#5B7A7E 0 2.2px,var(--g-bolt) 2.6px 4.4px,transparent 5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#5B7A7E 0 2.2px,var(--g-bolt) 2.6px 4.4px,transparent 5px),
    linear-gradient(158deg,rgba(255,255,255,.1),transparent 34%),
    linear-gradient(0deg,rgba(10,20,21,.34),transparent 46%);
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 5px rgba(6,14,15,.4),
    0 6px 14px rgba(12,24,25,.3);
}

/* ============================================================= chassis === */

html[data-skin="garage"] .cartoon-stage {
  /* Rows size to their content; without this the best-window screen inflates
     to fill whatever height is left over in the stage. */
  grid-auto-rows:min-content;
  align-content:start;
  gap:13px;
  min-height:0;
  margin-top:46px;
  padding:22px 26px 56px;
  border:0;
  border-radius:14px;
  /* The chassis art carries the rivets, rust, plasma tube and specimen jar. */
  background:
    linear-gradient(180deg,rgba(20,38,40,.24),rgba(20,38,40,.42)),
    url("./assets/garage-chassis-desktop.webp") center/100% 100% no-repeat,
    var(--g-metal-dark);
  box-shadow:0 26px 60px rgba(14,26,27,.44);
}
/* The vector scene belongs to alien; garage's world is the chassis photo. */
html[data-skin="garage"] .cs-scene { display:none; }

/* ============================================================ masthead === */

html[data-skin="garage"] .cs-masthead {
  z-index:2;
  display:grid;
  grid-column:1/-1;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:16px;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
/* The masthead sign: a taped-up cream board. */
html[data-skin="garage"] .cs-masthead > div:first-child {
  /* Clears the emblem badge, which the rig pins to the stage's top-left. */
  margin-left:104px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  max-width:none;
  padding:9px 20px 8px;
  border-radius:5px;
  background:var(--g-tape);
  box-shadow:0 2px 0 var(--g-tape-shadow),0 8px 16px rgba(10,20,21,.36);
  transform:rotate(-.35deg);
}
/* The eyebrow repeats the <h1> verbatim; the sign already says it. */
html[data-skin="garage"] .cs-eyebrow { display:none; }
html[data-skin="garage"] .cs-alien-title { display:none; }
html[data-skin="garage"] .cs-title,
html[data-skin="garage"] .cs-garage-title {
  max-width:none;
  color:#241E14;
  font-family:var(--g-hand);
  font-size:clamp(23px,2.9vw,40px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
html[data-skin="garage"] .cs-question {
  margin:0;
  color:#4C4334;
  font:400 13px/1.3 var(--g-type);
  font-style:normal;
  letter-spacing:.03em;
}
html[data-skin="garage"] .cs-question::before { content:"—≻ "; }
html[data-skin="garage"] .cs-question::after { content:" ≺—"; }

/* --------------------------------------------------------- status lamps */

html[data-skin="garage"] .cs-status-bank {
  display:flex;
  flex-direction:column;
  gap:6px;
  align-self:center;
}
html[data-skin="garage"] .cs-lamp {
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 12px 4px 9px;
  color:var(--g-tape);
  border:1px solid rgba(12,22,23,.55);
  border-radius:5px;
  background:linear-gradient(180deg,#3D6165,#2B4649);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 7px rgba(10,20,21,.35);
  font:400 9.5px/1 var(--g-type);
  letter-spacing:.15em;
  white-space:nowrap;
}
html[data-skin="garage"] .cs-lamp i {
  width:11px;
  height:11px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#C9FFB0,var(--g-acid) 42%,var(--g-green-dim) 78%);
  box-shadow:0 0 8px rgba(124,255,74,.75),inset 0 -1px 2px rgba(0,40,0,.5);
}
html[data-skin="garage"] .cs-lamp.warn i {
  background:radial-gradient(circle at 34% 30%,#FFE2A8,var(--g-amber) 42%,var(--g-amber-dim) 78%);
  box-shadow:0 0 8px rgba(255,179,53,.75),inset 0 -1px 2px rgba(60,30,0,.5);
}

/* -------------------------------------------------------------- buttons */

html[data-skin="garage"] .cs-actions { display:flex; gap:9px; }
html[data-skin="garage"] .cs-actions button {
  min-height:44px;              /* design sheet: >=44px tap target */
  padding:0 17px;
  color:#0E1A0C;
  border:1px solid rgba(12,22,23,.6);
  border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.28),
    0 4px 0 rgba(12,24,25,.5),
    0 8px 14px rgba(10,20,21,.34);
  font:400 12px/1 var(--g-type);
  letter-spacing:.13em;
  cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;
}
html[data-skin="garage"] .cs-actions button:first-child {
  background:linear-gradient(180deg,#8EE34E,var(--g-green-dim));
}
html[data-skin="garage"] .cs-actions button:last-child {
  color:#08131C;
  background:linear-gradient(180deg,#79C2EF,var(--g-blue-dim));
}
html[data-skin="garage"] .cs-actions button:hover { filter:brightness(1.08); }
html[data-skin="garage"] .cs-actions button:active {
  transform:translateY(3px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.42),0 1px 0 rgba(12,24,25,.5);
}
html[data-skin="garage"] .cs-actions button:disabled {
  filter:grayscale(1);
  opacity:.62;
  cursor:not-allowed;
}
/* Design sheet: 2px solid cyan with 2px offset, on every interactive part. */
html[data-skin="garage"] button:focus-visible,
html[data-skin="garage"] a:focus-visible,
html[data-skin="garage"] summary:focus-visible {
  outline:2px solid var(--g-cyan);
  outline-offset:2px;
}

/* ---------------------------------------------------------- theme panel */

html[data-skin="garage"] .skin-toggle {
  gap:0;
  padding:5px;
  border:1px solid rgba(12,22,23,.6);
  border-radius:6px;
  background:linear-gradient(180deg,#43696D,#2C4A4D);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 6px 14px rgba(10,20,21,.34);
  font-family:var(--g-type);
  font-size:10px;
}
html[data-skin="garage"] .skin-toggle button {
  padding:5px 10px;
  color:#CFE0D8;
  letter-spacing:.13em;
}
html[data-skin="garage"] .skin-toggle button.active {
  color:#0E1A0C;
  border-radius:4px;
  background:var(--g-acid);
  box-shadow:0 0 9px rgba(124,255,74,.5);
}

html[data-skin="garage"] .cs-nav { display:none; }

/* ========================================================= instruments === */

html[data-skin="garage"] .cs-instruments {
  z-index:2;
  display:grid;
  grid-column:1/-1;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
/* The live-status line is its own tape strip above the bank. */
html[data-skin="garage"] .cs-live-status {
  grid-column:1/-1;
  justify-self:start;
  margin-left:104px;      /* clears the emblem badge, like the sign above */
  padding:3px 12px 2px;
  color:#2B2519;
  border:0;
  border-radius:0;
  background:var(--g-tape);
  box-shadow:0 1px 0 var(--g-tape-shadow),0 3px 6px rgba(10,20,21,.3);
  font:400 9.5px/1.55 var(--g-type);
  letter-spacing:.15em;
  text-transform:uppercase;
  transform:rotate(-.3deg);
}
html[data-skin="garage"] .cs-live-status[data-state="stale"] { color:#7A4E06; }
html[data-skin="garage"] .cs-live-status[data-state="missing"] { color:#7A2E2E; }

/* ------------------------------------------ mounted-gauge geometry === */

/* The generated SVG uses preserveAspectRatio="none" on a 320x220 viewBox, so
   the instrument box has to hold that ratio or the dial stretches. The tape
   label, digital readout and unit are absolutely placed over the screen well
   the SVG draws - the recovered component rules below give them their
   coordinates, this gives them their positioning context. */
html[data-skin="garage"] .cs-instrument { position:relative; }
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
  aspect-ratio:320/220;
  min-height:0;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span,
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong,
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > small {
  position:absolute;
  margin:0;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span {
  color:#2B2519;
  text-align:center;
  font:400 9.5px/1.4 var(--g-type);
  letter-spacing:.15em;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong {
  color:var(--g-acid);
  text-align:center;
  font-family:var(--g-mono);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 9px rgba(25,255,119,.55);
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > small {
  font:400 9px/1 var(--g-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ==================================================== best-window hero === */

html[data-skin="garage"] .cs-decision {
  z-index:2;
  grid-column:1/-1;
  /* Without these the panel stretches to its stage row and the auto tracks
     inflate with it - the screen ended up 280px tall for 120px of content. */
  align-self:start;
  align-content:start;
  /* The shared cockpit rule sets min-height:280px for alien's tall panel. */
  min-height:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0 26px;
  max-width:none;
  padding:11px 24px 12px;
  border:5px solid #2B4A4D;
  border-radius:9px;
  background:var(--g-screen);
  box-shadow:
    inset 0 0 0 2px rgba(124,255,74,.28),
    inset 0 0 40px rgba(25,255,119,.1),
    0 0 22px rgba(124,255,74,.22),
    0 10px 22px rgba(10,20,21,.4);
  text-align:center;
}
html[data-skin="garage"] .cs-decision-kicker {
  grid-column:1/-1;
  color:rgba(124,255,74,.72);
  font:400 10.5px/1 var(--g-type);
  letter-spacing:.28em;
}
html[data-skin="garage"] .cs-decision-kicker::before { content:"★ "; }
html[data-skin="garage"] .cs-decision-kicker::after { content:" ★"; }
html[data-skin="garage"] .cs-window {
  grid-column:1/-1;
  margin:4px 0 6px;
  color:var(--g-acid);
  font:600 clamp(28px,3.4vw,46px)/1 var(--g-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  text-shadow:0 0 20px rgba(25,255,119,.5);
}
/* Two readouts either side of a hairline, as on the reference screen. */
html[data-skin="garage"] .cs-decision-row { display:contents; }
html[data-skin="garage"] .cs-decision-row strong {
  grid-column:1;
  justify-self:end;
  color:var(--g-acid);
  font:400 clamp(14px,1.5vw,21px)/1 var(--g-type);
  letter-spacing:.09em;
}
html[data-skin="garage"] .cs-decision-row::before {
  content:"";
  grid-column:2;
  align-self:stretch;
  width:1px;
  min-height:26px;
  background:rgba(124,255,74,.3);
}
html[data-skin="garage"] .cs-decision-row span {
  grid-column:3;
  justify-self:start;
  color:var(--g-acid);
  font:600 clamp(14px,1.5vw,21px)/1 var(--g-mono);
  font-variant-numeric:tabular-nums;
}
html[data-skin="garage"] .cs-windline {
  grid-column:1/-1;
  margin-top:9px;
  padding-top:9px;
  color:rgba(124,255,74,.78);
  border-top:1px solid rgba(124,255,74,.22);
  font:400 11.5px/1.5 var(--g-mono);
  letter-spacing:.05em;
}
html[data-skin="garage"] .cs-energy { display:none; }

/* ======================================================= hour forecast === */

html[data-skin="garage"] .cs-hour-bank {
  z-index:2;
  grid-column:1/span 8;
  padding:13px 14px 14px;
}
html[data-skin="garage"] .cs-module-head {
  align-items:center;
  margin-bottom:11px;
}
html[data-skin="garage"] .cs-module-head > span:first-child {
  padding:3px 11px 2px;
  color:#2B2519;
  background:var(--g-tape);
  box-shadow:0 1px 0 var(--g-tape-shadow);
  font:400 10px/1.5 var(--g-type);
  letter-spacing:.16em;
  white-space:nowrap;
  transform:rotate(-.4deg);
}
html[data-skin="garage"] .cs-module-head > span:last-child {
  color:rgba(232,222,198,.62);
  font:400 9px/1 var(--g-mono);
  letter-spacing:.16em;
  white-space:nowrap;
}
html[data-skin="garage"] .cs-hours {
  gap:9px;
  padding:2px 2px 8px;
  grid-auto-columns:minmax(96px,1fr);
}

/* The hourly card: dark header strip, parchment body, tier footer. */
html[data-skin="garage"] .cs-hour {
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:0;
  min-height:174px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(12,22,23,.55);
  border-radius:6px;
  background:var(--g-paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 5px 11px rgba(10,20,21,.3);
}
html[data-skin="garage"] .cs-hour-art { display:none; }
html[data-skin="garage"] .cs-hour > span {
  padding:5px 0 4px;
  color:var(--g-tape);
  background:linear-gradient(180deg,#39585B,#2A4447);
  font:600 11px/1 var(--g-mono);
  letter-spacing:.09em;
}
html[data-skin="garage"] .cs-hour > strong {
  margin:9px 0 0;
  color:#22301F;
  font:600 26px/1 var(--g-mono);
  font-variant-numeric:tabular-nums;
}
/* windGlyph()'s stencil mark; windBarb() is the alien read. */
html[data-skin="garage"] .cs-hour > .cs-windbarb { display:none; }
html[data-skin="garage"] .cs-hour > .cs-windglyph {
  width:56px;
  height:24px;
  margin:6px auto 0;
  color:#40554A;
}
html[data-skin="garage"] .cs-glyph-frame { display:none; }
html[data-skin="garage"] .cs-hour > small {
  margin:0 0 7px;
  color:#5A6355;
  font:600 10.5px/1 var(--g-mono);
  letter-spacing:.05em;
}
/* Tier footer strip - the design sheet's tier badge, drawn rather than
   imaged: garage-tier-badge.webp carries an opaque matte that left a hard
   rectangle on the parchment at every background-size. */
html[data-skin="garage"] .cs-hour > b {
  align-self:end;
  padding:5px 0 4px;
  border-top:1px solid rgba(12,22,23,.3);
  font:400 9.5px/1 var(--g-type);
  letter-spacing:.13em;
}
html[data-skin="garage"] .cs-hour.good > b {
  color:#0E2A10;
  background:linear-gradient(180deg,#9EDE64,var(--g-green-dim));
}
html[data-skin="garage"] .cs-hour.marginal > b {
  color:#2E1D00;
  background:linear-gradient(180deg,#FFCD6D,var(--g-amber-dim));
}
html[data-skin="garage"] .cs-hour.unlikely > b {
  color:#08202C;
  background:linear-gradient(180deg,#8FD0F5,var(--g-blue-dim));
}
html[data-skin="garage"] .cs-hour.good { background:#E8F0D8; }
html[data-skin="garage"] .cs-hour.marginal { background:#F4E9CE; }
html[data-skin="garage"] .cs-hour.unlikely { background:#DFE9EF; }
html[data-skin="garage"] .cs-hour.selected {
  border-color:var(--g-acid);
  transform:none;
  box-shadow:
    0 0 0 2px var(--g-acid),
    0 0 20px rgba(124,255,74,.5),
    0 6px 13px rgba(10,20,21,.34);
}
html[data-skin="garage"] .cs-hour.selected::after { content:none; }

/* ============================================================ outlook === */

html[data-skin="garage"] .cs-outlook {
  z-index:2;
  grid-column:9/-1;
  padding:13px 14px 14px;
}
html[data-skin="garage"] .cs-days {
  display:flex;
  flex-direction:column;
  gap:8px;
  height:auto;
}
html[data-skin="garage"] .cs-day {
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(12,22,23,.4);
  border-radius:5px;
  background:rgba(10,22,15,.5);
}
html[data-skin="garage"] .cs-day span {
  color:rgba(232,222,198,.66);
  font:400 9.5px/1 var(--g-mono);
  letter-spacing:.1em;
}
html[data-skin="garage"] .cs-day strong {
  color:var(--g-acid);
  font:600 19px/1 var(--g-mono);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 9px rgba(25,255,119,.45);
}
html[data-skin="garage"] .cs-day b {
  justify-self:start;
  font:400 9px/1 var(--g-type);
  letter-spacing:.12em;
  white-space:nowrap;
}
html[data-skin="garage"] .cs-day.good b { color:var(--g-acid); }
html[data-skin="garage"] .cs-day.marginal b { color:var(--g-amber); }
html[data-skin="garage"] .cs-day.unlikely b { color:var(--g-cyan); }
html[data-skin="garage"] .cs-day small {
  color:rgba(232,222,198,.55);
  font:400 9px/1 var(--g-mono);
  letter-spacing:.05em;
}

/* ====================================================== daily summary === */

/* Paper note: parchment, a red margin rule, a punched spiral edge. */
html[data-skin="garage"] .cs-actual {
  z-index:2;
  grid-column:1/span 5;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 15px 13px 30px;
  border:1px solid rgba(12,22,23,.35);
  border-radius:4px;
  background:
    radial-gradient(circle at 12px 15px,rgba(12,22,23,.5) 0 3px,transparent 3.6px)
      left top/100% 27px repeat-y,
    linear-gradient(90deg,transparent 23px,rgba(176,58,58,.42) 23px 24px,transparent 24px),
    var(--g-paper);
  box-shadow:0 7px 15px rgba(10,20,21,.3);
  transform:rotate(-.25deg);
}
html[data-skin="garage"] .cs-actual .cs-module-head > span:first-child {
  padding:0;
  color:#3A2F1D;
  background:none;
  box-shadow:none;
  font-family:var(--g-hand);
  font-size:17px;
  letter-spacing:.02em;
  transform:none;
}
html[data-skin="garage"] .cs-actual .cs-module-head > span:last-child { color:#7A6B4E; }
html[data-skin="garage"] .cs-actual > strong {
  color:#22301F;
  font:400 15px/1.35 var(--g-type);
}
html[data-skin="garage"] .cs-actual > span {
  color:#6A5C43;
  font:400 10.5px/1.5 var(--g-mono);
  letter-spacing:.04em;
}

/* ===================================================== station health === */

html[data-skin="garage"] .cs-system {
  z-index:2;
  grid-column:6/-1;
  display:flex;
  flex-direction:column;
  padding:12px 14px 13px;
}
html[data-skin="garage"] .cs-system-line {
  display:flex;
  align-items:center;
  gap:9px;
  align-self:stretch;
  padding:7px 10px;
  color:rgba(232,222,198,.82);
  border:1px solid rgba(12,22,23,.4);
  border-radius:4px;
  background:rgba(10,22,15,.5);
  font:400 10.5px/1.4 var(--g-mono);
}
html[data-skin="garage"] .cs-system-line i {
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--g-acid);
  box-shadow:0 0 7px rgba(124,255,74,.7);
}
/* One row per REAL station, appended by garage-dashboard.js. */
html[data-skin="garage"] .g-station-rows {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:6px;
  margin-top:8px;
}
html[data-skin="garage"] .g-station-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  color:rgba(232,222,198,.78);
  border:1px solid rgba(12,22,23,.4);
  border-radius:4px;
  background:rgba(10,22,15,.42);
  font:400 9.5px/1.4 var(--g-mono);
  letter-spacing:.1em;
}
html[data-skin="garage"] .g-station-row i {
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--g-acid);
  box-shadow:0 0 6px rgba(124,255,74,.65);
}
html[data-skin="garage"] .g-station-row b {
  margin-left:auto;
  color:var(--g-acid);
  font-weight:400;
}
html[data-skin="garage"] .g-station-row[data-state="stale"] i {
  background:var(--g-amber);
  box-shadow:0 0 6px rgba(255,179,53,.65);
}
html[data-skin="garage"] .g-station-row[data-state="stale"] b { color:var(--g-amber); }
html[data-skin="garage"] .g-station-row[data-state="offline"] i {
  background:var(--g-coral);
  box-shadow:0 0 6px rgba(255,107,107,.65);
}
html[data-skin="garage"] .g-station-row[data-state="offline"] b { color:var(--g-coral); }

/* ============================================================= footer === */

/* The rig already pins "NO WIND IS A LIFESTYLE CHOICE" and "TRUST, BUT
   VERIFY" tapes to the chassis foot, so the footer bar carries only the tier
   legend - printing the slogans twice was the first thing this looked like. */
html[data-skin="garage"] .g-footer {
  z-index:2;
  display:grid;
  grid-column:1/-1;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-items:center;
  margin:2px 0 40px;
}
html[data-skin="garage"] .g-footer-tape { display:none; }
html[data-skin="garage"] .g-footer-tape {
  padding:4px 13px 3px;
  color:#2B2519;
  background:var(--g-tape);
  box-shadow:0 1px 0 var(--g-tape-shadow),0 4px 8px rgba(10,20,21,.3);
  font:400 10px/1.5 var(--g-type);
  letter-spacing:.13em;
  white-space:nowrap;
}
html[data-skin="garage"] .g-footer-tape:first-child { transform:rotate(-.6deg); }
html[data-skin="garage"] .g-footer-tape:last-child { transform:rotate(.5deg); }
html[data-skin="garage"] .g-legend {
  display:flex;
  justify-content:center;
  gap:20px;
  padding:6px 12px;
  border:1px solid rgba(12,22,23,.45);
  border-radius:5px;
  background:rgba(10,22,15,.5);
}
html[data-skin="garage"] .g-legend span {
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(232,222,198,.8);
  font:400 9.5px/1 var(--g-mono);
  letter-spacing:.12em;
}
html[data-skin="garage"] .g-legend i { width:9px; height:9px; border-radius:50%; }
html[data-skin="garage"] .g-legend .good i {
  background:var(--g-acid);
  box-shadow:0 0 6px rgba(124,255,74,.6);
}
html[data-skin="garage"] .g-legend .marginal i {
  background:var(--g-amber);
  box-shadow:0 0 6px rgba(255,179,53,.6);
}
html[data-skin="garage"] .g-legend .unlikely i {
  background:var(--g-cyan);
  box-shadow:0 0 6px rgba(98,209,255,.6);
}
html[data-skin="garage"] .g-legend b { color:rgba(232,222,198,.55); font-weight:400; }

/* ============================================= empty / stale / missing === */

html[data-skin="garage"] .cs-empty {
  padding:20px 12px;
  color:#5A6355;
  text-align:center;
  border:1px dashed rgba(12,22,23,.4);
  border-radius:5px;
  background:var(--g-paper);
  font:400 11px/1.6 var(--g-type);
  letter-spacing:.08em;
}

/* ================================================ detailed dashboard === */

html[data-skin="garage"] .card,
html[data-skin="garage"] details.tech,
html[data-skin="garage"] .latest-wind {
  border:1px solid var(--line-soft);
  border-radius:6px;
  background:var(--card);
  box-shadow:var(--shadow);
}
html[data-skin="garage"] .section-head h2,
html[data-skin="garage"] details.tech > summary {
  font-family:var(--g-hand);
  font-weight:400;
  letter-spacing:.015em;
}
html[data-skin="garage"] .kicker {
  color:#3A2F1D;
  border-radius:3px;
  background:var(--g-tape);
  font-family:var(--g-type);
}
html[data-skin="garage"] .eval-btn {
  color:#0E1A0C;
  border-radius:5px;
  background:linear-gradient(180deg,#8EE34E,var(--g-green-dim));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 rgba(12,24,25,.4);
  font-family:var(--g-type);
  letter-spacing:.1em;
}
html[data-skin="garage"] .fc-card { border-radius:5px; }
html[data-skin="garage"] .hint,
html[data-skin="garage"] .outlook-context { color:#6E7268; }

/* ========================================================== responsive === */

@media (max-width:1050px) {
  html[data-skin="garage"] .cs-instruments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-skin="garage"] .cs-hour-bank,
  html[data-skin="garage"] .cs-outlook,
  html[data-skin="garage"] .cs-actual,
  html[data-skin="garage"] .cs-system { grid-column:1/-1; }
}

/* Design sheet mobile: single column, stacked, hourly scrolls horizontally. */
@media (max-width:760px) {
  html[data-skin="garage"] .cartoon-stage {
    gap:10px;
    margin-top:8px;
    padding:12px 10px 14px;
    border-radius:10px;
    background:
      linear-gradient(180deg,rgba(20,38,40,.26),rgba(20,38,40,.44)),
      url("./assets/garage-chassis-mobile.webp") center/100% 100% no-repeat,
      var(--g-metal-dark);
  }
  html[data-skin="garage"] .cs-masthead { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  html[data-skin="garage"] .cs-masthead > div:first-child { margin-left:0; }
  html[data-skin="garage"] .cs-live-status { margin-left:0; }
  html[data-skin="garage"] .cs-title { font-size:20px; }
  /* Actions move to the sticky bar at the foot of the viewport. */
  html[data-skin="garage"] .cs-actions { display:none; }
  html[data-skin="garage"] .cs-instruments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-skin="garage"] .cs-instrument { aspect-ratio:auto; min-height:134px; }
  html[data-skin="garage"] .cs-hours { grid-auto-columns:minmax(112px,44vw); }
  html[data-skin="garage"] .cs-title { white-space:normal; }
  html[data-skin="garage"] .g-footer { grid-template-columns:1fr; }
  html[data-skin="garage"] .g-footer-tape { display:none; }
  html[data-skin="garage"] .cs-mobile-actions button { min-height:44px; }
}

/* ============================================ mounted gauge hardware === */

/* garage-dashboard.js mounts an SVG analog-digital gauge into every
   [data-garage-gauge] instrument, plus the side-tank rig (plasma tube,
   specimen jar, pipes, cable loom, caution tapes) down the chassis edges.
   That markup is generated, not hand-written, so the rules that dress it are
   carried over rather than rebuilt - they ARE the design sheet's gauge and
   ornament components. The needle angle comes from --reading, which the shared
   cockpit adapter sets from the real measurement.
   ------------------------------------------------------------------- */

html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
  min-height:196px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted::before {
  display:none;
}
html[data-skin="garage"] .garage-gauge {
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 7px 4px rgba(43,35,24,.26));
}
html[data-skin="garage"] .garage-gauge-shadow {
  fill:#202a28;
  opacity:.95;
}
html[data-skin="garage"] .garage-gauge-frame {
  stroke:#202927;
  stroke-width:7;
}
html[data-skin="garage"] .garage-gauge-bezel {
  fill:none;
  stroke:#98a7a1;
  stroke-width:2;
  opacity:.72;
}
html[data-skin="garage"] .garage-gauge-rust {
  fill:#7c4a2e;
  opacity:.34;
  mix-blend-mode:multiply;
}
html[data-skin="garage"] .garage-gauge-rust.second { opacity:.25; }
html[data-skin="garage"] .garage-gauge-face {
  stroke:#242d29;
  stroke-width:4;
}
html[data-skin="garage"] .garage-gauge-glass {
  pointer-events:none;
}
html[data-skin="garage"] .garage-gauge-zone {
  stroke:#554d3b;
  stroke-width:.6;
  opacity:.58;
}
html[data-skin="garage"] .garage-gauge-scale line {
  stroke:#26312b;
  stroke-width:1.2;
}
html[data-skin="garage"] .garage-gauge-scale line.major {
  stroke-width:2.5;
}
html[data-skin="garage"] .garage-gauge-scale text {
  fill:#3c443d;
  font:700 8px var(--mono);
  text-anchor:middle;
  dominant-baseline:middle;
}
html[data-skin="garage"] .garage-compass-letter {
  fill:#26342d!important;
  font:700 12px var(--garage-type)!important;
}
html[data-skin="garage"] .garage-compass-ring {
  fill:none;
  stroke:#526057;
  stroke-width:1;
  opacity:.7;
}
html[data-skin="garage"] .garage-gauge-needle {
  fill:#18211d;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.36));
  transform-box:view-box;
  transform-origin:160px 146px;
  transform:rotate(calc(-65deg + 130deg * var(--reading,0)));
  transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
html[data-skin="garage"] .garage-gauge-needle.direction {
  fill:#b94e43;
  transform-origin:160px 111px;
  transform:rotate(var(--direction,0deg));
}
html[data-skin="garage"] .cs-instrument[data-has-reading="false"] .garage-gauge-needle,
html[data-skin="garage"] .cs-instrument:not([data-has-reading]) .garage-gauge-needle {
  opacity:0;
}
html[data-skin="garage"] .garage-needle-shine {
  fill:#849287;
  opacity:.68;
}
html[data-skin="garage"] .garage-direction-tail {
  fill:#28332e;
}
html[data-skin="garage"] .garage-gauge-pivot-outer {
  fill:#29332e;
  stroke:#9a9b86;
  stroke-width:3;
}
html[data-skin="garage"] .garage-gauge-pivot {
  fill:#131a17;
}
html[data-skin="garage"] .garage-screen-bezel {
  fill:#28332e;
  stroke:#121916;
  stroke-width:3;
}
html[data-skin="garage"] .garage-screen {
  fill:#07120c;
  stroke:#667468;
  stroke-width:1.5;
}
html[data-skin="garage"] .garage-screen-shine {
  fill:#c8ffd0;
  opacity:.045;
}
html[data-skin="garage"] .garage-bolt circle:first-child {
  fill:#262d2c;
  stroke:#a5a396;
  stroke-width:2;
}
html[data-skin="garage"] .garage-bolt circle:nth-child(2) {
  fill:#5d6560;
  stroke:#171b1a;
  stroke-width:1;
}
html[data-skin="garage"] .garage-bolt path {
  fill:none;
  stroke:#1a1e1d;
  stroke-width:1.5;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span {
  z-index:8;
  top:10px;
  left:25%;
  right:25%;
  padding:5px 5px 2px;
  border:1px solid #a79771;
  background:
    repeating-linear-gradient(0deg,rgba(79,58,31,.035) 0 1px,transparent 1px 4px),
    #e8dec6;
  box-shadow:0 2px 2px rgba(43,35,24,.16);
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong {
  z-index:8;
  left:26%;
  right:26%;
  bottom:18px;
  padding:0 25px 0 0;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:34px;
  line-height:38px;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > small {
  z-index:9;
  right:28%;
  bottom:24px;
  color:#b9ff9a;
  text-shadow:0 0 5px rgba(124,255,74,.5);
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > .cs-needle,
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > .cs-compass,
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > .cs-liquid {
  display:none;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
  min-height:205px;
}

html[data-skin="garage"] .garage-rig {
  display:block;
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
}
html[data-skin="garage"] .garage-side-tank {
  position:absolute;
  top:215px;
  width:82px;
  height:290px;
  z-index:5;
  filter:drop-shadow(0 12px 8px rgba(0,0,0,.52));
}
html[data-skin="garage"] .garage-side-tank-left { left:8px; }
html[data-skin="garage"] .garage-side-tank-right { right:8px; }
html[data-skin="garage"] .garage-side-tank svg {
  display:block;
  width:100%;
  height:100%;
}
html[data-skin="garage"] .garage-side-tank > span {
  position:absolute;
  left:50%;
  bottom:22px;
  min-width:58px;
  padding:4px 4px 2px;
  color:#171c18;
  border:1px solid #877858;
  background:#d5c397;
  font:700 8px/1.12 var(--garage-type);
  letter-spacing:.08em;
  text-align:center;
  transform:translateX(-50%) rotate(-2deg);
}
html[data-skin="garage"] .garage-emblem {
  position:absolute;
  top:52px;
  left:27px;
  z-index:6;
  width:92px;
  height:76px;
  padding:13px 6px 5px;
  color:#17211e;
  border:3px solid #17211e;
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent 0 8%,#d0bd90 8% 92%,transparent 92%),
    #88918a;
  box-shadow:inset 0 0 0 3px #c9c0a6,0 5px 0 #17211e,0 8px 13px rgba(0,0,0,.38);
  font-family:var(--garage-type);
  text-align:center;
  transform:rotate(-5deg);
}
html[data-skin="garage"] .garage-emblem::before,
html[data-skin="garage"] .garage-emblem::after {
  content:"";
  position:absolute;
  top:33px;
  width:25px;
  border-top:5px double #17211e;
}
html[data-skin="garage"] .garage-emblem::before { right:83px; transform:rotate(-9deg); }
html[data-skin="garage"] .garage-emblem::after { left:83px; transform:rotate(9deg); }
html[data-skin="garage"] .garage-emblem-wing {
  display:block;
  height:17px;
  color:#365b4a;
  font:bold 25px/14px var(--garage-type);
}
html[data-skin="garage"] .garage-emblem strong {
  display:block;
  font-size:11px;
}
html[data-skin="garage"] .garage-emblem small {
  display:block;
  margin-top:2px;
  font-size:7px;
  letter-spacing:.08em;
}
html[data-skin="garage"] .garage-pipe {
  position:absolute;
  top:164px;
  bottom:76px;
  width:13px;
  z-index:2;
  border:3px solid #111a18;
  border-radius:999px;
  background:
    repeating-linear-gradient(0deg,transparent 0 37px,rgba(235,194,122,.55) 38px 42px,transparent 43px 79px),
    linear-gradient(90deg,#352016,#b26b35 42%,#4b2817 70%,#1a1410);
  box-shadow:inset 2px 0 2px rgba(255,255,255,.22),0 0 0 2px #31403b,4px 3px 7px rgba(0,0,0,.45);
}
html[data-skin="garage"] .garage-pipe-left { left:5px; }
html[data-skin="garage"] .garage-pipe-right { right:5px; }
html[data-skin="garage"] .garage-cable-loom {
  position:absolute;
  z-index:7;
  right:40px;
  bottom:7px;
  left:40px;
  height:48px;
}
html[data-skin="garage"] .garage-cable-loom i {
  position:absolute;
  right:0;
  left:0;
  height:19px;
  border:5px solid transparent;
  border-top-color:#a34c37;
  border-radius:50%;
  filter:drop-shadow(0 3px 1px rgba(0,0,0,.55));
}
html[data-skin="garage"] .garage-cable-loom i:nth-child(1) { top:0;left:0;right:5%;border-top-color:#9c382e;transform:rotate(.5deg); }
html[data-skin="garage"] .garage-cable-loom i:nth-child(2) { top:7px;left:5%;right:0;border-top-color:#2c7ea1;transform:rotate(-.6deg); }
html[data-skin="garage"] .garage-cable-loom i:nth-child(3) { top:13px;left:2%;right:7%;border-top-color:#d38a2d;transform:rotate(.3deg); }
html[data-skin="garage"] .garage-cable-loom i:nth-child(4) { top:20px;left:8%;right:4%;border-top-color:#6b3b84;transform:rotate(-.35deg); }
html[data-skin="garage"] .garage-cable-loom i:nth-child(5) { top:27px;left:3%;right:11%;border-top-color:#283833;transform:rotate(.65deg); }
html[data-skin="garage"] .garage-caution,
html[data-skin="garage"] .garage-trust {
  position:absolute;
  bottom:18px;
  z-index:8;
  padding:7px 13px 4px;
  color:#171b17;
  border:2px solid #82714f;
  background:
    repeating-linear-gradient(0deg,rgba(88,62,30,.06) 0 1px,transparent 1px 4px),
    #d4c193;
  box-shadow:0 3px 0 #1a211f;
  font:700 10px var(--garage-type);
  letter-spacing:.045em;
}
html[data-skin="garage"] .garage-caution { left:65px;transform:rotate(-1.1deg); }
html[data-skin="garage"] .garage-trust { right:65px;transform:rotate(.7deg); }
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.36));
  transition:filter .18s ease,transform .18s ease;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted:hover {
  z-index:7;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.5)) brightness(1.04);
  transform:translateY(-2px);
}
html[data-skin="garage"] .garage-gauge-glass {
  stroke:rgba(255,255,255,.42);
  stroke-width:1.5px;
}
html[data-skin="garage"] .cs-scene,
html[data-skin="garage"] .garage-side-tank,
html[data-skin="garage"] .garage-pipe {
  display:none;
}

html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
  padding:0;
  border:0;
  background:url("./assets/garage-gauge-face.webp") center/100% 100% no-repeat;
  box-shadow:none;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted[data-garage-gauge="direction"] {
  background-image:url("./assets/garage-compass-face.webp");
}
html[data-skin="garage"] .garage-gauge-art {
  display:block;
  z-index:2;
}
html[data-skin="garage"] .garage-gauge {
  z-index:3;
}
html[data-skin="garage"] .garage-gauge-frame,
html[data-skin="garage"] .garage-gauge-shadow,
html[data-skin="garage"] .garage-gauge-bezel,
html[data-skin="garage"] .garage-gauge-rust,
html[data-skin="garage"] .garage-gauge-face,
html[data-skin="garage"] .garage-gauge-glass,
html[data-skin="garage"] .garage-gauge-zone,
html[data-skin="garage"] .garage-screen-bezel,
html[data-skin="garage"] .garage-screen,
html[data-skin="garage"] .garage-screen-shine,
html[data-skin="garage"] .garage-bolt {
  opacity:0;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span {
  top:7px;
  left:25%;
  right:25%;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong {
  bottom:10px;
  left:21%;
  right:21%;
  border:0;
  background:transparent;
  box-shadow:none;
}
html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > small {
  right:23%;
  bottom:14px;
}

@media (max-width:760px) {
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
      min-height:172px!important;
      border:0!important;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span {
      top:8px;
      left:20%;
      right:20%;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong {
      left:22%;
      right:22%;
      bottom:16px;
      font-size:29px;
      line-height:34px;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > small {
      right:23%;
      bottom:22px;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
      min-height:172px!important;
    }
  html[data-skin="garage"] .garage-caution,
    html[data-skin="garage"] .garage-trust {
      bottom:21px;
      padding:5px 7px 3px;
      font-size:7px;
    }
  html[data-skin="garage"] .garage-caution { left:18px; }
  html[data-skin="garage"] .garage-trust { right:18px; }
  html[data-skin="garage"] .garage-cable-loom {
      right:10px;
      bottom:3px;
      left:10px;
      height:35px;
    }
}

@media (max-width:430px) {
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted {
      min-height:156px!important;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > span {
      left:18%;
      right:18%;
      font-size:9px;
    }
  html[data-skin="garage"] .cs-instrument.garage-gauge-mounted > strong {
      left:18%;
      right:18%;
      bottom:14px;
      font-size:25px;
      line-height:30px;
    }
}

@media (max-width:1179px) {
  html[data-skin="garage"] .garage-side-tank,
    html[data-skin="garage"] .garage-pipe,
    html[data-skin="garage"] .garage-emblem {
      display:none;
    }
}