/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS — site-wide design system
   Apple-derived material vocabulary applied across the Magna platform.

   Three layers per element (per Apple's Liquid Glass spec):
     1. Material:    backdrop-filter blur+saturate (the glass body)
     2. Highlight:   ::before with curved-bottom border-radius (top edge)
                   + inset top/bottom shadows for inner glow/shade
     3. Shadow:      outer drop shadow for elevation off the canvas

   Per-page accent:
     Each page sets `body[data-lg-accent="..."]` (or inline custom props)
     to tint primary surfaces (CTA, focus ring, underglow). The material
     itself stays neutral so a card on Earth and a card on Heliosphere
     read as the same family but each surface owns its color signature.

   Tokens — set on :root, override per-page on body:
     --lg-radius        18px           — primary card/button corner radius
     --lg-radius-sm     14px           — pill / small element radius
     --lg-blur          20px           — backdrop blur amount
     --lg-saturate      1.5            — backdrop saturation (richer underlay)
     --lg-bg            rgba(255,255,255,0.045)        — neutral glass body
     --lg-bg-hover      rgba(255,255,255,0.08)         — body on hover
     --lg-border        rgba(255,255,255,0.10)         — neutral 1px border
     --lg-border-hover  rgba(255,255,255,0.22)         — border on hover
     --lg-spec-top      rgba(255,255,255,0.18)         — top inset highlight
     --lg-shade-bot     rgba(0,0,0,0.18)               — bottom inset shade

     PER-PAGE ACCENT (the brand signature):
       --lg-accent        — bright accent (primary text + icon color, RGB or hex)
       --lg-accent-soft   — accent at ~10% opacity for tinted bg
       --lg-accent-glow   — accent at ~22% opacity for outer glow
       --lg-accent-strong — accent at ~45% opacity for borders on primary

   Usage classes:
     .lg                  base glass material (no padding/sizing — apply on top)
     .lg-card             glass card with default padding
     .lg-pill             small rounded pill (e.g. nav chip, status)
     .lg-btn              glass button (neutral)
     .lg-btn--primary     glass button tinted by --lg-accent (CTAs)
     .lg-btn--ghost       glass button with no fill (lowest emphasis)
     .lg-input            glass form input (text/date/etc)
     .lg-modal            full-bleed glass modal w/ backdrop
     .lg-dock             horizontal Liquid Glass dock (HUD strip)
     .lg-skip             top-right "Skip" pill (matches splash)

   All elements respect prefers-reduced-motion at the bottom of this file.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lg-radius: 18px;
  --lg-radius-sm: 14px;
  --lg-radius-pill: 999px;
  --lg-blur: 20px;
  --lg-saturate: 1.5;

  --lg-bg: rgba(255, 255, 255, 0.045);
  --lg-bg-hover: rgba(255, 255, 255, 0.08);
  --lg-bg-active: rgba(255, 255, 255, 0.10);

  --lg-border: rgba(255, 255, 255, 0.10);
  --lg-border-hover: rgba(255, 255, 255, 0.22);

  --lg-spec-top: rgba(255, 255, 255, 0.18);
  --lg-spec-top-hover: rgba(255, 255, 255, 0.30);
  --lg-shade-bot: rgba(0, 0, 0, 0.18);

  --lg-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20);
  --lg-shadow-hover: 0 18px 38px rgba(0, 0, 0, 0.40), 0 4px 10px rgba(0, 0, 0, 0.26);

  /* Default accent = warm gold (compass / earth front door).
     Pages override on body via [data-lg-accent="solar"] etc. */
  --lg-accent: #ffd778;
  --lg-accent-rgb: 255, 215, 120;
  --lg-accent-soft: rgba(255, 215, 120, 0.10);
  --lg-accent-medium: rgba(255, 215, 120, 0.22);
  --lg-accent-strong: rgba(255, 215, 120, 0.45);
  --lg-accent-text: rgba(255, 250, 232, 1);
  --lg-accent-glow: rgba(255, 210, 140, 0.18);
  --lg-accent-glow-strong: rgba(255, 210, 140, 0.32);

  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── PER-PAGE ACCENT PALETTES ─────────────────────────────────────── */

/* Solar — hot gold + 304Å red flares */
body[data-lg-accent="solar"] {
  --lg-accent: #ffc24d;
  --lg-accent-rgb: 255, 194, 77;
  --lg-accent-soft: rgba(255, 194, 77, 0.12);
  --lg-accent-medium: rgba(255, 194, 77, 0.26);
  --lg-accent-strong: rgba(255, 194, 77, 0.55);
  --lg-accent-glow: rgba(255, 130, 60, 0.22);
  --lg-accent-glow-strong: rgba(255, 130, 60, 0.40);
}

/* Cosmic — aurora green + Kp violet */
body[data-lg-accent="cosmic"] {
  --lg-accent: #34d399;
  --lg-accent-rgb: 52, 211, 153;
  --lg-accent-soft: rgba(52, 211, 153, 0.12);
  --lg-accent-medium: rgba(52, 211, 153, 0.26);
  --lg-accent-strong: rgba(52, 211, 153, 0.55);
  --lg-accent-glow: rgba(167, 139, 250, 0.22);
  --lg-accent-glow-strong: rgba(167, 139, 250, 0.36);
}

/* Heliosphere — deep cyan + plasma blue */
body[data-lg-accent="heliosphere"] {
  --lg-accent: #22d3ee;
  --lg-accent-rgb: 34, 211, 238;
  --lg-accent-soft: rgba(34, 211, 238, 0.12);
  --lg-accent-medium: rgba(34, 211, 238, 0.26);
  --lg-accent-strong: rgba(34, 211, 238, 0.55);
  --lg-accent-glow: rgba(96, 165, 250, 0.22);
  --lg-accent-glow-strong: rgba(96, 165, 250, 0.40);
}

/* Celestial Command — starlight white + sapphire */
body[data-lg-accent="celestial"] {
  --lg-accent: #e8e4ff;
  --lg-accent-rgb: 232, 228, 255;
  --lg-accent-soft: rgba(232, 228, 255, 0.10);
  --lg-accent-medium: rgba(232, 228, 255, 0.24);
  --lg-accent-strong: rgba(232, 228, 255, 0.55);
  --lg-accent-glow: rgba(99, 102, 241, 0.22);
  --lg-accent-glow-strong: rgba(99, 102, 241, 0.36);
}

/* Tsunami — wave teal + warning amber */
body[data-lg-accent="tsunami"] {
  --lg-accent: #5eead4;
  --lg-accent-rgb: 94, 234, 212;
  --lg-accent-soft: rgba(94, 234, 212, 0.12);
  --lg-accent-medium: rgba(94, 234, 212, 0.26);
  --lg-accent-strong: rgba(94, 234, 212, 0.50);
  --lg-accent-glow: rgba(245, 158, 11, 0.22);
  --lg-accent-glow-strong: rgba(245, 158, 11, 0.40);
}

/* Hurricane — storm cyan + cone purple */
body[data-lg-accent="hurricane"] {
  --lg-accent: #06b6d4;
  --lg-accent-rgb: 6, 182, 212;
  --lg-accent-soft: rgba(6, 182, 212, 0.14);
  --lg-accent-medium: rgba(6, 182, 212, 0.28);
  --lg-accent-strong: rgba(6, 182, 212, 0.55);
  --lg-accent-glow: rgba(168, 85, 247, 0.22);
  --lg-accent-glow-strong: rgba(168, 85, 247, 0.40);
}

/* Marine — deep ocean indigo + buoy yellow */
body[data-lg-accent="marine"] {
  --lg-accent: #818cf8;
  --lg-accent-rgb: 129, 140, 248;
  --lg-accent-soft: rgba(129, 140, 248, 0.14);
  --lg-accent-medium: rgba(129, 140, 248, 0.28);
  --lg-accent-strong: rgba(129, 140, 248, 0.50);
  --lg-accent-glow: rgba(250, 204, 21, 0.22);
  --lg-accent-glow-strong: rgba(250, 204, 21, 0.36);
}

/* Earth Report — neutral system gray + gold trust */
body[data-lg-accent="earth-report"] {
  --lg-accent: #f5d68a;
  --lg-accent-rgb: 245, 214, 138;
  --lg-accent-soft: rgba(245, 214, 138, 0.10);
  --lg-accent-medium: rgba(245, 214, 138, 0.24);
  --lg-accent-strong: rgba(245, 214, 138, 0.50);
  --lg-accent-glow: rgba(245, 214, 138, 0.20);
  --lg-accent-glow-strong: rgba(245, 214, 138, 0.34);
}

/* Earth (front door) — warm brand gold */
body[data-lg-accent="earth"] {
  --lg-accent: #ffd778;
  --lg-accent-rgb: 255, 215, 120;
  --lg-accent-soft: rgba(255, 215, 120, 0.12);
  --lg-accent-medium: rgba(255, 215, 120, 0.26);
  --lg-accent-strong: rgba(255, 215, 120, 0.55);
  --lg-accent-glow: rgba(255, 210, 140, 0.22);
  --lg-accent-glow-strong: rgba(255, 210, 140, 0.40);
}

