/* ==========================================================
   Wrapper chrome only — NOT the artwork's own styling.
   Deliberately neutral (not the ControlTowerAI blue brand, not the
   artwork's own pink signal) so this experimental station reads as
   its own distinct zone, per product decision. The artwork's real
   CSS (us-station.css, untouched) governs everything below the
   intro strip.
   ========================================================== */
.station-chrome, .station-chrome * { box-sizing: border-box; font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.station-topbar {
  position: relative; z-index: 95;
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(18px, 4vw, 40px);
  background: #050506; border-bottom: 1px solid rgba(255,255,255,.08);
}
.station-topbar a.back { display: flex; align-items: center; gap: 8px; color: #cfd4db; text-decoration: none; font-size: 13px; font-weight: 600; }
.station-topbar a.back:hover { color: #fff; }
.station-topbar a.back img { width: 20px; height: 20px; border-radius: 50%; }
.station-topbar .divider { width: 1px; height: 18px; background: rgba(255,255,255,.14); }
.station-topbar .label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a93a1; }
.station-topbar nav { margin-left: auto; display: flex; gap: 18px; }
.station-topbar nav a { color: #9aa2ad; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.station-topbar nav a:hover, .station-topbar nav a.current { color: #fff; }
@media (max-width: 640px) { .station-topbar nav { display: none; } }

.station-topbar .lang-select { position: relative; margin-left: 18px; }
.station-topbar .lang-button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; color: #cfd4db; cursor: pointer;
}
.station-topbar .lang-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; max-height: 300px; overflow-y: auto;
  background: #0c0c10; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  padding: 6px; z-index: 200;
}
.station-topbar .lang-menu.open { display: block; }
.station-topbar .lang-option { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: #cfd4db; }
.station-topbar .lang-option:hover { background: rgba(255,255,255,.06); }
.station-topbar .lang-option.active { background: rgba(255,111,176,.12); color: #ff6fb0; font-weight: 700; }

.station-intro {
  position: relative; z-index: 90; padding: 44px clamp(18px, 4vw, 40px) 40px;
  background: #050506; border-bottom: 1px solid rgba(255,255,255,.08);
}
.station-intro-inner { max-width: 820px; }
.station-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff6fb0; margin: 0 0 12px; }
.station-intro h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; color: #fff; margin: 0 0 14px; font-weight: 800; letter-spacing: -.01em; }
.station-intro p { font-size: 14px; line-height: 1.65; color: #b7bec8; margin: 0 0 14px; max-width: 720px; }
.station-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.station-facts li { font-size: 12.5px; color: #9aa2ad; line-height: 1.5; padding-left: 16px; position: relative; }
.station-facts li::before { content: "—"; position: absolute; left: 0; color: #5c636e; }
.station-facts b { color: #dfe3e8; font-weight: 700; }
@media (max-width: 700px) { .station-facts { grid-template-columns: 1fr; } }

.station-note {
  margin-top: 20px; padding: 12px 14px; border-left: 2px solid rgba(255,111,176,.4);
  font-size: 12px; color: #8a93a1; line-height: 1.6; max-width: 720px;
}

.station-outro {
  position: relative; z-index: 90; padding: 40px clamp(18px, 4vw, 40px) 48px;
  background: #050506; border-top: 1px solid rgba(255,255,255,.08);
}
.station-outro-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; max-width: 1080px; }
.station-outro h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #dfe3e8; margin: 0 0 12px; font-weight: 700; }
.station-outro p, .station-outro a { font-size: 12.5px; color: #9aa2ad; line-height: 1.7; }
.station-outro a { display: block; text-decoration: none; margin-bottom: 8px; }
.station-outro a:hover { color: #fff; }
.station-outro-bottom { max-width: 1080px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #6b7482; }
@media (max-width: 780px) { .station-outro-grid { grid-template-columns: 1fr; } }

/* The "+24h projected" state is disabled in this local build — see
   us-station-bootstrap.js's header comment. Visual-only addition on
   top of the untouched us-station.css. */
.us-next-state:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }