/* Astro-Doctor design system: deep-space glass.
   Loaded after health/app.css; restyles the shared shell and components for every page.
   Rules that compete with app.css theme rules are prefixed with html[data-theme] to win. */

:root, html[data-theme="dark"] {
  color-scheme: dark;
  --space-1: #04060f;
  --space-2: #0a1230;
  --bar: rgba(6, 10, 26, .62);
  --glass: rgba(16, 24, 52, .64);
  --glass-strong: rgba(18, 27, 58, .9);
  --glass-border: rgba(160, 175, 255, .14);
  --hover: rgba(160, 175, 255, .09);
  --ink: #eef1ff;
  --muted: #a3acd0;
  --faint: #737ea6;
  --line: rgba(160, 175, 255, .14);
  --accent: #5eead4;
  --accent-2: #818cf8;
  --accent-3: #f0abfc;
  --accent-ink: #051321;
  --glow: rgba(94, 234, 212, .45);
  --paper: var(--glass);
  --canvas: var(--space-1);
  --teal: #5eead4;
  --deep-teal: #c7d2fe;
  --mint: rgba(94, 234, 212, .13);
  --green: #4ade80;
  --yellow: #facc15;
  --orange: #fb923c;
  --red: #f87171;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;
  --radius: 22px;
}

html[data-theme="light"] {
  color-scheme: light;
  --space-1: #eef1fb;
  --space-2: #dfe8fb;
  --bar: rgba(255, 255, 255, .7);
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .94);
  --glass-border: rgba(30, 41, 90, .1);
  --hover: rgba(30, 41, 90, .06);
  --ink: #0e1530;
  --muted: #4f5b7c;
  --faint: #7a84a3;
  --line: rgba(30, 41, 90, .1);
  --accent: #0f9f8f;
  --accent-2: #5b5bd6;
  --accent-3: #c026d3;
  --accent-ink: #ffffff;
  --glow: rgba(91, 91, 214, .35);
  --paper: var(--glass);
  --canvas: var(--space-1);
  --teal: #0f8f81;
  --deep-teal: #26307a;
  --mint: rgba(15, 159, 143, .1);
  --green: #15803d;
  --yellow: #a16207;
  --orange: #c2410c;
  --red: #dc2626;
  --shadow: 0 24px 50px -30px rgba(30, 41, 90, .45);
}

/* ---------- Canvas: nebula and stars ---------- */
html { background: var(--space-1); }
body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 8% -8%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 62%),
    radial-gradient(900px 520px at 102% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--space-2), var(--space-1) 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-theme="light"] body::after {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 260px 40px, rgba(199, 210, 254, .9), transparent),
    radial-gradient(1px 1px at 330px 180px, #fff, transparent),
    radial-gradient(1px 1px at 80px 220px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 200px 300px, rgba(153, 246, 228, .8), transparent),
    radial-gradient(1px 1px at 380px 330px, rgba(255, 255, 255, .6), transparent);
  background-size: 420px 380px;
  opacity: .55;
}
html[data-theme="light"] body::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: shell-twinkle 7s ease-in-out infinite alternate; }
}
@keyframes shell-twinkle { from { opacity: .35; } to { opacity: .7; } }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.022em; color: var(--ink); }
h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.08; font-weight: 750; margin: 0 0 10px; }
h2 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
.muted { color: var(--muted); }
.eyebrow, html[data-theme] .eyebrow, html[data-theme] .page-heading .eyebrow, html[data-theme] .mission-banner .eyebrow {
  margin: 0 0 10px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
html[data-theme] .page-heading { color: var(--ink); margin-bottom: 26px; }
html[data-theme] .page-heading .muted { color: var(--muted); max-width: 640px; }
html[data-theme] .fine-print, html[data-theme] .card-label { color: var(--faint); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Top bar ---------- */
html[data-theme] .topbar {
  position: sticky; top: 0; z-index: 50; height: 66px;
  background: var(--bar); border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  color: var(--ink);
}
.brand { gap: 11px; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(140deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); box-shadow: 0 6px 20px -6px var(--glow); }
.brand-mark svg { width: 22px; height: 22px; }
html[data-theme] .brand-light { color: var(--muted); font-weight: 500; }
.main-nav { gap: 4px !important; }
html[data-theme] .main-nav a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s;
}
html[data-theme] .main-nav a:hover { background: var(--hover); color: var(--ink); }
html[data-theme] .main-nav a[aria-current] { background: var(--mint); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.main-nav svg, .tabbar svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mission-clock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mission-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent); }
html[data-theme] .account-avatar { width: 38px; height: 38px; border: 0; background: linear-gradient(140deg, var(--accent-2), var(--accent-3)); color: #fff; box-shadow: 0 0 0 2px var(--glass-border); }
html[data-theme] .topbar .button-quiet { color: var(--muted); }

/* Bottom tab bar (phones) */
.tabbar { display: none; }
@media (max-width: 760px) {
  html[data-theme] .topbar { height: 58px; padding: 0 16px; }
  .main-nav, .mission-clock, .topbar-signout { display: none !important; }
  .tabbar {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex; justify-content: space-around; padding: 6px; border: 1px solid var(--glass-border); border-radius: 22px;
    background: var(--bar); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
  }
  .tabbar a { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 7px 4px; border-radius: 16px; color: var(--faint); font-size: 10.5px; font-weight: 600; text-decoration: none; }
  .tabbar a[aria-current] { background: var(--mint); color: var(--ink); }
  .tabbar svg { width: 21px; height: 21px; }
  body.has-tabbar .page { padding-bottom: 110px; }
  body.has-tabbar .site-footer { padding-bottom: 110px; }
}

/* ---------- Layout and surfaces ---------- */
html[data-theme] .page { max-width: 1200px; padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 28px) 64px; }
html[data-theme] .card, html[data-theme] .login-card, html[data-theme] .mission-chip {
  background: var(--glass); color: var(--ink); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme] .card { border-radius: var(--radius); }
