/* Stanserve "Desktop" look. Loaded after hub.css when the site look is "desktop" (see server/theme.js).
   It re-maps the Hub's tokens to the Stanserve Desktop app's visual language (C:\stanserve\desktop\app\src\styles\tokens.css):
   aurora background, frosted-glass cards, pill controls, big rounded corners, one accent colour.
   Every COLOUR comes from the --s-* variables that each page sets from the current seasonal palette (server/seasons.js:
   Fall, Thanksgiving, Christmas, ...). The fallbacks after each comma are the original navy palette.
   Nothing here changes layout or behaviour; remove the <link> (or set the site look to Classic) and the old look returns. */

/* ---------- tokens (Hub token name -> Desktop shape + seasonal colour) ---------- */
:root {
  color-scheme: dark;
  --color-void: var(--s-void, #070c18);
  --color-background: var(--s-base, #0a1020);
  --color-surface: rgb(var(--s-surface-rgb, 22 34 56) / 0.55);
  --color-surface-raised: rgb(var(--s-raised-rgb, 30 46 76) / 0.66);
  --color-surface-hover: rgb(255 255 255 / 0.09);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-subtle: rgb(255 255 255 / 0.08);
  --color-divider: rgb(255 255 255 / 0.14);
  --color-text-primary: var(--s-t1, #f1f5fb);
  --color-text-secondary: var(--s-t2, #c0cbdc);
  --color-text-muted: var(--s-t3, #a0b0c9);
  --color-text-inverse: var(--s-ink, #07111f);
  --color-accent: var(--s-accent, #5cc8f0);
  --color-accent-strong: var(--s-strong, #a6e3fa);
  --color-accent-subtle: rgb(var(--s-accent-rgb, 92 200 240) / 0.16);
  --color-copper: var(--s-strong, #a6e3fa);
  --color-success: #5fd1a0;
  --color-warning: #efbd5a;
  --color-danger: #f27a7a;
  --color-focus: var(--s-strong, #a6e3fa);

  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --dur: 200ms;

  --glass-blur: blur(22px) saturate(150%);
  --shadow-card: 0 10px 30px rgb(2 6 16 / 0.35);
  --shadow-pop: 0 18px 50px rgb(2 6 16 / 0.5);
}

/* The old design tinted the family area copper. The desktop has one accent, so the family area uses it too. */
body.family { --color-accent: var(--s-accent, #5cc8f0); --color-accent-strong: var(--s-strong, #a6e3fa); --color-accent-subtle: rgb(var(--s-accent-rgb, 92 200 240) / 0.16); --color-focus: var(--s-strong, #a6e3fa); }
body.family .page-head { border-bottom-color: var(--color-border-subtle); }

/* ---------- aurora background (three soft colour pools plus a faint grid, like the desktop wallpaper) ---------- */
body {
  background-color: var(--s-base, #0a1020);
  background-image:
    radial-gradient(1100px 720px at 10% -8%, var(--s-a1, rgba(60, 140, 212, 0.38)), transparent 62%),
    radial-gradient(900px 620px at 96% 4%, var(--s-a2, rgba(100, 96, 226, 0.28)), transparent 62%),
    radial-gradient(1000px 720px at 68% 108%, var(--s-a3, rgba(40, 190, 202, 0.22)), transparent 62%),
    linear-gradient(rgb(var(--s-grid-rgb, 140 175 220) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--s-grid-rgb, 140 175 220) / 0.045) 1px, transparent 1px);
  background-size: auto, auto, auto, 56px 56px, 56px 56px;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: no-preference) { body { scroll-behavior: smooth; } }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 650; letter-spacing: -0.015em; }
.page-head h1, .hero h1, .pf-hero h1 { font-weight: 700; }
.meta, .pf-section h2, table.grid th { font-family: var(--font-body); letter-spacing: 0.12em; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); }
.status { font-family: var(--font-body); letter-spacing: 0.02em; }
code, .pin, .joinbar input { font-family: var(--font-mono); }

/* ---------- shell: floating glass header, quiet footer ---------- */
.site-header { background: rgb(var(--s-base-rgb, 10 16 32) / 0.55); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--color-border-subtle); }
.nav a { border-bottom: 0; border-radius: 999px; padding: var(--space-2) var(--space-4); min-height: 40px; display: inline-flex; align-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover { background: var(--color-surface-hover); }
.nav a[aria-current="page"] { background: var(--color-accent-subtle); color: var(--color-accent-strong); }
.site-footer { border-top: 1px solid var(--color-border-subtle); background: transparent; }
@media (max-width: 1180px) {
  .joinbar { flex: 1 1 100%; }
  .joinbar input { flex: 1 1 auto; width: auto; min-width: 0; }
  .nav { background: rgb(var(--s-base-rgb, 10 16 32) / 0.92); border-radius: var(--radius-md); padding: var(--space-2); margin-top: var(--space-2); }
  .nav a { border-bottom: 0; border-radius: var(--radius-sm); }
}

/* ---------- controls ---------- */
.btn { border-radius: 999px; background: rgb(255 255 255 / 0.07); border-color: var(--color-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn:hover { background: rgb(255 255 255 / 0.14); }
.btn.primary { background: var(--s-fill, var(--color-accent)); border-color: var(--s-fill, var(--color-accent)); color: var(--color-text-inverse); box-shadow: 0 6px 20px rgb(var(--s-fill-rgb, 92 200 240) / 0.32); }
.btn.primary:hover { background: var(--s-fill, var(--color-accent)); border-color: var(--color-accent-strong); filter: brightness(1.1); }
.btn.danger { background: rgb(242 122 122 / 0.1); }
input, select, textarea { background: rgb(var(--s-void-rgb, 7 12 24) / 0.55); border-color: var(--color-border); border-radius: var(--radius-sm); }
input:hover, select:hover, textarea:hover { border-color: rgb(var(--s-accent-rgb, 92 200 240) / 0.45); }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.chip { border-radius: 999px; background: rgb(255 255 255 / 0.05); }
.chip[aria-pressed="true"] { background: var(--color-accent-subtle); border-color: rgb(var(--s-accent-rgb, 92 200 240) / 0.5); color: var(--color-accent-strong); }
.tabs { border-bottom: 0; gap: var(--space-2); }
.tabs button { border: 1px solid transparent; border-radius: 999px; min-height: 40px; }
.tabs button:hover { background: var(--color-surface-hover); }
.tabs button[aria-selected="true"] { background: var(--color-accent-subtle); border-color: rgb(var(--s-accent-rgb, 92 200 240) / 0.4); color: var(--color-accent-strong); }

/* ---------- frosted-glass surfaces ---------- */
.tile, .project.card, .login, .msg, .stat, .chartbox, .picks, .signin-note, .gcal-panel, .gcal-ev, .watch-card, .watch-events li, .fam-card, .logbox, .joinreqs, .tablewrap, details.dateshare, .gcal-layout > section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
}
.tile, .project.card, .watch-card, .watch-events li, .fam-card, .chartbox, .stat, .picks, .signin-note { border-radius: var(--radius-lg); }
.login { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); }
.msg { border-radius: var(--radius-md); border-left-width: 3px; }
.tablewrap { border-radius: var(--radius-md); padding: var(--space-2); }
.tile { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tile:hover { border-color: rgb(var(--s-accent-rgb, 92 200 240) / 0.5); background: var(--color-surface-raised); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.tile-art { border-bottom: 1px solid var(--color-border-subtle); }
.page-head { border-bottom: 1px solid var(--color-border-subtle); }
.pf-hero, .pf-section { border-bottom-color: var(--color-border-subtle); }
.pf-hero img { border-radius: var(--radius-lg); }
.gcal-grid { border-radius: var(--radius-lg); border-color: var(--color-border); box-shadow: var(--shadow-card); }
.gcal-dow, .gcal-day { background: rgb(var(--s-void-rgb, 14 22 40) / 0.62); }
.gcal-day:hover { background: rgb(var(--s-raised-rgb, 30 46 76) / 0.7); }
.gcal-day.sel { background: rgb(var(--s-raised-rgb, 30 46 76) / 0.8); outline-color: var(--color-accent); }
.gcal-ev, .gcal-ev.editing { border-radius: var(--radius-md); }
.gbtn { box-shadow: var(--shadow-card); }
.formrow .btn { justify-self: start; }

/* Play page: the starship-bridge photo and its dark backdrop are gone in this look; the holotable carousel sits on the seasonal aurora.
   (The Classic look still shows the bridge.) */
html[data-season] .bridge { background: transparent; }
html[data-season] .bridge-bg, html[data-season] .bridge-window, html[data-season] .bridge-frame, html[data-season] .bridge-floor { display: none; }
html[data-season] .bridge-head h1, html[data-season] .bridge-head p { text-shadow: none; }
.bridge-page .tile { backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  .site-header, .tile, .btn, .msg, .login { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: var(--s-base, #0a1020); }
}

/* ---------- seasonal animation (public/js/season-fx.js) ----------
   The canvas sits BEHIND all page content (z-index -1): it can never cover a photo, video, player or button, it ignores the pointer,
   and the script also pauses it while any audio or video is playing. */
canvas#season-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fx-toggle { font: inherit; font-size: var(--text-xs); color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 12px; min-height: 28px; cursor: pointer; }
.fx-toggle:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }

@media (min-width: 1181px) and (max-width: 1700px) { .nav a { padding-inline: .6rem; } }