/* ═══════════════════════════════════════════════════════════════
   BASALT ENGLISH — design system v3 · "glass"
   Luminous light-glass: aurora ground, frosted panels, one
   electric gradient. Dark HUD variant (.theme-dark) for the call.
   Variable names are stable across pages — restyle here only.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Ground — high-altitude sky */
  --paper: #A9D8F2;
  --surface: rgba(235, 248, 255, 0.60);
  --surface-2: rgba(215, 238, 252, 0.72);
  --solid: rgba(255, 255, 255, 0.92);
  --hover: rgba(10, 37, 64, 0.05);

  /* Ink — deep flight-deck navy */
  --ink: #0A2540;
  --t2: #2E5573;
  --t3: #5F86A0;

  /* Accent system — signal lime on sky glass */
  --basalt: #0A2540;
  --basalt-h: #143A5E;
  --accent: #0B72B4;
  --accent-2: #0B9FD8;
  --accent-h: #1489D1;
  --accent-s: rgba(11, 114, 180, 0.12);
  --lime: #D7F63A;
  --lime-ink: #0A2540;
  --grad: linear-gradient(135deg, #DFF94E 0%, #AEEB2E 100%);
  --grad-ink: linear-gradient(135deg, #0A2540 0%, #0B72B4 100%);
  --grad-soft: linear-gradient(135deg, rgba(215,246,58,0.22), rgba(11,159,216,0.14));
  --green: #0E9F6E;
  --green-s: rgba(14, 159, 110, 0.14);
  --amber: #C77E1E;
  --amber-s: rgba(199, 126, 30, 0.15);
  --red: #E0364B;
  --red-s: rgba(224, 54, 75, 0.12);

  /* Lines & depth — glass window edges */
  --border: rgba(255, 255, 255, 0.65);
  --border-s: rgba(10, 37, 64, 0.22);
  --edge: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.25);
  --sh-sm: 0 2px 6px rgba(10, 37, 64, 0.08), 0 8px 24px rgba(10, 37, 64, 0.08);
  --sh-md: 0 4px 12px rgba(10, 37, 64, 0.10), 0 20px 48px rgba(10, 37, 64, 0.14);
  --sh-lg: 0 10px 32px rgba(10, 37, 64, 0.18), 0 36px 90px rgba(10, 37, 64, 0.22);
  --glow: 0 4px 20px rgba(190, 232, 42, 0.55), 0 1px 3px rgba(190, 232, 42, 0.4);
  --glass: blur(24px) saturate(1.55);

  /* Shape & type — HUD */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --serif: 'Chakra Petch', 'Inter', sans-serif;       /* display */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --ease: 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.theme-dark {
  --paper: #071A2C;
  --surface: rgba(13, 38, 62, 0.7);
  --surface-2: rgba(18, 48, 76, 0.82);
  --solid: #0D2540;
  --hover: rgba(215, 246, 58, 0.08);
  --ink: #E8F4FD;
  --t2: #9CC2DB;
  --t3: #557A96;
  --basalt: #D7F63A;
  --basalt-h: #E6FF5C;
  --accent: #4FC3F7;
  --accent-2: #2BA8E0;
  --accent-h: #6FD0FF;
  --accent-s: rgba(79, 195, 247, 0.14);
  --lime: #D7F63A;
  --lime-ink: #0A2540;
  --grad: linear-gradient(135deg, #DFF94E 0%, #AEEB2E 100%);
  --green: #34C98E;
  --green-s: rgba(52, 201, 142, 0.14);
  --amber: #E3A54C;
  --amber-s: rgba(227, 165, 76, 0.15);
  --red: #FF5A6E;
  --red-s: rgba(255, 90, 110, 0.14);
  --border: rgba(180, 220, 245, 0.14);
  --border-s: rgba(180, 220, 245, 0.28);
  --edge: inset 0 1px 0 rgba(255,255,255,0.1);
  --sh-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.35);
  --sh-md: 0 2px 8px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.4);
  --sh-lg: 0 8px 28px rgba(0,0,0,0.55), 0 32px 80px rgba(0,0,0,0.5);
  --glow: 0 4px 24px rgba(215, 246, 58, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Sky ground — add <div class="aurora"></div> once per page ── */
body { background: linear-gradient(180deg, #8FCBEE 0%, #ACDCF6 34%, #CDEBFA 70%, #E3F4FD 100%) fixed; }
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.9;
  animation: aur-drift 40s ease-in-out infinite alternate;
}
.aurora::before { width: 900px; height: 420px; top: 4%; right: -14%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.85), rgba(255,255,255,0.25) 55%, transparent 72%); }
.aurora::after { width: 780px; height: 360px; bottom: 12%; left: -12%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.75), rgba(255,255,255,0.2) 55%, transparent 72%); animation-delay: -18s; }
.theme-dark body, body.theme-dark { background: linear-gradient(180deg, #05131F 0%, #0A2036 55%, #0D2A45 100%) fixed; }
.theme-dark .aurora::before { background: radial-gradient(ellipse, rgba(79,195,247,0.14), transparent 70%); }
.theme-dark .aurora::after { background: radial-gradient(ellipse, rgba(215,246,58,0.07), transparent 70%); }
@keyframes aur-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(-90px, 30px) scale(1.08); } }