/* Earth Next — forecast cyan + future violet */
body[data-lg-accent="earth-next"] {
  --lg-accent: #67e8f9;
  --lg-accent-rgb: 103, 232, 249;
  --lg-accent-soft: rgba(103, 232, 249, 0.12);
  --lg-accent-medium: rgba(103, 232, 249, 0.26);
  --lg-accent-strong: rgba(103, 232, 249, 0.50);
  --lg-accent-glow: rgba(192, 132, 252, 0.22);
  --lg-accent-glow-strong: rgba(192, 132, 252, 0.36);
}

/* Earth Scanner — probe green + scanline */
body[data-lg-accent="earth-scanner"] {
  --lg-accent: #4ade80;
  --lg-accent-rgb: 74, 222, 128;
  --lg-accent-soft: rgba(74, 222, 128, 0.12);
  --lg-accent-medium: rgba(74, 222, 128, 0.26);
  --lg-accent-strong: rgba(74, 222, 128, 0.50);
  --lg-accent-glow: rgba(74, 222, 128, 0.22);
  --lg-accent-glow-strong: rgba(74, 222, 128, 0.36);
}

/* Earth Certificate — parchment ivory + signet gold */
body[data-lg-accent="earth-certificate"] {
  --lg-accent: #fde68a;
  --lg-accent-rgb: 253, 230, 138;
  --lg-accent-soft: rgba(253, 230, 138, 0.10);
  --lg-accent-medium: rgba(253, 230, 138, 0.24);
  --lg-accent-strong: rgba(253, 230, 138, 0.50);
  --lg-accent-glow: rgba(212, 175, 55, 0.22);
  --lg-accent-glow-strong: rgba(212, 175, 55, 0.40);
}

/* Antarctica — ice white + vault blue */
body[data-lg-accent="antarctica"] {
  --lg-accent: #e0f2fe;
  --lg-accent-rgb: 224, 242, 254;
  --lg-accent-soft: rgba(224, 242, 254, 0.10);
  --lg-accent-medium: rgba(224, 242, 254, 0.24);
  --lg-accent-strong: rgba(224, 242, 254, 0.50);
  --lg-accent-glow: rgba(56, 189, 248, 0.22);
  --lg-accent-glow-strong: rgba(56, 189, 248, 0.36);
}

/* ─── BASE GLASS MATERIAL ──────────────────────────────────────────── */

.lg {
  position: relative;
  background: var(--lg-bg);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow);
  isolation: isolate;
  transition: background 0.35s var(--lg-ease),
              border-color 0.35s var(--lg-ease),
              transform 0.35s var(--lg-ease),
              box-shadow 0.35s var(--lg-ease);
}

/* Curved top-edge specular highlight — Apple's "lens" cap */
.lg::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 40% 40%
                / calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.35s var(--lg-ease);
  z-index: -1;
}

/* ─── CARD ─────────────────────────────────────────────────────────── */

.lg-card {
  composes: lg;
  /* Compose fallback for browsers that don't support @composes */
  position: relative;
  background: var(--lg-bg);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow);
  isolation: isolate;
  padding: 1.2rem 1.2rem 1.3rem;
  color: rgba(248, 240, 222, 0.92);
  transition: background 0.35s var(--lg-ease),
              border-color 0.35s var(--lg-ease),
              transform 0.35s var(--lg-ease),
              box-shadow 0.35s var(--lg-ease);
}
.lg-card::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 40% 40%
                / calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}
.lg-card:hover {
  background: var(--lg-bg-hover);
  border-color: var(--lg-border-hover);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 var(--lg-spec-top-hover) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow-hover);
}

/* Optional accent underglow on hover (under the card) */
.lg-card.lg-glow::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -4px;
  height: 12px;
  background: radial-gradient(ellipse at center,
    var(--lg-accent-glow-strong) 0%,
    transparent 75%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--lg-ease);
  z-index: -2;
}
.lg-card.lg-glow:hover::after {
  opacity: 0.7;
  bottom: -6px;
  left: 10%; right: 10%;
  height: 16px;
}

/* ─── PILL (small rounded chip — nav chips, status, mini-controls) ── */

.lg-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--lg-radius-sm);
  background: var(--lg-bg);
  border: 1px solid var(--lg-border);
  backdrop-filter: blur(16px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--lg-saturate));
  color: rgba(248, 240, 222, 0.78);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: all 0.35s var(--lg-ease);
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    0 6px 14px rgba(0, 0, 0, 0.24),
    0 1px 3px rgba(0, 0, 0, 0.16);
}
.lg-pill::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: 13px 13px 40% 40% / 13px 13px 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.35s var(--lg-ease);
  z-index: -1;
}
.lg-pill:hover {
  background: var(--lg-bg-hover);
  border-color: var(--lg-accent-strong);
  color: rgba(255, 250, 232, 0.98);
  transform: translateY(-1px);
}
.lg-pill:hover::before { opacity: 1; }

