/*
 * Wingcheck cartoon skins: GARAGE and ALIEN.
 *
 * Both skins are presentation-only. They reuse the existing semantic markup,
 * renderers, dashboard_data.json contract, and accessibility states.
 */

.skin-hero-art { display:none; }
html[data-skin="alien"] {
  color-scheme:dark;
  --display:'Rajdhani',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

html[data-skin="alien"] {
  --alien-night:#070b16;
  --alien-panel:#0e1526;
  --alien-panel-2:#101c32;
  --alien-cyan:#00dff5;
  --alien-lime:#b8ff2c;
  --alien-amber:#ffb020;
  --alien-violet:#8d50ef;
  --alien-orange:#ff8a3d;
  --alien-coral:#ff5b6e;
  --alien-cream:#f5f1df;

  --ice:var(--alien-night);
  --card:var(--alien-panel);
  --line:#195b84;
  --line-soft:#15344e;
  --ink:var(--alien-cream);
  --ink-2:#b7c8d9;
  --ink-3:#7395aa;
  --blue:var(--alien-cyan);
  --blue-soft:#0b3141;
  --blue-deep:#83f4ff;
  --good:var(--alien-lime);
  --good-soft:#183516;
  --good-ink:#c8ff62;
  --warn:var(--alien-amber);
  --warn-soft:#3b2a0a;
  --warn-ink:#ffd064;
  --bad-soft:#102a42;
  --bad-ink:#53dffc;
  --crit:var(--alien-coral);
  --crit-soft:#3a1722;
  --crit-ink:#ff93a0;
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 18px 42px rgba(0,0,0,.38),0 0 0 1px rgba(0,223,245,.04);
}

/* ---------- Shared layout ---------- */

html:is([data-skin="garage"],[data-skin="alien"]) body {
  min-height:100vh;
  color:var(--ink);
  background:var(--ice);
}

html[data-skin="alien"] body {
  background:
    radial-gradient(circle at 82% 4%,rgba(141,80,239,.15),transparent 28%),
    radial-gradient(circle at 16% 12%,rgba(0,223,245,.1),transparent 26%),
    var(--alien-night);
}

html[data-skin="alien"] body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.65) .65px,transparent .65px);
  background-size:6px 6px;
  mask-image:linear-gradient(#000,transparent 70%);
}

html:is([data-skin="garage"],[data-skin="alien"]) .wrap {
  width:min(1480px,100%);
  max-width:none;
  padding:14px 16px 70px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .global-report-trigger { display:none; }

html:is([data-skin="garage"],[data-skin="alien"]) .cs-title .wind-report-trigger {
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
}

html:is([data-skin="garage"],[data-skin="alien"]) .dashboard-console {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .dashboard-console > * {
  min-width:0;
  margin-top:0;
}

html:is([data-skin="garage"],[data-skin="alien"]) .panel-forecast,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-day-wind,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-history,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-meteoswiss,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-health,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-reference,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-viz,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-tech {
  grid-column:span 12;
}

html:is([data-skin="garage"],[data-skin="alien"]) .panel-summary { grid-column:span 6; }
html:is([data-skin="garage"],[data-skin="alien"]) .panel-outlook { grid-column:span 6; }
html:is([data-skin="garage"],[data-skin="alien"]) .panel-water { grid-column:span 4; }
html:is([data-skin="garage"],[data-skin="alien"]) .panel-live { grid-column:span 8; }
html:is([data-skin="garage"],[data-skin="alien"]) .panel-eval { grid-column:span 7; }
html:is([data-skin="garage"],[data-skin="alien"]) .panel-ablation { grid-column:span 5; }

html:is([data-skin="garage"],[data-skin="alien"]) .retro-cluster { display:none; }

html:is([data-skin="garage"],[data-skin="alien"]) .skin-toggle {
  position:absolute;
  top:22px;
  right:30px;
  z-index:30;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

html:is([data-skin="garage"],[data-skin="alien"]) .skin-toggle button {
  min-height:38px;
  padding:8px 13px;
  font-weight:700;
}

html:is([data-skin="garage"],[data-skin="alien"]) .site-header {
  position:relative;
  isolation:isolate;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

html:is([data-skin="garage"],[data-skin="alien"]) .header-inner {
  position:relative;
  z-index:3;
}

html:is([data-skin="garage"],[data-skin="alien"]) .header-sub {
  color:var(--ink-2);
}

html:is([data-skin="garage"],[data-skin="alien"]) .card,
html:is([data-skin="garage"],[data-skin="alien"]) details.tech {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
}

html:is([data-skin="garage"],[data-skin="alien"]) .section-head h2,
html:is([data-skin="garage"],[data-skin="alien"]) details.tech > summary {
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.045em;
}

html:is([data-skin="garage"],[data-skin="alien"]) .forecast-grid {
  grid-template-columns:repeat(10,minmax(104px,1fr));
  overflow-x:auto;
  padding:5px 2px 10px;
  scrollbar-width:thin;
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card {
  min-width:104px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-color:var(--line-soft);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card:hover {
  transform:translateY(-3px);
  border-color:var(--blue);
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.tier-good:not(.recommended) {
  border-color:color-mix(in srgb,var(--good) 48%,var(--line));
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.tier-marginal:not(.recommended) {
  border-color:color-mix(in srgb,var(--warn) 48%,var(--line));
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.tier-unlikely:not(.recommended) {
  border-color:color-mix(in srgb,var(--blue) 30%,var(--line));
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended {
  color:var(--good-ink);
  border-color:var(--good);
  background:var(--good-soft);
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended .fc-time,
html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended .fc-pct-label,
html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended .fc-wind {
  color:inherit;
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended .fc-badge {
  color:var(--good-ink);
  background:transparent;
  border:1px solid currentColor;
}

html:is([data-skin="garage"],[data-skin="alien"]) .fc-pct {
  font-size:34px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .action-bar {
  display:grid;
  grid-template-columns:auto auto minmax(460px,1fr);
  align-items:stretch;
  gap:10px;
  margin:14px 0;
}

html:is([data-skin="garage"],[data-skin="alien"]) .action-bar .eval-btn-tip {
  display:none;
}

html:is([data-skin="garage"],[data-skin="alien"]) .action-bar .eval-btn {
  min-height:54px;
  justify-content:center;
  border-radius:var(--radius);
}

html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind {
  grid-template-columns:repeat(4,minmax(90px,1fr));
  padding:10px 16px;
  border-radius:var(--radius);
  background:var(--card);
  border-color:var(--line);
  box-shadow:var(--shadow);
}

html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item {
  padding:3px 13px;
  border-right:1px solid var(--line-soft);
}

html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item:nth-child(4) {
  border-right:0;
}

html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item .value {
  color:var(--good-ink);
  font-size:19px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-time {
  padding:0 13px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .day-wind-chart,
html:is([data-skin="garage"],[data-skin="alien"]) .chart-box,
html:is([data-skin="garage"],[data-skin="alien"]) .viz-box {
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--ice) 74%,transparent);
}

html:is([data-skin="garage"],[data-skin="alien"]) .summary-stat,
html:is([data-skin="garage"],[data-skin="alien"]) .stat,
html:is([data-skin="garage"],[data-skin="alien"]) .qs-card,
html:is([data-skin="garage"],[data-skin="alien"]) .meteo-hour {
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:13px;
  background:color-mix(in srgb,var(--ice) 78%,transparent);
}

html:is([data-skin="garage"],[data-skin="alien"]) .summary-stat .s-value,
html:is([data-skin="garage"],[data-skin="alien"]) .stat .st-value {
  color:var(--ink);
}

html:is([data-skin="garage"],[data-skin="alien"]) .summary-grid,
html:is([data-skin="garage"],[data-skin="alien"]) .stat-row {
  gap:9px;
}

html:is([data-skin="garage"],[data-skin="alien"]) .recommendation,
html:is([data-skin="garage"],[data-skin="alien"]) .observed-callout {
  border:1px solid color-mix(in srgb,var(--good) 48%,var(--line));
  background:var(--good-soft);
}

html:is([data-skin="garage"],[data-skin="alien"]) .empty-state {
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--ice) 82%,transparent);
  padding:20px;
}

/* ---------- Garage treatment ---------- *

/* ---------- Alien treatment ---------- */

html[data-skin="alien"] .site-header {
  min-height:350px;
  padding:24px 26px;
  border-color:var(--alien-cyan);
  background:#081222;
}

html[data-skin="alien"] .skin-hero-art {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

html[data-skin="alien"] .hero-wind { display:none; }

html[data-skin="alien"] .header-inner {
  width:min(760px,70%);
  padding:18px 22px;
  border:1px solid rgba(0,223,245,.65);
  border-radius:18px;
  background:rgba(4,12,25,.84);
  backdrop-filter:blur(7px);
  box-shadow:0 14px 35px rgba(0,0,0,.36);
}

html[data-skin="alien"] .kicker {
  color:var(--alien-cyan);
  border:1px solid rgba(0,223,245,.55);
  background:#071a2d;
}

html[data-skin="alien"] h1 {
  font-size:clamp(34px,5vw,64px);
  text-transform:none;
  letter-spacing:.01em;
}

html[data-skin="alien"] h1 em {
  color:var(--alien-lime);
  text-shadow:0 0 18px rgba(184,255,44,.4);
}

html[data-skin="alien"] .skin-toggle {
  border-color:var(--alien-cyan);
  background:#071322;
}

html[data-skin="alien"] .skin-toggle button { color:#b7ccda; }
html[data-skin="alien"] .skin-toggle button.active {
  color:#07120b;
  background:var(--alien-lime);
}

html[data-skin="alien"] .card,
html[data-skin="alien"] details.tech,
html[data-skin="alien"] .latest-wind {
  background:
    radial-gradient(circle at 92% 0,rgba(141,80,239,.08),transparent 24%),
    linear-gradient(145deg,var(--alien-panel-2),var(--alien-panel));
}

html[data-skin="alien"] .card {
  padding:20px;
}

html[data-skin="alien"] .card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:radial-gradient(rgba(255,255,255,.8) .55px,transparent .55px);
  background-size:5px 5px;
  mask-image:linear-gradient(90deg,#000,transparent 70%);
}

html[data-skin="alien"] .section-head h2::before {
  content:"";
  display:inline-block;
  width:20px;
  height:7px;
  border-top:2px solid var(--alien-cyan);
  border-bottom:2px solid var(--alien-cyan);
  border-radius:50%;
  margin-right:8px;
}

html[data-skin="alien"] .fc-card {
  border-radius:13px;
  background:#0a1628;
}

html[data-skin="alien"] .fc-card.tier-good:not(.recommended) {
  background:linear-gradient(180deg,rgba(184,255,44,.12),#0a1628 62%);
}

html[data-skin="alien"] .fc-card.tier-marginal:not(.recommended) {
  background:linear-gradient(180deg,rgba(255,176,32,.12),#0a1628 62%);
}

html[data-skin="alien"] .fc-card.tier-unlikely:not(.recommended) {
  background:linear-gradient(180deg,rgba(0,223,245,.08),#0a1628 62%);
}

html[data-skin="alien"] .fc-card.recommended {
  color:var(--alien-lime);
  background:
    radial-gradient(circle at 50% 40%,rgba(184,255,44,.22),transparent 62%),
    #0b2017;
  border:2px solid var(--alien-lime);
  box-shadow:0 0 0 3px rgba(141,80,239,.32),0 0 24px rgba(184,255,44,.3);
}

html[data-skin="alien"] .fc-card.recommended::after {
  content:"★ BEST";
  display:block;
  margin-top:8px;
  color:#07120b;
  background:var(--alien-lime);
  border-radius:999px;
  padding:3px 7px;
  font:700 9px/1 var(--mono);
  letter-spacing:.06em;
}

html[data-skin="alien"] .fc-badge {
  border:1px solid currentColor;
  background:transparent;
}

html[data-skin="alien"] .eval-btn {
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(0,0,0,.28);
}

html[data-skin="alien"] #lakeSampleBtn {
  color:#fff;
  background:linear-gradient(135deg,#6d32cc,var(--alien-violet));
}

html[data-skin="alien"] #forecastRefreshBtn {
  color:#08110a;
  background:linear-gradient(135deg,#82d71b,var(--alien-lime));
}

html[data-skin="alien"] .eval-btn:hover {
  transform:translateY(-2px);
  filter:brightness(1.08);
}

html[data-skin="alien"] .latest-wind {
  border-color:var(--alien-cyan);
  backdrop-filter:blur(8px);
}

html[data-skin="alien"] .latest-wind-item .value { color:var(--alien-cream); }
html[data-skin="alien"] .latest-wind-item:nth-child(1) .value,
html[data-skin="alien"] .latest-wind-item:nth-child(4) .value { color:var(--alien-cyan); }

html[data-skin="alien"] .summary-stat,
html[data-skin="alien"] .stat,
html[data-skin="alien"] .qs-card,
html[data-skin="alien"] .meteo-hour {
  background:#091426;
}

html[data-skin="alien"] .recommendation {
  color:var(--good-ink);
  box-shadow:inset 4px 0 0 var(--good);
}

html[data-skin="alien"] .alien-wind-ribbon {
  stroke-dasharray:22 14;
  animation:alienWind 3.4s linear infinite;
  filter:drop-shadow(0 0 7px rgba(184,255,44,.72));
}

html[data-skin="alien"] .alien-portal {
  filter:drop-shadow(0 0 14px rgba(184,255,44,.65));
  animation:alienPortal 3s ease-in-out infinite;
  transform-origin:1110px 82px;
}

@keyframes alienWind { to { stroke-dashoffset:-72; } }
@keyframes alienPortal { 50% { transform:scale(1.08);opacity:.88; } }

/* ---------- Responsive ---------- */

@media (max-width:1100px) {
  html:is([data-skin="garage"],[data-skin="alien"]) .action-bar {
    grid-template-columns:1fr 1fr;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind {
    grid-column:1/-1;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .panel-summary,
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-outlook,
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-water,
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-live,
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-eval,
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-ablation {
    grid-column:span 6;
  }

  html[data-skin="alien"] .header-inner {
    width:68%;
  }
}

@media (max-width:760px) {
  html:is([data-skin="garage"],[data-skin="alien"]) .wrap {
    padding:7px 8px 112px;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .skin-toggle {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin:0 0 8px;
    overflow:visible;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .skin-toggle button {
    min-width:0;
    padding:8px 3px;
    font-size:9px;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .dashboard-console {
    display:flex;
    flex-direction:column;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .dashboard-console > * {
    width:100%;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .panel-forecast { order:1; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-day-wind { order:2; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-history { order:3; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-summary { order:3; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-meteoswiss { order:4; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-outlook { order:5; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-water { order:6; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-live { order:7; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-health { order:8; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-reference { order:9; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-viz { order:10; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-eval { order:11; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-ablation { order:12; }
  html:is([data-skin="garage"],[data-skin="alien"]) .panel-tech { order:13; }

  html:is([data-skin="garage"],[data-skin="alien"]) .action-bar {
    display:block;
    margin:8px 0;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind {
    grid-template-columns:repeat(2,1fr);
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item:nth-child(2) {
    border-right:0;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item {
    border-bottom:1px solid var(--line-soft);
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item:nth-child(3),
  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item:nth-child(4) {
    border-bottom:0;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) #lakeSampleBtn,
  html:is([data-skin="garage"],[data-skin="alien"]) #forecastRefreshBtn {
    position:fixed;
    bottom:10px;
    z-index:1200;
    width:calc(50% - 14px);
    min-height:58px;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) #lakeSampleBtn { left:8px; }
  html:is([data-skin="garage"],[data-skin="alien"]) #forecastRefreshBtn { right:8px; }

  html:is([data-skin="garage"],[data-skin="alien"]) .forecast-grid {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(138px,42vw);
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .forecast-grid .fc-card {
    min-width:0;
    scroll-snap-align:center;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .summary-columns,
  html:is([data-skin="garage"],[data-skin="alien"]) .viz-grid {
    grid-template-columns:1fr;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .stat-row,
  html:is([data-skin="garage"],[data-skin="alien"]) .quick-summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-skin="alien"] .site-header {
    min-height:330px;
    padding:14px;
    display:flex;
    align-items:flex-end;
  }

  html[data-skin="alien"] .header-inner {
    width:100%;
    padding:13px 15px;
  }

  html[data-skin="alien"] .header-sub { display:none; }
  html[data-skin="alien"] h1 { font-size:32px; }
  html[data-skin="alien"] .skin-hero-art { height:68%; }
}

@media (max-width:430px) {
  html:is([data-skin="garage"],[data-skin="alien"]) .card {
    padding:14px;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .stat-row,
  html:is([data-skin="garage"],[data-skin="alien"]) .quick-summary {
    grid-template-columns:1fr;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind {
    grid-template-columns:repeat(2,1fr);
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .latest-wind-item .value {
    font-size:16px;
  }
  html[data-skin="alien"] h1 {
    font-size:28px;
  }

  html[data-skin="alien"] .site-header { min-height:300px; }
}

@media (prefers-reduced-motion:reduce) {
  html:is([data-skin="garage"],[data-skin="alien"]) *,
  html:is([data-skin="garage"],[data-skin="alien"]) *::before,
  html:is([data-skin="garage"],[data-skin="alien"]) *::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}

html:is([data-skin="garage"],[data-skin="alien"]) :focus-visible {
  outline:3px solid var(--alien-cyan);
  outline-offset:3px;
}

@media (forced-colors:active) {
  html:is([data-skin="garage"],[data-skin="alien"]) .site-header,
  html:is([data-skin="garage"],[data-skin="alien"]) .card,
  html:is([data-skin="garage"],[data-skin="alien"]) details.tech {
    border:1px solid CanvasText;
  }

  html:is([data-skin="garage"],[data-skin="alien"]) .fc-card.recommended {
    outline:3px solid Highlight;
  }
}

/* ========================================================================
   CARTOON COCKPIT
   A dedicated first-screen composition shared semantically by both skins.
   ======================================================================== */

.cartoon-stage { display:none; }
.cs-mobile-actions { display:none; }

html:is([data-skin="garage"],[data-skin="alien"]) .site-header,
html:is([data-skin="garage"],[data-skin="alien"]) > body .wrap > .action-bar {
  display:none;
}

/* The cockpit already contains today's hourly and multi-day forecast. Avoid
   immediately repeating the same information; the detailed dashboard resumes
   with measured wind and supporting modules. */
html:is([data-skin="garage"],[data-skin="alien"]) .panel-forecast {
  display:none;
}

/* Research remains available in Classic/Tech. The two immersive skins follow
   their concise operational proposals and stop after measurements, summary,
   water, and station health. */
html:is([data-skin="garage"],[data-skin="alien"]) .panel-meteoswiss,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-outlook,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-live,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-health,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-reference,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-viz,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-eval,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-ablation,
html:is([data-skin="garage"],[data-skin="alien"]) .panel-tech {
  display:none;
}

html:is([data-skin="garage"],[data-skin="alien"]) .cartoon-stage {
  display:grid;
  position:relative;
  isolation:isolate;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  width:100%;
  min-height:960px;
  margin-top:54px;
  padding:24px;
  overflow:hidden;
  color:var(--ink);
}

.cs-scene {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.cs-masthead {
  grid-column:1/-1;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:20px;
  min-height:126px;
  padding:20px 24px;
}

.cs-eyebrow,
.cs-module-head,
.cs-status-bank,
.cs-actions,
.cs-nav {
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.075em;
}

.cs-eyebrow { font-size:12px; }
.cs-title {
  margin-top:5px;
  font:700 clamp(34px,4vw,64px)/.98 var(--display);
  letter-spacing:.025em;
}
.cs-alien-title { display:none; }
.cs-question {
  margin-top:8px;
  font-size:17px;
  font-weight:600;
}

.cs-status-bank { display:flex;gap:8px;align-items:center; }
.cs-lamp {
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  white-space:nowrap;
  font-size:11px;
}
.cs-lamp i {
  width:10px;height:10px;border-radius:50%;
  background:var(--good);
  box-shadow:0 0 12px var(--good);
}
.cs-lamp.warn i { background:var(--warn);box-shadow:0 0 12px var(--warn); }

.cs-actions { display:flex;gap:8px; }
.cs-actions button,
.cs-actions .sessions-link,
.cs-mobile-actions .sessions-link {
  min-height:48px;
  padding:0 18px;
  border:0;
  color:inherit;
  font:700 12px var(--mono);
  letter-spacing:.05em;
  cursor:pointer;
}
/* The SESSIONS control is a link, not a button - it navigates to a page
   rather than POSTing to the local API, which is also why the public export's
   "hide the operator controls" rule does not touch it. */
.cs-actions .sessions-link,
.cs-mobile-actions .sessions-link {
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;background:rgba(255,255,255,.14);
}

.cs-nav {
  grid-column:1/-1;
  display:flex;
  gap:8px;
}
.cs-nav a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 15px;
  text-decoration:none;
  font-size:10px;
}

.cs-instruments {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.cs-live-status {
  grid-column:1/-1;
  padding:7px 11px;
  border:1px solid currentColor;
  border-radius:999px;
  color:var(--ink-3);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  text-align:center;
}
.cs-live-status[data-state="live"] { color:var(--good); }
.cs-live-status[data-state="stale"] { color:var(--warn); }

.cs-instrument {
  --reading:0;
  --direction:220deg;
  position:relative;
  min-height:150px;
  padding:18px;
  overflow:hidden;
  text-align:center;
}
.cs-instrument > span {
  display:block;
  font:700 12px var(--mono);
  letter-spacing:.08em;
}
.cs-instrument > strong {
  position:relative;
  z-index:2;
  display:block;
  margin-top:18px;
  font:700 44px/1 var(--display);
}
.cs-instrument > small {
  position:relative;
  z-index:2;
  display:block;
  margin-top:5px;
  color:var(--ink-3);
  font:600 10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.cs-needle {
  position:absolute;
  left:15%;
  right:15%;
  bottom:14px;
  height:34px;
  border-radius:70px 70px 0 0;
  background:
    linear-gradient(90deg,var(--good) 0 42%,var(--warn) 42% 72%,var(--crit) 72%);
  clip-path:polygon(0 100%,8% 62%,18% 35%,31% 14%,50% 0,69% 14%,82% 35%,92% 62%,100% 100%);
  opacity:.36;
}
.cs-needle::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:3px;
  height:32px;
  background:var(--ink);
  transform-origin:50% 100%;
  transform:rotate(calc(-68deg + 136deg * var(--reading)));
  box-shadow:0 0 5px rgba(255,255,255,.4);
}

.cs-compass {
  position:absolute;
  left:50%;
  bottom:10px;
  width:54px;height:54px;
  margin-left:-27px;
  border:1px solid var(--line);
  border-radius:50%;
}
.cs-compass::after {
  content:"";
  position:absolute;
  left:25px;
  top:5px;
  width:4px;height:22px;
  border-radius:4px;
  background:var(--good);
  transform-origin:50% 22px;
  transform:rotate(var(--direction));
}

.cs-liquid {
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:34px;
  opacity:.5;
  background:var(--blue);
  clip-path:polygon(0 45%,8% 26%,16% 54%,24% 30%,32% 58%,40% 33%,48% 55%,56% 25%,64% 50%,72% 31%,80% 56%,90% 22%,100% 48%,100% 100%,0 100%);
}

.cs-decision {
  grid-column:1/span 7;
  position:relative;
  min-height:280px;
  padding:30px;
  overflow:hidden;
}
.cs-decision-kicker {
  font:700 14px var(--mono);
  letter-spacing:.14em;
}
.cs-window {
  margin-top:10px;
  font:700 clamp(44px,6vw,84px)/.95 var(--display);
}
.cs-decision-row {
  display:flex;
  align-items:baseline;
  gap:22px;
  margin-top:20px;
}
.cs-decision-row strong {
  font:700 clamp(28px,4vw,54px)/1 var(--display);
}
.cs-decision-row span {
  font:700 clamp(38px,5vw,68px)/1 var(--display);
}
.cs-windline {
  margin-top:15px;
  font:600 14px var(--mono);
  letter-spacing:.035em;
}
.cs-energy { position:absolute;inset:0;pointer-events:none; }
.cs-energy i {
  position:absolute;
  border:2px solid var(--good);
  border-radius:48% 52% 55% 45%;
  opacity:.18;
}
.cs-energy i:nth-child(1){inset:12px;transform:rotate(1deg);}
.cs-energy i:nth-child(2){inset:22px 17px;transform:rotate(-2deg);}
.cs-energy i:nth-child(3){inset:34px 26px;transform:rotate(2.4deg);}

.cs-hour-bank {
  grid-column:1/span 9;
  padding:17px;
}
.cs-module-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  font-size:11px;
}
.cs-hours {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(104px,1fr);
  gap:8px;
  overflow-x:auto;
  padding:5px 3px 10px;
  scroll-snap-type:x proximity;
}
.cs-hour {
  position:relative;
  display:grid;
  grid-template-rows:auto auto 22px auto auto;
  min-height:175px;
  padding:13px 8px 10px;
  text-align:center;
  scroll-snap-align:center;
}
.cs-hour span { font:700 12px var(--mono); }
.cs-hour strong { margin-top:8px;font:700 30px var(--display); }
/* Data-driven wind glyph (see windGlyph() in cartoon-dashboard.js): lit flow
   strokes encode the strength bucket, the arrow the travel direction. It
   replaced a decorative <i> that was identical on every card. */
.cs-hour > .cs-windglyph {
  display:block;
  width:62px;
  height:26px;
  margin:3px auto 0;
  color:currentColor;
  overflow:visible;
}
/* The alien skin's alternative glyph (windBarb()): standard meteorological
   barb notation. Both glyphs ship in every card; each skin reveals one. */
.cs-hour > .cs-windbarb { display:none; }
.cs-hour b { align-self:end;font:700 11px var(--mono);letter-spacing:.04em; }
.cs-hour small { margin-top:5px;color:var(--ink-3);font:600 10px var(--mono); }
.cs-hour.good { color:var(--good); }
.cs-hour.marginal { color:var(--warn); }
.cs-hour.unlikely { color:var(--blue); }
.cs-hour.selected { transform:translateY(-3px) scale(1.035); }

.cs-outlook {
  grid-column:10/-1;
  padding:17px;
}
.cs-days { display:flex;flex-direction:column;gap:8px; }
.cs-day {
  display:grid;
  grid-template-columns:45px 55px 1fr;
  align-items:center;
  gap:8px;
  min-height:65px;
  padding:10px;
}
.cs-day span { font:700 10px var(--mono); }
.cs-day strong { font:700 23px var(--display); }
.cs-day b { font:700 11px var(--mono); }
.cs-day small { grid-column:2/-1;color:var(--ink-3);font:9px var(--mono); }
.cs-day.good b { color:var(--good); }
.cs-day.marginal b { color:var(--warn); }
.cs-day.unlikely b { color:var(--blue); }

.cs-actual,
.cs-system {
  min-height:120px;
  padding:17px;
}
.cs-actual { grid-column:1/span 6; }
.cs-system { grid-column:7/-1; }
.cs-actual > strong {
  display:block;
  margin-top:16px;
  font:700 20px var(--display);
  text-transform:uppercase;
}
.cs-actual > span {
  display:block;
  margin-top:6px;
  color:var(--ink-3);
  font:11px var(--mono);
}
.cs-system-line {
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:20px;
  font:600 12px var(--mono);
}
.cs-system-line i {
  width:14px;height:14px;border-radius:50%;
  background:var(--good);box-shadow:0 0 12px var(--good);
}
.cartoon-stage[data-health="degraded"] .cs-system-line i,
.cartoon-stage[data-health="stale"] .cs-system-line i {
  background:var(--warn);box-shadow:0 0 12px var(--warn);
}
.cartoon-stage[data-health="critical"] .cs-system-line i,
.cartoon-stage[data-health="offline"] .cs-system-line i {
  background:var(--crit);box-shadow:0 0 12px var(--crit);
}
.cs-empty {
  padding:24px;
  color:var(--ink-3);
  font:700 11px var(--mono);
  letter-spacing:.08em;
}

/* ---------- Radical Garage cockpit ---------- *

/* ---------- Radical Alien cockpit ---------- */

html[data-skin="alien"] .cartoon-stage {
  min-height:1000px;
  padding:20px 20px 24px 104px;
  border:2px solid var(--alien-cyan);
  border-radius:30px 30px 44px 18px;
  background:#06101f;
  box-shadow:0 30px 80px rgba(0,0,0,.58),0 0 35px rgba(0,223,245,.12);
}
html[data-skin="alien"] .cs-garage-title { display:none; }
html[data-skin="alien"] .cs-alien-title { display:inline; }

html[data-skin="alien"] .cs-scene {
  height:480px;
  background:linear-gradient(180deg,#ff8b48 0,#a65bc1 38%,#101b45 74%);
}
html[data-skin="alien"] .cs-sky {
  position:absolute;inset:0;
  opacity:.35;
  background:
    radial-gradient(circle at 14% 18%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 74% 12%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 43% 26%,#fff 0 1px,transparent 2px);
  background-size:170px 120px,210px 160px,130px 150px;
}
html[data-skin="alien"] .cs-portal {
  display:block;
  position:absolute;
  top:34px;right:12%;
  width:150px;height:150px;
  border:18px solid var(--alien-lime);
  border-radius:48% 52% 47% 53%;
  background:#071424;
  box-shadow:
    0 0 0 9px rgba(42,79,19,.75),
    0 0 28px 8px rgba(184,255,44,.72),
    inset 0 0 28px rgba(184,255,44,.6);
  animation:alienPortal 3s ease-in-out infinite;
}
html[data-skin="alien"] .cs-portal::before,
html[data-skin="alien"] .cs-portal::after {
  content:"";
  position:absolute;
  inset:-10px;
  border:3px dashed #ecffb8;
  border-radius:46% 54% 50% 50%;
  animation:portalSpin 8s linear infinite;
}
html[data-skin="alien"] .cs-portal::after {
  inset:15px;
  border-color:#65a823;
  animation-direction:reverse;
}
@keyframes portalSpin { to { transform:rotate(360deg); } }

html[data-skin="alien"] .cs-mountains {
  display:block;
  position:absolute;
  left:0;right:0;
  height:230px;
  clip-path:polygon(0 100%,0 76%,9% 37%,15% 70%,25% 19%,34% 74%,43% 26%,52% 68%,61% 10%,72% 70%,81% 31%,91% 70%,100% 38%,100% 100%);
}
html[data-skin="alien"] .cs-mountains-back {
  bottom:95px;
  background:#6c4b9e;
  filter:drop-shadow(0 -3px 0 #f6d7a2);
}
html[data-skin="alien"] .cs-mountains-front {
  bottom:54px;
  background:#29275f;
  transform:scaleX(1.06);
  opacity:.92;
}
html[data-skin="alien"] .cs-lake {
  display:block;
  position:absolute;
  left:0;right:0;bottom:0;
  height:142px;
  background:
    repeating-radial-gradient(ellipse at 40% 0,transparent 0 24px,rgba(104,247,244,.3) 25px 27px,transparent 28px 42px),
    linear-gradient(#18bace,#073d70);
  border-top:4px solid #8ef9ed;
}
html[data-skin="alien"] .cs-wind-stream {
  display:block;
  position:absolute;
  top:138px;right:18%;
  width:420px;height:120px;
  transform:rotate(-8deg);
}
html[data-skin="alien"] .cs-wind-stream i {
  display:block;
  height:24px;
  margin-top:8px;
  border-top:8px dashed var(--alien-lime);
  border-radius:50%;
  filter:drop-shadow(0 0 7px rgba(184,255,44,.8));
  animation:alienWind 3.4s linear infinite;
}
html[data-skin="alien"] .cs-wind-stream i:nth-child(2){width:82%;margin-left:14%;opacity:.7;animation-duration:4.2s;}
html[data-skin="alien"] .cs-wind-stream i:nth-child(3){width:62%;margin-left:30%;opacity:.45;animation-duration:2.8s;}

html[data-skin="alien"] .cs-foiler {
  display:block;
  position:absolute;
  left:55%;top:260px;
  width:90px;height:90px;
  transform:rotate(-8deg);
}
html[data-skin="alien"] .cs-foiler::before {
  content:"";
  position:absolute;left:5px;top:15px;
  width:58px;height:68px;
  border:6px solid #071424;
  border-radius:80% 5% 70% 10%;
  background:linear-gradient(135deg,var(--alien-violet) 0 48%,var(--alien-cyan) 49%);
  clip-path:polygon(0 100%,78% 0,100% 100%);
}
html[data-skin="alien"] .cs-foiler::after {
  content:"";
  position:absolute;left:0;bottom:0;
  width:105px;height:9px;
  border:4px solid #071424;border-radius:50%;
  background:var(--alien-lime);
}
html[data-skin="alien"] .cs-foiler i {
  position:absolute;left:48px;top:57px;
  width:8px;height:38px;background:#071424;
}

html[data-skin="alien"] .cs-specimen,
html[data-skin="alien"] .cs-cables { display:none; }

html[data-skin="alien"] .cs-masthead {
  z-index:2;
  grid-template-columns:minmax(0,1fr) auto;
  margin-right:20%;
  min-height:230px;
  padding:26px 30px;
  align-self:start;
  border:1px solid rgba(0,223,245,.72);
  border-radius:24px;
  background:rgba(3,12,28,.84);
  backdrop-filter:blur(9px);
  box-shadow:0 20px 45px rgba(0,0,0,.38);
}
html[data-skin="alien"] .cs-masthead > div:first-child { max-width:730px; }
html[data-skin="alien"] .cs-title { color:var(--alien-cream); }
html[data-skin="alien"] .cs-question { color:var(--alien-lime);font-size:22px; }
html[data-skin="alien"] .cs-status-bank { align-self:start; }
html[data-skin="alien"] .cs-lamp {
  border:1px solid rgba(184,255,44,.48);
  border-radius:999px;
  background:rgba(4,19,26,.86);
}
html[data-skin="alien"] .cs-actions {
  grid-column:2;
  justify-content:flex-end;
}
html[data-skin="alien"] .cs-actions button {
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 8px 18px rgba(0,0,0,.3);
}
html[data-skin="alien"] .cs-actions button:first-child { color:#fff;background:linear-gradient(135deg,#6d32cc,var(--alien-violet)); }
html[data-skin="alien"] .cs-actions button:last-child { color:#07120b;background:linear-gradient(135deg,#83da19,var(--alien-lime)); }

html[data-skin="alien"] .cs-nav {
  grid-column:auto;
  grid-row:auto;
  position:absolute;
  z-index:5;
  left:13px;
  top:20px;
  bottom:20px;
  width:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:8px;
  border:1px solid rgba(0,223,245,.46);
  border-radius:24px;
  background:rgba(3,12,28,.86);
  backdrop-filter:blur(8px);
}
html[data-skin="alien"] .cs-nav a {
  min-height:70px;
  padding:8px 2px;
  color:#9ed1dc;
  border-bottom:1px solid rgba(0,223,245,.25);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
html[data-skin="alien"] .cs-nav a:hover { color:var(--alien-lime); }

html[data-skin="alien"] .cs-instruments {
  z-index:2;
  margin-top:85px;
  padding:12px;
  border:1px solid var(--alien-cyan);
  border-radius:22px;
  background:rgba(3,13,29,.9);
  backdrop-filter:blur(10px);
}
html[data-skin="alien"] .cs-live-status {
  color:#8db0c5;
  border-color:rgba(0,223,245,.3);
  background:rgba(0,223,245,.05);
}
html[data-skin="alien"] .cs-live-status[data-state="live"] {
  color:var(--alien-lime);
  border-color:rgba(184,255,44,.58);
  box-shadow:0 0 18px rgba(184,255,44,.12);
}
html[data-skin="alien"] .cs-live-status[data-state="stale"] {
  color:#ffca72;
  border-color:rgba(255,202,114,.5);
}
html[data-skin="alien"] .cs-instrument {
  min-height:128px;
  border-right:1px solid rgba(0,223,245,.24);
}
html[data-skin="alien"] .cs-instrument:last-child { border-right:0; }
html[data-skin="alien"] .cs-instrument > strong { color:var(--alien-cream); }
html[data-skin="alien"] .cs-needle { opacity:.15; }

html[data-skin="alien"] .cs-decision,
html[data-skin="alien"] .cs-hour-bank,
html[data-skin="alien"] .cs-outlook,
html[data-skin="alien"] .cs-actual,
html[data-skin="alien"] .cs-system {
  z-index:2;
  border:1px solid #17608b;
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 0,rgba(141,80,239,.1),transparent 26%),
    rgba(7,18,36,.96);
  box-shadow:0 18px 35px rgba(0,0,0,.28);
}
html[data-skin="alien"] .cs-decision {
  grid-column:1/span 7;
  color:var(--alien-lime);
  border:3px solid var(--alien-lime);
  border-radius:38% 62% 48% 52% / 18% 24% 20% 22%;
  background:
    radial-gradient(circle at 50% 50%,rgba(184,255,44,.2),transparent 58%),
    #081a19;
  box-shadow:0 0 0 5px rgba(141,80,239,.27),0 0 34px rgba(184,255,44,.34);
}
html[data-skin="alien"] .cs-decision-kicker { color:var(--alien-cream); }
html[data-skin="alien"] .cs-hour-bank { grid-column:1/span 9; }
html[data-skin="alien"] .cs-hour {
  border:1px solid currentColor;
  border-radius:15px;
  background:#081529;
}
html[data-skin="alien"] .cs-hour.selected {
  border:3px solid var(--alien-lime);
  background:
    radial-gradient(circle,rgba(184,255,44,.2),transparent 65%),
    #091d18;
  box-shadow:0 0 0 3px rgba(141,80,239,.28),0 0 24px rgba(184,255,44,.35);
}
html[data-skin="alien"] .cs-hour.selected::after {
  content:"★ BEST";
  position:absolute;
  left:12px;right:12px;bottom:-9px;
  padding:3px;
  color:#07120b;
  border-radius:999px;
  background:var(--alien-lime);
  font:700 8px var(--mono);
}
html[data-skin="alien"] .cs-day {
  border:1px solid #18597f;border-radius:13px;background:#09162a;
}
html[data-skin="alien"] .cs-actual > strong { color:var(--alien-lime); }

/* ---------- Cockpit responsive behavior ---------- */

@media (max-width:1050px) {
  html:is([data-skin="garage"],[data-skin="alien"]) .cartoon-stage {
    min-height:0;
  }
  .cs-masthead { grid-template-columns:1fr auto; }
  .cs-actions { grid-column:1/-1;justify-content:flex-start; }
  .cs-decision { grid-column:1/-1; }
  .cs-hour-bank { grid-column:1/-1; }
  .cs-outlook { grid-column:1/-1; }
  .cs-days { display:grid;grid-template-columns:repeat(3,1fr); }
  html[data-skin="alien"] .cs-instruments { margin-top:95px; }
  html[data-skin="alien"] .cs-decision,
  html[data-skin="alien"] .cs-hour-bank { grid-column:1/-1; }
}

@media (max-width:760px) {
  html:is([data-skin="garage"],[data-skin="alien"]) .cartoon-stage {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:0;
    padding:10px;
    border-width:3px;
    border-radius:14px;
  }
  html:is([data-skin="garage"],[data-skin="alien"]) .skin-toggle {
    position:sticky;
    top:0;
    z-index:1300;
  }
  .cs-masthead {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    padding:16px;
  }
  .cs-title { font-size:32px; }
  .cs-question { font-size:15px!important; }
  .cs-status-bank { align-self:stretch!important;flex-wrap:wrap; }
  .cs-actions { display:none; }
  .cs-nav { display:none!important; }
  .cs-instruments {
    order:2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    margin-top:0!important;
    padding:6px!important;
  }
  .cs-instrument { min-height:128px!important;border:1px solid var(--line-soft)!important; }
  .cs-instrument > strong { font-size:38px; }
  .cs-decision { order:1;min-height:230px;padding:24px 18px; }
  .cs-window { font-size:46px; }
  .cs-decision-row strong { font-size:34px; }
  .cs-decision-row span { font-size:48px; }
  .cs-hour-bank { order:3;padding:13px; }
  .cs-outlook { order:4;padding:13px; }
  .cs-actual { order:5; }
  .cs-system { order:6; }
  .cs-hours { grid-auto-columns:minmax(132px,44vw); }
  .cs-days { grid-template-columns:1fr; }
  html[data-skin="alien"] .cartoon-stage { padding-top:190px; }
  html[data-skin="alien"] .cs-scene { height:220px; }
  html[data-skin="alien"] .cs-portal { width:80px;height:80px;border-width:10px;right:10%;top:25px; }
  html[data-skin="alien"] .cs-mountains { height:120px;bottom:35px; }
  html[data-skin="alien"] .cs-lake { height:62px; }
  html[data-skin="alien"] .cs-wind-stream { top:74px;right:6%;width:220px;height:60px; }
  html[data-skin="alien"] .cs-wind-stream i { border-top-width:5px;height:14px; }
  html[data-skin="alien"] .cs-foiler { left:48%;top:120px;transform:scale(.65) rotate(-8deg); }
  html[data-skin="alien"] .cs-masthead { order:0;background:rgba(3,12,28,.94); }
  html[data-skin="alien"] .cs-decision { border-radius:24px; }
}

@media (max-width:430px) {
  .cs-eyebrow { font-size:10px; }
  .cs-title { font-size:28px; }
  .cs-masthead { padding:13px; }
  .cs-lamp { padding:7px 9px;font-size:9px; }
  .cs-decision { min-height:210px; }
  .cs-window { font-size:39px; }
  .cs-windline { font-size:11px; }
  .cs-hour { min-height:165px; }
  html[data-skin="alien"] .cartoon-stage { padding-top:170px; }
}

@media (prefers-reduced-motion:reduce) {
  .cs-portal,.cs-wind-stream i,.cs-energy i { animation:none!important; }
}

/* ========================================================================
   GARAGE COMPONENT-SHEET PASS
   A light workshop surface with discrete paper, steel and CRT components.
   The data contract and semantic layout remain shared with Alien.
   ======================================================================== *

/* Carry the component-sheet language into the detailed dashboard. *

@media (max-width:1050px) {
}

@media (max-width:760px) {
}

@media (max-width:430px) {
}

/* ---------- Dedicated Garage SVG instruments ---------- */

.garage-gauge { display:none; }

@media (max-width:760px) {
}

@media (max-width:430px) {
}

/* ========================================================================
   COMPLETE-PROPOSAL FIDELITY PASS
   Garage follows Generated images 1/2; Alien follows Generated images 4/5.
   ======================================================================== */

/* ---------- Garage: dense physical control enclosure ---------- *
/* The decorated ::before plate below IS the heading in this skin, so the
   plain kicker underneath it was rendering "BEST WINDOW" twice. *
/* Keep the peak summary on one line where it fits, and break it as a whole
   phrase rather than orphaning the trailing " . SW" direction fragment. *

/* ---------- Alien: illustrated operational application ---------- */

html[data-skin="alien"] {
  --alien-night:#020b18;
  --alien-panel:#07152a;
  --alien-panel-2:#0a1d37;
  --alien-cyan:#00e5ff;
  --alien-lime:#b8ff2e;
  --alien-amber:#ffb020;
  --alien-violet:#8c42ef;
  --alien-cream:#f5f1df;
  --ice:#020b18;
  --card:#07152a;
  --line:#17558b;
  --line-soft:#12365c;
  --ink:#f5f1df;
  --ink-2:#bdc9dc;
  --ink-3:#6e8cab;
  --shadow:0 12px 30px rgba(0,0,0,.42);
}
html[data-skin="alien"] body {
  background:
    radial-gradient(circle at 50% -10%,rgba(0,229,255,.09),transparent 36%),
    #020b18;
}
html[data-skin="alien"] .wrap {
  max-width:1540px;
  padding-inline:8px;
}
html[data-skin="alien"] .skin-toggle {
  border:1px solid #1b6592;
  border-radius:10px 10px 0 0;
  background:rgba(2,11,24,.94);
}
html[data-skin="alien"] .skin-toggle button.active {
  color:#07130b;
  background:var(--alien-lime);
}
html[data-skin="alien"] .cartoon-stage {
  gap:12px;
  min-height:0;
  margin-top:6px;
  padding:0 16px 18px 112px;
  border:1px solid #17669a;
  border-radius:16px;
  background:#020b18;
  box-shadow:0 22px 60px rgba(0,0,0,.48);
}
html[data-skin="alien"] .cs-scene {
  z-index:0;
  height:330px;
  opacity:1;
  background:
    linear-gradient(90deg,rgba(2,11,24,.92) 0,rgba(2,11,24,.48) 28%,transparent 58%),
    url("./assets/alien-silvaplana-hero.webp") center/cover no-repeat;
}
html[data-skin="alien"] .cs-sky,
html[data-skin="alien"] .cs-portal,
html[data-skin="alien"] .cs-mountains,
html[data-skin="alien"] .cs-lake,
html[data-skin="alien"] .cs-wind-stream,
html[data-skin="alien"] .cs-foiler {
  display:none;
}
html[data-skin="alien"] .cs-masthead {
  z-index:2;
  min-height:320px;
  margin:0;
  padding:28px 30px;
  grid-template-columns:minmax(0,1fr) auto;
  color:#f5f1df;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
html[data-skin="alien"] .cs-masthead > div:first-child {
  position:relative;
  max-width:670px;
  padding-left:92px;
}
.alien-brand-mark { display:none; }
html[data-skin="alien"] .alien-brand-mark {
  display:block;
  position:absolute;
  left:0;
  top:-12px;
  width:78px;
  height:78px;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.35));
}
html[data-skin="alien"] .cs-eyebrow {
  color:#00e5ff;
  font-size:13px;
}
html[data-skin="alien"] .cs-title {
  max-width:620px;
  color:#f5f1df;
  /* These four longhands replace a `font:` shorthand that read
     var(--garage-hand) - a token only defined under html[data-skin="garage"].
     For alien the substitution failed, making the declaration invalid at
     computed-value time, which resets every longhand to its unset value: for
     these inherited properties, that means inherit. So the shorthand never
     applied the 74px it names, and alien's title has always inherited the
     masthead's type. Spelled out here so the behaviour is deliberate rather
     than a side effect of a broken token reference. */
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:.88;
  text-shadow:0 4px 0 rgba(2,11,24,.65);
}
html[data-skin="alien"] .cs-question {
  color:#b8ff2e;
  font-size:25px;
  font-style:italic;
  text-shadow:0 2px 0 #071322;
}
html[data-skin="alien"] .cs-status-bank {
  align-self:start;
  margin-top:8px;
}
html[data-skin="alien"] .cs-lamp {
  color:#b8ff2e;
  border:1px solid #b8ff2e;
  border-radius:999px;
  background:rgba(2,11,24,.88);
}
html[data-skin="alien"] .cs-actions {
  align-self:end;
  margin-bottom:18px;
}
html[data-skin="alien"] .cs-actions button {
  min-height:54px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:10px;
  font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(0,0,0,.28);
}
html[data-skin="alien"] .cs-actions button:first-child {
  background:linear-gradient(135deg,#8d4cf1,#5d22b7);
}
html[data-skin="alien"] .cs-actions button:last-child {
  color:#07130b;
  background:linear-gradient(135deg,#caff28,#83ca00);
}
html[data-skin="alien"] .cs-nav {
  display:flex;
  position:absolute;
  z-index:4;
  top:135px;
  bottom:18px;
  left:8px;
  width:88px;
  padding:5px 8px;
  flex-direction:column;
  gap:0;
  border:1px solid #b8ff2e;
  border-left:0;
  border-radius:0 16px 16px 0;
  background:rgba(2,11,24,.94);
}
html[data-skin="alien"] .cs-nav a {
  min-height:82px;
  padding:7px 3px;
  color:#b8c7d7;
  border:0;
  border-bottom:1px solid #164a70;
  writing-mode:horizontal-tb;
  transform:none;
}
html[data-skin="alien"] .cs-nav a:first-child { color:#b8ff2e; }

html[data-skin="alien"] .cs-instruments {
  z-index:2;
  margin-top:-20px;
  padding:10px;
  border:1px solid #16669a;
  border-radius:15px;
  background:rgba(3,15,31,.96);
}
html[data-skin="alien"] .cs-live-status {
  color:#b8ff2e;
  border-color:rgba(184,255,46,.45);
  background:rgba(184,255,46,.04);
}
html[data-skin="alien"] .cs-instrument {
  position:relative;
  min-height:102px;
  padding:15px 15px 15px 66px;
  text-align:left;
  border-right:1px solid #164a70;
}
html[data-skin="alien"] .cs-instrument::before {
  position:absolute;
  left:18px;
  top:42px;
  color:#00e5ff;
  font:700 32px/1 var(--display);
  text-shadow:0 0 12px rgba(0,229,255,.28);
}
html[data-skin="alien"] .cs-instrument[data-garage-gauge="wind"]::before { content:"≋"; }
html[data-skin="alien"] .cs-instrument[data-garage-gauge="gust"]::before {
  content:"◌";
  color:#b48aff;
}
html[data-skin="alien"] .cs-instrument[data-garage-gauge="direction"]::before {
  content:"➤";
  color:#b8ff2e;
  transform:rotate(-35deg);
}
html[data-skin="alien"] .cs-instrument[data-garage-gauge="temperature"]::before { content:"♨"; }
html[data-skin="alien"] .cs-instrument > span {
  color:#a9bbce;
}
html[data-skin="alien"] .cs-instrument > strong {
  margin-top:8px;
  color:#f5f1df;
  font-size:38px;
}
html[data-skin="alien"] .cs-instrument > small {
  color:#00e5ff;
}
html[data-skin="alien"] .cs-needle,
html[data-skin="alien"] .cs-compass,
html[data-skin="alien"] .cs-liquid {
  display:none;
}

@media (min-width:761px) {
  html[data-skin="alien"] .cs-decision {
    display:none;
  }
}
html[data-skin="alien"] .cs-hour-bank {
  grid-column:1/span 9;
  padding:16px;
  border:1px solid #17669a;
  border-radius:16px;
  background:#061429;
}
html[data-skin="alien"] .cs-outlook {
  grid-column:10/-1;
  padding:16px;
  border:1px solid #17669a;
  border-radius:16px;
  background:#061429;
}
html[data-skin="alien"] .cs-module-head {
  color:#f5f1df;
  font-size:13px;
}
html[data-skin="alien"] .cs-module-head span:last-child {
  color:#00e5ff;
}
html[data-skin="alien"] .cs-hour {
  min-height:205px;
  color:#00e5ff;
  border:1px solid #297ab0;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 55%,rgba(0,229,255,.05),transparent 55%),
    #07162d;
}
html[data-skin="alien"] .cs-hour > i {
  width:78px;
  height:44px;
  border:0;
  border-radius:0;
  background:currentColor;
  opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M2 12c20 14 31-12 52 0s27 3 44-5M2 25c20 14 31-12 52 0s27 3 44-5M2 38c20 14 31-12 52 0s27 3 44-5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M2 12c20 14 31-12 52 0s27 3 44-5M2 25c20 14 31-12 52 0s27 3 44-5M2 38c20 14 31-12 52 0s27 3 44-5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:none;
}
html[data-skin="alien"] .cs-hour.good {
  color:#b8ff2e;
  border-color:#78bb20;
  background:#0b261b;
}
html[data-skin="alien"] .cs-hour.marginal {
  color:#ffb020;
  border-color:#bf7910;
  background:#21190b;
}
html[data-skin="alien"] .cs-hour.unlikely {
  color:#00dffc;
}
html[data-skin="alien"] .cs-hour.selected {
  color:#b8ff2e;
  border:3px solid #b8ff2e;
  background:
    radial-gradient(circle at 50% 55%,rgba(184,255,46,.18),transparent 58%),
    #09231a;
  box-shadow:0 0 0 3px rgba(141,80,239,.34),0 0 24px rgba(184,255,46,.42);
}
html[data-skin="alien"] .cs-hour.selected::after {
  content:"★ BEST WINDOW";
}
html[data-skin="alien"] .cs-days {
  height:100%;
  justify-content:stretch;
}
html[data-skin="alien"] .cs-day {
  flex:1;
  border:0;
  border-bottom:1px solid #164a70;
  border-radius:0;
  background:transparent;
}
html[data-skin="alien"] .cs-day:last-child { border-bottom:0; }
html[data-skin="alien"] .cs-actual,
html[data-skin="alien"] .cs-system {
  display:none;
}

html[data-skin="alien"] .dashboard-console {
  gap:12px;
  margin-top:12px;
}
html[data-skin="alien"] .card,
html[data-skin="alien"] details.tech,
html[data-skin="alien"] .latest-wind {
  color:#f5f1df;
  border:1px solid #17669a;
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 0,rgba(0,229,255,.045),transparent 30%),
    #061429;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
html[data-skin="alien"] .section-head h2,
html[data-skin="alien"] .summary-day-head,
html[data-skin="alien"] .health-sub-head,
html[data-skin="alien"] details.tech > summary {
  color:#f5f1df;
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.035em;
}
html[data-skin="alien"] .summary-stat,
html[data-skin="alien"] .stat,
html[data-skin="alien"] .qs-card,
html[data-skin="alien"] .meteo-hour,
html[data-skin="alien"] .day-wind-chart,
html[data-skin="alien"] .chart-box,
html[data-skin="alien"] .viz-box {
  color:#f5f1df;
  border:1px solid #1c5584;
  border-radius:12px;
  background:#07162c;
}
html[data-skin="alien"] .summary-stat .s-value,
html[data-skin="alien"] .stat .st-value {
  color:#b8ff2e;
}

/* ---------- Proposal-responsive compositions ---------- */

@media (max-width:1050px) {
  html[data-skin="garage"] .cs-title { white-space:normal; }

  html[data-skin="alien"] .cartoon-stage { padding-left:16px; }
  html[data-skin="alien"] .cs-nav { display:none; }
  html[data-skin="alien"] .cs-hour-bank,
  html[data-skin="alien"] .cs-outlook { grid-column:1/-1; }
}

@media (max-width:760px) {
  html[data-skin="alien"] .cs-mobile-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
    padding-top:4px;
  }
  html:is([data-skin="garage"],[data-skin="alien"]) .cs-mobile-actions button {
    min-height:62px;
    border-radius:10px;
    font:700 17px var(--mono);
    letter-spacing:.04em;
    cursor:pointer;
  }

  html[data-skin="alien"] .cartoon-stage {
    gap:11px;
    padding:0 10px 12px;
    border:0;
    border-radius:0;
  }
  html[data-skin="alien"] .cs-scene {
    height:250px;
    background:
      linear-gradient(180deg,rgba(2,11,24,.2),rgba(2,11,24,.12) 65%,#020b18 100%),
      url("./assets/alien-silvaplana-hero.webp") 58% center/auto 250px no-repeat;
  }
  html[data-skin="alien"] .cs-masthead {
    order:0;
    min-height:245px;
    padding:18px 12px;
    display:block;
    background:linear-gradient(90deg,rgba(2,11,24,.88),rgba(2,11,24,.18) 80%,transparent);
  }
  html[data-skin="alien"] .cs-masthead > div:first-child {
    max-width:315px;
    padding-left:65px;
  }
  html[data-skin="alien"] .alien-brand-mark {
    top:-8px;
    width:56px;
    height:56px;
  }
  html[data-skin="alien"] .cs-eyebrow { font-size:10px; }
  html[data-skin="alien"] .cs-title {
    font-size:37px;
    line-height:.9;
  }
  html[data-skin="alien"] .cs-question {
    font-size:17px!important;
  }
  html[data-skin="alien"] .cs-status-bank {
    display:flex;
    margin:20px 0 0;
  }
  html[data-skin="alien"] .cs-actions {
    display:none;
  }
  html[data-skin="alien"] .cs-decision {
    display:block;
    order:1;
    min-height:245px;
    padding:26px 20px;
    color:#b8ff2e;
    border:3px solid #b8ff2e;
    border-radius:22px;
    background:
      radial-gradient(circle at 20% 50%,rgba(184,255,46,.12),transparent 44%),
      #061429;
    box-shadow:0 0 0 3px rgba(24,85,125,.55),0 0 25px rgba(184,255,46,.22);
  }
  html[data-skin="alien"] .cs-window {
    color:#f5f1df;
    font-size:48px;
  }
  html[data-skin="alien"] .cs-decision-row strong,
  html[data-skin="alien"] .cs-decision-row span {
    color:#b8ff2e;
  }
  html[data-skin="alien"] .cs-instruments {
    order:2;
    grid-template-columns:repeat(2,1fr);
    margin-top:0;
    padding:0!important;
    border:0;
    background:transparent;
  }
  html[data-skin="alien"] .cs-live-status {
    margin-bottom:0;
  }
  html[data-skin="alien"] .cs-instrument {
    min-height:125px!important;
    padding:18px 14px 18px 64px!important;
    border:1px solid #1b5688!important;
    border-radius:17px;
    background:#061429;
  }
  html[data-skin="alien"] .cs-instrument > strong { font-size:37px; }
  html[data-skin="alien"] .cs-instrument::before {
    left:17px;
    top:50px;
  }
  html[data-skin="alien"] .cs-hour-bank {
    order:3;
    padding:14px;
  }
  html[data-skin="alien"] .cs-hours {
    grid-auto-columns:minmax(128px,40vw);
  }
  html[data-skin="alien"] .cs-outlook {
    order:4;
    padding:14px;
  }
  html[data-skin="alien"] .cs-days {
    display:grid;
    grid-template-columns:repeat(3,minmax(150px,1fr));
    overflow-x:auto;
  }
  html[data-skin="alien"] .cs-day {
    border-right:1px solid #164a70;
    border-bottom:0;
  }
  html[data-skin="alien"] .cs-mobile-actions button {
    border:1px solid rgba(255,255,255,.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 7px 18px rgba(0,0,0,.28);
  }
  html[data-skin="alien"] .cs-mobile-actions button:first-child {
    color:#fff;
    background:linear-gradient(135deg,#8d4cf1,#5d22b7);
  }
  html[data-skin="alien"] .cs-mobile-actions button:last-child {
    color:#07130b;
    background:linear-gradient(135deg,#caff28,#83ca00);
  }
}

@media (max-width:430px) {

  html[data-skin="alien"] .cs-title { font-size:31px; }
  html[data-skin="alien"] .cs-window { font-size:41px; }
  html[data-skin="alien"] .cs-decision-row {
    gap:12px;
  }
  html[data-skin="alien"] .cs-decision-row strong { font-size:34px; }
  html[data-skin="alien"] .cs-decision-row span { font-size:44px; }
}

/* ========================================================================
   GARAGE HARDWARE FIDELITY — enclosure, workshop rig and tactile modules
   ======================================================================== */

.garage-rig { display:none; }

@media (min-width:1180px) {
}

@media (max-width:1179px) {
}

@media (max-width:760px) {
}

/* Final artwork bindings must remain after every structural skin rule. *
@media (min-width:1180px) {
}

html[data-skin="alien"] body {
  background:
    linear-gradient(rgba(2,11,24,.84),rgba(2,11,24,.9)),
    url("./assets/alien-panel-surface.webp") center top/cover fixed,
    #020b18;
}
html[data-skin="alien"] .cartoon-stage {
  background:
    linear-gradient(180deg,rgba(2,11,24,.12) 0 310px,rgba(2,11,24,.7) 440px,rgba(2,11,24,.86) 100%),
    url("./assets/alien-panel-surface.webp") center/cover no-repeat,
    #020b18;
}
html[data-skin="alien"] .cs-hour-bank,
html[data-skin="alien"] .cs-outlook,
html[data-skin="alien"] .card,
html[data-skin="alien"] details.tech,
html[data-skin="alien"] .latest-wind {
  background:
    linear-gradient(rgba(4,18,37,.88),rgba(5,20,41,.94)),
    url("./assets/alien-panel-surface.webp") center/cover no-repeat,
    #061429;
}

@media (max-width:760px) {
  html[data-skin="alien"] body {
    background:
      linear-gradient(rgba(2,11,24,.86),rgba(2,11,24,.92)),
      url("./assets/alien-panel-surface.webp") center top/auto 100vh fixed,
      #020b18;
  }
}

/* Component artwork bindings intentionally follow the final chassis layer. */
.garage-gauge-art {
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.cs-hour-art {
  display:none;
}
html[data-skin="alien"] .alien-hour-art {
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
/* Tier badge drawn in CSS rather than from garage-tier-badge.webp: that asset
   has an opaque black matte around the plate, so any background-size left a
   hard black rectangle sitting on the parchment (stretched with 100% 100%,
   letterboxed with contain). A CSS plate matches the art's palette, scales to
   any label width, and drops an image request. *
/* The card art puts a dark recessed panel at the bottom; the wind readout
   sits in it, so it needs light ink, not the dark card-body ink it used to
   inherit (#232d27 on a near-black panel was effectively invisible). *

html[data-skin="alien"] .cs-hour {
  isolation:isolate;
  overflow:hidden;
  min-height:224px;
  padding:17px 11px 12px;
  border:0;
  background:#061429;
  box-shadow:0 8px 17px rgba(0,0,0,.34);
}
html[data-skin="alien"] .cs-hour::before {
  display:none;
}
html[data-skin="alien"] .cs-hour.marginal .alien-hour-art { filter:hue-rotate(42deg) saturate(.9); }
html[data-skin="alien"] .cs-hour.unlikely .alien-hour-art { filter:hue-rotate(105deg) saturate(.9); }
html[data-skin="alien"] .cs-hour > .cs-windglyph { opacity:0; }
html[data-skin="alien"] .cs-hour span,
html[data-skin="alien"] .cs-hour strong,
html[data-skin="alien"] .cs-hour b,
html[data-skin="alien"] .cs-hour small {
  position:relative;
  z-index:2;
}
html[data-skin="alien"] .cs-hour strong {
  margin-top:15px;
  color:#f5f1df;
}
html[data-skin="alien"] .cs-hour b {
  width:94%;
  min-height:38px;
  margin:25px auto 0;
  padding:11px 8px 7px;
  color:#caff31;
  background:url("./assets/alien-tier-badge.webp") center/100% 100% no-repeat;
  text-shadow:0 0 9px currentColor;
}
html[data-skin="alien"] .cs-hour.marginal b {
  color:#ffbf2f;
  filter:hue-rotate(42deg) saturate(.9);
}
html[data-skin="alien"] .cs-hour.unlikely b {
  color:#50dfff;
  filter:hue-rotate(105deg) saturate(.9);
}
html[data-skin="alien"] .cs-hour small { color:#b7c9d8; }
html[data-skin="alien"] .cs-hour.selected {
  border:0;
  box-shadow:0 0 0 3px #b8ff2e,0 0 28px rgba(184,255,46,.55),0 10px 20px rgba(0,0,0,.4);
}

@media (max-width:760px) {
  html[data-skin="alien"] .cs-hour {
    min-height:238px;
  }
}