/* ── Wordmark ─────────────────────────────────────────────── */
.wordmark { font-family: var(--serif); font-weight: 700; letter-spacing: 0.04em; font-size: 20px; color: var(--ink); text-transform: uppercase; }
.wordmark .wm-name { background: var(--grad-ink, var(--grad)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.theme-dark .wordmark .wm-name { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wordmark .wm-rest { font-weight: 400; color: var(--t2); }
.wordmark-lg { font-size: 32px; }

/* ── Type ─────────────────────────────────────────────────── */
h1, .h1 { font-family: var(--serif); font-size: 38px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; }
h2, .h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
h3, .h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: '// '; opacity: 0.75; }
.eyebrow.quiet { color: var(--t3); }
.sub { font-size: 16px; color: var(--t2); line-height: 1.6; }
.small { font-size: 13px; color: var(--t2); }
.faint { color: var(--t3); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
a.link { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--ease); }
a.link:hover { border-bottom-color: var(--accent); }

/* ── Layout ───────────────────────────────────────────────── */
.page { max-width: 640px; margin: 0 auto; padding: 44px 24px 96px; }
.page-wide { max-width: 1060px; margin: 0 auto; padding: 32px 24px 96px; }
.rule { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; margin-bottom: 28px; border-bottom: 1px solid var(--border);
}

/* ── Glass cards ──────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--sh-sm), var(--edge);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  transition: var(--ease);
}
.card + .card { margin-top: 12px; }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--sh-md), var(--edge); }
.card-flat { box-shadow: var(--edge); }
.card-quiet { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.card-hero {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--sh-md), var(--edge);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 100px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none;
  background: var(--basalt); color: #fff; transition: var(--spring); line-height: 1.2;
  position: relative;
}
.theme-dark .btn { color: #0A0E1A; }
.btn:hover { background: var(--basalt-h); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-accent { background: var(--grad); color: var(--lime-ink) !important; box-shadow: var(--glow); font-weight: 700; letter-spacing: 0.02em; }
.btn-accent:hover { filter: brightness(1.06); background: var(--grad); }
.btn-ghost { background: rgba(255,255,255,0.55); color: var(--t2); border: 1px solid var(--border-s); backdrop-filter: blur(8px); }
.theme-dark .btn-ghost { background: rgba(255,255,255,0.07); color: var(--t2); }
.btn-ghost:hover { background: var(--solid); color: var(--ink); }
.btn-danger { background: var(--red); color: #fff !important; }
.btn-green { background: var(--green); color: #fff !important; box-shadow: 0 4px 18px rgba(14,159,110,0.35); }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-sm { padding: 7px 15px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* ── Forms ────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--t2); margin-bottom: 6px; letter-spacing: 0.01em; }
.field input, .field select, .field textarea, .input {
  width: 100%; padding: 12px 15px; border: 1px solid var(--border-s); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none;
  background: var(--solid); transition: var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-s);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--t3); }
.frow { display: flex; gap: 12px; }
.frow .field { flex: 1; }
@media (max-width: 520px) { .frow { flex-direction: column; gap: 0; } }

/* Choice chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 10px 16px; border-radius: 100px; border: 1.5px solid var(--border-s);
  background: var(--solid); font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--t2); cursor: pointer; transition: var(--spring); flex: 1; min-width: 110px; text-align: center;
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.chip.sel { border-color: transparent; background: var(--grad); color: var(--lime-ink); font-weight: 700; box-shadow: var(--glow); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.badge-accent { background: var(--accent-s); color: var(--accent); }
.badge-green { background: var(--green-s); color: var(--green); }
.badge-amber { background: var(--amber-s); color: var(--amber); }
.badge-red { background: var(--red-s); color: var(--red); }
.badge-ink { background: var(--basalt); color: #fff; }
.badge-grad { background: var(--grad); color: var(--lime-ink); }

/* ── Avatar ───────────────────────────────────────────────── */
.av {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0; font-family: var(--serif);
  box-shadow: 0 2px 8px rgba(15,23,48,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
.av-sm { width: 32px; height: 32px; font-size: 14px; }
.av-md { width: 44px; height: 44px; font-size: 18px; }
.av-lg { width: 60px; height: 60px; font-size: 25px; }

/* ── Tables ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--t3); text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 12px; border-bottom: 1px solid var(--border-s); }
.table td { font-size: 13.5px; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--t2); }
.table td:first-child { color: var(--ink); font-weight: 500; }

/* ── Status dots ──────────────────────────────────────────── */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: var(--green); box-shadow: 0 0 8px rgba(14,159,110,0.7); }
.dot-amber { background: var(--amber); box-shadow: 0 0 8px rgba(199,126,30,0.7); }
.dot-red { background: var(--red); box-shadow: 0 0 8px rgba(224,54,75,0.7); }
.dot-grey { background: var(--t3); }
.dot-pulse { animation: bst-pulse 1.6s ease infinite; }
@keyframes bst-pulse { 50% { opacity: 0.35; } }

/* ── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-radius: var(--r); box-shadow: var(--sh-lg); padding: 14px 18px; display: flex; align-items: center;
  gap: 12px; cursor: pointer; z-index: 900; max-width: 340px;
  transform: translateY(110px); opacity: 0; transition: all 0.45s cubic-bezier(0.34, 1.45, 0.64, 1); pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ── Modal overlay ────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(10, 14, 26, 0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); animation: ov-in 0.25s ease; }
@keyframes ov-in { from { opacity: 0; } }
.overlay-card {
  background: var(--solid); border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 440px; width: 100%;
  padding: 34px 30px 26px; box-shadow: var(--sh-lg); max-height: 90vh; overflow-y: auto;
  animation: oc-in var(--spring);
}
@keyframes oc-in { from { opacity: 0; transform: scale(0.92) translateY(16px); } }

/* ── Misc ─────────────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 20px; color: var(--t3); font-size: 14px; }
.hidden { display: none !important; }
.flex { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 36px; }
.spinner { width: 26px; height: 26px; border: 2.5px solid var(--border-s); border-top-color: var(--accent); border-radius: 50%; animation: bst-spin 0.8s linear infinite; }
@keyframes bst-spin { to { transform: rotate(360deg); } }

/* Explainer line under tab/section titles */
.explain { font-size: 12.5px; color: var(--t3); margin: 2px 0 14px; line-height: 1.5; }