/* ─── BUTTON (neutral) ─────────────────────────────────────────────── */

.lg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 2.4rem;
  border-radius: var(--lg-radius);
  background: var(--lg-bg);
  border: 1px solid var(--lg-border);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  color: rgba(248, 240, 222, 0.92);
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: all 0.35s var(--lg-ease);
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow);
}
.lg-btn::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 40% 40%
                / calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.lg-btn:hover {
  background: var(--lg-bg-hover);
  border-color: var(--lg-border-hover);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 var(--lg-spec-top-hover) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow-hover);
}

/* ─── PRIMARY BUTTON (accent-tinted CTA) ───────────────────────────── */

.lg-btn--primary {
  background: linear-gradient(180deg,
    var(--lg-accent-medium) 0%,
    var(--lg-accent-soft) 100%);
  border-color: var(--lg-accent-strong);
  color: var(--lg-accent-text);
  text-shadow: 0 1px 14px var(--lg-accent-glow);
  box-shadow:
    0 1px 0 rgba(255, 250, 228, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset,
    0 0 0 1px var(--lg-accent-medium) inset,
    var(--lg-shadow),
    0 0 20px var(--lg-accent-glow);
}
/* Primary underglow */
.lg-btn--primary::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -3px;
  height: 10px;
  background: radial-gradient(ellipse at center,
    var(--lg-accent-glow-strong) 0%,
    var(--lg-accent-glow) 40%,
    transparent 75%);
  filter: blur(6px);
  opacity: 0.7;
  pointer-events: none;
  transition: all 0.4s var(--lg-ease);
  z-index: -2;
}
.lg-btn--primary:hover {
  background: linear-gradient(180deg,
    var(--lg-accent-strong) 0%,
    var(--lg-accent-medium) 100%);
  border-color: var(--lg-accent-strong);
  box-shadow:
    0 1px 0 rgba(255, 250, 228, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset,
    0 0 0 1px var(--lg-accent-strong) inset,
    var(--lg-shadow-hover),
    0 0 28px var(--lg-accent-glow-strong);
}
.lg-btn--primary:hover::after {
  opacity: 1;
  bottom: -5px;
  left: 8%; right: 8%;
  height: 14px;
}

/* ─── GHOST BUTTON (no fill — lowest emphasis) ─────────────────────── */

.lg-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: rgba(220, 212, 196, 0.65);
}
.lg-btn--ghost::before { display: none; }
.lg-btn--ghost:hover {
  color: var(--lg-accent);
  background: var(--lg-bg);
  border-color: var(--lg-border);
  box-shadow: none;
}

/* ─── INPUT (text/date/time form fields) ───────────────────────────── */

.lg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lg-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(248, 240, 222, 0.95);
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset;
  transition: all 0.3s var(--lg-ease);
}
.lg-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--lg-accent-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset,
    0 0 22px var(--lg-accent-glow);
}
.lg-input::placeholder { color: rgba(255, 255, 255, 0.30); }

/* ─── DOCK (horizontal HUD strip — bottom of result phases) ─────────── */

.lg-dock {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--lg-radius);
  background: var(--lg-bg);
  border: 1px solid var(--lg-border);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  isolation: isolate;
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    var(--lg-shadow);
}
.lg-dock::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 40% 40%
                / calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ─── MODAL ────────────────────────────────────────────────────────── */

.lg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 12, 8, 0.92) 0%, rgba(6, 3, 5, 0.985) 50%, rgba(1, 0, 2, 1) 100%),
    rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--lg-ease);
}
.lg-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lg-modal {
  position: relative;
  max-width: 520px;
  width: 92%;
  padding: 2rem 2rem 1.8rem;
  border-radius: var(--lg-radius);
  background: rgba(20, 14, 22, 0.88);
  border: 1px solid var(--lg-border-hover);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  cursor: default;
  isolation: isolate;
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    0 32px 64px rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.32);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.45s var(--lg-ease);
}
.lg-modal-backdrop.is-open .lg-modal {
  transform: translateY(0) scale(1);
}
.lg-modal::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 40% 40%
                / calc(var(--lg-radius) - 1px) calc(var(--lg-radius) - 1px) 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ─── SKIP (top-right viewport pill, fixed) ────────────────────────── */

.lg-skip {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 10002;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--lg-radius-sm);
  background: var(--lg-bg);
  border: 1px solid var(--lg-accent-medium);
  backdrop-filter: blur(16px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--lg-saturate));
  color: rgba(248, 240, 222, 0.65);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  cursor: pointer;
  isolation: isolate;
  transition: all 0.35s var(--lg-ease);
  box-shadow:
    0 1px 0 var(--lg-spec-top) inset,
    0 -1px 0 var(--lg-shade-bot) inset,
    0 6px 14px rgba(0, 0, 0, 0.28);
}
.lg-skip::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: 13px 13px 40% 40% / 13px 13px 100% 100%;
  background: linear-gradient(180deg,
    var(--lg-spec-top) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}
.lg-skip:hover {
  background: var(--lg-bg-hover);
  border-color: var(--lg-accent-strong);
  color: rgba(255, 250, 232, 0.98);
  transform: translateY(-1px);
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lg, .lg-card, .lg-pill, .lg-btn, .lg-input, .lg-dock, .lg-modal, .lg-skip,
  .lg::before, .lg-card::before, .lg-pill::before, .lg-btn::before,
  .lg-card::after, .lg-btn--primary::after {
    transition-duration: 0.001s !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SACRED CHEMISTRY chrome — re-skin to Liquid Glass
   Maps .am-* classes to the lg-* token system, with a warm-amber
   accent matching the page's compound-medicine palette.
   ════════════════════════════════════════════════════════════════════ */

body:has(#ancient-medicine) {
  --lg-accent: #e0c97f;
  --lg-accent-rgb: 224, 201, 127;
  --lg-accent-soft: rgba(224, 201, 127, 0.10);
  --lg-accent-medium: rgba(224, 201, 127, 0.22);
  --lg-accent-strong: rgba(224, 201, 127, 0.45);
  --lg-accent-glow: rgba(224, 201, 127, 0.32);
}

/* Intro panel — glass that lets content show through */
.am-intro-panel {
  /* Viewport-anchored: section#ancient-medicine sits 51px below nav and is 100vh tall,
     so its bottom edge spills past the viewport. Anchoring to the viewport keeps the
     panel pinned to the bottom-left corner of the actual visible area. */
  position: fixed !important;
  background: rgba(8, 12, 20, 0.32) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius, 22px) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot),
    0 12px 36px -6px rgba(0, 0, 0, 0.45) !important;
  width: 280px !important;
  max-width: calc(100vw - 32px) !important;
  /* Cap to viewport so indication / family chip lists scroll instead of spilling off-screen */
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  /* Lift off bottom-left edge so collapsed state sits properly anchored */
  bottom: 22px !important;
  left: 22px !important;
}

/* Collapsed state — pill-shape rather than rectangular sliver */
.am-intro-panel.collapsed {
  width: auto !important;
  min-width: 200px !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
}

.am-intro-panel.collapsed .am-intro-header {
  border-bottom: none !important;
  padding: 4px 8px !important;
}

/* Tighter typography for buttons inside the narrow ask panel */
.am-intro-panel .am-tour-btn {
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-indent: 0.18em !important;
  padding: 0.65rem 0.85rem !important;
}

.am-intro-panel .am-listen-btn {
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-indent: 0.18em !important;
  padding: 0.5rem 0.85rem !important;
}

.am-intro-panel .am-mode-btn {
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  text-indent: 0.16em !important;
  padding: 0.4rem 0.65rem !important;
}

/* Mobile: the page renders a native H1 hero in-flow that says the same
   "DIFFERENT DOORS / LINEAGES / MOLECULES" thesis — the floating overlay
   card + safety doctrine are pure duplication at narrow widths. Hide them
   so mobile shows the H1 + compound dossier cards as the natural hero. */
@media (max-width: 768px) {
  .am-thesis-hero,
  .am-safety-doctrine {
    display: none !important;
  }
}

/* Thesis hero ("Different Doors...") — liquid glass surface.
   DESKTOP ONLY: anchored to the right rail so it stops sitting on top of
   the wheel. On mobile (< 769px) there is no wheel layout — fall back to
   the base CSS which centers the card in the normal mobile flow. */
.am-thesis-hero {
  /* No container — the thesis floats as light on the cosmos (a soft scrim
     keeps it legible over the wheel; no hard edges). */
  background: radial-gradient(ellipse at 60% 40%, rgba(6, 9, 20, 0.5) 0%, rgba(6, 9, 20, 0.14) 56%, transparent 84%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

@media (min-width: 769px) {
  .am-thesis-hero,
  body.am-seen .am-thesis-hero {
    /* Right rail position — override base ancient-medicine.css translateX(-50%) */
    left: auto !important;
    right: 22px !important;
    top: 24px !important;
    transform: none !important;
    width: min(300px, calc(100vw - 360px)) !important;
    padding: 18px 22px 16px !important;
    text-align: left !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Tighten typography for the narrower right-rail card — the base
     2.2rem headline was sized for an 860px-wide centered banner. */
  .am-thesis-hero .am-thesis-line {
    font-size: clamp(1.1rem, 1.6vw, 1.55rem) !important;
    max-width: none !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }
  .am-thesis-hero .am-thesis-kicker {
    text-align: left !important;
    margin-bottom: 10px !important;
  }
  .am-thesis-hero .am-thesis-sub {
    text-align: left !important;
    margin-top: 12px !important;
  }
}

/* Safety doctrine ("Field Doctrine — Read First") — DESKTOP ONLY anchored
   under thesis hero in the right rail. Mobile falls back to base CSS flow. */
.am-safety-doctrine {
  /* No container — floating text matched to the thesis above. */
  background: radial-gradient(ellipse at 60% 50%, rgba(6, 9, 20, 0.46) 0%, rgba(6, 9, 20, 0.12) 58%, transparent 86%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

@media (min-width: 769px) {
  .am-safety-doctrine,
  .am-safety-doctrine[data-position="top"],
  .am-safety-doctrine[data-position="top-flush"] {
    left: auto !important;
    right: 22px !important;
    top: calc(24px + var(--am-hero-h, 200px) + 14px) !important;
    transform: none !important;
    width: min(300px, calc(100vw - 360px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    text-align: left !important;
  }

  .am-safety-doctrine p {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
  }
}

/* ── Scene depth: ambient floor lighting + vignette ── */
#ancient-medicine {
  background:
    /* Floor warm ambient */
    radial-gradient(ellipse 80% 50% at 50% 95%,
      rgba(224, 201, 127, 0.10) 0%,
      rgba(224, 201, 127, 0.04) 30%,
      transparent 60%),
    /* Top cool fade for atmosphere */
    radial-gradient(ellipse 100% 50% at 50% 0%,
      rgba(123, 91, 255, 0.06) 0%,
      transparent 50%),
    /* Side accents */
    radial-gradient(circle at 16% 20%, rgba(0, 229, 204, 0.08) 0%, rgba(0, 229, 204, 0) 28%),
    radial-gradient(circle at 84% 14%, rgba(224, 201, 127, 0.10) 0%, rgba(224, 201, 127, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(17, 31, 58, 0.34) 0%, rgba(6, 9, 20, 0) 32%),
    linear-gradient(180deg, rgba(3, 6, 15, 1) 0%, rgba(2, 4, 12, 1) 100%) !important;
  position: relative !important;
}

/* Outer vignette for chamber feel */
#ancient-medicine::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 110% 90% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.45) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Spotlight from above on central compound — divine cone of light.
   Uses an SVG ::before mask for proper soft-edge cone instead of
   simple radial blur, with subtle dust shimmer. */
#ancient-medicine::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    /* Cone narrowing toward center bottom */
    radial-gradient(ellipse 35% 55% at 50% 35%,
      rgba(255, 235, 180, 0.10) 0%,
      rgba(255, 220, 140, 0.06) 30%,
      rgba(255, 220, 140, 0.02) 55%,
      transparent 75%),
    /* Subtle grid for chamber */
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 100% 100%, 120px 120px, 120px 120px !important;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.85), transparent 78%) !important;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0.85), transparent 78%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: am-spotlight-breathe 9s ease-in-out infinite !important;
}

@keyframes am-spotlight-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* ── Compound ring pulse — slow ambient rhythm on outer rings ── */
.am-svg-container svg circle[stroke-width],
.am-svg-container svg .am-ring {
  transition: stroke-opacity 0.6s ease !important;
}

@keyframes am-ring-pulse {
  0%, 100% {
    stroke-opacity: 0.32;
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    stroke-opacity: 0.55;
    filter: drop-shadow(0 0 8px rgba(224, 201, 127, 0.18));
  }
}

/* Apply gentle pulse to the outermost rings if they exist */
.am-svg-container svg [class*="ring-outer"],
.am-svg-container svg circle.am-ring-outer {
  animation: am-ring-pulse 8s ease-in-out infinite !important;
}

/* ── Close X buttons — match Threshold modal close treatment.
   Spiral closers (.am-spiral-close) opt OUT — they are container-less by design. ── */
.am-thesis-hero button[class*="close"]:not(.am-spiral-close),
.am-thesis-hero [class*="close-btn"]:not(.am-spiral-close),
.am-safety-doctrine button[class*="close"]:not(.am-spiral-close),
.am-safety-doctrine [class*="close-btn"]:not(.am-spiral-close),
.am-detail-panel .am-detail-close,
.am-tour-exit,
button.am-close,
.am-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--lg-border) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  padding: 0 !important;
  z-index: 5 !important;
}

.am-thesis-hero button[class*="close"]:not(.am-spiral-close):hover,
.am-thesis-hero [class*="close-btn"]:not(.am-spiral-close):hover,
.am-safety-doctrine button[class*="close"]:not(.am-spiral-close):hover,
.am-safety-doctrine [class*="close-btn"]:not(.am-spiral-close):hover,
.am-detail-panel .am-detail-close:hover,
.am-tour-exit:hover,
button.am-close:hover,
.am-close-btn:hover {
  background: var(--lg-accent-soft) !important;
  border-color: var(--lg-accent-strong) !important;
  color: var(--lg-accent) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    0 0 16px var(--lg-accent-glow) !important;
}

/* ── Compound label collision relief — clearer hierarchy ── */
.am-svg-container svg text,
.am-svg-container .am-node-label {
  font-family: 'Cinzel', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  paint-order: stroke fill !important;
  stroke: rgba(2, 4, 12, 0.85) !important;
  stroke-width: 3px !important;
  stroke-linejoin: round !important;
  transition: opacity 0.4s ease, fill-opacity 0.4s ease, stroke-opacity 0.4s ease !important;
}

/* Sub-labels (dates, parenthetical) — smaller and dimmer */
.am-svg-container svg text tspan[font-size],
.am-svg-container .am-node-sub {
  font-size: 0.62em !important;
  fill-opacity: 0.62 !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
}

/* Label collision relief: when ANY compound is being hovered,
   dim the others so the focused one reads clearly. Only when an
   .am-node is actually :hover — never on idle. */
.am-svg-container:has(.am-node:hover) .am-node:not(:hover) .am-node-label {
  opacity: 0.22 !important;
  transition: opacity 0.3s ease !important;
}

.am-svg-container:has(.am-node:hover) .am-node:not(:hover) .am-node-circle {
  opacity: 0.35 !important;
  transition: opacity 0.3s ease !important;
}

/* Hovered node — bring forward */
.am-node:hover .am-node-label {
  fill: var(--lg-accent) !important;
}

.am-node:hover .am-node-circle {
  filter: drop-shadow(0 0 8px var(--lg-accent-glow)) !important;
}

/* ── Left "Ask" panel — fix clipping + add proper Liquid Glass ── */
.am-sibyl-dock,
[class*="ask-panel"],
[class*="sidebar-panel"],
[id*="ask-panel"] {
  overflow: visible !important;
}

/* Generic overflow fix for anything inside intro */
.am-intro-body {
  overflow: visible !important;
}

/* ── Sibyl orb anchored bottom-right — bare Mobius, no container ── */
html body div#sibyl-dock,
html body div#sibyl-dock.am-sibyl-dock {
  position: fixed !important;
  inset: auto 24px 24px auto !important;
  bottom: 24px !important;
  right: 24px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 50 !important;
  width: 80px !important;
  height: 80px !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.4s var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              filter 0.4s ease !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 18px rgba(224, 201, 127, 0.35)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) !important;
}

#sibyl-dock.am-sibyl-dock:hover {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 28px rgba(224, 201, 127, 0.55)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)) !important;
}

/* Children inside sibyl-dock — let the Mobius render freely */
#sibyl-dock.am-sibyl-dock > * {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile — smaller orb anchored bottom-LEFT so it doesn't overlap the
   "Open Dossier →" link on the right edge of mobile compound cards. */
@media (max-width: 540px) {
  html body div#sibyl-dock,
  html body div#sibyl-dock.am-sibyl-dock {
    width: 48px !important;
    height: 48px !important;
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    inset: auto auto 16px 16px !important;
  }
}

.am-intro-panel::before {
  background: linear-gradient(135deg,
    rgba(255, 240, 200, 0.22) 0%,
    rgba(255, 255, 255, 0) 60%,
    var(--lg-accent-soft) 100%) !important;
}

.am-intro-header {
  border-bottom: 1px solid var(--lg-border) !important;
}

.am-intro-toggle {
  border-radius: 999px !important;
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: all 0.2s ease !important;
}

.am-intro-toggle:hover {
  background: var(--lg-accent-soft) !important;
  border-color: var(--lg-accent-strong) !important;
  color: var(--lg-accent) !important;
}

/* Listen button (left dock) */
.am-listen-btn {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius-sm, 14px) !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.55rem 0.95rem !important;
  text-indent: 0.22em !important;
  transition: all 0.25s ease !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot) !important;
}

.am-listen-btn:hover {
  background: var(--lg-accent-soft) !important;
  border-color: var(--lg-accent-strong) !important;
  color: var(--lg-accent) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    0 0 24px var(--lg-accent-glow) !important;
}