html[data-theme] .mission-chip { border-radius: 999px; padding: 9px 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
html[data-theme] .mission-banner { border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  /* Starts partly visible and without a backwards fill, so content never stays hidden
     if the animation does not run (background tabs, some capture tools). */
  .card { animation: shell-rise .45s cubic-bezier(.2, .7, .2, 1); }
  @keyframes shell-rise { from { opacity: .6; transform: translateY(8px); } }
}

/* ---------- Buttons ---------- */
html[data-theme] .button {
  gap: 8px; min-height: 42px; padding: 10px 18px; border-radius: 13px; font-size: 14px; font-weight: 650; letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
html[data-theme] .button-primary {
  border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  box-shadow: 0 10px 28px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html[data-theme] .button-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 34px -10px var(--glow); }
html[data-theme] .button-secondary { border: 1px solid var(--glass-border); background: var(--hover); color: var(--ink); }
html[data-theme] .button-secondary:hover { background: var(--mint); }
html[data-theme] .button-quiet { background: transparent; color: var(--muted); }
html[data-theme] .button-quiet:hover { color: var(--ink); background: var(--hover); }
html[data-theme] .button-lg { min-height: 54px; padding: 14px 26px; border-radius: 16px; font-size: 15.5px; }
html[data-theme] .button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Inputs ---------- */
html[data-theme] :is(.stack-form input, .wb-field input:not([type="checkbox"]):not([type="range"]), .crew-toolbar input, .profile-field input:not([type="checkbox"]), .profile-field select, .profile-field textarea) {
  min-height: 46px; padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: 13px;
  background: var(--hover); color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s;
}
html[data-theme] :is(.stack-form input, .wb-field input, .crew-toolbar input, .profile-field input, .profile-field select, .profile-field textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px; }

/* ---------- Messages ---------- */
html[data-theme] .message { border: 1px solid var(--glass-border); border-left: 4px solid var(--accent); border-radius: 14px; background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow); }
html[data-theme] .message-error { border-left-color: var(--red); }

/* ---------- Login ---------- */
html[data-theme] .login-wrap { min-height: calc(100vh - 220px); }
html[data-theme] .login-card { width: min(440px, 100%); padding: 0; overflow: hidden; border-radius: 26px; }
.login-art { height: 150px; }
.login-art svg { display: block; width: 100%; height: 100%; }
.login-body { padding: 28px 30px 32px; }
html[data-theme] .stack-form label { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ---------- Footer ---------- */
html[data-theme] .site-footer { margin-top: 30px; background: var(--bar); border-top: 1px solid var(--glass-border); color: var(--muted); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme] .footer-content strong { color: var(--ink); font-family: var(--font-display); }
html[data-theme] .footer-content a:hover { color: var(--accent); }
html[data-theme] .footer-signout button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html[data-theme] .footer-signout button:hover { color: var(--accent); }
html[data-theme] .appearance-controls { max-width: 320px; }
html[data-theme] .appearance-controls select { min-height: 36px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--hover); color: var(--ink); }
html[data-theme] .footer-bottom { border-top-color: var(--glass-border); }
html[data-theme] #connection-status { color: var(--accent); font-family: var(--mono); }

/* ---------- Legacy pages: keep legible on the new surfaces ---------- */
html[data-theme] :is(.crew-mission, .profile-facts dt) { color: var(--muted); }
html[data-theme] .crew-portrait { border-color: var(--glass-strong); }
html[data-theme] .offline-page > h1, html[data-theme] .offline-page > .muted { color: var(--ink); }

/* Crew banners: keep the wave artwork, tinted to match the deep-space palette. */
html[data-theme] .mission-banner {
  background: linear-gradient(100deg, rgba(8, 12, 36, .94), rgba(36, 34, 104, .72) 60%, rgba(16, 80, 92, .6)), url("../backgrounds/Waves.ab95e89191b1.png") center / cover;
  color: #eef1ff;
}
html[data-theme] .mission-banner h1, html[data-theme] .mission-banner h2 { color: #fff; }
html[data-theme] .mission-banner p:last-child { color: #c9d0ee; }
html[data-theme] .crew-card-cover { background-color: #141a44; background-blend-mode: luminosity; }

/* Native dropdown menus are drawn by the browser; give the options solid,
   theme-matched colours so every choice is readable when the menu is open. */
html[data-theme] select { color-scheme: inherit; }
html[data-theme="dark"] select option { background-color: #121a3a; color: #eef1ff; }
html[data-theme="light"] select option { background-color: #ffffff; color: #0e1530; }
html[data-theme] select option:checked { background-color: #5b5bd6; color: #ffffff; }

/* Visually hidden but available to screen readers. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }