/* Planetary colour schemes — shared hub + public site
 * Canonical: mars | neptune | jupiter | venus | sun
 * Aliases kept for localStorage: blue→neptune, purple→venus, yellow→sun,
 * classic/coral/sentinel→jupiter or mars as noted below.
 */

/* ── Mars (default) — dust orange ── */
:root,
:root[data-dash-theme="mars"],
:root[data-dash-theme="sentinel"] {
  --aria-ripple-a: #ffb070;
  --aria-ripple-b: #c45c2a;
  --dash-accent: #e07a3d;
  --dash-accent-2: #f0a46a;
  --dash-online: #7dcf8a;
  --dash-online-bg: rgba(125, 207, 138, 0.16);
  --dash-online-soft: #9ee0a8;
  --dash-motion: #f0b060;
  --dash-motion-bg: rgba(240, 176, 96, 0.2);
  --dash-ribbon-glow: 0 0 8px rgba(240, 164, 106, 0.5), 0 0 18px rgba(196, 92, 42, 0.28);
  --dash-card-online: #7dcf8a;
  --dash-gear-router: #c45c2a;
  --dash-gear-switch: #e07a3d;
  --bg: #100a08;
  --bg-mid: #1a100c;
  --bg-alt: rgba(32, 20, 14, 0.82);
  --bg-panel: rgba(28, 16, 12, 0.75);
  --text: #f6ebe0;
  --muted: #c4a890;
  --border: rgba(240, 164, 106, 0.14);
  --surface: rgba(255, 180, 120, 0.1);
}

/* ── Neptune — deep ice blue ── */
:root[data-dash-theme="neptune"],
:root[data-dash-theme="blue"] {
  --aria-ripple-a: #7dd3fc;
  --aria-ripple-b: #1d4ed8;
  --dash-accent: #38bdf8;
  --dash-accent-2: #67e8f9;
  --dash-online: #2dd4bf;
  --dash-online-bg: rgba(45, 212, 191, 0.15);
  --dash-online-soft: #5eead4;
  --dash-motion: #60a5fa;
  --dash-motion-bg: rgba(96, 165, 250, 0.18);
  --dash-ribbon-glow: 0 0 8px rgba(103, 232, 249, 0.5), 0 0 14px rgba(56, 189, 248, 0.25);
  --dash-card-online: #2dd4bf;
  --dash-gear-router: #0ea5e9;
  --dash-gear-switch: #06b6d4;
  --bg: #060b14;
  --bg-mid: #0a1220;
  --bg-alt: rgba(12, 22, 38, 0.86);
  --bg-panel: rgba(10, 18, 32, 0.8);
  --text: #e8f4ff;
  --muted: #8ba3bc;
  --border: rgba(56, 189, 248, 0.14);
  --surface: rgba(56, 189, 248, 0.08);
}

/* ── Jupiter — original Sentinel (cyan + banded warm) ── */
:root[data-dash-theme="jupiter"],
:root[data-dash-theme="classic"],
:root[data-dash-theme="coral"] {
  --aria-ripple-a: #00e8ff;
  --aria-ripple-b: #e87a3f;
  --dash-accent: #e87a3f;
  --dash-accent-2: #4fc3f7;
  --dash-online: #4ade80;
  --dash-online-bg: rgba(74, 222, 128, 0.15);
  --dash-online-soft: #68d391;
  --dash-motion: #f6ad55;
  --dash-motion-bg: rgba(246, 173, 85, 0.18);
  --dash-ribbon-glow: 0 0 6px rgba(79, 195, 247, 0.55), 0 0 14px rgba(232, 122, 63, 0.3);
  --dash-card-online: #4ade80;
  --dash-gear-router: #3b82f6;
  --dash-gear-switch: #22c55e;
  --bg: #060810;
  --bg-mid: #0a0e16;
  --bg-alt: rgba(20, 26, 38, 0.82);
  --bg-panel: rgba(16, 20, 32, 0.8);
  --text: #f0ebe3;
  --muted: #9aa3b0;
  --border: rgba(255, 255, 255, 0.08);
  --surface: rgba(255, 255, 255, 0.08);
}

/* ── Venus — soft violet / peach atmosphere ── */
:root[data-dash-theme="venus"],
:root[data-dash-theme="purple"] {
  --aria-ripple-a: #f0abfc;
  --aria-ripple-b: #7c3aed;
  --dash-accent: #c084fc;
  --dash-accent-2: #f0abfc;
  --dash-online: #86efac;
  --dash-online-bg: rgba(134, 239, 172, 0.15);
  --dash-online-soft: #a7f3d0;
  --dash-motion: #e9d5ff;
  --dash-motion-bg: rgba(233, 213, 255, 0.2);
  --dash-ribbon-glow: 0 0 8px rgba(192, 132, 252, 0.55), 0 0 14px rgba(240, 171, 252, 0.3);
  --dash-card-online: #86efac;
  --dash-gear-router: #a855f7;
  --dash-gear-switch: #d946ef;
  --bg: #0c0812;
  --bg-mid: #140e1c;
  --bg-alt: rgba(28, 18, 40, 0.86);
  --bg-panel: rgba(24, 14, 36, 0.8);
  --text: #f5f0ff;
  --muted: #b4a3c9;
  --border: rgba(192, 132, 252, 0.16);
  --surface: rgba(192, 132, 252, 0.09);
}

/* ── Sun — gold / yellow corona ── */
:root[data-dash-theme="sun"],
:root[data-dash-theme="yellow"] {
  --aria-ripple-a: #fef08a;
  --aria-ripple-b: #ca8a04;
  --dash-accent: #facc15;
  --dash-accent-2: #fde047;
  --dash-online: #a3e635;
  --dash-online-bg: rgba(163, 230, 53, 0.15);
  --dash-online-soft: #bef264;
  --dash-motion: #fbbf24;
  --dash-motion-bg: rgba(251, 191, 36, 0.2);
  --dash-ribbon-glow: 0 0 10px rgba(253, 224, 71, 0.55), 0 0 16px rgba(250, 204, 21, 0.28);
  --dash-card-online: #a3e635;
  --dash-gear-router: #eab308;
  --dash-gear-switch: #ca8a04;
  --bg: #0c0a04;
  --bg-mid: #141008;
  --bg-alt: rgba(32, 26, 10, 0.86);
  --bg-panel: rgba(28, 22, 8, 0.8);
  --text: #fffbeb;
  --muted: #c4b896;
  --border: rgba(250, 204, 21, 0.16);
  --surface: rgba(250, 204, 21, 0.09);
}

/* Fixed issue / warn palette (all themes) */
:root {
  --dash-ribbon-value: #f8fafc;
  --dash-warn: #f59e0b;
  --dash-warn-bg: rgba(245, 158, 11, 0.15);
  --dash-bad: #ff5c38;
  --dash-bad-bg: rgba(255, 92, 56, 0.15);
  --dash-bad-strong: #ff4520;
}


/* ── Bridge: hub pages using --accent/* stay aligned with planetary --dash-* ──
   Music-media, rust-control, older cards. Do not invent a second palette. */
:root {
  --accent: var(--dash-accent);
  --accent-2: var(--dash-accent-2);
  --online: var(--dash-online);
  --online-bg: var(--dash-online-bg);
  --ribbon-glow: var(--dash-ribbon-glow);
  --accent-hover-bg: color-mix(in srgb, var(--dash-accent) 12%, transparent);
  --accent-glow: color-mix(in srgb, var(--dash-accent) 28%, transparent);
  --cosmos-warm: color-mix(in srgb, var(--dash-accent) 10%, transparent);
  --cosmos-cool: color-mix(in srgb, var(--bg-mid) 80%, #000);
  --status-hero-tint: color-mix(in srgb, var(--dash-accent) 12%, transparent);
  --control-bg: color-mix(in srgb, var(--bg-panel) 90%, #000);
  --card-bg: var(--bg-panel);
  --hero-bg: var(--bg-mid);
}


/* Theme picker layout */
.dash-theme-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.dashboard-page .dash-header-panel .dash-theme-picker,
.dashboard-page .dash-header-panel .sentinel-theme-picker {
  margin-left: 0;
  flex-shrink: 0;
}

.dashboard-page .site-header {
  position: sticky;
  top: 0;
  z-index: 320;
}

.dashboard-page .site-header .wrap,
.dashboard-page .site-header .dash-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding-top: 0.45rem;
  padding-bottom: 0.5rem;
}

.dashboard-page .dash-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.dashboard-page .site-header .logo {
  margin-right: 0;
}

.dashboard-page .dash-header-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  min-width: 0;
}

.dashboard-page .dash-nav,
.dashboard-page .site-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.28rem;
  width: 100%;
  margin: 0;
  min-width: 0;
  flex: 1 1 100%;
  order: 2;
}

.dashboard-page .dash-header-panel .dash-nav,
.dashboard-page .dash-header-panel .hub-nav {
  margin-left: 0;
  flex: 1 1 100%;
  width: 100%;
  order: 2;
}

.dashboard-page .dash-header-panel .hub-theme-picker,
.dashboard-page .dash-header-panel .dash-theme-picker,
.dashboard-page .dash-header-panel .sentinel-theme-picker {
  order: 1;
  margin-left: auto;
  flex: 0 0 auto;
}

.dashboard-page .dash-nav a {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.28rem 0.48rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.dashboard-page .dash-nav a:hover {
  color: var(--text);
  border-color: var(--dash-accent);
}

.dashboard-page .dash-nav a.active {
  color: var(--dash-accent);
  border-color: var(--dash-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dash-accent) 35%, transparent);
}

.dash-theme-picker-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.dash-theme-btn {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.dash-theme-btn:hover {
  border-color: var(--dash-accent);
  color: var(--dash-accent);
}

.dash-theme-btn.is-active {
  border-color: var(--dash-accent);
  color: var(--dash-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dash-accent) 35%, transparent);
}

.dash-theme-swatch {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}

.dash-theme-btn[data-dash-theme="mars"] .dash-theme-swatch,
.dash-theme-btn[data-dash-theme="sentinel"] .dash-theme-swatch {
  background: #e07a3d;
}
.dash-theme-btn[data-dash-theme="neptune"] .dash-theme-swatch,
.dash-theme-btn[data-dash-theme="blue"] .dash-theme-swatch {
  background: #38bdf8;
}
.dash-theme-btn[data-dash-theme="jupiter"] .dash-theme-swatch,
.dash-theme-btn[data-dash-theme="classic"] .dash-theme-swatch {
  background: linear-gradient(135deg, #4fc3f7 45%, #e87a3f 55%);
}
.dash-theme-btn[data-dash-theme="venus"] .dash-theme-swatch,
.dash-theme-btn[data-dash-theme="purple"] .dash-theme-swatch {
  background: #c084fc;
}
.dash-theme-btn[data-dash-theme="sun"] .dash-theme-swatch,
.dash-theme-btn[data-dash-theme="yellow"] .dash-theme-swatch {
  background: #facc15;
}

.dashboard-page .logo span {
  color: var(--dash-accent);
}

.dashboard-page nav a.active {
  color: var(--dash-accent);
}

@media (max-width: 720px) {
  .dash-theme-picker {
    width: 100%;
    margin-left: 0;
    margin-top: 0.35rem;
  }
}

/* ── Website token mapping (public site banners / cosmos) ── */
:root,
:root[data-dash-theme="mars"],
:root[data-dash-theme="sentinel"] {
  --aria-ripple-a: #ffb070;
  --aria-ripple-b: #c45c2a;
  --rust-light: var(--dash-accent);
  --rust: #c45c2a;
  --mars: #b84a28;
  --label-warm: #f0a878;
  --site-accent-2: var(--dash-accent-2);
  --site-online: var(--dash-online);
  --cosmos-warm: rgba(255, 140, 60, 0.12);
  --cosmos-cool: rgba(80, 30, 20, 0.18);
  --sun-halo-inner: rgba(255, 200, 120, 0.75);
  --sun-halo-outer: rgba(200, 90, 40, 0.14);
  --sun-corona: rgba(255, 160, 70, 0.42);
  --sun-corona-fade: rgba(180, 80, 30, 0.14);
  --quantum: #e07a3d;
  --banner-edge-accent: color-mix(in srgb, var(--dash-accent) 42%, #7dcf8a);
  --banner-edge-title: color-mix(in srgb, var(--banner-edge-accent) 55%, #fff8f0);
  --banner-dgx-accent: color-mix(in srgb, var(--dash-accent) 28%, #c45c2a);
  --banner-dgx-title: color-mix(in srgb, var(--banner-dgx-accent) 55%, #fff8f0);
  --banner-code-accent: color-mix(in srgb, var(--dash-accent) 42%, #7dcf8a);
  --banner-code-accent-2: color-mix(in srgb, var(--dash-accent-2) 55%, var(--dash-accent));
  --banner-code-title: color-mix(in srgb, var(--banner-code-accent) 55%, #fff8f0);
  --banner-aria-accent: color-mix(in srgb, var(--dash-accent) 38%, #f0a46a);
  --banner-aria-title: color-mix(in srgb, var(--banner-aria-accent) 55%, #fff8f0);
  --banner-wash-top: var(--cosmos-cool);
  --banner-wash-bottom: var(--cosmos-warm);
}

:root[data-dash-theme="neptune"],
:root[data-dash-theme="blue"] {
  --aria-ripple-a: #7dd3fc;
  --aria-ripple-b: #1d4ed8;
  --rust-light: var(--dash-accent);
  --rust: #0ea5e9;
  --mars: #0284c7;
  --label-warm: #67e8f9;
  --site-accent-2: var(--dash-accent-2);
  --site-online: var(--dash-online);
  --cosmos-warm: rgba(56, 189, 248, 0.1);
  --cosmos-cool: rgba(14, 116, 144, 0.18);
  --sun-halo-inner: rgba(103, 232, 249, 0.72);
  --sun-halo-outer: rgba(14, 165, 233, 0.16);
  --sun-corona: rgba(56, 189, 248, 0.42);
  --sun-corona-fade: rgba(2, 132, 199, 0.14);
  --quantum: #67e8f9;
  --banner-edge-accent: color-mix(in srgb, var(--dash-accent) 42%, #2dd4bf);
  --banner-edge-title: color-mix(in srgb, var(--banner-edge-accent) 55%, #f0faff);
  --banner-dgx-accent: color-mix(in srgb, var(--dash-accent) 32%, #0ea5e9);
  --banner-dgx-title: color-mix(in srgb, var(--banner-dgx-accent) 55%, #f0faff);
  --banner-code-accent: color-mix(in srgb, var(--dash-accent) 42%, #2dd4bf);
  --banner-code-accent-2: color-mix(in srgb, var(--dash-accent-2) 55%, var(--dash-accent));
  --banner-code-title: color-mix(in srgb, var(--banner-code-accent) 55%, #f0fff8);
  --banner-aria-accent: color-mix(in srgb, var(--dash-accent) 38%, #67e8f9);
  --banner-aria-title: color-mix(in srgb, var(--banner-aria-accent) 55%, #f0f8ff);
  --banner-wash-top: var(--cosmos-cool);
  --banner-wash-bottom: var(--cosmos-warm);
}

:root[data-dash-theme="jupiter"],
:root[data-dash-theme="classic"],
:root[data-dash-theme="coral"] {
  --aria-ripple-a: #00e8ff;
  --aria-ripple-b: #e87a3f;
  --rust-light: var(--dash-accent);
  --rust: #c45c2a;
  --mars: #b84a28;
  --label-warm: #f0a878;
  --site-accent-2: var(--dash-accent-2);
  --site-online: var(--dash-online);
  --cosmos-warm: rgba(255, 175, 60, 0.08);
  --cosmos-cool: rgba(50, 35, 90, 0.14);
  --sun-halo-inner: rgba(255, 215, 110, 0.75);
  --sun-halo-outer: rgba(255, 120, 30, 0.12);
  --sun-corona: rgba(255, 195, 70, 0.42);
  --sun-corona-fade: rgba(255, 140, 40, 0.14);
  --quantum: #9b7ed9;
  --banner-edge-accent: color-mix(in srgb, var(--dash-accent) 42%, #4ade80);
  --banner-edge-title: color-mix(in srgb, var(--banner-edge-accent) 55%, #f4ffe8);
  --banner-dgx-accent: color-mix(in srgb, var(--dash-accent) 28%, #76b900);
  --banner-dgx-title: color-mix(in srgb, var(--banner-dgx-accent) 55%, #f4ffe8);
  --banner-code-accent: color-mix(in srgb, var(--dash-accent) 42%, #3fb950);
  --banner-code-accent-2: color-mix(in srgb, var(--dash-accent-2) 55%, var(--dash-accent));
  --banner-code-title: color-mix(in srgb, var(--banner-code-accent) 55%, #f4fff0);
  --banner-aria-accent: color-mix(in srgb, var(--dash-accent) 38%, #9b7ed9);
  --banner-aria-title: color-mix(in srgb, var(--banner-aria-accent) 55%, #f4f0ff);
  --banner-wash-top: var(--cosmos-cool);
  --banner-wash-bottom: var(--cosmos-warm);
}

:root[data-dash-theme="venus"],
:root[data-dash-theme="purple"] {
  --aria-ripple-a: #f0abfc;
  --aria-ripple-b: #7c3aed;
  --rust-light: var(--dash-accent);
  --rust: #a855f7;
  --mars: #7c3aed;
  --label-warm: #e9d5ff;
  --quantum: #c084fc;
  --site-accent-2: var(--dash-accent-2);
  --site-online: var(--dash-online);
  --cosmos-warm: rgba(192, 132, 252, 0.1);
  --cosmos-cool: rgba(76, 29, 149, 0.16);
  --sun-halo-inner: rgba(240, 171, 252, 0.75);
  --sun-halo-outer: rgba(124, 58, 237, 0.16);
  --sun-corona: rgba(192, 132, 252, 0.44);
  --sun-corona-fade: rgba(109, 40, 217, 0.14);
  --banner-edge-accent: color-mix(in srgb, var(--dash-accent) 42%, #86efac);
  --banner-edge-title: color-mix(in srgb, var(--banner-edge-accent) 55%, #f8f4ff);
  --banner-dgx-accent: color-mix(in srgb, var(--dash-accent) 38%, #a855f7);
  --banner-dgx-title: color-mix(in srgb, var(--banner-dgx-accent) 55%, #f8f4ff);
  --banner-code-accent: color-mix(in srgb, var(--dash-accent) 42%, #86efac);
  --banner-code-accent-2: color-mix(in srgb, var(--dash-accent-2) 55%, var(--dash-accent));
  --banner-code-title: color-mix(in srgb, var(--banner-code-accent) 55%, #f4fff8);
  --banner-aria-accent: color-mix(in srgb, var(--dash-accent) 38%, #f0abfc);
  --banner-aria-title: color-mix(in srgb, var(--banner-aria-accent) 55%, #f8f4ff);
  --banner-wash-top: var(--cosmos-cool);
  --banner-wash-bottom: var(--cosmos-warm);
}

:root[data-dash-theme="sun"],
:root[data-dash-theme="yellow"] {
  --aria-ripple-a: #fef08a;
  --aria-ripple-b: #ca8a04;
  --rust-light: var(--dash-accent);
  --rust: #ca8a04;
  --mars: #a16207;
  --label-warm: #fde047;
  --site-accent-2: var(--dash-accent-2);
  --site-online: var(--dash-online);
  --cosmos-warm: rgba(250, 204, 21, 0.12);
  --cosmos-cool: rgba(120, 90, 10, 0.12);
  --sun-halo-inner: rgba(253, 224, 71, 0.82);
  --sun-halo-outer: rgba(234, 179, 8, 0.18);
  --sun-corona: rgba(250, 204, 21, 0.48);
  --sun-corona-fade: rgba(202, 138, 4, 0.16);
  --quantum: #eab308;
  --banner-edge-accent: color-mix(in srgb, var(--dash-accent) 42%, #a3e635);
  --banner-edge-title: color-mix(in srgb, var(--banner-edge-accent) 55%, #fffef0);
  --banner-dgx-accent: color-mix(in srgb, var(--dash-accent) 35%, #ca8a04);
  --banner-dgx-title: color-mix(in srgb, var(--banner-dgx-accent) 55%, #fffef0);
  --banner-code-accent: color-mix(in srgb, var(--dash-accent) 42%, #a3e635);
  --banner-code-accent-2: color-mix(in srgb, var(--dash-accent-2) 55%, var(--dash-accent));
  --banner-code-title: color-mix(in srgb, var(--banner-code-accent) 55%, #fffef8);
  --banner-aria-accent: color-mix(in srgb, var(--dash-accent) 38%, #fde047);
  --banner-aria-title: color-mix(in srgb, var(--banner-aria-accent) 55%, #fffef5);
  --banner-wash-top: var(--cosmos-cool);
  --banner-wash-bottom: var(--cosmos-warm);
}

/* Website scheme picker (compact swatches in nav) */
.site-theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.site-theme-btn {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.site-theme-btn:hover {
  border-color: var(--rust-light);
  transform: scale(1.06);
}

.site-theme-btn.is-active {
  border-color: var(--rust-light);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rust-light) 45%, transparent);
}

.site-theme-swatch {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  margin: 0 auto;
  border-radius: 50%;
}

.site-theme-btn[data-dash-theme="mars"] .site-theme-swatch,
.site-theme-btn[data-dash-theme="sentinel"] .site-theme-swatch {
  background: #e07a3d;
}
.site-theme-btn[data-dash-theme="neptune"] .site-theme-swatch,
.site-theme-btn[data-dash-theme="blue"] .site-theme-swatch {
  background: #38bdf8;
}
.site-theme-btn[data-dash-theme="jupiter"] .site-theme-swatch,
.site-theme-btn[data-dash-theme="classic"] .site-theme-swatch {
  background: linear-gradient(135deg, #4fc3f7 45%, #e87a3f 55%);
}
.site-theme-btn[data-dash-theme="venus"] .site-theme-swatch,
.site-theme-btn[data-dash-theme="purple"] .site-theme-swatch {
  background: #c084fc;
}
.site-theme-btn[data-dash-theme="sun"] .site-theme-swatch,
.site-theme-btn[data-dash-theme="yellow"] .site-theme-swatch {
  background: #facc15;
}

@media (max-width: 768px) {
  .site-theme-picker {
    justify-content: center;
    width: 100%;
    margin-top: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }
}