/* Mode switch (Explore / Compare / Atlas / Timeline — Timeline injected by tour) */
.am-mode-switch {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius-sm, 14px) !important;
  padding: 3px !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot) !important;
  /* Wrap when 4+ mode buttons exceed the 280px intro-panel inner width
     (tour injects Timeline at runtime, original row sized for 3). */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  row-gap: 4px !important;
}

.am-mode-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 12px !important;
  text-indent: 0.22em !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.am-mode-btn:hover {
  color: rgba(255, 255, 255, 0.78) !important;
}

.am-mode-btn.active {
  background: linear-gradient(180deg,
    var(--lg-accent-soft) 0%,
    rgba(var(--lg-accent-rgb), 0.04) 100%) !important;
  color: var(--lg-accent) !important;
  border: 1px solid var(--lg-accent-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    0 0 16px var(--lg-accent-glow) !important;
}

/* Selection state */
.am-selection-state {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.04em !important;
}

.am-selection-state strong {
  color: var(--lg-accent) !important;
  letter-spacing: 0.18em !important;
}

/* Detail panel — cinematic floating compound dossier
   No longer locked to right edge. Opens with rotate+scale from
   the clicked compound, floats centered-right with breathing room. */
.am-detail-panel {
  position: fixed !important;
  top: 50% !important;
  right: 32px !important;
  left: auto !important;
  transform: translate(40%, -50%) rotate(8deg) scale(0.82) !important;
  width: clamp(320px, 38vw, 460px) !important;
  max-height: calc(100vh - 80px) !important;
  background: linear-gradient(135deg,
    rgba(60, 45, 22, 0.38) 0%,
    rgba(20, 14, 8, 0.72) 100%) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot),
    0 30px 80px -10px rgba(0, 0, 0, 0.65),
    0 0 60px var(--lg-accent-soft) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform-origin: 80% 50% !important;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  z-index: 40 !important;
  overflow-y: auto !important;
  padding: 28px 26px 32px !important;
}

.am-detail-panel.open {
  transform: translate(0, -50%) rotate(0deg) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Closing animation — rotate out the other way for variety */
.am-detail-panel.closing {
  transform: translate(50%, -50%) rotate(-6deg) scale(0.85) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile — full-width sheet from bottom */
@media (max-width: 640px) {
  .am-detail-panel {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 75vh !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(100%) !important;
    transform-origin: 50% 100% !important;
  }
  .am-detail-panel.open {
    transform: translateY(0) !important;
  }
  .am-detail-panel.closing {
    transform: translateY(100%) !important;
  }
}

/* Filter chips (PTSD, Depression, etc.) */
.am-chip,
.am-chip-soft {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-transform: uppercase !important;
}

.am-chip:hover,
.am-chip-soft:hover {
  background: var(--lg-accent-soft) !important;
  border-color: var(--lg-accent-strong) !important;
  color: var(--lg-accent) !important;
}

.am-chip.active {
  background: linear-gradient(180deg,
    var(--lg-accent-medium) 0%,
    var(--lg-accent-soft) 100%) !important;
  border-color: var(--lg-accent-strong) !important;
  color: var(--lg-accent) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    0 0 14px var(--lg-accent-glow) !important;
}

/* Tour button — primary CTA */
.am-tour-btn {
  background: linear-gradient(180deg,
    var(--lg-accent-soft) 0%,
    rgba(var(--lg-accent-rgb), 0.04) 100%) !important;
  border: 1px solid var(--lg-accent-strong) !important;
  border-radius: var(--lg-radius-sm, 14px) !important;
  color: var(--lg-accent) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: 0.7rem 1.05rem !important;
  text-indent: 0.28em !important;
  transition: all 0.25s ease !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot),
    0 0 24px var(--lg-accent-glow) !important;
  cursor: pointer !important;
}

.am-tour-btn:hover {
  background: linear-gradient(180deg,
    var(--lg-accent-medium) 0%,
    rgba(var(--lg-accent-rgb), 0.06) 100%) !important;
  border-color: rgba(var(--lg-accent-rgb), 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 32px rgba(var(--lg-accent-rgb), 0.36) !important;
}

/* Tour overlay shell */
.am-tour-shell {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius, 22px) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-spec-top),
    inset 0 -1px 0 var(--lg-shade-bot),
    0 30px 80px -10px rgba(0, 0, 0, 0.65),
    0 0 60px var(--lg-accent-soft) !important;
}

.am-tour-backdrop {
  background: rgba(8, 6, 3, 0.55) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

.am-tour-exit {
  background: var(--lg-bg) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: all 0.2s ease !important;
}

.am-tour-exit:hover {
  background: var(--lg-bg-hover) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}