/* Source CSS. The deployed stylesheet is `styles.min.css`,
   regenerated from this file with:
       npx esbuild css/styles.css --minify --bundle=false > css/styles.min.css
   Edit this file, then re-run that command before committing. */

/* Eclipse Wheel styles (scoped under .ew-*) — vendored from the
   ptolemaic-eclipse-wheel package. Imported here so the .pa-tab-eclipses
   tab body picks them up. */
@import url('eclipse-wheel.css');

/* Classical Greek Scroll redesign for the Astrology surface (scoped
   under body.pa-scroll-mode #astrology-app). Overrides theme tokens
   inside the chart surface — Sky / Theatre / Orrery keep their themes. */

/* ════════════════════════════════════════════════════════════════════
   Type system (Phase 4.5 visual refresh).
   Cinzel = display + small-caps headings + section titles.
   Inter  = body, UI labels, microcopy (loaded via Google Fonts in
            index.html with display=swap so text shows during load).
   JetBrains Mono = ephemeris numerals, tabular numbers, time digits.
   Existing components inherit body via the global body rule below;
   tabular surfaces opt in to mono with var(--type-mono) directly.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Astro-glyph fallback chain — every type slot ends with Noto Sans
     Symbols 2 + Symbola so Unicode planet (☉☽☿♀♂♃♄) and zodiac
     (♈–♓) characters resolve to monochrome line-art rather than
     colourful Segoe/Apple emoji on Android + mobile-preview. */
  --type-display: 'Cinzel', 'Trajan Pro', Georgia, 'Noto Sans Symbols 2', 'Segoe UI Symbol', Symbola, serif;
  --type-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Noto Sans Symbols 2', 'Segoe UI Symbol', Symbola, sans-serif;
  --type-caption: 'Cinzel', Georgia, 'Noto Sans Symbols 2', 'Segoe UI Symbol', Symbola, serif;
  --type-mono:    'JetBrains Mono', Menlo, Consolas, 'Courier New', 'Noto Sans Symbols 2', monospace;
}
html {
  font-family: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: var(--type-display);
  letter-spacing: 0.02em;
}

/* ── Three-pill mode switcher (Sky / Chart / Orrery) ──────────────────
   Persistent top-centre chip visible across all three surfaces. Built
   by js/ui/modeSwitcher.js. Width hugs content; pills are touch-sized
   on phones. Sits above the planetary-hours chip's z-index so it
   never gets covered. */
/* Persistent capture cluster — screenshot + record fabs docked
   above the mode switcher. Visible across Sky / Chart / Orrery
   modes so the user can capture the current view from anywhere.
   Sits at z-index 9550 — above the orrery iframe overlay (8500)
   and below the mode switcher (9600). */
/* ── Chart export bar (every tab in astrologyApp) ───────────────── */
.pa-export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  margin: 8px 12px 14px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.pa-btn-export {
  padding: 6px 12px;
  background: var(--panel, #1A2742);
  color: var(--accent, #C9A961);
  border: 1px solid var(--accent, #C9A961);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.pa-btn-export:hover {
  background: var(--accent, #C9A961);
  color: var(--bg, #0B1426);
}
.pa-btn-export:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Export dropdown — single <select> replacing the 9-button strip.
   Native picker on phones; custom-styled wrapper.  v2 (subtle deck-
   matching): the previous cream-on-dark default + gold-fill hover
   clashed harshly against the violet scroll-deck background (the
   button read as a bright yellow rectangle planted on stained-glass
   plum).  Redesigned as a translucent outlined pill: very subtle
   surface tint + thin gold border + gold text, with a slightly
   stronger gold tint on hover instead of a full fill swap.  Sits
   quietly in the deck chrome until tapped. */
.pa-export-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 30px 7px 14px;
  /* Translucent on the deck so the violet plasma reads through */
  background: color-mix(in srgb, var(--color-bg, #03061A) 35%, transparent);
  color: var(--color-accent, #F0C040);
  border: 1px solid color-mix(in srgb, var(--color-accent, #F0C040) 50%, transparent);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: background 0.18s, border-color 0.18s, color 0.18s,
              box-shadow 0.18s;
}
.pa-export-menu:hover,
.pa-export-menu:focus-within {
  /* Subtle gold tint on hover instead of full cream fill — keeps the
     button quiet in the deck's overall hierarchy. */
  background: color-mix(in srgb, var(--color-accent, #F0C040) 18%, transparent);
  border-color: var(--color-accent, #F0C040);
  color: var(--color-accent-2, #FFE07A);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent, #F0C040) 22%, transparent);
}
.pa-export-menu::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.85;
}
.pa-export-menu__label {
  pointer-events: none;
  white-space: nowrap;
}
.pa-export-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  /* On iOS Safari, the native picker uses the <select>'s font-size for
     tap target sizing — anything <16px triggers the auto-zoom on focus
     which is jarring. 16px keeps the viewport stable. */
  font-size: 16px;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.pa-export-select:disabled { cursor: progress; }
.pa-export-menu:has(.pa-export-select:disabled) { opacity: 0.5; cursor: progress; }
/* Synastry-specific export bar — centred header strip with PDF +
   share-card affordance, separate from the per-scroll Save/Share. */
.pa-synastry-export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  margin: 8px 12px 14px;
  justify-content: center;
}

/* SYN-CHART — synastry instruments row (Verdict / Temperament / Capacity)
   above the scroll deck. Mirrors the natal Theatre's three medallions in
   layout (three side-by-side tiles on desktop, stacked on phone). */
.pa-syn-instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 12px 8px;
  padding: 0;
}
.pa-syn-instruments[data-empty="true"] { opacity: 0.45; }
/* SYN-UI-01·1 — pre-judge gate. The instruments row, the transit strip,
   and the export bar all hide until the user runs "Judge the Match" on
   the Setup tab. applyChartLordColors stamps data-has-result="true" on
   #synastry-app post-cast — these three rules un-hide everything then. */
#synastry-app:not([data-has-result="true"]) .pa-syn-instruments,
#synastry-app:not([data-has-result="true"]) .pa-syn-transit-strip,
#synastry-app:not([data-has-result="true"]) .pa-synastry-export-bar {
  display: none !important;
}
.pa-syn-inst-tile {
  background: rgba(8,10,18,0.55);
  border: 1px solid rgba(220,200,140,0.20);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pa-syn-inst-label {
  font: 600 9px/1 "Cinzel", Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8b896;
}
.pa-syn-inst-value {
  font: 600 16px/1.15 "Cinzel", Georgia, serif;
  letter-spacing: 0.04em;
  color: #ffe9b3;
  margin: 4px 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-syn-inst-sub {
  font: 400 11px/1.3 "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: #c8b896;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-syn-inst-tile.pa-verdict-fortified { border-color: #ffd86b; }
.pa-syn-inst-tile.pa-verdict-supported { border-color: #6cc8ff; }
.pa-syn-inst-tile.pa-verdict-contested { border-color: #b8b8c0; }
.pa-syn-inst-tile.pa-verdict-impeded   { border-color: #e8a060; }
.pa-syn-inst-tile.pa-verdict-severed   { border-color: #ff8c8c; }

/* Pair-relative transits strip — sits under the instruments row.
   Compact horizontal list of the top current-sky touches to either
   chart in the comparison. */
.pa-syn-transit-strip {
  margin: 0 12px 14px;
  padding: 10px 12px;
  background: rgba(8,10,18,0.45);
  border: 1px solid rgba(220,200,140,0.15);
  border-radius: 6px;
}
.pa-syn-transit-strip[data-empty="true"] { opacity: 0.55; }
.pa-syn-transit-h {
  margin: 0 0 6px;
  font: 600 10px/1.2 "Cinzel", Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffe9b3;
}
.pa-syn-transit-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pa-syn-transit-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
  font: 400 12px/1.3 "Cormorant Garamond", Georgia, serif;
  color: #e0d4b8;
}
.pa-syn-transit-pair {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.pa-syn-transit-owner {
  font-size: 11px;
  color: #c8b896;
  font-style: italic;
}
.pa-syn-transit-strength {
  font: 600 11px/1.3 "Cinzel", Georgia, serif;
  color: #ffe9b3;
  letter-spacing: 0.04em;
  min-width: 36px;
  text-align: right;
}
.pa-syn-transit-empty {
  grid-template-columns: 1fr;
  font-style: italic;
  color: #88806c;
}
@media (max-width: 560px) {
  .pa-syn-instruments {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pa-syn-inst-value { font-size: 15px; }
}

/* HG-10 — keep the capture controls off the Today/home surface, where they
   floated over the live wheel and read like a screen recorder. They stay on the
   shareable surfaces (Theatre, sky). */
body.home-today-active #capture-cluster { display: none !important; }
/* OA-09 — on the orrery the cluster used to float over the right rim and clip
   the Saturn shell at zoom-out. Dock it to the top-right corner, clear of the
   centred orrery circle, still reachable. The first-person (skyrise) entry
   button lives at top:safe-area+150px / right:18px (44px tall, so 150–194px);
   the cluster's record button was landing on top of it, so the cluster is
   docked BELOW the first-person button (safe-area+200px) to clear it. */
body.orrery-active #capture-cluster {
  bottom: auto;
  top: max(200px, calc(env(safe-area-inset-top) + 200px));
  right: 8px;
}

#capture-cluster {
  position: fixed;
  bottom: max(346px, calc(env(safe-area-inset-bottom) + 330px));
  right: 6px;
  /* Above Theatre overlay (9700) + Orrery overlay (8500) + mode-switcher
     (9600) so the buttons float across every mode. Below Settings (9999)
     so the modal occludes them when open. */
  z-index: 9800;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.capture-fab {
  width: 44px;
  height: 44px;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(200,150,50,0.50);
  border-radius: 50%;
  color: #d4b060;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.capture-fab:hover {
  background: rgba(40,24,0,0.92);
  border-color: rgba(200,150,50,0.9);
  color: #f0c860;
}
.capture-fab-rec { color: #d44848; font-size: 22px; }
.capture-fab-rec.rec-share-btn--recording {
  background: rgba(120, 20, 20, 0.85);
  border-color: #e85050;
  color: #fff;
  animation: rec-share-pulse 1.1s ease-in-out infinite;
  font-size: 14px;
}
.capture-fab.rec-share-btn--flash {
  animation: capture-flash 0.32s;
}
@keyframes capture-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); background: rgba(10,14,22,0.88); }
  50%  { box-shadow: 0 0 0 6px rgba(255,255,255,0.55); background: rgba(255,255,255,0.20); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); background: rgba(10,14,22,0.88); }
}


/* ── Bottom nav (Phase 1 of UI redesign) ────────────────────────────────
   Primary 4-tab + center Theatre FAB nav, mass-appeal layout. Replaces
   the legacy 7-pill mode-switcher (element + pills removed in CLN-06 pt2);
   its role now lives in viewRouter.js — window.__ptolSwitchView + last-mode
   persistence continue to drive mode switching. Phase 2 will attach a long-press
   radial wheel to #bn-theatre-fab to expose Welcome / Synastry / Eclipse
   from one gesture; until then the router globals + URL hash + Settings
   pill keep every surface reachable.

   #bottom-nav sits at z-index 9800 so it stays above Theatre (9700) +
   Eclipse (9650) and below the tour overlay (9900) + clockWidget (10000);
   it carries its own eclipse-full hide rule. Same --mode-bar-h publication
   contract (the
   module re-publishes the var on its own height so dependent widgets —
   clockWidget, aetherVerdictTicker, welcomeApp footer, scroll deck —
   re-anchor without touching any other module). */

#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9800;
  display: grid;
  /* Three top-level surfaces: Astronomy · HOME · Astrology.
     HOME (center) is the anchor — same column width as the siblings;
     its visual weight comes from .bn-tab--accent, not from a bigger slot. */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  /* Phase 4.5 — deeper saturated background with a hairline gold
     top-edge highlight so the bar reads as a polished glass panel
     resting on the dark stage above. */
  /* Original glassy gradient — discrete-screen behaviour is enforced by
     the navigation stack (every sub-screen hides the caller), so the
     bar doesn't need to act as an opaque barrier. */
  background:
    linear-gradient(180deg,
      rgba(10, 13, 28, 0.34) 0%,
      rgba(6, 8, 20, 0.60) 55%,
      rgba(4, 6, 16, 0.72) 100%);
  border-top: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  box-shadow:
    0 -1px 0 color-mix(in srgb, var(--color-accent-2, #FFD263) 18%, transparent),
    0 -8px 28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  font-family: var(--type-body);
  pointer-events: auto;
}
/* Eclipse-full was previously hiding the bottom nav so the surface
   captured cleanly for screenshots. Now that eclipses has its own
   bottom-nav tab, we want the nav VISIBLE while eclipses are showing
   so users can tap another tab to leave. The screenshot button on the
   eclipse panel handles the capture case explicitly. */
body[data-eclipse-full="on"] #bottom-nav { display: grid; }

.bn-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 55%, transparent);
  font-family: var(--type-body);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease-out, transform 0.16s cubic-bezier(.2,.8,.4,1);
}
.bn-tab:hover {
  color: var(--color-accent-2, #FFD263);
  transform: translateY(-1px);
}
.bn-tab[aria-pressed="true"] {
  color: var(--color-accent-2, #FFD263);
}
/* Active tab gets a glowing gold underline indicator instead of a
   filled background — cleaner, more modern, more clearly "selected". */
.bn-tab[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 100%;
  margin-top: 2px;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-accent, #FFB836) 30%,
    var(--color-accent-2, #FFD263) 50%,
    var(--color-accent, #FFB836) 70%,
    transparent 100%);
  box-shadow: 0 0 10px var(--color-accent-glow, rgba(255, 184, 54, 0.55));
}
.bn-tab-glyph {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.bn-tab[aria-pressed="true"] .bn-tab-glyph {
  filter: drop-shadow(0 0 6px var(--color-accent-glow, rgba(255, 184, 54, 0.55)));
}
.bn-tab-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ── Domain-tinted nav tabs (HOME yin-yang made legible in the nav) ─────────
   Astronomy (left) wears the COOL blue of its half; Astrology (right) wears
   the WARM gold of its half — the same two clashing hues as the HOME split,
   each with a subtle glow that brightens when the tab is active. HOME (centre)
   keeps its .bn-tab--accent treatment. */
.bn-tab[data-tab="astronomy"] { color: color-mix(in srgb, #7fb4ff 60%, transparent); }
.bn-tab[data-tab="astronomy"]:hover,
.bn-tab[data-tab="astronomy"][aria-pressed="true"] { color: #a6ccff; }
.bn-tab[data-tab="astronomy"] .bn-tab-glyph {
  color: #7fb4ff;
  filter: drop-shadow(0 0 5px rgba(90,150,255,0.45));
}
.bn-tab[data-tab="astronomy"][aria-pressed="true"] .bn-tab-glyph {
  filter: drop-shadow(0 0 9px rgba(110,165,255,0.75));
}
.bn-tab[data-tab="astronomy"][aria-pressed="true"]::after {
  background: linear-gradient(90deg, transparent 0%, #5a96ff 30%, #a6ccff 50%, #5a96ff 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(90,150,255,0.6);
}

.bn-tab[data-tab="astrology"] { color: color-mix(in srgb, #ffce6a 60%, transparent); }
.bn-tab[data-tab="astrology"]:hover,
.bn-tab[data-tab="astrology"][aria-pressed="true"] { color: #ffe0a0; }
.bn-tab[data-tab="astrology"] .bn-tab-glyph {
  color: #ffce6a;
  filter: drop-shadow(0 0 5px rgba(255,184,54,0.45));
}
.bn-tab[data-tab="astrology"][aria-pressed="true"] .bn-tab-glyph {
  filter: drop-shadow(0 0 9px rgba(255,200,90,0.75));
}
.bn-tab[data-tab="astrology"][aria-pressed="true"]::after {
  background: linear-gradient(90deg, transparent 0%, #FFB836 30%, #FFD263 50%, #FFB836 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(255,184,54,0.6);
}

/* Center Theatre FAB — Phase 4.5 refresh: gold-edge violet/indigo core
   with a stronger luminous halo that signals "primary action". Reads
   as a piece of jewellery resting on the bar's gold rail. */
.bn-fab {
  width: 64px;
  height: 64px;
  margin: 0 8px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in srgb, var(--color-accent, #FFB836) 28%, var(--color-surface-elevated, #2A3470) 0%) 0%,
      var(--color-surface-raised, #1A2148) 55%,
      var(--color-bg, #06081C) 100%);
  box-shadow:
    0 0 0 1.5px var(--color-accent, #FFB836),
    0 0 22px 4px var(--color-accent-glow, rgba(255, 184, 54, 0.45)),
    0 8px 20px 0 rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 232, 168, 0.25);
  color: var(--color-accent-2, #FFD263);
  cursor: pointer;
  transform: translateY(-18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--type-body);
  transition: transform 0.22s cubic-bezier(.2,.8,.4,1),
              box-shadow 0.20s ease-out,
              background 0.20s ease-out;
}
.bn-fab:hover {
  transform: translateY(-22px) scale(1.04);
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in srgb, var(--color-accent-2, #FFD263) 40%, var(--color-surface-elevated, #2A3470) 0%) 0%,
      var(--color-surface-raised, #1A2148) 55%,
      var(--color-bg, #06081C) 100%);
  box-shadow:
    0 0 0 1.5px var(--color-accent-2, #FFD263),
    0 0 32px 8px var(--color-accent-glow, rgba(255, 184, 54, 0.65)),
    0 12px 28px 0 rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(255, 232, 168, 0.45);
}
.bn-fab:active { transform: translateY(-14px) scale(0.98); }
.bn-fab-glyph {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--color-accent-glow, rgba(255, 184, 54, 0.65)));
}
.bn-fab-label {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 95%, transparent);
}

/* Raised ASK button — the AI Astrologer entry, floated ABOVE the centre HOME
   tab. Absolute child of the fixed #bottom-nav (which has default overflow:
   visible), so the circle rises above the top rail with a small overlap while
   HOME's glyph + label stay tappable below it. */
.bn-ai-fab {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 16px);
  margin: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.bn-ai-fab:hover  { transform: translateX(-50%) translateY(-4px) scale(1.04); }
.bn-ai-fab:active { transform: translateX(-50%) translateY(2px) scale(0.98); }
.bn-ai-fab[hidden] { display: none; }
@media (max-width: 480px) {
  .bn-ai-fab { width: 54px; height: 54px; bottom: calc(100% - 12px); }
  .bn-ai-fab .bn-fab-glyph svg { width: 22px; height: 22px; }
}

/* Onboarding — the optional sex control on the name screen (drives the
   classical marriage significators). Plain stacked radios, matched to the
   modal's type. */
.pa-onb-sex {
  border: 0;
  margin: 10px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.pa-onb-sex-legend { font-size: 12px; opacity: 0.82; padding: 0; }
.pa-onb-sex-hint { opacity: 0.6; font-size: 11px; font-weight: 400; }
.pa-onb-sex-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

/* ── AI Astrologer screen ────────────────────────────────────────────────
   A fixed top-level surface (fourth screen). Flex column: header · register
   seam · scrolling transcript · composer, clamped above the bottom nav. */
/* The [hidden] attribute is a no-op under an author `display` rule, so this
   fixed, opaque, z-index:90 overlay would stay on top of the first-person
   astronomy layer (and every other screen) even when hide() sets host.hidden.
   Make hidden actually hide it. */
.ai-screen[hidden] { display: none !important; }
.ai-screen {
  position: fixed;
  inset: 0;
  bottom: var(--mode-bar-h, 60px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* contain the column: only .ai-transcript scrolls, nothing spills past the panel */
  overflow: hidden;
  color: var(--color-fg, #e8e6df);
  font-family: var(--type-body, Georgia, serif);
  /* Dark starry void with a low purple-nebula glow — matches the Astrology/Theatre
     scene. Three soft violet radial glows over near-black, plus four tiled star
     layers. Opaque, so nothing behind bleeds into the header. */
  background-color: #05060e;
  background-image:
    radial-gradient(1100px 640px at 12% -8%,  color-mix(in srgb, var(--color-accent-cool, #7a5cff) 26%, transparent), transparent 62%),
    radial-gradient(1000px 760px at 104% 6%,  color-mix(in srgb, #6a3cc8 22%, transparent), transparent 58%),
    radial-gradient(1000px 900px at 50% 120%, color-mix(in srgb, #3a2a7a 30%, transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 30px 40px,  rgba(255,255,255,0.85), transparent 52%),
    radial-gradient(1.2px 1.2px at 130px 95px, rgba(255,255,255,0.55), transparent 52%),
    radial-gradient(1.6px 1.6px at 90px 165px, rgba(255,255,255,0.70), transparent 52%),
    radial-gradient(1.1px 1.1px at 195px 30px, rgba(255,255,255,0.50), transparent 52%);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, 210px 210px, 170px 170px, 250px 250px, 190px 190px;
}
/* Light mode is a completely different look: a clean white page with black ink,
   matching the rest of the app's daylight palette — no void, no stars, no nebula.
   The chart still shows (the wheel has its own white/navy face). */
.theme-light-mode .ai-screen {
  background-color: #ffffff;
  background-image: none;
  color: #0a0a0a;
}
.theme-light-mode .ai-msg--assistant {
  background: #f6f7f9;
  border-color: color-mix(in srgb, #0a0a0a 12%, transparent);
}
.theme-light-mode .ai-msg--user {
  background: color-mix(in srgb, var(--color-accent-cool, #2563EB) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--color-accent-cool, #2563EB) 30%, transparent);
}
.theme-light-mode .ai-input {
  background: #ffffff;
  border-color: color-mix(in srgb, #0a0a0a 20%, transparent);
}
.theme-light-mode .ai-chart,
.theme-light-mode .ai-subject,
.theme-light-mode .ai-composer { border-color: color-mix(in srgb, #0a0a0a 10%, transparent); }
.theme-light-mode .ai-sources > summary,
/* 1D4ED8 not 2563EB: the lighter blue measured 4.06:1 on white, under the
   4.5:1 floor for text at this weight. Same hue, one step darker. */
.theme-light-mode .ai-title-main { color: #000000; }
.ai-head {
  display: flex; align-items: center; gap: 12px;
  /* flex-shrink:0 is LOAD-BEARING. Without it the flex column squeezes THIS row
     to make room for a long transcript (measured 59px → 30px), and at 30px the
     title and subtitle collide — that is the "top letters are overlapping and
     unreadable" bug. Every non-scrolling row below is pinned for the same reason,
     so .ai-transcript (the only flex:1 item) is forced to scroll instead. */
  flex: 0 0 auto;
  /* Solid backdrop + safe-area top padding so the title clears the notch and never
     overlaps the decorative frame or the scene behind.
     ⚠️ The 58px SIDE padding is load-bearing, not cosmetic. Two GLOBAL fixed
     buttons float over this row and are not in its layout at all:
       #ptol-settings-gear  left 12px, 40x40, z-index 9810
       #ptol-back-button    right 12px, 40x40, z-index 9811
     .ai-screen is z-90, so both sit far above the header. Without reserved
     gutters the title and subtitle slide underneath them — on a ~360px phone
     the subtitle ran straight under the back chevron. 12 + 40 + 6 = 58. */
  /* 12 + 40 + 6 = 58 left only a 6px gap either side — measured, and at that
     scale it reads as the sun button and the back chevron TOUCHING the title.
     68 gives a real 16px channel. The title also shrinks with the viewport so
     the longer localized titles do not re-close the gap on a narrow phone. */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 68px 12px;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, #05060e 92%, transparent) 0%, color-mix(in srgb, #05060e 55%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
}
.theme-light-mode .ai-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg, #fff) 94%, transparent), transparent);
}
.ai-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 40%, transparent);
  background: transparent; color: var(--color-accent-2, #FFD263);
  font-size: 15px; cursor: pointer;
}
.ai-title { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
.ai-title-main { font-size: clamp(14px, 4.2vw, 17px); font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent-2, #FFD263); }
.ai-title-sub { font-size: 11.5px; opacity: 0.7; }
.ai-turns { font-size: 11px; opacity: 0.72; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold-2, #e8c877) 40%, transparent); color: var(--gold-2, #e8c877); flex-shrink: 0; }
.ai-turns.ai-turns--out { color: #ff9b9b; border-color: color-mix(in srgb, #ff9b9b 55%, transparent); opacity: 1; }
.ai-free-tag { margin-top: 6px; font-size: 10.5px; opacity: 0.6; font-style: italic; }

/* ── The top-up pill + its panel (2026-07-25) ───────────────────────────────
   Subtle by default: it sits beside the credit counter at low opacity and asks
   for nothing. After the first answer lands it takes a soft ring, once, and
   then goes quiet for good.
   ⛔ The pill itself is created hidden and only unhidden when the native Play
   bridge is present (aiAstrologer._initBuyPill). There is no styling here for a
   disabled/unavailable state ON PURPOSE — a purchase control with nothing
   behind it must not exist at all. */
.ai-buy-pill {
  flex: 0 0 auto; font: inherit; font-size: 10.5px; letter-spacing: 0.03em;
  padding: 3px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold-2, #e8c877) 46%, transparent);
  color: var(--gold-2, #e8c877); opacity: 0.9;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold-2, #e8c877) 13%, transparent),
    color-mix(in srgb, var(--gold-2, #e8c877) 5%, transparent));
  /* A slow, low-amplitude breath so the control reads as LIVE rather than as
     chrome. Deliberately long (3.6s) and shallow — a fast or bright pulse on a
     purchase control is a nag, and a nag beside someone's birth chart is the
     wrong register entirely. */
  animation: aiBuyBreath 3.6s ease-in-out infinite;
  transition: opacity .2s ease, border-color .2s ease, background-color .2s ease;
}
@keyframes aiBuyBreath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-2, #e8c877) 0%, transparent); }
  50%      { box-shadow: 0 0 9px 1px color-mix(in srgb, var(--gold-2, #e8c877) 34%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ai-buy-pill { animation: none; } }
.ai-buy-pill:hover, .ai-buy-pill:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, var(--gold-2, #e8c877) 60%, transparent);
  background: color-mix(in srgb, var(--gold-2, #e8c877) 8%, transparent);
}
.ai-buy-pill[hidden] { display: none !important; }
.ai-buy-pill--nudge { opacity: 1; border-color: color-mix(in srgb, var(--gold-2, #e8c877) 62%, transparent); animation: aiBuyRing 2.4s ease-out 3; }
@keyframes aiBuyRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-2, #e8c877) 46%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold-2, #e8c877) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-2, #e8c877) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ai-buy-pill--nudge { animation: none; } }

/* ⚠️ ON A PHONE THE PILL MUST NOT SHARE THE TITLE'S ROW. .ai-head carries 68px
   of side padding (the back chevron and the settings gear both sit over it), so
   a 375px screen leaves ~239px of content width. Title + counter + pill on one
   nowrap row crushed .ai-title to 85px, which wrapped "Your Personal
   Astrologer" onto four lines and grew the header from 88px to 134px — 46px of
   the reading surface spent on chrome, on the screen where the collapsible
   chart exists precisely to win that space back.
   So below 620px the header wraps deliberately: the title owns row one, and the
   counter and pill share row two, right-aligned. Measured cost ~+22px, not +46. */
@media (max-width: 620px) {
  .ai-head { flex-wrap: wrap; row-gap: 6px; }
  .ai-head .ai-title { flex: 1 0 100%; }
  .ai-head .ai-turns { margin-left: auto; }
}

/* The panel. Same void treatment as #paywall-card so the two purchase surfaces
   read as one product, and the same z-index reasoning: ABOVE #bottom-nav
   (9800), below the 9900+ system overlays. Nested inside .ai-screen (z-90) it
   would render under the nav with its buttons unreachable. */
.ai-buy-modal {
  position: fixed; inset: 0; z-index: 9850;
  background: rgba(2, 3, 8, 0.86); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; overflow-y: auto;
}
.ai-buy-modal[hidden] { display: none !important; }
.ai-buy-modal.open { opacity: 1; pointer-events: auto; }
.ai-buy-card {
  position: relative; width: 100%; max-width: 400px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 28px 24px 22px; border-radius: 16px; text-align: center; color: #ece9e0;
  background-color: #05060e;
  background-image:
    radial-gradient(760px 420px at 12% -10%, color-mix(in srgb, var(--color-accent-cool, #7a5cff) 22%, transparent), transparent 62%),
    radial-gradient(700px 620px at 50% 118%, color-mix(in srgb, #3a2a7a 24%, transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 30px 40px,  rgba(255,255,255,0.78), transparent 52%),
    radial-gradient(1.2px 1.2px at 130px 95px, rgba(255,255,255,0.48), transparent 52%);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, 210px 210px, 170px 170px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.ai-buy-x {
  position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
  background: transparent; border: 0; cursor: pointer; line-height: 1;
  font-size: 24px; color: #ece9e0; opacity: 0.55;
}
.ai-buy-x:hover { opacity: 1; }
.ai-buy-kicker {
  margin: 0 0 4px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-2, #e8c877); opacity: 0.85;
}
.ai-buy-title { margin: 0 0 2px; font-size: clamp(19px, 5.4vw, 23px); font-weight: 700; color: #f5efdf; letter-spacing: 0.01em; }
.ai-buy-price { margin: 0; font-size: 13px; color: #b9b3a6; }
.ai-buy-rule {
  height: 1px; margin: 16px auto; max-width: 190px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-2, #e8c877) 55%, transparent), transparent);
}
.ai-buy-points { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 13px; }
.ai-buy-points li { display: flex; flex-direction: column; gap: 3px; }
.ai-buy-points strong { font-size: 13px; font-weight: 600; color: #f0e9d6; letter-spacing: 0.01em; }
.ai-buy-points span { font-size: 12.5px; line-height: 1.5; color: #b9b3a6; }
.ai-buy-go {
  width: 100%; padding: 13px 18px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  color: #1a1206; border: 0;
  background: linear-gradient(180deg, #f3d68a, #d8ad55);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.ai-buy-go:disabled { opacity: 0.6; cursor: default; }
.ai-buy-status { margin: 0 0 10px; font-size: 12.5px; color: #ffb3b3; }
.ai-buy-status[hidden] { display: none; }
.ai-buy-foot { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: #9d978b; }

/* FR-01 §7 — the quality mark under an answer. Deliberately QUIET: it is an
   instrument, not a rating widget, and a prominent thumbs-down beside every
   reading invites a verdict on the astrology rather than a report of a defect.
   It brightens on hover/focus so it is findable when someone wants it. */
.ai-qmark { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
/* ⛔ THESE HOLD WORDS NOW, NOT A GLYPH. The old rule was `font-size: 15px` with
   no border and 2px of padding — correct for a single `☹`, but "Not really" set
   that way reads as body text with no affordance and offers a hit target well
   under the 44px guidance. So they borrow the chip idiom, which is already this
   app's vocabulary for a small tappable word. Still quiet: a loud thumbs-down
   beside every reading invites a verdict on the astrology instead of a defect
   report. */
.ai-qmark-label { font-size: 11px; color: var(--chrome-text-soft, rgba(245,230,192,0.62)); }
.ai-qmark-btn {
  background: rgba(0,0,0,0.22); cursor: pointer;
  border: 1px solid var(--chrome-border, rgba(240,192,64,0.28));
  border-radius: 999px; padding: 5px 11px; min-height: 26px;
  font: 600 10px/1.3 "Cinzel", Georgia, serif; letter-spacing: .06em;
  color: var(--chrome-text-soft, rgba(245,230,192,0.72));
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}
.ai-qmark-btn:hover, .ai-qmark-btn:focus-visible {
  color: var(--color-accent, #F0C040); border-color: var(--color-accent, #F0C040);
}
.ai-qmark-btn[disabled] { opacity: .5; cursor: default; }
.ai-qmark-thanks { font-size: 11px; font-style: italic; color: var(--chrome-text-soft, rgba(245,230,192,0.62)); }
.ai-qmark-chip {
  background: rgba(0,0,0,0.22); cursor: pointer;
  border: 1px solid var(--chrome-border, rgba(240,192,64,0.28));
  border-radius: 999px; padding: 3px 9px;
  font: 600 10px/1.3 "Cinzel", Georgia, serif; letter-spacing: .06em;
  color: var(--chrome-text-soft, rgba(245,230,192,0.78));
}
.ai-qmark-chip:hover, .ai-qmark-chip:focus-visible { border-color: var(--color-accent, #F0C040); color: var(--color-accent, #F0C040); }
.ai-qmark-chip.is-on { background: rgba(240,192,64,0.16); color: var(--color-accent, #F0C040); }
@media (prefers-reduced-motion: reduce) { .ai-qmark-btn { transition: none; } }

/* Point marks: a classical bullet set rather than discs. */
.ai-buy-points li { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; }
.ai-buy-mark {
  flex: 0 0 auto; width: 18px; text-align: center; line-height: 1.35;
  font-size: 13px; color: var(--gold-2, #e8c877); opacity: 0.9;
}
.ai-buy-pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Where billing cannot complete, the panel still explains — it just does not
   render a control that would do nothing. */
.ai-buy-elsewhere {
  margin: 4px 0 0; padding: 11px 13px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5; color: #d8d2c4;
  background: color-mix(in srgb, var(--gold-2, #e8c877) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-2, #e8c877) 20%, transparent);
}

/* The terms: present, complete, one tap away, closed by default. */
.ai-buy-details { margin: 16px 0 0; text-align: left; }
.ai-buy-details > summary {
  cursor: pointer; list-style: none; text-align: center;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #b9b3a6; padding: 8px 0; opacity: 0.85;
  border-top: 1px solid color-mix(in srgb, var(--gold-2, #e8c877) 18%, transparent);
}
.ai-buy-details > summary::-webkit-details-marker { display: none; }
.ai-buy-details > summary::after { content: ' \25BE'; opacity: 0.7; }
.ai-buy-details[open] > summary::after { content: ' \25B4'; }
.ai-buy-details > summary:hover { color: var(--gold-2, #e8c877); opacity: 1; }
.ai-buy-terms { max-height: 240px; overflow-y: auto; padding: 4px 2px 2px; }
.ai-buy-terms p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.6; color: #a9a396; }
.ai-buy-terms strong { color: #d3ccbd; font-weight: 600; }


.ai-cost-tag { margin-top: 6px; font-size: 10.5px; opacity: 0.66; font-style: italic; color: var(--color-accent-2, #C9A961); }
/* #9 — cold-start suggested questions: tappable pills under the greeting. */
.ai-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 2px 4px; }
.ai-suggestion {
  max-width: 100%; text-align: left; padding: 9px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 1.3;
  color: var(--color-accent-2, #C9A961);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-suggestion::before { content: "✦ "; opacity: 0.7; }
.ai-suggestion:hover, .ai-suggestion:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  outline: none;
}
.ai-seam {
  display: flex; gap: 6px; padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
}
.ai-seam-opt {
  flex: 1 1 auto; padding: 6px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  background: transparent; color: var(--color-fg, #e8e6df);
  font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s;
}
.ai-seam-opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  color: var(--color-accent-2, #FFD263); font-weight: 700;
}
.ai-subject {
  flex: 0 0 auto;   /* pinned: only .ai-transcript may flex/scroll */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent);
  font-size: 12.5px; color: var(--color-dim, #b9b6ad);
}
.ai-subject-lbl { display: inline-flex; align-items: center; gap: 6px; }
.ai-bondctl { display: inline-flex; align-items: center; gap: 6px; }
.ai-bondctl[hidden] { display: none; }
.ai-bond-as { opacity: .7; }
/* Bond Score explainer pill — the AI screen's copy of the Theatre header chip
   (#at-bondscore-chip), styled to match it so the same control reads the same
   in both places. Shown only while the subject is a bond.
   ⚠️ The [hidden] rule is REQUIRED, not decorative: an author `display` beats
   the `hidden` attribute, so without it `bondScoreBtn.hidden = true` would be a
   silent no-op and the pill would sit there during a natal reading. Same reason
   .ai-bondctl carries one directly above. */
.ai-bondscore {
  display: inline-flex; align-items: center;
  margin-left: auto;                 /* settle at the row's end, clear of the selects */
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  color: var(--ac-gold-brt, #ffd068);
  font: 600 11px/1 "Cinzel", Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
}
.ai-bondscore[hidden] { display: none; }
.ai-subject-sel {
  padding: 4px 8px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  background: var(--color-surface-raised, #1A2148); color: var(--color-fg, #e8e6df);
  font-size: 12.5px; max-width: 46vw; cursor: pointer;
}
/* Reference wheel pinned above the transcript — a flex item, so it stays put
   while only .ai-transcript scrolls. Compact so it never dominates the panel. */
.ai-chart {
  flex: 0 0 auto;
  display: flex; justify-content: center; align-items: center;
  padding: 5px 0 4px;
  /* Hard ceiling: the wheel is a reference, never the main event — the transcript
     keeps the rest. (The svg is cropped to the wheel in _compactWheel, so a
     smaller box now shows a BIGGER wheel than the old uncropped 212px did.) */
  max-height: min(190px, 26vh);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
}
.ai-chart[aria-hidden="true"], .ai-chart:empty { display: none; }
/* Collapsible (the wheel folds into .ai-chart-tab). The rule above already
   hides it via aria-hidden, which the collapse sets — this class carries the
   affordance cues only, so the two can never disagree about visibility. */
.ai-chart { cursor: zoom-out; }
.ai-chart:focus-visible {
  outline: 2px solid var(--color-accent, #FFB836);
  outline-offset: -2px; border-radius: 10px;
}
/* The folded state: a small chart-shaped tab, centred at the top of the panel. */
.ai-chart-tab {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 26px;
  margin: 2px auto 4px;
  padding: 0;
  cursor: pointer;
  /* ⚠️ NOT var(--color-accent-2, #FFD263). In light mode that variable is
     DEFINED as #000000, so the fallback never applies and the glyph rendered
     solid black — the same trap that made the tour citation line invisible.
     Inherit the panel's own text colour and let it be right in both themes. */
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  /* Tab-shaped: square top corners, rounded bottom — it reads as something that
     pulled UP out of view and can be pulled back down. */
  border-top-left-radius: 3px; border-top-right-radius: 3px;
  border-bottom-left-radius: 13px; border-bottom-right-radius: 13px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ai-chart-tab:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 52%, transparent);
  transform: translateY(1px);
}
.ai-chart-tab:active { transform: translateY(2px); }
.ai-chart-tab[hidden] { display: none; }
.ai-chart svg {
  width: min(178px, 42vw);
  max-height: min(178px, 24vh);
  height: auto; display: block; margin-inline: auto;
}
/* Per-answer focus uses the wheel's own highlight system (--has-highlight dims
   every planet, --show-<planet> lifts the cited ones); we just ease the fade. */
.ai-chart .pa-wheel-planet { transition: opacity .3s ease; }
.ai-transcript {
  /* min-height:0 is LOAD-BEARING: a flex child's automatic minimum size is its
     CONTENT size, so without this the transcript can never shrink — overflow-y
     never engages, scrollHeight===clientHeight, and a long reading grows the
     panel instead of scrolling. That pushed the pinned chart out of view and
     collided the header rows. Do not remove. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.ai-msg p { margin: 0 0 8px; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ul { margin: 6px 0; padding-left: 20px; }
.ai-msg .ai-lead { margin: 12px 0 4px; }
.ai-msg .ai-lead:first-child { margin-top: 0; }
.ai-msg .ai-lead strong { color: var(--color-accent-2, #FFD263); font-size: 15px; }
.ai-msg--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 18%, var(--color-surface-raised, #1A2148));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
}
.ai-msg--assistant {
  align-self: flex-start;
  /* --color-fg as the contrast ink adapts to every theme (light ink in dark
     palettes, dark ink in light) instead of a fixed white that vanishes on white. */
  background: color-mix(in srgb, var(--color-fg, #ffffff) 6%, var(--color-surface-elevated, #12151d));
  border: 1px solid color-mix(in srgb, var(--color-fg, #ffffff) 14%, transparent);
}
.ai-msg--floor { border-color: #d98a3a; box-shadow: 0 0 0 1px #d98a3a inset; }
.ai-msg--notice, .ai-msg--fallback { opacity: 0.92; font-style: italic; }
.ai-typing { opacity: 0.6; font-style: italic; }
/* #4 — streaming caret: a soft blinking block trailing the text as it reveals.
   Removed the instant the authoritative answer re-renders (no caret in .final). */
.ai-caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 1px;
  vertical-align: text-bottom; background: currentColor; opacity: 0.55;
  animation: ai-caret-blink 1s steps(2, start) infinite; }
@keyframes ai-caret-blink { 0%, 50% { opacity: 0.55; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ai-caret { animation: none; opacity: 0.4; } }
/* (the "flagged for a human astrologer" badge + its .ai-msg--flagged rail were
   removed — the server still flags and logs, it just never shouts at the reader) */
/* "Grounded in" — the reader wall, made visible per answer. */
.ai-sources { margin-top: 9px; font-size: 12px; }
.ai-sources > summary {
  cursor: pointer; list-style: none; user-select: none;
  color: var(--color-accent-2, #FFD263); opacity: 0.85;
  padding: 4px 0; font-weight: 600;
}
.ai-sources > summary::-webkit-details-marker { display: none; }
.ai-sources > summary::before { content: '▸ '; opacity: 0.7; }
.ai-sources[open] > summary::before { content: '▾ '; }
.ai-src-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ai-src-list li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ai-src-reg {
  flex: 0 0 auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 999px; font-weight: 700;
}
.ai-src-reg--classical { background: color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent); color: var(--color-accent-2, #FFD263); }
.ai-src-reg--modern { background: color-mix(in srgb, #7aa2ff 22%, transparent); color: #b9ccff; }
.ai-src-label { color: var(--color-fg, #e8e6df); font-weight: 600; }
.ai-src-detail { color: var(--color-fg, #e8e6df); opacity: 0.72; font-size: 11.5px; }
/* OA-16 — the em-dash moved INTO the markup. CSS ::before never appears in
   textContent, so every reader of the DOM (the text battery, a copy-paste, a
   screen reader, an export) lost it and the row extracted jammed. */
.ai-src-cite { opacity: 0.6; font-style: italic; font-size: 11px; }
.ai-src-note { margin: 7px 0 0; font-size: 10.5px; opacity: 0.55; line-height: 1.4; }
.ai-composer {
  flex: 0 0 auto;   /* pinned: only .ai-transcript may flex/scroll */
  display: flex; gap: 8px; padding: 10px 14px 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
}
.ai-input {
  flex: 1 1 auto; resize: none; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  /* Recess relative to the panel using the theme bg (dark in dark, white in light)
     rather than a fixed black wash that reads as a grey box on a light page. */
  background: color-mix(in srgb, var(--color-bg, #000) 22%, var(--color-surface-raised, #1A2148));
  color: var(--color-fg, #e8e6df); padding: 10px 12px; font: inherit; font-size: 14.5px;
}
.ai-send {
  flex: 0 0 auto; align-self: flex-end; padding: 10px 18px; border-radius: 12px; border: 0;
  background: var(--color-accent, #FFB836); color: #1a1206; font-weight: 700; cursor: pointer;
}
.ai-send:disabled { opacity: 0.5; cursor: default; }
.ai-disclaimer { flex: 0 0 auto; margin: 0; padding: 0 16px 8px; font-size: 10.5px; opacity: 0.55; text-align: center; }
/* Light-mode holdouts: the AI screen is otherwise fully token-driven and re-skins
   with every palette, but two spots bake a dark-deck assumption. On the light
   palette the ASK/send button's near-black label needs to flip to white on the
   blue accent, and the "modern" register chip's pale-blue text needs to darken. */
.theme-light-mode .ai-send { color: #fff; }
.theme-light-mode .ai-src-reg--modern {
  background: color-mix(in srgb, var(--color-accent-cool, #2563EB) 16%, transparent);
  color: var(--color-accent-cool, #2563EB);
}

/* HOME accent tab — the center surface gets the FAB's visual weight without
   detaching from the grid. Soft gold halo + raised glyph. The aria-pressed
   underline on active still applies (the gold accent + the underline coexist). */
.bn-tab--accent {
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 92%, transparent);
}
.bn-tab--accent .bn-tab-glyph {
  font-size: 26px;
  filter: drop-shadow(0 0 8px var(--color-accent-glow, rgba(255, 184, 54, 0.55)));
  transform: translateY(-2px);
}
.bn-tab--accent .bn-tab-label {
  font-weight: 800;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 88%, transparent);
}
.bn-tab--accent::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 70%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bn-tab--accent .bn-tab-glyph,
.bn-tab--accent .bn-tab-label { position: relative; z-index: 1; }
.bn-tab--accent[aria-pressed="true"] .bn-tab-glyph {
  filter: drop-shadow(0 0 10px var(--color-accent-glow, rgba(255,184,54,0.85)));
}

/* ── HOME yin-yang reskin (three-screen redesign) ──────────────────────────
   The HOME landing wears a soft yin-yang split — deep indigo on the left,
   warm parchment-tinted black on the right — so the surface reads as the
   anchor between Astronomy (cool sky) and Astrology (warm doctrine). The
   gradient sits BEHIND content via .home-yinyang-bg (absolute, z=-1) so the
   cards keep their existing dark backdrops + remain legible. */
.today-app--yinyang { position: relative; isolation: isolate; }
.home-yinyang-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* CLASHING halves (user request): a COOL astronomy blue on the left vs a
     WARM astrology gold on the right — complementary hues that read as two
     opposed domains meeting at the seam. Per-half radial blooms deepen each
     side's identity; the base linear gradient carries the cool→neutral→warm
     sweep. Hues are fixed (the two domains), blended toward the theme bg so
     content stays legible. */
  /* HG-17 (DG-3 = keep + fix) — the cool→warm split is kept as the home's
     identity, but re-oriented to TRACK THE CONTENT: the halves stack top→bottom
     (sky/wheel above, verdict/reading below), so the cool pole sits over the sky
     zone (top) and the warm pole over the reading zone (bottom). The centre is a
     WIDE neutral melt (30%→70%) so the two temperatures genuinely blend — a
     merge, not a bisecting seam. Hues blended toward the theme bg for legibility. */
  /* HD-13 — single field hue across the scroll. The old blue→brown bisect
     (navy top → #38260a warm-brown bottom) read as two clashing zones with a
     legibility dip at the seam; retired for ONE cool navy field that settles
     into the theme background. A single soft navy bloom at the very top keeps a
     little depth over the sky/wheel zone without re-introducing a second hue. */
  background:
    radial-gradient(120% 56% at 50% 0%, rgba(44,96,182,0.24), transparent 62%),
    linear-gradient(180deg,
      #0a1a40 0%,
      color-mix(in srgb, #0a1a40 40%, var(--color-bg, #06081C)) 24%,
      var(--color-bg, #06081C) 56%,
      var(--color-bg, #06081C) 100%);
}
.home-yinyang-bg::after {
  /* HD-13 — the warm seam melt is gone with the two-hue split; a faint,
     centred cool vignette keeps the field from reading flat. */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 30%;
  transform: translateY(-50%);
  background: radial-gradient(120% 100% at 50% 50%,
    rgba(44,96,182,0.06) 0%,
    transparent 74%);
}
/* HG-17-OPT — the optional Sky/Meaning toggle shifts the gradient's balance
   toward the selected side (a density aid; it never removes content). */
.today-app--yinyang.home-emphasis-sky .home-yinyang-bg { background-position: 0 -8%; }
.today-app--yinyang.home-emphasis-meaning .home-yinyang-bg { background-position: 0 8%; }
.home-yinyang-bg { transition: background-position 400ms ease; }
/* HG-17-OPT — the segmented Sky/Meaning emphasis toggle. */
.today-sky-meaning {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface, #0A1228) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
}
.tsm-btn {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 78%, transparent);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.tsm-btn:hover { color: var(--color-fg, #e8e9ec); }
.tsm-btn.tsm-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-2, #FFD263) 30%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent));
  color: var(--color-fg, #F0E5C2);
}

/* ════════════ HG-20 — home legibility floor + card unification ════════════
   One scrim system behind text that sits over the gradient, plus AAA-tier
   contrast for the SMALLEST type (citations, times, degree readouts), all
   from theme tokens so the floor holds across every palette + both gradient
   poles. Targets (the audit is on-device — the Moto G Play at the priority-
   market default brightness, at the coolest AND warmest gradient value, in
   all themes):  body ≥ 4.5:1 · large/display ≥ 3:1 · smallest type ≥ 7:1.
   Critical small data stays in the legible body face — never the small-caps
   serif, which fails first on a cheap panel in daylight. */
:root {
  --home-scrim: color-mix(in srgb, var(--color-surface, #0A1228) 62%, transparent);
  --home-card-border: color-mix(in srgb, var(--color-accent, #FFB836) 24%, transparent);
}
/* One shared scrim behind every text run that floats over the bare gradient. */
.today-fused-line,
.today-wheel-meaning,
.today-headline {
  background: var(--home-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 8px;
  padding: 8px 12px;
}
/* Smallest type → near-opaque fg + the legible body face (not the serif). */
.home-event-date,
.home-event-rel,
.home-moon-deg,
.ph-until,
.ph-cur-until,
.ph-hr-time,
.ph-hr-end,
.today-wheel-meta {
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 96%, transparent) !important;
  font-family: var(--type-body, system-ui, sans-serif) !important;
  opacity: 1 !important;
}
/* Citations: legible face, accent ink lifted well clear of the background. */
.home-event-cite,
.today-wheel-cite {
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 90%, var(--color-fg, #F0E5C2)) !important;
  font-family: var(--type-body, system-ui, sans-serif) !important;
}
/* Unify card chrome to one token set across the text-bearing home surfaces. */
.today-wheel-widget,
.home-moon-widget,
.ph-widget,
.home-event-feed .home-event-row,
.home-explainer-deck .home-deck-card {
  border-color: var(--home-card-border);
}
.home-chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px 6px;
  pointer-events: none;
}
.home-chrome-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.home-chrome-label {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 18px;
  letter-spacing: 0.32em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-2, #FFD263);
  text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 70%, transparent);
  user-select: none;
}
.home-chrome-gear {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 40%, transparent);
  background: rgba(10, 13, 28, 0.55);
  color: var(--color-accent-2, #FFD263);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1), box-shadow 0.18s ease-out;
}
.home-chrome-gear:hover {
  transform: rotate(35deg);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 70%, transparent);
}
.home-transit-explainer {
  margin: 18px 16px 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10, 13, 28, 0.55);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 20%, transparent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

/* HEF-c2 — HOME two-lane event feed. The retired ECLIPSE/ASPECTS/SOON
   tabs are replaced by a single ranked feed of typed events. Featured
   event sits on top with a taller plate; remaining rows render as flat
   tappable plates. */
.home-event-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 16px 14px;
}
/* P15 — "Next Important Thing" summary card (personal vs sky, personal-first). */
/* HD-13 — below the wheel, drop the full 1px frame for a flatter card (fill +
   the semantic left accent only), so the lower scroll reads as calm cards on
   one field rather than a stack of boxed frames. */
.home-nit-card { padding: 10px 13px 11px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,0.05); border-left: 3px solid #7Fd6a0; }
.home-nit-h { color: var(--ac-gold-brt,#ffd068); font: 600 10px/1.4 "Cinzel", Georgia, serif; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; }
.home-nit-line { margin: 3px 0; font-size: 13.5px; line-height: 1.4; color: #e7e0f2; }
.home-nit-k { font-weight: 600; }
.home-nit-personal .home-nit-k { color: #7Fd6a0; }
.home-nit-sky .home-nit-k { color: #9fb0e0; }
.home-nit-why { margin: 6px 0 0; font-size: 11.5px; font-style: italic; color: #8a93b5; }
.home-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
  border-radius: 12px;
  background: rgba(10, 13, 28, 0.55);
  color: var(--color-fg, #f0e5c2);
  text-align: left;
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.home-event-row:hover,
.home-event-row:focus-visible {
  background: rgba(14, 18, 36, 0.78);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 38%, transparent);
}
.home-event-row--featured {
  padding: 14px 18px;
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 42%, transparent);
  background: linear-gradient(180deg, rgba(18, 22, 44, 0.82), rgba(10, 13, 28, 0.78));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  font-size: 15px;
}
.home-event-glyph {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--color-accent-2, #FFD263);
  min-width: 22px;
  text-align: center;
}
.home-event-headline {
  flex: 1 1 auto;
  min-width: 0;
}
/* Metadata group (when + lock + citation). On desktop `display: contents` makes
   its children participate in the row flex exactly as before — zero change. On a
   narrow phone (below) it becomes a real box that wraps to its own line, so the
   nowrap "applying · exact Jul 22 · TETRABIBLOS IV.10" no longer crushes the
   headline into a one-word column. */
.home-event-meta {
  display: contents;
}
.home-event-cite {
  flex: 0 0 auto;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 78%, transparent);
  white-space: nowrap;
  margin-left: auto;
}
/* HG-06 — absolute date + relative countdown on every feed card. */
.home-event-when {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.12;
  margin-left: 8px;
  white-space: nowrap;
}
.home-event-date {
  font-size: 10.5px;
  color: var(--color-fg, #e8e9ec);
  opacity: 0.82;
}
.home-event-rel {
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 72%, transparent);
}
.home-event-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-event-empty {
  margin: 0;
  padding: 14px 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
  font-size: 13px;
}
/* HEF-c3 — pro-gated row, free tier: headline blurred + lock icon to
   the right of the prose. Row stays tappable per spec §3 ("the tease
   is the funnel"). */
.home-event-row--locked .home-event-headline {
  filter: blur(3.5px);
  user-select: none;
  pointer-events: none;
}
.home-event-row--locked {
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
}
.home-event-lock {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--color-accent-2, #FFD263);
  opacity: 0.8;
  margin-left: 4px;
}
/* Narrow phone — the event-feed cards run out of width for glyph + headline +
   timing + citation on one row, crushing the headline to ~1 word per line. Let
   the row wrap and drop the metadata group to its own full-width line below the
   headline (when at the left, citation at the right). */
@media (max-width: 500px) {
  .home-event-row { flex-wrap: wrap; }
  .home-event-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 100%;
    margin: 4px 0 0 0;
  }
  .home-event-when { margin-left: 0; }
}
/* HEF-c4 — lane toggle pill above the event feed (chart-loaded). */
.home-lane-pill,
.home-lane-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 38%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, rgba(10, 13, 28, 0.65));
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.home-lane-pill:hover,
.home-lane-cta:hover {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, rgba(10, 13, 28, 0.85));
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent);
}
.home-lane-pill-icon { font-size: 14px; }
.home-lane-pill-label { flex: 1 1 auto; text-align: left; }
.home-lane-pill-cta,
.home-lane-cta-icon { margin-left: auto; opacity: 0.7; }
.home-lane-cta { flex-direction: column; align-items: flex-start; gap: 4px; }
.home-lane-cta-label { font-size: 13px; font-weight: 600; }
.home-lane-cta-sub {
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
  font-style: italic;
}

/* HEF-c5 — rotating explainer deck. Horizontal scroll snap; each card
   carries title + body + citation chip + "Read the full entry" button. */
.home-explainer-deck {
  margin: 18px 0 14px;
  padding: 0 16px;
  overflow: hidden;
}
.home-deck-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.home-deck-track::-webkit-scrollbar { height: 4px; }
.home-deck-track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  border-radius: 2px;
}
/* Solo mode — a single rotating card (not the full scroller). */
.home-deck-track--solo {
  display: block;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.home-deck-track--solo .home-deck-card {
  flex: none;
  width: auto;
  max-width: none;
  min-height: 138px;
  transition: opacity 0.24s ease;
}
.home-deck-track--solo .home-deck-card.home-deck-card--fading { opacity: 0; }
.home-deck-card {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: start;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(14, 18, 36, 0.86), rgba(10, 13, 28, 0.82));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-deck-title {
  margin: 0;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2, #FFD263);
}
.home-deck-body {
  margin: 0;
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 92%, transparent);
}
.home-deck-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.home-deck-cite {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 78%, transparent);
}
.home-deck-read {
  border: 0;
  background: transparent;
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.home-deck-read:hover { color: var(--color-accent, #FFB836); }
.home-explainer-h {
  margin: 0 0 8px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-2, #FFD263);
}
.home-explainer-body {
  margin: 0;
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 86%, transparent);
}

/* ── HOME moon-phase widget ────────────────────────────────────────────── */
.home-moon-widget {
  margin: 14px 16px 0;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(40, 30, 70, 0.55) 0%,
      rgba(10, 13, 28, 0.55) 80%);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.home-moon-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.home-moon-eyebrow {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 85%, transparent);
}
.home-moon-phase {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-fg, #F0E5C2);
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255, 236, 180, 0.18);
}
.home-moon-disc-wrap {
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-moon-disc { width: 100%; height: 100%; display: block; }
.home-moon-caption {
  margin: 4px 0 4px;
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 17px;
  text-align: center;
  color: var(--color-fg, #F0E5C2);
}
.home-moon-caption strong {
  font-weight: 700;
  color: var(--color-accent-2, #FFD263);
}
.home-moon-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 15%, transparent);
}
.home-moon-row {
  display: grid;
  grid-template-columns: 26px 80px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 120ms ease;
}
.home-moon-row:last-child { border-bottom: 0; }
.home-moon-row:hover,
.home-moon-row:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent);
}
/* HG-11 — the tap-to-expand physical-causal verdict for each body. */
.home-moon-row-wrap { display: block; }
.home-moon-row-wrap:last-child .home-moon-row { border-bottom: 0; }
.home-moon-verdict {
  padding: 4px 6px 10px 38px;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent);
}
.home-moon-verdict[hidden] { display: none; }
/* HG-12 — the long-press JPL Horizons cross-check line under a body. */
.home-moon-jpl {
  padding: 0 6px 10px 38px;
  font-size: 11.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-accent-cool, #7FB0FF) 80%, var(--color-fg, #e8e9ec));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent);
}
.home-moon-jpl[hidden] { display: none; }
.home-moon-row.lp-pressing { background: color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent); }
.home-moon-row svg { display: block; }
.home-moon-glyph { display: inline-flex; align-items: center; justify-content: center; }
.home-moon-sign-glyph {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
}
.home-moon-illum {
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 70%, transparent);
  margin-left: 6px;
}
.home-moon-row-label {
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 78%, transparent);
}
.home-moon-row-value {
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg, #F0E5C2);
  letter-spacing: 0.02em;
}
.home-moon-deg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  margin-left: 6px;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 70%, transparent);
}

/* ── Hide the floating clock widget EVERYWHERE. The day-bar in the
   Theatre + Astronomy IS the time scrubber for the redesign; the
   floating clock was confusing as a second source of truth. Disabled
   wholesale per user feedback: "sync all time to the docked one." */
[role="toolbar"][aria-label="Time controls"] { display: none !important; }

/* ── Theatre natal reading (basic mode below-the-wheel deep read) ───────
   Lives inside #at-synastry-reading scroller (so the .pa-syn-* CSS host
   re-scope picks it up), but uses the .atn-* class namespace for its
   own visual chrome. Same parchment feel as the synastry reading so
   both modes read as one cohesive surface. */
.atn-natal {
  padding: 24px 22px 80px;
  color: #f3e9c6;
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
}
.atn-head {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  /* Insurance: if the host scroller ever lays its content out in columns,
     keep the title block whole (name + subtitle never split sideways). */
  break-inside: avoid;
  column-span: all;
}
.atn-h2 {
  margin: 0 0 6px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-2, #FFD263);
  text-shadow: 0 0 14px rgba(255, 208, 104, 0.25);
}
.atn-subhead {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #f3e9c6 75%, transparent);
}

/* NRF2/MT3 — Basic / Advanced methodology toggle pill. Sits below the
   subtitle in the natal-report header. The default (Basic) hides the
   doctrinal Step + Source registers; the pill flips a class on the
   wrapper which CSS reads to collapse them. */
.atn-methodology-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.atn-methodology-pill:hover {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent);
}
.atn-methodology-pill[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 78%, transparent);
  color: var(--color-accent, #FFB836);
}
.atn-methodology-icon { font-size: 14px; }
.atn-methodology-label { display: inline-block; }

/* #8 — "Ask about this chart / this bond": a plain entry to the Personal
   Astrologer dropped on the natal reading (below the verdict banner) and the
   synastry bond reading. A document-level [data-ai-ask] delegate in main.js
   opens the reader pre-pointed at the surface's subject. */
.atn-ask-ai-row { display: flex; justify-content: center; margin: 18px 0 6px; }
/* The share-chart button sits beside Ask and reads as its quieter sibling: same
   pill, no fill. Ask is the primary action on this row; sharing is something a
   reader chooses once they like what they see. */
.atn-share-chart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 82%, transparent);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.atn-share-chart:hover, .atn-share-chart:focus-visible {
  border-color: var(--color-accent, #FFB836);
  color: var(--color-accent-2, #FFD263);
}
.atn-share-chart[disabled] { opacity: .55; cursor: default; }
.atn-ask-ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.atn-ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.atn-ask-ai:hover {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 80%, transparent);
  transform: translateY(-1px);
}
.atn-ask-ai-icon { font-size: 15px; line-height: 1; }
.atn-ask-ai-label { display: inline-block; }

/* MS-C8 — Modern Synthesis: the plain-language closing card + its toggle pill.
   The card is always rendered (report.modern_synthesis is always computed);
   `modern-hidden` on the wrapper collapses it without a re-render, mirroring
   the methodology toggle. Distinct violet accent marks the modern register. */
.atn-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.atn-modern-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, #c8b0ff 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #c8b0ff 8%, transparent);
  color: #d8c8ff;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.atn-modern-pill:hover {
  background: color-mix(in srgb, #c8b0ff 16%, transparent);
  border-color: color-mix(in srgb, #c8b0ff 60%, transparent);
}
.atn-modern-pill[aria-pressed="true"] {
  background: color-mix(in srgb, #c8b0ff 22%, transparent);
  border-color: color-mix(in srgb, #c8b0ff 78%, transparent);
  color: #e6dcff;
}
.atn-modern-icon { font-size: 14px; }
.atn-modern-label { display: inline-block; }

.atn-block--modern-synthesis {
  margin-top: 28px;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(28, 18, 50, 0.5);
  border: 1px solid color-mix(in srgb, #c8b0ff 35%, transparent);
}
.atn-block--modern-synthesis .atn-h3 {
  color: color-mix(in srgb, #c8b0ff 75%, var(--color-accent-2, #FFD263) 25%);
  margin: 0;
}
.atn-modern-synthesis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.atn-modern-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, #c8b0ff 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #c8b0ff 8%, transparent);
  color: #d8c8ff;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.atn-modern-share:hover { background: color-mix(in srgb, #c8b0ff 18%, transparent); }
.atn-modern-share:disabled { opacity: 0.55; cursor: default; }
.atn-modern-share-icon { font-size: 13px; }
.atn-modern-synthesis-p { margin: 0 0 12px; line-height: 1.62; }
.atn-modern-synthesis-p:last-of-type { margin-bottom: 0; }
.atn-modern-synthesis-note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, #c8b0ff 22%, transparent);
  font-size: 12px;
  font-style: italic;
  opacity: 0.7;
}
/* Toggle: collapse the modern card when the wrapper opts out. */
.modern-hidden .atn-block--modern-synthesis { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   BRIEF READING MODE — the default-on summary layer
   ═══════════════════════════════════════════════════════════════════════
   `brief-mode` on .atn-natal. This is a VEIL over fully-rendered, fully-gated
   HTML: every paywall decision was already made when the markup was built, so
   these rules can only hide what is present. A CSS rule cannot un-omit a block
   the gate withheld — which is exactly why Brief cannot leak paid prose, and
   why Full is byte-identical to the pre-feature display (drop the class and
   nothing else differs).

   Composition follows PLAN_brief_reading_mode_FINAL_2026-07-18 §3.
   KEPT: the Shape of the Figure panel, Portrait, Dominant Facts, the
   per-section headline + verdict + tags + timing, the predictive row, the
   Years Ahead lines, Final Judgement, the Modern Synthesis card.
   HIDDEN: the deep testimony inside each section, and the methodology layer.

   Tapping a section adds .atn-expanded to THAT section, which re-shows its own
   detail — so nothing is more than one tap away (spec §8 acceptance). */

/* The methodology pill belongs to Full only (spec §1). It stays in the DOM so
   the switch never needs a re-render; CSS is what makes it Full-only. */
.brief-mode .atn-methodology-pill { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   G-NR4 — ONE TITLE, ONE VERDICT, ONE SENTENCE
   ═══════════════════════════════════════════════════════════════════════
   ⛔ WHAT BRIEF LOOKED LIKE BEFORE THIS BLOCK, verbatim from one section:

       ✗ Impeded
       Dignity & Honor — Tenth House
       This part of the chart runs uphill; what it gives, it gives slowly.
       Dignity & Honor — Tenth HouseMajor Theme✗ Impeded
       Honor & Career (H10) — Detriment
       ✗ Impeded
       Part of the main pattern
       House X holds the profected year at ages 9, 21, 33, 45.

   Title twice. Verdict three times. Eight lines, one word of information. The
   old veil hid the DEEP TESTIMONY and kept every piece of chrome, so what was
   left was scaffolding with the building removed.

   The sentence itself is emitted by _renderSection in BOTH modes (BF-I1 — this
   is a veil, never a render branch); these rules decide who sees it. */

/* The sentence: Brief only. In Full it would be a third restatement. */
.atn-brief-line { display: none; }
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-brief-line {
  display: block;
  margin: 6px 0 0;
  color: var(--fg);
  font-size: 14.5px;
  line-height: 1.55;
}
/* Expanded (tapped) sections show their real prose, so the summary line steps
   aside rather than prefacing what it summarised. */
.brief-mode .atn-block[data-section].atn-expanded .atn-brief-line { display: none; }

/* (d) A section with nothing to say does not render in Brief AT ALL. An empty
   section reads as lost content; an absent one reads as a summary. */
.brief-mode .atn-block[data-section][data-brief="0"]:not(.atn-expanded) { display: none; }

/* (c) The chrome the audit itemised, in its order.

   THE SECOND TITLE + THE SALIENCE CHIPS. The reading register repeats the
   section label and appends "Major Theme" / "Strong Testimony" with no
   separator ("Tenth HouseMajor Theme" — NR-13), then the verdict again. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-reg-title,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-badge--major,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-badge--strong,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-pattern-chip,
/* THE GLOSS. "This part of the chart runs uphill; what it gives, it gives
   slowly." is true of every impeded section on every chart, which is another
   way of saying it tells this reader nothing. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-band-gloss,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-verdict-gloss,
/* THE PROFECTION AGE LIST. "House X holds the profected year at ages 9, 21,
   33, 45" is a timing table, not a judgement. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-timing,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-today-row,
/* THE HEADLINE. It is the third statement of the verdict, in chip form
   ("Honor & Career (H10) — Detriment"), and the sentence above now carries the
   same fact in language. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-reg-headline {
  display: none;
}
/* (b) ONE verdict chip per section.
   ⚠️ MEASURED, NOT ASSUMED. The first attempt used sibling combinators
   (`.atn-verdict-badge ~ .atn-verdict-badge`) and a list of the containers the
   repeats were expected in — and a live count of the rendered DOM still showed 19
   chips across 9 visible sections, because the repeats are not siblings of the
   first and not all in the containers guessed. So: hide EVERY chip in the section,
   then re-show exactly the one in the heading. That cannot miss a container. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-verdict-badge {
  display: none;
}
.brief-mode .atn-block[data-section]:not(.atn-expanded) > .atn-h3 .atn-verdict-badge {
  display: inline-block;
}

/* 1. Deep testimony inside a topic section. `.atn-body` is the whole of what a
      section says past its verdict — the engine emits "Configured to…",
      reception and house/lord/occupant lines as bare <p> inside it with no
      classes of their own, so it is hide-the-container or nothing. */
/* ⚠️ SCOPED TO [data-section] — TOPIC SECTIONS ONLY. This selector originally
   read `.atn-block:not(.atn-expanded)`, which matched EVERY block: Portrait,
   Final Judgement and the Modern Synthesis card are all .atn-block too, and
   their prose lives in .atn-body like everyone else's. So Brief silently ate
   three of the exact blocks the spec lists under KEEP, and the reading came
   out looking like the text had been lost rather than summarised. Only the
   twelve topic sections carry data-section; that attribute is the line
   between "reduce to a row" and "this IS the summary". */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-body,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-subtopic,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-para,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-confluence,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-signature,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-tension-echo,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-register--today,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-register--step,
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-register--source {
  display: none;
}
/* With the body gone, a bare "THE READING" label heads an apparently empty
   box. The verdict line it introduces is still there, but the label reads as
   a broken container — drop it and let the verdict stand as the row. */
.brief-mode .atn-block[data-section]:not(.atn-expanded) .atn-register--reading > .atn-reg-label {
  display: none;
}

/* 2. Whole blocks the spec puts in Full only. Death & Inheritance is excluded
      ENTIRELY in Brief — not even a chip row (spec §3, DECIDED).

      BF-04 — `--lifestage` (the Current Life Stage card: "Sun · ages 22–41")
      was in this list and is NOT Full-only. It is orientation-tier content —
      one line naming where the native currently stands on the Ages of Man
      spine — which is exactly what a summary view is for. It renders in both
      modes now. (It is also why every demo chart appeared to lack the card:
      lifeStageAgesCard returns null above age 120 and all demo nativities are
      19th-century, so verifying this needs a living-age chart.) */
.brief-mode .atn-block[data-section="death"],
.brief-mode .atn-block--classical,
.brief-mode .atn-block--modern,
.brief-mode .atn-block--synthesis,
/* BF-06 — the Repeated Pattern card ("Mercury returns through N of the
   readings below") is a pointer INTO the topic essays, and in Brief those
   essays are collapsed to verdict rows, so the card refers to depth the
   reader cannot see. Brief only. The PDF's P6 card is a different surface
   (lbl_repeated_pattern_title in pdfReportBuilder.js) and is untouched; its
   prose is NOT merged into the Portrait. */
.brief-mode .atn-block--pattern {
  display: none;
}

/* 3. The Ages of Man block (spec §3). The Years Ahead one-liners are a
      DIFFERENT block (--convergence) and stay.

      BF-03 — hide the WHOLE block, not its three body parts. Hiding only the
      parts left the <section> standing with nothing but its heading (the woven
      lines live inside an .atn-body wrapper that survived), so Brief showed a
      bare "The Ages of Man" title introducing an empty box. General rule: a
      section whose body is suppressed in Brief suppresses its header too. This
      was the only header-only block in Brief — verified by walking every
      .atn-block and comparing visible heading text against visible body text. */
.brief-mode .atn-block--lifearc { display: none; }

/* 3b. BF-07 — the Executive Summary's fact table in Brief.
      The grid (Shape / Temperament / Sect / Chart Lord / Ascendant / the two
      Lots / Gift / Tension / Support / Current Year) is a reference table, not
      a conclusion: it is the chart's working stated as data. In Brief it folds
      under the EXISTING methodology preference — the same switch that governs
      every other "show me the working" layer (Step + Source registers) — so
      Brief defaults to conclusions and one toggle reveals the whole apparatus.

      Scoped to the grid: the card's name, headline and THE FIGURE stay, since
      the figure panel is explicitly KEPT in Brief (spec §3).

      Full is untouched — the table always renders there, methodology or not.

      NOTE: the methodology pill itself is Full-only (rule 1 above), so the
      preference is set from Full and Brief honours it. Flagged in the ladder
      report; if Brief should be able to flip it, that pill needs to become
      visible in Brief and is a separate decision. */
.brief-mode.methodology-hidden .atn-block--exec .atn-exec-grid {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NRV — the human-first natal reading view
   ═══════════════════════════════════════════════════════════════════════════
   S0 verdict · S1 glance · S2 strain & support · S3 domains · S4 the year ·
   S5 the close · S6 method drawer. The order lives in the renderer; this only
   dresses it — and the Brief rules below are a VEIL over identical markup
   (BF-I1), never a second layout. */

/* S0 — the thesis. The one block that must land before anything is scrolled. */
.atn-nrv--verdict { border: 0; padding: 0 0 4px; }
.atn-nrv-thesis {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--color-fg, #F4E6C0);
}
.atn-nrv-thesis::first-line { font-variant-caps: normal; }

/* S1 — one strip, four facts. Wraps to two columns on a phone rather than
   stacking into a four-row list nobody reads. */
.atn-glance-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.22));
  border-bottom: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.22));
}
.atn-glance-cell { display: flex; flex-direction: column; min-width: 42%; flex: 1 1 42%; }
.atn-glance-k {
  font: 600 9.5px/1.3 "Cinzel", Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome-text-soft, rgba(245, 230, 192, 0.62));
}
.atn-glance-v { font-size: 0.95rem; color: var(--color-accent, #F0C040); }

/* S2 — strain, support, gift: three cells that read as one judgement. */
.atn-ss-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 10px; }
.atn-ss-cell {
  flex: 1 1 30%;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--chrome-border, rgba(240, 192, 64, 0.4));
  background: rgba(0, 0, 0, 0.18);
}
.atn-ss-cell--strain  { border-left-color: var(--color-danger, #d1495b); }
.atn-ss-cell--support { border-left-color: var(--color-success, #4c9a6a); }
.atn-ss-cell--gift    { border-left-color: var(--color-accent, #F0C040); }
.atn-ss-k {
  display: block;
  font: 600 9.5px/1.3 "Cinzel", Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome-text-soft, rgba(245, 230, 192, 0.62));
  margin-bottom: 2px;
}
.atn-ss-v { font-size: 0.92rem; line-height: 1.45; }

/* NRV-06 — THE FIGURE is a diagram, so it folds. A phone leads with words. */
.atn-figure-fold { margin: 10px 0 4px; }
.atn-figure-fold-head {
  cursor: pointer;
  font: 600 10px/1.4 "Cinzel", Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent, #F0C040);
  opacity: 0.85;
}

/* S3 — the domains. Group heading, then one card per topic. */
.atn-group { margin: 14px 0 6px; }
.atn-group-h {
  margin: 0 0 6px;
  font: 600 11px/1.4 "Cinzel", Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-text-soft, rgba(245, 230, 192, 0.7));
}
.atn-card {
  border: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.22));
  border-radius: 8px;
  margin: 0 0 8px;
  background: rgba(0, 0, 0, 0.14);
}
.atn-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.atn-card-head::-webkit-details-marker { display: none; }
.atn-card-name { flex: 1 1 auto; font-size: 0.97rem; color: var(--color-heading, #F4E6C0); }
.atn-card-cue::after {
  content: '＋';
  font-size: 0.8em;
  color: var(--color-accent, #F0C040);
  opacity: 0.75;
}
.atn-card[open] > .atn-card-head .atn-card-cue::after { content: '−'; }
.atn-card-verdict {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--chrome-text-soft, rgba(245, 230, 192, 0.8));
}
/* The expansion holds the section EXACTLY as it renders elsewhere; strip only
   the doubled chrome (its own border and its repeated title). */
.atn-card-body { padding: 0 12px 6px; }
.atn-card-body > .atn-block { border: 0; padding-top: 0; margin-top: 0; }
.atn-card[open] > .atn-card-verdict { opacity: 0.85; }
.atn-card--major { border-color: var(--color-accent, rgba(240, 192, 64, 0.5)); }

/* S4 / S6 — the year block and the method drawer. */
.atn-nrv--year > .atn-h3 { margin-bottom: 6px; }
.atn-nrv--method {
  margin-top: 18px;
  border-top: 1px solid var(--chrome-border, rgba(240, 192, 64, 0.28));
  padding-top: 10px;
}
.atn-method-head { cursor: pointer; list-style: none; }
.atn-method-head::-webkit-details-marker { display: none; }
.atn-method-title {
  font: 600 11px/1.5 "Cinzel", Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #F0C040);
}
.atn-method-title::after { content: ' ＋'; font-size: 0.85em; opacity: 0.8; }
.atn-nrv--method[open] .atn-method-title::after { content: ' −'; }
.atn-method-sub {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--chrome-text-soft, rgba(245, 230, 192, 0.6));
}
.atn-method-body { padding-top: 10px; }

/* NRV-08 — BRIEF. The drawer is hidden outright, the domain cards keep their
   collapsed heads, and S4 shows its first line only. Nothing here reveals
   anything: it can only hide what the renderer already built. */
.brief-mode .atn-nrv--method { display: none; }
.brief-mode .atn-nrv--year .atn-block[data-section] { display: none; }
.brief-mode .atn-nrv--year .atn-block--convergence { display: none; }
.brief-mode .atn-figure-fold { display: none; }
@media (max-width: 620px) {
  .atn-ss-cell { flex: 1 1 100%; }
  .atn-glance-cell { min-width: 46%; }
}

/* 4. A Brief row should read as tappable. The affordance is on the heading,
      which is where the tap target already is. */
.brief-mode .atn-block[data-section] > .atn-h3 { cursor: pointer; }
.brief-mode .atn-block[data-section]:not(.atn-expanded) > .atn-h3::after {
  content: '＋';
  margin-left: 8px;
  font-size: 0.75em;
  opacity: 0.5;
  vertical-align: middle;
}
.brief-mode .atn-block[data-section].atn-expanded > .atn-h3::after {
  content: '－';
  margin-left: 8px;
  font-size: 0.75em;
  opacity: 0.5;
  vertical-align: middle;
}

/* 5. The Brief | Full switch itself — a two-state segmented control sitting
      beside the methodology pill in .atn-pills. */
.atn-brief-switch {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 38%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.atn-brief-opt {
  font: 600 11px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 72%, transparent);
  cursor: pointer;
}
.atn-brief-opt[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  color: var(--color-accent-2, #FFD263);
}
/* SYN-B10/C5 — the synastry terminal closing cards: the classical Bond
   Judgement (gold) then the plain-language Modern Synthesis (violet, toggle-
   gated by the `modern-hidden` wrapper). Reuses .atn-modern-pill / .atn-modern-
   share from the natal modern card. */
.at-reading-pills { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-syn-bond-judgement .at-reading-h2 { color: var(--color-accent-2, #FFD263); }
.pa-syn-final { line-height: 1.62; }
.pa-syn-modern-bond {
  border-top: 2px solid color-mix(in srgb, #c8b0ff 28%, transparent);
  margin-top: 8px;
}
.pa-syn-modern-bond .at-reading-h2 {
  color: color-mix(in srgb, #c8b0ff 75%, var(--color-accent-2, #FFD263) 25%);
}
.pa-syn-modern-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pa-syn-modern-p { margin: 0 0 12px; line-height: 1.62; }
.pa-syn-modern-p:last-of-type { margin-bottom: 0; }
.pa-syn-modern-note {
  margin: 14px 0 0; padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, #c8b0ff 22%, transparent);
  font-size: 12px; font-style: italic; opacity: 0.7;
}
.modern-hidden .pa-syn-modern-bond { display: none !important; }

/* Collapses the doctrine + citation registers in Basic mode.
   The wrapper carries `methodology-hidden` whenever the preference is
   false (default). Reading + For You Today continue to render. Same
   rule applies to the synastry register family (added in MT4). */
.methodology-hidden .atn-register--step,
.methodology-hidden .atn-register--source,
.methodology-hidden .at-register--step,
.methodology-hidden .at-register--source {
  display: none !important;
}

/* NRF2/MT4 — synastry Step + Source registers above the body. The
   doctrinal Step is always-visible (until Basic mode hides it); the
   Source is a <details> so curious readers can expand it without
   forcing the citation on those who don't want it. */
.at-register {
  display: block;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 38%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent);
  border-radius: 0 8px 8px 0;
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, #f3e9c6 88%, transparent);
}
.at-register--step  { font-style: italic; }
.at-register--source { font-size: 12.5px; opacity: 0.85; }
.at-register--source summary {
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-style: normal;
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
}
.at-register--source p { margin: 8px 0 0; }
.at-register-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  margin-bottom: 4px;
}
.at-register p { margin: 0; }

/* Synastry methodology pill — same look as the natal pill but lives in
   the at-reading-titlebar. Inherits .atn-methodology-pill base styling
   so visual consistency is automatic. */
.at-reading-titlebar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.at-methodology-pill { margin-top: 2px; }
/* Tighten the spacing inside a section once the upper registers are
   gone — keeps the visual rhythm consistent in Basic mode. */
.methodology-hidden .atn-block > .atn-h3 + .atn-reg-body > * + * {
  margin-top: 10px;
}
.atn-block {
  margin: 0 0 28px;
  padding: 0;
}
.atn-block + .atn-block { border-top: 1px dashed color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent); padding-top: 22px; }

/* NRF/N4 — Executive Summary card at the top of the natal report. */
.atn-block--exec {
  margin: 0 0 22px;
  padding: 16px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 36%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 2%, transparent));
  border-left-width: 4px;
}
.atn-block--exec + .atn-block { border-top: 0; padding-top: 0; }
.atn-exec-header { margin-bottom: 12px; }
/* VIZ-06 — THE FIGURE graph, centred above the summary grid. The SVG carries a
   viewBox, so it scales down on narrow screens while capping at its natural size. */
.atn-exec-figure { margin: 4px 0 16px; text-align: center; }
.atn-exec-figure svg { width: 100%; max-width: 440px; height: auto; }
/* Round 3 S-9 — figure caption + color key sit directly beneath the figure. */
/* Was 12.5px Cormorant at 78% opacity — a light serif, small, and faded, on a
   dark card. It is the legend that explains the whole figure diagram, so it is
   the last thing that should be hard to read. Upright UI face, larger, full
   strength. Same call as the dial captions and the reading prose. */
.pa-figure-caption {
  margin: 8px auto 6px; max-width: 440px;
  font: 400 13.5px/1.6 "Inter", system-ui, -apple-system, sans-serif;
  color: var(--color-fg, #e8e9ec);
  text-align: left;
}
.pa-figure-key {
  list-style: none; padding: 0; margin: 6px auto 0; max-width: 440px;
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-start;
}
.pa-figure-key li {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1.3 "Inter", system-ui, sans-serif;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 88%, transparent);
}
.pa-figure-key-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.atn-exec-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-accent-2, #FFD263);
  margin-bottom: 2px;
}
.atn-exec-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 90%, transparent);
  letter-spacing: 0.02em;
}
.atn-exec-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  row-gap: 7px;
  column-gap: 12px;
}
.atn-exec-row { display: contents; }
.atn-exec-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 78%, transparent);
  padding-top: 2px;
}
.atn-exec-value {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--color-fg, #f0e5c2);
  line-height: 1.4;
}
.atn-exec-overall {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 92%, transparent);
}
@media (max-width: 380px) {
  .atn-exec-grid { grid-template-columns: 1fr; row-gap: 4px; }
  .atn-exec-row { display: block; margin-bottom: 8px; }
  .atn-exec-label { margin-bottom: 2px; }
}

/* NRF/N5 — Weight hierarchy.
   Engine tags each paragraph weight HIGH | MEDIUM | LOW; the renderer
   stamps the class on each <div class="atn-para"> wrapper. HIGH gets a
   left accent bar + slightly larger body; LOW reads quieter so the
   reader's eye lands on what actually carries the chart. */
.atn-para { margin: 0 0 10px; }
.atn-p--medium { /* default; no override */ }
.atn-p--high {
  font-size: 1.05em;
  padding: 4px 0 4px 12px;
  border-left: 3px solid color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent);
  margin-bottom: 12px;
}
.atn-p--low {
  font-size: 0.92em;
  opacity: 0.78;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Section badges — sit beside the section title to mark themes by
   how much HIGH-weight prose fired in that section. */
.atn-badge {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.atn-badge--major {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  color: var(--color-accent-2, #FFD263);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 50%, transparent);
}
.atn-badge--strong {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
}
/* NRF/N8 — five-band verdict badges. Wired into the Theatre natal
   reading's section header; legacy Report tab still uses pa-verdict-*
   classes. */
.atn-verdict-badge { font-size: 9px; letter-spacing: 0.10em; padding: 2px 7px; }
/* NCR-08 — two-axis verdict row (Marriage significator/house, Parents
   father/mother). Each axis shows its own labelled band so neither is
   hidden behind a collapsed headline. */
.atn-axis-row {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin: 2px 0 10px;
}
.atn-axis { display: inline-flex; align-items: center; gap: 6px; }
.atn-axis-name {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-accent-2, #FFD263) 70%, transparent);
}
.atn-verdict-fortified, .atn-verdict-flourishing {
  background: color-mix(in srgb, #f0c040 24%, transparent);
  color: #ffd270;
  border: 1px solid color-mix(in srgb, #f0c040 50%, transparent);
}
.atn-verdict-supported {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  color: var(--color-accent-2, #FFD263);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 32%, transparent);
}
.atn-verdict-mixed {
  background: rgba(160, 160, 160, 0.16);
  color: #c8c0a8;
  border: 1px solid rgba(160, 160, 160, 0.32);
}
.atn-verdict-impeded, .atn-verdict-difficulty {
  background: color-mix(in srgb, #8fb6e8 18%, transparent);
  color: #aac6e8;
  border: 1px solid color-mix(in srgb, #8fb6e8 36%, transparent);
}
.atn-verdict-afflicted {
  background: color-mix(in srgb, #d06868 22%, transparent);
  color: #ffb8a8;
  border: 1px solid color-mix(in srgb, #d06868 44%, transparent);
}
/* NCR-08d — explicit "not judged" exemption (Death). Muted/dim, deliberately
   colourless so it reads as "no verdict by design", never as a band. */
.atn-verdict-none {
  background: rgba(150, 150, 160, 0.10);
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 55%, transparent);
  border: 1px dashed rgba(170, 170, 180, 0.30);
  font-style: italic;
}

/* NRF/N7 — Dominant Facts card. Sits between Foundation and Soul. */
.atn-block--dominant {
  padding: 16px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 4%, transparent);
  margin-bottom: 24px;
}
.atn-dom-primer {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 88%, transparent);
}
.atn-dom-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) {
  .atn-dom-grid { grid-template-columns: 1fr 1fr; }
}
.atn-dom-item {
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 5%, transparent);
  border-radius: 4px;
}
.atn-dom-title {
  margin: 0 0 6px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 0.07em;
  color: var(--color-accent-2, #FFD263);
}
.atn-dom-body {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-fg, #f0e5c2);
}
.atn-h3 {
  margin: 0 0 10px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-2, #FFD263);
}
.atn-headline {
  margin: 0 0 6px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: #f3e9c6;
  letter-spacing: 0.02em;
}
.atn-verdict {
  margin: 0 0 10px;
  font-style: italic;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 85%, #f3e9c6 15%);
}
/* LEVER-1 — topic timing stamp (profection + directions), a quiet chronological
   line under the verdict; smaller + dimmer than the verdict so it reads as a
   margin note, not a judgement. */
.atn-timing {
  margin: -4px 0 11px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 45%, #cdbf93 55%);
}
/* LEVER-5 — confluence resolution: one italic line reconciling a topic's two
   diverging testimonies (significator vs house, dignity vs placement). */
.atn-confluence {
  margin: 0 0 11px;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: #e6dcc0;
}
/* LEVER-11 — life-stage weighting: foreground the current profected-year topic. */
.atn-lifestage {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #f2e9cc;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  border-left: 3px solid var(--color-accent-2, #FFD263);
  border-radius: 0 6px 6px 0;
}
/* LEVER-10 — sensitivity disclosure (which judgments hang on the birth time). */
.atn-sensitivity {
  margin: 8px 0 4px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: #d4c9a8;
  border: 1px dashed color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  border-radius: 4px;
}
/* LEVER-4 — opening Portrait: the flowing lens that leads the reading. */
.atn-block--portrait {
  margin: 0 0 18px;
  padding: 14px 16px 4px;
  border-left: 3px solid var(--color-accent, #FFB836);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent);
  border-radius: 2px;
}
.atn-portrait-h {
  margin: 0 0 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-accent, #FFB836);
}
.atn-portrait-p {
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.62;
  color: #efe7d0;
}

/* UNKNOWN-TIME — the provisional caveat banner that leads the reading when the
   birth time is not recorded. Reads as a muted note, distinct from the Portrait. */
.atn-block--timenote {
  margin: 0 0 16px;
  padding: 12px 16px 4px;
  border-left: 3px solid color-mix(in srgb, var(--color-fg, #d9c8a0) 45%, transparent);
  background: color-mix(in srgb, var(--color-fg, #d9c8a0) 4%, transparent);
  border-radius: 2px;
}
.atn-timenote-h {
  margin: 0 0 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-fg, #d9c8a0) 70%, transparent);
}
.atn-timenote-p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.6;
  font-style: italic;
  color: color-mix(in srgb, var(--color-fg, #efe7d0) 82%, transparent);
}

/* "The Shape of the Figure" — the compact glance panel under the wheel. */
.fig-shape-panel {
  margin: 0 0 18px;
  padding: 12px 16px 13px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 7%, rgba(10, 14, 32, 0.5));
  border-radius: 8px;
}
.fig-shape-title {
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--color-accent, #FFB836);
  opacity: 0.85;
  margin-bottom: 4px;
}
.fig-shape-head {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent, #FFD263);
  margin-bottom: 10px;
}
.fig-shape-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 5px;
  align-items: baseline;
  max-width: 420px;
  margin: 0 auto;
}
.fig-shape-row { display: contents; }
.fig-shape-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa1b8;
  white-space: nowrap;
}
.fig-shape-value {
  font-size: 14px;
  color: #efe7d0;
  font-weight: 600;
}
@media (max-width: 560px) {
  .fig-shape-grid { grid-template-columns: 1fr; row-gap: 2px; }
  .fig-shape-row { display: block; margin-bottom: 6px; }
  .fig-shape-label { display: block; font-size: 10.5px; }
}
/* LEVER-2 — signature carry: the chart's dominant cast named where it recurs.
   A left rule marks it as a cross-reference back to the whole figure. */
.atn-signature {
  margin: 0 0 11px;
  padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 50%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: #e7ddc1;
}
/* LEVER-8 (ADDENDUM) — the Ages of Man block (free primer + paid woven). */
.atn-block--lifearc {
  margin: 0 0 18px;
  padding: 14px 16px 6px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  border-radius: 4px;
}
.atn-lifearc-source {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #c9bf9f;
}
.atn-lifearc-primer {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e7ddc1;
}
.atn-lifearc-primer li { margin: 0 0 4px; }
.atn-lifearc-line {
  margin: 0 0 8px;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: #ece2c4;
}
/* LEVER-9 (ADDENDUM) — the convergence forecast block (paid synthesis). */
.atn-block--convergence {
  margin: 0 0 18px;
  padding: 14px 16px 6px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 4%, transparent);
}
.atn-convergence-intro {
  margin: 0 0 10px;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: #d9cfa8;
}
.atn-convergence-line {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.55;
  color: #ece2c4;
}
/* LEVER-6 — central-tension refrain: the one named tension surfacing again.
   A warmer dashed rule distinguishes it from the signature cross-reference. */
.atn-tension-echo {
  margin: 0 0 11px;
  padding-left: 11px;
  border-left: 2px dashed color-mix(in srgb, #E0726A 60%, transparent);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: #ecd9cf;
}
.atn-body p {
  margin: 0 0 11px;
  font-size: 16px;
  line-height: 1.55;
  color: #efe5c2;
}
/* C11 — first-use term gloss. A quiet dotted underline marks a tappable
   definition; it never recolours the prose so the reading stays calm. */
.atn-gloss {
  cursor: help;
  /* IT-1 — parity with .info-term: clearly visible link affordance. */
  text-decoration: underline dotted color-mix(in srgb, var(--color-accent, #FFB836) 85%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  -webkit-text-decoration: underline dotted color-mix(in srgb, var(--color-accent, #FFB836) 85%, transparent);
}
.atn-gloss:hover { text-decoration-color: var(--color-accent, #FFB836); }
.atn-block--classical .atn-h3 { color: var(--color-accent-2, #FFD263); }
/* ── NCR-06: whole-chart verdict line (top) + synthesis rollup (bottom) ── */
/* Whole-chart verdict banner — a standalone full-width block just under the
   header (no longer crammed into the title). Logical border so it flips for
   right-to-left scripts. */
.atn-closing-line {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  padding: 11px 15px;
  border-inline-start: 3px solid color-mix(in srgb, var(--color-accent, #FFB836) 75%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 7%, transparent);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 80%, #f3e9c6 20%);
  column-span: all;
}
[dir="rtl"] .atn-closing-line { border-radius: 10px 0 0 10px; }
.atn-block--synthesis .atn-h3 { color: var(--color-accent-2, #FFD263); }
/* ── NCR-07: nested house-topic sub-blocks (Marriage H7, Parents IV/X,
   Death H8, Livelihood H2) rendered inline under their section body. ── */
.atn-subtopic {
  margin: 14px 0 0;
  margin-inline-start: 12px;
  padding: 10px 0 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
}
.atn-h4 {
  margin: 0 0 6px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 80%, #f3e9c6 20%);
}
/* ── NCR-05: weight-driven prominence (classical assembly paragraphs).
   HIGH testimony reads dominant (full-block leading treatment with a gold
   spine), LOW reads condensed; MEDIUM is the unmarked default. Section
   order is untouched — this is intra-panel emphasis only. ─────────────── */
.atn-para { margin: 0 0 12px; }
.atn-para.atn-w-high {
  padding: 10px 14px;
  border-left: 3px solid color-mix(in srgb, var(--color-accent, #FFB836) 75%, transparent);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 7%, transparent);
  border-radius: 0 10px 10px 0;
}
.atn-para.atn-w-high p {
  font-size: 17px;
  line-height: 1.6;
  color: #f6eccb;
}
.atn-para.atn-w-low p {
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in srgb, #efe5c2 72%, transparent);
}
.atn-para p:last-child { margin-bottom: 0; }

/* ── Four-register reading: THE STEP / THE SOURCE / THE READING /
   FOR YOU TODAY woven under each Tetrabiblos topic. Each is a labelled
   voice; empty registers are omitted by the renderer. ────────────────── */
.atn-register { margin: 0 0 14px; }
.atn-reg-label {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 70%, #f3e9c6 30%);
}
.atn-reg-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: #efe5c2; }
.atn-reg-body p:last-child { margin-bottom: 0; }

/* THE STEP — beginner primer: softer, set apart as an introduction. */
.atn-register--step {
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 5%, transparent);
}
.atn-register--step .atn-reg-body p {
  font-style: italic; font-size: 15px;
  color: color-mix(in srgb, #f3e9c6 82%, transparent);
}

/* THE SOURCE — the classical citation, collapsed by default to stay light. */
details.atn-register--source { margin: 0 0 14px; }
details.atn-register--source > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
details.atn-register--source > summary::-webkit-details-marker { display: none; }
.atn-cite-src { font-size: 12px; font-style: italic; color: color-mix(in srgb, #f3e9c6 60%, transparent); }
details.atn-register--source .atn-reg-body {
  margin-top: 8px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
}
details.atn-register--source .atn-reg-body p {
  font-size: 14.5px; line-height: 1.5;
  color: color-mix(in srgb, #efe5c2 85%, transparent);
}

/* THE READING — the main chart-specific classical voice (no extra chrome). */
.atn-register--reading { margin-bottom: 16px; }

/* FOR YOU TODAY — the modern psyche voice, set apart with a cool tint. */
.atn-register--today {
  padding: 12px 14px;
  border-radius: 10px;
  border-inline-start: 3px solid color-mix(in srgb, #c8b0ff 55%, transparent);
  background: color-mix(in srgb, #c8b0ff 6%, transparent);
}
.atn-register--today .atn-reg-label { color: color-mix(in srgb, #c8b0ff 78%, #f3e9c6 22%); }

.atn-block--modern .atn-h3 { color: color-mix(in srgb, #c8b0ff 75%, var(--color-accent-2, #FFD263) 25%); }
.atn-block--final {
  margin-top: 36px;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(28, 18, 50, 0.45);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
}
.atn-block--final .atn-h3 { color: var(--color-accent-2, #FFD263); }
.atn-empty {
  padding: 60px 24px;
  text-align: center;
  font-style: italic;
  color: color-mix(in srgb, #f3e9c6 70%, transparent);
}

/* ── HOME glowing mode cards + sky-launch buttons ───────────────────────
   The three pillar cards (Astronomy / Astrology / Synastry) + the two
   chart-in-the-sky launches, restyled as luminous glass cards: gold rim,
   breathing outer halo, icon glow. The base .today-mode-card layout
   rules still apply; this layer adds the glow treatment. */
.home-modes--glow .today-mode-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(40, 30, 70, 0.50) 0%,
      rgba(10, 13, 28, 0.72) 70%);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 45%, transparent),
    inset 0 1px 0 rgba(255, 232, 168, 0.20);
  animation: home-card-breathe 3.2s ease-in-out infinite;
  transition: transform 0.18s cubic-bezier(.2,.8,.4,1), box-shadow 0.2s ease-out;
}
.home-modes--glow .today-mode-card:nth-child(odd)  { animation-delay: 0.6s; }
.home-modes--glow .today-mode-card:hover,
.home-modes--glow .today-mode-card:active {
  transform: translateY(-2px);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 85%, transparent),
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 232, 168, 0.35);
  animation-play-state: paused;
}
.home-modes--glow .today-mode-icon {
  color: var(--color-accent-2, #FFD263);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 90%, transparent));
}
@keyframes home-card-breathe {
  0%, 100% {
    box-shadow:
      0 0 12px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 38%, transparent),
      inset 0 1px 0 rgba(255, 232, 168, 0.20);
  }
  50% {
    box-shadow:
      0 0 24px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 68%, transparent),
      inset 0 1px 0 rgba(255, 232, 168, 0.28);
  }
}
/* Sky launches — wider luminous pills beneath the three cards; the cool
   star-blue tint differentiates "step into the sky" from the gold mode
   cards while staying in the night-stage palette. */
.home-sky-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
/* HG-18 — Explore category groups: a primary mode card with the immersive
   "in the sky (AR)" view nested under it as a secondary affordance. */
.home-explore-cat { display: flex; flex-direction: column; gap: 6px; }
.home-sky-subview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 0 4px 18px;
  padding: 5px 12px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--color-accent-cool, #7FB0FF) 40%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--color-accent-cool, #7FB0FF) 85%, var(--color-fg, #e8e9ec));
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 12.5px;
  cursor: pointer;
}
.home-sky-subview:hover { color: var(--color-fg, #e8e9ec); }
.home-sky-subview-icon { display: inline-flex; }
.home-sky-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid rgba(120, 190, 255, 0.45);
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(18, 40, 78, 0.55) 0%,
      rgba(8, 13, 30, 0.78) 70%);
  color: #cfe4ff;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(96, 170, 255, 0.30),
    inset 0 1px 0 rgba(190, 225, 255, 0.18);
  animation: home-sky-breathe 3.2s ease-in-out infinite;
  animation-delay: 1.1s;
  transition: transform 0.18s cubic-bezier(.2,.8,.4,1), box-shadow 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.home-sky-btn:hover,
.home-sky-btn:active {
  transform: translateY(-2px);
  box-shadow:
    0 0 28px rgba(96, 170, 255, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(190, 225, 255, 0.30);
  animation-play-state: paused;
}
.home-sky-btn-icon {
  display: inline-flex;
  color: #9fd0ff;
  filter: drop-shadow(0 0 8px rgba(120, 190, 255, 0.75));
}
.home-sky-btn-label { line-height: 1.2; }
@keyframes home-sky-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(96, 170, 255, 0.26), inset 0 1px 0 rgba(190, 225, 255, 0.18); }
  50%      { box-shadow: 0 0 24px rgba(96, 170, 255, 0.50), inset 0 1px 0 rgba(190, 225, 255, 0.26); }
}
@media (prefers-reduced-motion: reduce) {
  .home-modes--glow .today-mode-card,
  .home-sky-btn { animation: none; }
}

/* ── "Begin a Sample Classical Reading" card at the foot of HOME.
   Matches the gold doctrine-card family (.today-mode-card / pillar
   cards) so it reads as part of the set rather than a violet one-off:
   --color-surface field, --color-accent gold rim, circular gold glyph,
   small-caps Cinzel title, gold play CTA. ──────────────────────────── */
.home-sample-reading {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 18px 0 4px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  background:
    radial-gradient(130% 120% at 12% 0%,
      color-mix(in srgb, var(--color-surface, #0F1432) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-surface, #0F1432) 94%, transparent) 70%);
  color: var(--color-accent-2, #FFD263);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.40), inset 0 1px 0 color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1), border-color 0.14s, box-shadow 0.18s ease-out;
}
.home-sample-reading:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent, #FFB836);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5),
              0 0 24px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 50%, transparent);
}
.home-sample-reading:active { transform: scale(0.99); }
.home-sample-reading__glyph {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--color-accent-2, #FFD263);
  background: radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--color-accent, #FFB836) 24%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  filter: drop-shadow(0 0 6px var(--color-accent-glow, rgba(255,184,54,0.5)));
}
.home-sample-reading__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-sample-reading__title {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 15px; font-weight: 600; letter-spacing: 0.05em; font-variant-caps: small-caps;
  color: var(--color-accent-2, #FFD263);
}
.home-sample-reading__sub {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 12.5px; line-height: 1.3; color: color-mix(in srgb, var(--color-accent-2, #FFD263) 70%, transparent);
}
.home-sample-reading__cta {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  color: var(--color-accent-2, #FFD263); font-size: 13px;
}

/* AH-02 — the AI FRONT-DOOR at the TOP of home. It reuses the
   .home-sample-reading card family wholesale (both classes sit on the
   element), so it reads as part of the gold doctrine-card set; only its
   spacing and rim emphasis differ, because it leads the flow. */
.home-ai-door {
  margin: 10px 0 14px;
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 46%, transparent);
}
/* The single Ibn al-Shatir credit, under the ephemeris picker in Settings.
   Quieter than .settings-help (it is provenance, not instruction) but never
   faint: currentColor so it holds up in both themes. */
.settings-attrib {
  margin: 10px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: inherit;
  opacity: 0.72;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding-top: 9px;
}
.settings-attrib em { font-style: italic; }

/* HK-01 — the opening reading's seven blocks, as sections.
   Quiet headings: the blocks are structural. The old reading was one wall of
   prose on a phone (HK-28), and the "lead-ins" it used ("The frame.")
   were headings pretending to be sentences. These are real ones. */
.ai-block + .ai-block { margin-top: 14px; }
.ai-block-h {
  margin: 0 0 4px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: inherit;         /* never an accent var — see .ai-chart-tab */
  opacity: 0.6;
}
/* Block one IS the headline (HK-02): set it up, not buried in body copy. */
.ai-block--line p {
  font-size: 1.06em;
  line-height: 1.45;
  font-weight: 600;
}
/* The receipt is evidence — set it apart from the prose it backs. */
.ai-block--receipt {
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  opacity: 0.92;
}
.ai-block--cta {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-style: italic;
  opacity: 0.85;
}

/* AH-02 — the same offer on the chart-less hero, where the door cannot reach. */
.today-empty-ai {
  margin: 14px auto 0;
  max-width: 34ch;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  /* currentColor, not an accent var: the hero renders in both themes and a
     pinned hex reads as invisible in one of them (the .pa-tour-source lesson). */
  color: inherit;
  opacity: 0.78;
}

/* ── Eclipse long-press info card ─────────────────────────────────────── */
.eclipse-info-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(40, 30, 70, 0.92) 0%,
      rgba(10, 13, 28, 0.96) 80%);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  border-radius: 20px;
  padding: 24px 24px 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  text-align: center;
  color: var(--color-fg, #F0E5C2);
}
.eclipse-info-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-accent-2, #FFD263);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.eclipse-info-eyebrow {
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 90%, transparent);
  margin-bottom: 6px;
}
.eclipse-info-title {
  margin: 0 0 8px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-fg, #F0E5C2);
  text-shadow: 0 0 20px rgba(255, 236, 180, 0.22);
}
.eclipse-info-when {
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  margin-bottom: 18px;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 86%, transparent);
}
.eclipse-info-days {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-accent-2, #FFD263);
}
.eclipse-info-classical-h {
  margin-top: 14px;
  margin-bottom: 6px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 80%, transparent);
}
.eclipse-info-classical-body {
  margin: 0;
  font-family: var(--type-body, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-fg, #F0E5C2);
}
.eclipse-info-detail {
  margin-top: 12px;
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 70%, transparent);
}
.eclipse-info-empty {
  margin: 0;
  font-family: var(--type-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 75%, transparent);
}

/* ── Screen-sweep transitions (three-screen redesign) ────────────────────
   Reverted M11's 3D cube transform: it was breaking the natal-wheel
   canvas (the user saw rainbow-striped distortion after rapid clicks)
   and leaving the screen-stack in a half-state where HOME taps wouldn't
   register. Back to a simple cross-fade with the gear-frame ornament
   still firing as a visual flourish — safer + reliable, can revisit
   the cube once we have a way to suspend the wheel render during the
   rotation. */
@keyframes screen-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes screen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screen--leave-left,
.screen--leave-right {
  animation: screen-fade-out 320ms cubic-bezier(0.4, 0.0, 0.6, 1) both;
  will-change: opacity;
}
.screen--enter-left,
.screen--enter-right {
  animation: screen-fade-in 320ms cubic-bezier(0.4, 0.0, 0.6, 1) both;
  will-change: opacity;
}
/* AI Astrologer (vertical) — slides UP on enter, DOWN on leave. #ai-astrologer
   is DOM-only chat with no live canvas, so a translateY slide is safe (unlike
   the reverted 3D transform over the natal-wheel canvas). */
@keyframes screen-slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes screen-slide-down {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen--enter-up {
  animation: screen-slide-up 320ms cubic-bezier(0.4, 0.0, 0.6, 1) both;
  will-change: opacity, transform;
}
.screen--enter-down {
  animation: screen-slide-down 320ms cubic-bezier(0.4, 0.0, 0.6, 1) both;
  will-change: opacity, transform;
}
/* Reduced-motion users get a quick fade instead. */
@media (prefers-reduced-motion: reduce) {
  .screen--leave-left, .screen--leave-right,
  .screen--enter-left, .screen--enter-right,
  .screen--enter-up, .screen--enter-down {
    animation-name: screen-sweep-fade;
    animation-duration: 200ms;
  }
  @keyframes screen-sweep-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@media (max-width: 480px) {
  #bottom-nav {
    gap: 2px;
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .bn-tab { padding: 6px 3px; min-height: 46px; }
  .bn-tab-glyph { font-size: 18px; }
  .bn-tab-label { font-size: 9px; }
  .bn-tab--accent .bn-tab-glyph { font-size: 22px; }
  .bn-tab--accent::before { width: 32px; height: 32px; }
}
@media (max-width: 380px) {
  .bn-tab-label { display: none; }
  .bn-tab { padding: 10px 3px; min-height: 52px; }
  .bn-tab-glyph { font-size: 20px; }
  .bn-tab--accent .bn-tab-label { display: inline-block; font-size: 9px; }
}

/* ── Radial mode wheel (Phase 2) ────────────────────────────────────────
   Long-press on #bn-theatre-fab reveals an 8-spoke menu that exposes
   every primary surface. Sits at z=9850 so it's above the bottom nav
   (9800) and the FAB it anchors to. Spokes positioned via translate
   from the wheel root, which is positioned at the FAB's center. The
   wheel is full-screen sized but pointer-events:none when closed and
   only the spokes themselves catch events when open. */
#modes-wheel {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 9850;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
#modes-wheel.is-open {
  opacity: 1;
}
/* Backdrop dim — radial gradient from the FAB outward so the spokes
   pop without obscuring the surface they navigate from. --mw-cx /
   --mw-cy are published by modesWheel.js on open + resize. */
#modes-wheel.is-open::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at var(--mw-cx, 50%) var(--mw-cy, 90%),
    rgba(0, 0, 0, 0.0) 0px,
    rgba(0, 0, 0, 0.0) 80px,
    rgba(0, 0, 0, 0.65) 280px,
    rgba(0, 0, 0, 0.78) 480px
  );
  pointer-events: auto;
}
.mw-spoke {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #1a0f30 0%, #0a0618 100%);
  color: #e8c97a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow:
    0 0 12px 2px rgba(150, 110, 220, 0.35),
    0 4px 10px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(232, 201, 126, 0.4);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1), box-shadow 0.14s ease-out, background 0.14s ease-out;
  pointer-events: auto;
}
#modes-wheel.is-open .mw-spoke {
  /* Slight scale + lift on open for a "blooming" effect. */
  animation: mw-spoke-bloom 0.22s cubic-bezier(.2,.8,.4,1) both;
}
@keyframes mw-spoke-bloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mw-spoke.is-hover,
.mw-spoke:hover {
  background: radial-gradient(circle, #3a2670 0%, #1a0f30 100%);
  color: #ffe8a8;
  box-shadow:
    0 0 18px 4px rgba(180, 140, 240, 0.6),
    0 6px 14px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 232, 168, 0.8);
}
.mw-spoke-glyph { line-height: 0; }
/* Glyphs are inline SVG (navIcon/IC) — size the vector, not a font. Stroke is
   currentColor so it inherits the spoke's gold (and brighter gold on hover). */
.mw-spoke-glyph svg { width: 22px; height: 22px; display: block; }
.mw-spoke-label {
  font-size: 7.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(232, 201, 126, 0.85);
  font-weight: 600;
}

@media (max-width: 480px) {
  .mw-spoke { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
  .mw-spoke-glyph svg { width: 20px; height: 20px; }
  .mw-spoke-label { font-size: 7px; }
}

/* Clock-driven label inside the eclipse wheel tab — replaces the
   stripped speed-slider with a short notice. */
.ew-controls--clock-driven {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-top: 6px;
  font: 11px/1.4 'Cinzel', Georgia, serif;
  color: #8890b8; letter-spacing: 0.08em;
  border: 1px dashed rgba(136,144,184,0.35);
  border-radius: 4px;
}
.ew-controls--clock-driven .ew-ctrl-lbl { color: #b5a8d8; text-transform: uppercase; }
.ew-controls--clock-driven .ew-ctrl-driven { font-style: italic; }

/* References popover — opens below the 📚 header button. Holds three
   entries (Live Ephemeris / Ephemeris Reference / Orrery Explained)
   that used to be three separate crowded header buttons. */
.header-action-btn-refs { font-size: 17px; }
#refs-popover {
  position: fixed;
  z-index: 9750;
  min-width: 260px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  background: rgba(10, 14, 22, 0.96);
  border: 1px solid rgba(200, 150, 50, 0.55);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.refs-popover__title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #d4b878);
  padding: 6px 10px 4px;
  font-weight: 600;
}
.refs-popover__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin: 1px 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.refs-popover__row:hover,
.refs-popover__row:focus-visible {
  background: rgba(212, 184, 120, 0.10);
  outline: none;
}
.refs-popover__glyph {
  font-size: 22px;
  color: var(--accent, #d4b878);
  width: 28px;
  flex-shrink: 0;
  line-height: 1.0;
  padding-top: 1px;
}
.refs-popover__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.refs-popover__name {
  font-size: 13px;
  font-weight: 600;
  color: #e8e0c8;
  letter-spacing: 0.02em;
}
.refs-popover__desc {
  font-size: 11px;
  color: rgba(230, 226, 211, 0.72);
  line-height: 1.45;
}

:root {
  --bg:     #0c0906;
  --panel:  #1e1408;
  --fg:     #f2e6b8;
  --muted:  #9a8258;
  --accent: #d4a020;
  --border: #6a3e1c;
  --row:    #2c1c0a;
  /* Greek theme extras */
  --gold:        #e8c040;
  --terracotta:  #8b3a18;
  --marble:      #d8c8a8;
  --stone-mid:   #4a3418;
  /* UI zoom factor: 1.0 at a 1920×1080 viewport, scales by the
     more-constrained of (width / 1920) and (height / 1080) so a tall
     narrow window doesn't oversize the bottom bar horizontally and a
     short wide window doesn't push the bottom bar off-screen. The
     clamp band runs from 0.5 (phones / very small windows) up to 1.6
     (4K monitors). The browser's zoom level multiplies on top
     automatically. */
  --ui-zoom: clamp(0.7, min(calc(100vw / 1440), calc(100vh / 810)), 1.8);
}

/* ════════════════════════════════════════════════════════════════════
   Theme token bridge — maps the design-system `--color-*` tokens from
   css/themes/<theme>.css onto the legacy var names used throughout this
   stylesheet (--bg / --panel / --fg / --muted / --accent / --border /
   --row / --gold / --terracotta / --marble / --stone-mid). Selecting a
   theme by toggling the class on <html> updates these in one place, so
   every existing `var(--accent)` etc. picks up the new palette without
   further edits.

   IMPORTANT: only chrome variables are bridged. We deliberately do NOT
   touch any property that affects the WebGL canvas, the #view torch-
   breathing gradient, or the heavenly-light / cloud overlay. The 3D
   render must look pixel-identical regardless of theme.
   ════════════════════════════════════════════════════════════════════ */
html.theme-codex-vesper,
html.theme-light-mode {
  --bg:         var(--color-bg);
  --panel:      var(--color-surface);
  --row:        var(--color-surface-raised);
  --fg:         var(--color-fg);
  --muted:      var(--color-dim);
  --accent:     var(--color-accent);
  --border:     var(--color-ornament-soft);
  --gold:       var(--color-accent-2);
  --terracotta: var(--color-danger);
  --marble:     var(--color-fg);
  --stone-mid:  var(--color-accent-soft);

  /* Surface chrome variants the UI consumes for backdrops + cards +
     pill bars.  Single-source-of-truth so per-theme overrides flow to
     every panel automatically. */
  --chrome-backdrop:    color-mix(in srgb, var(--color-bg) 70%, transparent);
  --chrome-card-bg:     linear-gradient(180deg,
                          var(--color-surface-raised) 0%,
                          var(--color-surface) 100%);
  --chrome-rod-bg:      linear-gradient(180deg,
                          var(--color-surface) 0%,
                          var(--color-bg) 100%);
  --chrome-bar-bg:      linear-gradient(180deg,
                          color-mix(in srgb, var(--color-bg) 92%, transparent) 0%,
                          color-mix(in srgb, var(--color-bg) 97%, transparent) 100%);
  --chrome-border:      color-mix(in srgb, var(--color-accent) 55%, transparent);
  --chrome-border-soft: color-mix(in srgb, var(--color-accent) 25%, transparent);
  --chrome-text-soft:   color-mix(in srgb, var(--color-fg) 78%, transparent);
  --chrome-text-dim:    color-mix(in srgb, var(--color-fg) 60%, transparent);
  --chrome-pill-pressed-bg: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --chrome-pill-pressed-ring: color-mix(in srgb, var(--color-accent-2) 55%, transparent);
  --chrome-glow:        var(--color-accent-glow);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, sans-serif;
  height: 100%;
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-areas: "header" "view" "desc";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

header { grid-area: header; padding: 3px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; zoom: var(--ui-zoom); min-height: 26px; }
/* ── BOOT-FLASH FIX ──────────────────────────────────────────────────────────
   `#app > header` is the ASTRONOMY (orrery) view's OWN chrome — the icon
   toolbar + About/Legend. On HOME and ASTROLOGY it is covered by their
   full-screen overlays, so it was never gated; but during a SLOW boot, before
   any overlay or view mounts, the bare header flashed on top of a blank screen
   (the stale layer users reported). Gate it: INVISIBLE unless an astronomy
   surface is actually active. `visibility` (not `display`) so the header keeps
   its box and main.js can still measure it and inject the toolbar. This is the
   only surface that shows the bare header, so nothing else regresses. */
#app > header { visibility: hidden; }
/* ONLY `astronomy-on` — it is the reliable astronomy-screen lifecycle flag
   (added on show, removed on leave, cleared for every non-astronomy view in
   main.js). `orrery-active` is NOT reliable here: it LINGERS on HOME after a
   visit to astronomy, which would keep the bare header visible on HOME. */
body.astronomy-on > #app > header { visibility: visible; }
header h1 { font-size: 11px; margin: 0; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header .sub { display: none; }
header .sub-note { display: none; }
header .info-box { position: relative; margin-left: auto; flex-shrink: 0; }
header .info-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; font: inherit; cursor: pointer; font-size: 12px;
}
header .info-btn:hover { border-color: var(--accent); color: var(--accent); }
header .info-popup {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 620px; max-width: 94vw;
  max-height: 70vh; overflow-y: auto;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 18px 22px; font-size: 19px; line-height: 1.55;
  font-style: italic; color: var(--muted);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 50;
}
header .info-popup p { margin: 0 0 8px; }
header .info-popup p:last-child { margin-bottom: 0; }
header .info-box > .info-btn + .info-btn { margin-left: 6px; }
header .info-popup.legend-popup {
  width: 1040px; max-width: 96vw;
  max-height: 86vh; overflow-y: auto;
  font-style: normal; color: var(--fg);
  font-size: 19px; line-height: 1.6;
}
header .info-popup.legend-popup h1 { font-size: 30px; margin: 0 0 14px; color: var(--accent); }
header .info-popup.legend-popup h2 { font-size: 24px; margin: 24px 0 12px; color: var(--accent); }
header .info-popup.legend-popup h3 { font-size: 20px; margin: 18px 0 10px; }
header .info-popup.legend-popup p { margin: 0 0 12px; }
header .info-popup.legend-popup hr {
  border: 0; border-top: 1px solid var(--border); margin: 20px 0;
}
header .info-popup.legend-popup ul {
  margin: 8px 0 14px; padding-left: 28px;
}
header .info-popup.legend-popup li { margin: 5px 0; }
header .info-popup.legend-popup table {
  width: 100%; border-collapse: collapse; margin: 12px 0;
  font-size: 17px;
}
header .info-popup.legend-popup th,
header .info-popup.legend-popup td {
  border: 1px solid var(--border); padding: 8px 12px; text-align: left;
  vertical-align: top;
}
header .info-popup.legend-popup th { background: var(--row); }
header .info-popup.legend-popup code {
  background: var(--row); padding: 2px 7px; border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace; font-size: 16px;
}
header .info-popup.legend-popup a { color: var(--accent); }

#view { grid-area: view; position: relative; min-height: 0; overflow: hidden;
  /* CSS fallback — also visible during WebGL init. Matches the 3D torchBg texture. */
  background: radial-gradient(ellipse at 50% 68%,
    #070402 0%,
    #140a04 18%,
    #2e1408 38%,
    #4a2010 58%,
    #5e2a0c 74%,
    #4a1e08 86%,
    #321004 94%,
    #1a0802 100%
  );
  background-size: 130% 130%;
  background-position: 50% 65%;
  animation: torch-breathe 11s ease-in-out infinite;
}

/* #view holds the bare 3D celestial scene + the god-mode fabs — the legacy
   background that sits behind every redesign screen (HOME / Astrology /
   Astronomy, all z 9000+ overlays). It is shown ONLY in god / third-person
   astronomy mode. Keeping it visibility:hidden otherwise (a) stops its warm
   torch-gradient + the WebGL canvas from flashing behind a screen during the
   sweep transition (the "astronomy flashes when I hit HOME" bug), and (b)
   hides the #god-fabs, which are children of #view, on every non-god screen.
   visibility (not display) is used so the grid area + WebGL viewport sizing
   stay correct for an instant repaint when god mode opens. */
#view { visibility: hidden; }
body.god-view #view { visibility: visible; }

/* ── TPS: redesigned third-person ("Overview" god-view) chrome ───────────
   Default-off behind localStorage['ptol:new-sky-chrome'] (js/ui/skyChrome.js).
   Scoped to GOD-VIEW AND :not(.fp-mode): first-person ALSO sets body.god-view
   (__ptolShowFirstPersonRendered reveals #view via god-view) plus body.fp-mode,
   so the :not(.fp-mode) guard keeps the new chrome entirely OFF first-person.
   When active, the legacy planetarium chrome is hidden and the consolidated
   #sky-chrome host shows over the sphere. */
#sky-chrome { display: none; }
body.new-sky-chrome.god-view:not(.fp-mode) #sky-chrome {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 30;            /* over the canvas; sheets/popovers set their own above */
  pointer-events: none;   /* orbit-drag passes through; controls re-enable below */
}
body.new-sky-chrome.god-view:not(.fp-mode) #sky-chrome > * { pointer-events: auto; }
/* Hide the legacy god-view chrome when the new chrome owns the surface. */
/* CS-03 — the app title <header> (grid-area header) was NOT hidden, so the
   "Classical Astronomy & Astrology" strip still clipped over the immersive
   third-person scene. Hide it like the rest of the legacy chrome (first-person
   already runs full-bleed; :not(.fp-mode) keeps this to the third-person view). */
body.new-sky-chrome.god-view:not(.fp-mode) header,
body.new-sky-chrome.god-view:not(.fp-mode) #god-fabs,
body.new-sky-chrome.god-view:not(.fp-mode) #info-panels-wrap,
/* CS-12 — single-card rule: the new chrome's .sky-body-card is the one body
   panel; suppress the two legacy cards (#body-info-card built onto <body>,
   #tracking-info-popup a #view child) so they never stack a second/third strip. */
body.new-sky-chrome.god-view:not(.fp-mode) #body-info-card,
body.new-sky-chrome.god-view:not(.fp-mode) #tracking-info-popup,
body.new-sky-chrome.god-view:not(.fp-mode) #tab-popups { display: none !important; }

/* Z2 — the shared time bar, bottom-docked above the bottom nav (--mode-bar-h),
   centred and width-capped, matching the first-person dock idiom. */
.sky-daybar-host {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + var(--mode-bar-h, 0px));
  width: min(560px, 94vw);
  z-index: 30;
  pointer-events: auto;
}

/* Z5 — follow-a-body track bar: the god-view mirror of the first-person body
   picker, docked at top-centre (clear of the tall bottom day-bar). Tap a body to
   watch it; tap the lit body again to release. */
.sky-trackbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 44px);
  display: flex;
  gap: 5px;
  padding: 5px 8px;
  max-width: 94vw;
  overflow-x: auto;
  background: rgba(12, 16, 36, 0.68);
  border: 1px solid rgba(196, 164, 92, 0.30);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 28;
  pointer-events: auto;
  scrollbar-width: none;
}
.sky-trackbar::-webkit-scrollbar { display: none; }
.sky-track-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 38px;
  padding: 4px 5px;
  background: rgba(30, 36, 68, 0.55);
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d8dcf0;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
}
.sky-track-btn:hover { background: rgba(42, 50, 96, 0.85); }
.sky-track-sym { font-size: 17px; line-height: 1; }
.sky-track-sub {
  font-size: 8.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.82;
  white-space: nowrap;
}
.sky-track-btn[aria-pressed="true"] {
  border-color: rgba(224, 190, 106, 0.9);
  background: rgba(92, 74, 30, 0.55);
  box-shadow: 0 0 8px rgba(224, 190, 106, 0.4);
}
.sky-track-btn--below { opacity: 0.6; }
.sky-track-btn--below .sky-track-sub { color: #c0742c; }

/* Subtle mode label — top-left, tells the user this is the exterior sphere view. */
.sky-mode-label {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 16px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 200, 132, 0.5);
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Z3 — corner cluster: a right-edge stack (Look Up · Recenter · Layers) + a
   top-centre row (World-Model segmented + location chip). Thumb-reachable; the
   sphere centre stays clear. */
.sky-corner-stack {
  position: absolute;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 32;
  pointer-events: auto;
}
.sky-corner-btn {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  background: rgba(10, 13, 28, 0.55);
  color: var(--color-accent-2, #FFD263);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,232,168,0.18);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1);
}
.sky-corner-btn:hover { transform: translateY(-1px) scale(1.03); }
.sky-corner-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 3px);
  white-space: nowrap; pointer-events: none;
  font: 600 9px/1 "Cinzel", Georgia, serif; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent-2, #FFD263);
  opacity: 0.85; text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.sky-topbar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 32; pointer-events: auto;
}
.sky-worldmodel {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface, #0A1228) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  backdrop-filter: blur(8px);
}
.sky-wm-btn {
  border: 0; background: transparent;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 72%, transparent);
  font: 600 11px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.08em;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sky-wm-btn:hover { color: var(--color-fg, #e8e9ec); }
.sky-wm-btn.is-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-2, #FFD263) 30%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent));
  color: var(--color-fg, #F0E5C2);
}
.sky-loc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  background: rgba(10, 13, 28, 0.55);
  color: var(--color-accent-2, #FFD263);
  font: 500 12px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.02em;
  cursor: pointer; backdrop-filter: blur(8px);
}
.sky-loc-ic { display: inline-flex; }

/* Z4 — Layers bottom-sheet (toggles for the real scene layers). Hidden until
   the Layers corner button flips .sky-chrome--layers-open on the host. */
.sky-layers-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: calc(var(--mode-bar-h, 0px) + 156px);   /* clears the time bar */
  width: min(440px, 94vw);
  max-height: 52vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(14,16,30,0.97), rgba(8,10,20,0.96));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 32%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  padding: 12px 14px;
  z-index: 40;
  pointer-events: auto;
  opacity: 0; visibility: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), opacity 180ms ease, visibility 0s linear 200ms;
}
.sky-chrome--layers-open .sky-layers-sheet {
  transform: translateX(-50%) translateY(0);
  opacity: 1; visibility: visible;
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), opacity 180ms ease;
}
.sky-layers-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 13px/1 "Cinzel", Georgia, serif; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent-2, #FFD263);
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 20%, transparent);
}
.sky-layers-close {
  border: 0; background: transparent; color: var(--color-accent-2, #FFD263);
  cursor: pointer; display: inline-flex; padding: 2px;
}
.sky-layers-body { display: flex; flex-direction: column; gap: 2px; }
.sky-layer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; gap: 12px;
}
.sky-layer-name {
  font: 500 13px/1.25 "Inter", system-ui, sans-serif;
  color: var(--color-fg, #e8e9ec);
}
.sky-layers-adv-h {
  font: 600 10px/1 "Cinzel", Georgia, serif; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 55%, transparent);
  margin: 10px 4px 2px;
}
.sky-switch {
  position: relative; width: 40px; height: 22px; flex: 0 0 auto;
  border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  background: color-mix(in srgb, var(--color-surface, #0A1228) 70%, transparent);
  transition: background 160ms ease, border-color 160ms ease;
}
.sky-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-fg, #e8e9ec) 70%, transparent);
  transition: transform 160ms cubic-bezier(.2,.8,.3,1), background 160ms ease;
}
.sky-switch.is-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-2, #FFD263) 42%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent));
  border-color: var(--color-accent-2, #FFD263);
}
.sky-switch.is-on::after { transform: translateX(18px); background: #fff; }

/* CSM-0 — segmented control (Celestial sphere style: Armillary / Grid / Off). */
.sky-seg {
  display: inline-flex; flex: 0 0 auto; gap: 0;
  border-radius: 999px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  background: color-mix(in srgb, var(--color-surface, #0A1228) 70%, transparent);
}
.sky-seg-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 5px 11px; margin: 0;
  font: 600 11px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 72%, transparent);
  background: transparent;
  border-left: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
  transition: background 150ms ease, color 150ms ease;
}
.sky-seg-btn:first-child { border-left: 0; }
.sky-seg-btn:hover { background: rgba(255,255,255,0.07); }
.sky-seg-btn.is-on {
  color: #0c1424;
  background: linear-gradient(180deg,
    var(--color-accent-2, #FFD263),
    color-mix(in srgb, var(--color-accent, #FFB836) 82%, #FFD263));
}

/* CSM-9 — Look Down (FP vault toggle): slate-blue accent, pairs with gold Look Up. */
.fp-strip-btn.fp-lookdown-btn {
  color: #cfe4f2;
  border-color: color-mix(in srgb, #7fb0cf 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, #7fb0cf 30%, transparent) inset;
}

/* B.card — tap-a-body classical card (live sign/degree + essential dignity +
   physical-causal line). Bottom-left, clear of the centred time bar. */
.sky-body-card {
  position: absolute;
  left: 14px;
  bottom: calc(var(--mode-bar-h, 0px) + 156px);
  width: min(260px, 72vw);
  background: linear-gradient(160deg, rgba(14,16,30,0.97), rgba(8,10,20,0.96));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  padding: 12px 14px 13px;
  z-index: 38;
  pointer-events: auto;
}
.sky-body-card[hidden] { display: none; }
.sky-body-card-x {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent; color: var(--color-accent-2, #FFD263);
  cursor: pointer; display: inline-flex; padding: 2px;
}
.sky-body-card-h {
  font: 600 15px/1 "Cinzel", Georgia, serif; letter-spacing: 0.04em;
  color: var(--color-accent-2, #FFD263); margin-bottom: 4px;
}
.sky-body-card-pos {
  font: 600 13px/1.3 "Inter", system-ui, sans-serif;
  color: var(--color-fg, #e8e9ec);
}
.sky-body-card-dig {
  font: 500 11.5px/1.4 "Inter", system-ui, sans-serif;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 80%, transparent);
  margin-top: 4px;
}
.sky-body-card-nat {
  font: 400 12.5px/1.45 "Cormorant Garamond", Georgia, serif;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 74%, transparent);
  margin-top: 6px; font-style: italic;
}
/* P7 — first-person body card: bridge frames (Sky / Condition / Chart / Method). */
.sky-body-card-h { padding-right: 28px; }   /* P8 — never clip behind the close button */
.sky-body-card-frame { margin-top: 8px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent); }
.sky-body-card-frame:first-of-type { border-top: 0; padding-top: 2px; }
.sky-body-card-frame-h {
  font: 700 9.5px/1.3 "Cinzel", Georgia, serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 80%, transparent); margin-bottom: 3px;
}
.sky-body-card-line {
  margin: 0; font: 400 12.5px/1.45 "Cormorant Garamond", Georgia, serif;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 82%, transparent);
}
.sky-body-card-line strong { color: var(--color-fg, #e8e9ec); font-weight: 600; }
.sky-body-card-frame-method .sky-body-card-line { font-style: italic; }
.sky-body-card-yearlord { color: #7Fd6a0; font-weight: 600; margin-top: 3px; }
/* MB-A — role headline chip + weight tag + supports line + condition chips. */
.sky-body-card-role { margin-bottom: 2px; }
.sky-body-card-role-w {
  color: var(--color-accent-2, #FFD263); font-weight: 700;
  font: 700 11px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.05em; text-transform: uppercase;
}
.sky-body-card-weight {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font: 700 9px/1.3 "Cinzel", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 88%, transparent);
  background: color-mix(in srgb, var(--color-accent-2, #FFD263) 14%, transparent);
}
.sky-body-card-supports { color: color-mix(in srgb, var(--color-fg, #e8e9ec) 72%, transparent); }
.sky-body-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sky-body-card-chip {
  font: 700 9.5px/1.3 "Cinzel", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 82%, transparent);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
/* P9 — natal layer presets pill row in the Layers sheet. */
.sky-layers-presets { margin: 8px 0 4px; }
.sky-layers-preset-row { display: flex; flex-wrap: wrap; gap: 5px; }
.sky-layers-preset {
  font: 600 11px/1 "Cinzel", Georgia, serif; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 80%, transparent);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}
.sky-layers-preset:hover { background: rgba(255,255,255,0.09); }
.sky-layers-preset.active { color: #0c1424; background: var(--color-accent-2, #FFD263); border-color: var(--color-accent-2, #FFD263); }
/* MB-D — preset "why this overlay matters" explainer, dismissible. */
.sky-layers-preset-why {
  position: relative; margin-top: 8px; padding: 8px 26px 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--color-accent-2, #FFD263);
}
.sky-layers-preset-why[hidden] { display: none; }
.sky-layers-preset-why-p { margin: 0; font: 400 12.5px/1.45 "Cormorant Garamond", Georgia, serif;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 84%, transparent); }
.sky-layers-preset-why-x {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 60%, transparent); font: 700 15px/1 Georgia, serif;
}
.sky-layers-preset-why-x:hover { color: var(--color-accent-2, #FFD263); }

@keyframes torch-breathe {
  0%   { background-size: 130% 130%; background-position: 50% 65%; }
  25%  { background-size: 138% 138%; background-position: 52% 63%; }
  50%  { background-size: 133% 133%; background-position: 49% 67%; }
  75%  { background-size: 137% 137%; background-position: 51% 62%; }
  100% { background-size: 130% 130%; background-position: 50% 65%; }
}
/* touch-action: none is critical for FP drag-to-look on phones.
   Without it, mobile browsers eat vertical drag gestures as page-scroll
   before they reach our pointermove handler — yaw still works (horizontal
   drag doesn't conflict with anything) but pitch silently stalls and
   the camera appears locked at the horizon. */
#feCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* S009 / S009a — Tracker HUD panel. Offset 240px clears the main HUD
   (5 lines + moon-phase widget). Per-target blocks; each block has
   azel + a source line (Geo). The source line matching
   BodySource takes .active (orange border); the other is .inactive
   (grey). max-height + overflow-y lets long tracked sets scroll. */
/* Expanded mode (Ephemeris comparison) uses far wider blocks. Stack
   them vertically into a single column with scroll so the cluster
   doesn't fan out across the viewport and bleed onto the rendered
   scene. */

/* Tracking-info pop-up: pixel-art portrait + readout for the
   selected body. Default position is upper-left, but the header
   bar is a drag handle so the user can reposition; minimize button
   collapses to just the header. State is persisted in
   localStorage. The panel lifts above the existing HUDs (z-index
   12) so it overlays without forcing layout. */
#tracking-info-popup {
  position: absolute; top: 6px; left: 6px;
  pointer-events: auto;
  font: 14px/1.45 ui-monospace, Menlo, monospace;
  color: #f4f6fa;
  background: rgba(10, 14, 22, 0.94);
  border: 1px solid rgba(120, 150, 200, 0.45);
  border-radius: 8px;
  padding: 0;
  min-width: 240px;
  max-width: min(440px, calc(100vw - 16px));
  zoom: var(--ui-zoom);
  z-index: 12;
  /* `zoom` was breaking drag math (clientX in viewport pixels vs.
     offsetLeft in unzoomed CSS pixels). Panel sizes are already
     explicit, so the viewport-zoom scaling isn't needed here. */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  user-select: none;
}
#tracking-info-popup[hidden] { display: none; }
#tracking-info-popup .ti-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 154, 60, 0.08);
  border-bottom: 1px solid rgba(120, 150, 200, 0.25);
  border-radius: 8px 8px 0 0;
  cursor: grab;
  touch-action: none;
}
#tracking-info-popup .ti-header:active { cursor: grabbing; }
#tracking-info-popup .ti-grip {
  color: var(--muted); font-size: 14px; letter-spacing: -2px;
  flex: 0 0 auto;
}
#tracking-info-popup .ti-header-name {
  flex: 1 1 auto; color: var(--accent); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tracking-info-popup .ti-mini {
  flex: 0 0 auto;
  width: 24px; height: 22px;
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 14px; line-height: 18px;
  cursor: pointer;
  padding: 0;
}
#tracking-info-popup .ti-mini:hover { border-color: var(--accent); color: var(--accent); }
#tracking-info-popup .ti-content { padding: 14px 16px; }
#tracking-info-popup.minimized .ti-content { display: none; }
#tracking-info-popup.minimized { min-width: 240px; }
#tracking-info-popup .ti-art-row {
  display: flex; gap: 16px; align-items: center;
  border-bottom: 1px solid rgba(120, 150, 200, 0.22);
  padding-bottom: 12px; margin-bottom: 10px;
}
#tracking-info-popup .ti-art {
  width: 160px; height: 160px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(120, 150, 200, 0.3);
  border-radius: 4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#tracking-info-popup .ti-titles {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-width: 0;
}
#tracking-info-popup .ti-name { color: var(--accent); font-weight: 700; font-size: 18px; }
#tracking-info-popup .ti-cat  { color: var(--muted); font-size: 13px; }
#tracking-info-popup .ti-readout { display: flex; flex-direction: column; gap: 3px; }
#tracking-info-popup .ti-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 2px 4px;
  font-size: 14px;
}
#tracking-info-popup .ti-row span:first-child { color: var(--muted); }
#tracking-info-popup .ti-row span:last-child  { font-variant-numeric: tabular-nums; }
#tracking-info-popup .ti-vis-ok { color: #7fe39a; }
#tracking-info-popup .ti-vis-no { color: #ff7b6b; }
/* Expanded mode (Ephemeris comparison on) carries four extra
   columns per pipeline row — RA / Dec / Az / El — so the block
   grows wide enough to render each row on a single line at the
   ui-monospace default size. */

/* S009d — both ephemeris rows styled equally. The dual-pipeline
   readout is the point; highlighting one "active" source obscured
   the fact that both tick in sync. */
/* Modern Kepler (Meeus 33) comparison row — cool-blue tint so it
   reads as a distinct reference from the warm-gold Ptolemy row. */
/* JPL/NASA live reference row — distinct green tint so it reads as
   a different source from the cool-blue Kepler and warm-gold Ptolemy
   rows. Same as the .jpl-source-badge--live colour used in Settings. */

/* Epicycle corner inset — animated Ptolemaic diagram, draggable */
#epicycle-canvas {
  position: fixed;
  bottom: 108px;
  right: 12px;
  width: 280px;
  height: 280px;
  pointer-events: auto;
  cursor: grab;
  z-index: 15;
  border-radius: 10px;
  user-select: none;
  touch-action: none;
}
#epicycle-canvas:active { cursor: grabbing; }

/* Right-edge educational accordion panels */
#info-panels-wrap {
  position: absolute;
  right: 0;
  top: 26px;
  bottom: calc(96px * var(--ui-zoom));
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 0;
  z-index: 9;
  pointer-events: none;
}
.info-panel-item {
  display: flex;
  align-items: stretch;
  pointer-events: auto;
  position: relative;
}
.info-panel-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background: rgba(19, 13, 32, 0.82);
  border: 1px solid rgba(80, 100, 140, 0.4);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 10px 5px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 24px;
  transition: color 0.15s, background 0.15s;
}
.info-panel-tab:hover,
.info-panel-item.ip-open .info-panel-tab {
  color: var(--accent);
  background: rgba(255, 154, 60, 0.12);
}
.info-panel-tab .ip-icon {
  font-size: 14px;
  writing-mode: horizontal-tb;
  transform: none;
}
.info-panel-tab .ip-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.info-panel-body {
  width: 260px;
  max-height: 380px;
  overflow-y: auto;
  background: rgba(14, 10, 26, 0.94);
  border: 1px solid rgba(80, 100, 140, 0.45);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 12px 14px;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.55;
}
.info-panel-body h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent);
}
.info-panel-body p { margin: 0 0 8px; }
.info-panel-body p:last-child { margin-bottom: 0; }
.info-panel-body strong { color: #c8d8f0; }
.info-panel-body em { color: #e8e890; font-style: normal; }
@media (max-width: 480px) {
  .info-panel-body { width: 200px; font-size: 11px; }
}

/* God-mode info-panel refactor (2026-05-21):
   Functional bodies host live widgets (moon canvas, tracker blocks,
   epicycle canvas) instead of static educational HTML. They need more
   width than the educational variant and must override the absolute
   positioning of legacy hosts (#tracker-hud, .epi-wrap). */
.info-panel-body-functional {
  width: 320px;
  max-height: calc(100vh - 120px);
  padding: 10px 12px;
}
@media (max-width: 480px) {
  .info-panel-body-functional { width: 240px; padding: 8px 10px; }
}

/* Moon-phase embed — same internals as the legacy wrapper but no header
   or surrounding border (panel provides them). */
.moon-phase-embed { font-family: ui-monospace, Menlo, monospace; }
.moon-phase-embed .line {
  font-size: 11px;
  color: var(--fg);
  white-space: pre;
  margin: 2px 0;
}
.moon-phase-embed .moon-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.moon-phase-embed .moon-phase-canvas {
  display: block;
  background: transparent;
}
.moon-phase-embed .moon-phase-label {
  font-size: 11px;
  color: var(--accent);
}

/* Ephemeris embed — horizontal row of per-planet columns, with a
   single accuracy strip at the bottom. Uses a clear sans-serif
   instead of the monospace serif the floating tracker uses so the
   compact phone column doesn't look like dense terminal output.
   Selector drops the #tracker-hud ID prefix — the embedded panel is
   the info-panel body, which never gets that ID, so the old rule
   never actually matched anything in embedded mode. */
/* :not([hidden]) so the panel's own `body.hidden = true` toggle still
   wins — display:flex without the guard overrode the user-agent
   [hidden] { display:none } rule and the panel stayed open forever. */
.tracker-hud-embedded:not([hidden]) {
  display: flex;
}
.tracker-hud-embedded {
  position: static;
  top: auto; left: auto;
  max-height: none;
  max-width: 100%;
  /* 2026-05-30 — was a horizontal row with overflow-x:auto, which
     forced a scrollbar to read the seven planet cards. Switched to a
     vertical stack so every body is visible without panning, and each
     row now shows BOTH the live engine az/el and the JPL reference
     az/el side by side (see controlPanel.js embedded branch). */
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  zoom: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  padding: 4px 6px 0;
  font: 11px/1.25 system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
}
.tracker-hud-embedded .tracker-block {
  /* Full-width row: title on left, engine+JPL az/el laid out as
     compact columns inside the same card. */
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(78px, 0.9fr) 1fr 1fr;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px 7px;
  background: rgba(20, 16, 28, 0.45);
  border: 1px solid rgba(120, 150, 200, 0.18);
  border-radius: 6px;
  white-space: normal;
  word-break: break-word;
}
.tracker-hud-embedded .tracker-block .line { white-space: normal; }
.tracker-hud-embedded .tracker-title {
  font-size: 13px;
  font-weight: 600;
  color: #f4c878;
  margin: 0;
  letter-spacing: 0.02em;
  grid-column: 1 / 2;
}
.tracker-hud-embedded .tracker-block .line:nth-child(2) {
  /* azel — engine column */
  grid-column: 2 / 3;
  font-size: 11px;
  line-height: 1.3;
  color: #d8d4c0;
}
.tracker-hud-embedded .ephem-emb-src {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #8a93a8;
  margin-bottom: 2px;
}
/* Hide the long-form comparison + refraction noise in the compact
   panel. The .ephem-emb-jpl override below re-enables the per-body
   JPL row we explicitly populated with the compact Az/El pair. */
.tracker-hud-embedded .source-line,
.tracker-hud-embedded .source-line-apix,
.tracker-hud-embedded .ephem-sep-line,
.tracker-hud-embedded .tracker-refr {
  display: none !important;
}
/* The per-body JPL row carries .source-line + .source-line-jpl
   + .ephem-emb-jpl. The class-chained selector below has strictly
   HIGHER specificity than the hide rule above (3 classes vs 2),
   so it wins the cascade regardless of declaration order — earlier
   builds put a non-chained override before the hide rule and the
   later hide rule clobbered it, leaving the JPL column permanently
   empty in the embedded panel. */
.tracker-hud-embedded .source-line.ephem-emb-jpl,
.tracker-hud-embedded .ephem-emb-jpl {
  display: block !important;
  grid-column: 3 / 4;
  font-size: 11px;
  line-height: 1.3;
  color: #a8c0e0;
}
.tracker-hud-embedded .ephem-emb-jpl .ephem-emb-src { color: #88aacc; }
.tracker-hud-embedded .tracker-foot {
  /* Magnitude footer — spans the JPL column on the right so the
     three-column grid stays tidy. */
  grid-column: 1 / -1;
  text-align: right;
  margin-top: 2px;
  font-size: 10px;
  color: #99a3b8;
}
.tracker-hud-embedded .tracker-foot {
  font-size: 10px;
  color: #99a3b8;
  margin-top: auto;
}
.tracker-hud-embedded.expanded { max-width: 100%; }
.tracker-hud-embedded .tracker-events { margin-top: 6px; flex: 0 0 auto; }
.tracker-hud-embedded .tracker-accuracy-foot {
  flex: 0 0 100%;
  order: 999;
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 10px;
  color: #b8c0d0;
  background: rgba(40, 30, 60, 0.55);
  border-top: 1px solid rgba(120, 150, 200, 0.20);
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.04em;
}

/* Epicycles tab is a TOGGLE for the floating diagram (not an embed) — the
   diagram lives at body level so it persists across mode switches. We just
   highlight the tab when the diagram is visible. */
.info-panel-item-toggle .info-panel-tab[aria-pressed="true"] {
  color: var(--accent);
  background: rgba(255, 154, 60, 0.18);
}

/* ── Astrology launch button — neon glow + slow pulse ───────────────────────
   The ♈ glyph is the user's primary entry point into the astrology layer,
   so it carries distinct visual emphasis: cyan neon foreground, magenta
   accent on hover, and a 3-second breathing animation that draws the eye
   without becoming a flicker hazard. The pulse is driven by box-shadow +
   text-shadow opacity so it works against any theme background. */
.header-action-btn-astrology {
  color: #7fffe8 !important;
  border: 1px solid #4fffd4 !important;
  background: rgba(15, 35, 50, 0.55) !important;
  font-size: 16px !important;
  font-weight: 700;
  text-shadow:
    0 0 4px #7fffe8,
    0 0 10px #4fffd4,
    0 0 16px rgba(79, 255, 212, 0.6);
  box-shadow:
    0 0 6px rgba(127, 255, 232, 0.55),
    0 0 14px rgba(79, 255, 212, 0.35),
    inset 0 0 6px rgba(127, 255, 232, 0.25);
  animation: pa-astro-pulse 3.2s ease-in-out infinite;
  transition: transform 0.18s, color 0.18s, border-color 0.18s;
}
.header-action-btn-astrology:hover {
  color: #ff80f0 !important;
  border-color: #ff80f0 !important;
  text-shadow:
    0 0 4px #ff80f0,
    0 0 10px #ff80f0,
    0 0 18px rgba(255, 128, 240, 0.6);
  box-shadow:
    0 0 8px rgba(255, 128, 240, 0.7),
    0 0 18px rgba(255, 128, 240, 0.45),
    inset 0 0 8px rgba(255, 128, 240, 0.3);
  transform: scale(1.08);
  animation-play-state: paused;
}
.header-action-btn-astrology:active { transform: scale(0.96); }

@keyframes pa-astro-pulse {
  0%, 100% {
    text-shadow:
      0 0 4px #7fffe8,
      0 0 10px #4fffd4,
      0 0 16px rgba(79, 255, 212, 0.6);
    box-shadow:
      0 0 6px rgba(127, 255, 232, 0.55),
      0 0 14px rgba(79, 255, 212, 0.35),
      inset 0 0 6px rgba(127, 255, 232, 0.25);
  }
  50% {
    text-shadow:
      0 0 6px #7fffe8,
      0 0 16px #4fffd4,
      0 0 28px rgba(79, 255, 212, 0.9);
    box-shadow:
      0 0 12px rgba(127, 255, 232, 0.85),
      0 0 26px rgba(79, 255, 212, 0.6),
      inset 0 0 10px rgba(127, 255, 232, 0.45);
  }
}

/* Respect users who've asked the OS to minimize motion — keep the neon
   glow but stop the pulse animation. */
@media (prefers-reduced-motion: reduce) {
  .header-action-btn-astrology { animation: none; }
}

/* S009a — Tracker tab multi-select button grid. Each button toggles
   its id in TrackerTargets; active buttons take the orange-accent
   look. Flex-wraps to whatever rows the panel width allows. */
.row.button-grid-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  column-gap: 8px;
  padding: 4px 0;
}
.row.button-grid-row > label { padding-top: 4px; color: var(--muted); }
.row.button-grid-row.no-label { grid-template-columns: 1fr; }
.button-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.tracker-btn {
  font: 11px/1.2 ui-monospace, Menlo, monospace;
  padding: 3px 6px;
  border: 1px solid rgba(120, 150, 200, 0.35);
  border-radius: 3px;
  background: rgba(30, 36, 48, 0.7);
  color: #d6deed;
  cursor: pointer;
  white-space: nowrap;
}
.tracker-btn:hover { background: rgba(50, 58, 74, 0.9); }
.tracker-btn.on {
  background: rgba(244, 166, 64, 0.18);
  border-color: rgba(244, 166, 64, 0.8);
  color: #f4a640;
}

/* Bottom bar + per-tab popup panels. Bar sits at the bottom of #view,
   popups slide up above the bar when a tab is clicked. */

/* End Demo / End Tracking dock to the right of the Tracking
   slot. The info-bar itself is `pointer-events: none` so the
   tracker readout floats above the bottom-bar without
   intercepting clicks; the buttons need their own
   pointer-events: auto to stay clickable. */



/* Search row — compact strip above the controls row */
.bar-search-row {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(36, 22, 48, 0.5);
  overflow: hidden;
}
.bar-search-row .search-host { flex: 1; min-width: 0; }
.bar-search-row .body-search { width: 100%; }
.bar-search-row .body-search-input { padding: 2px 6px; font-size: 11px; height: 18px; }

/* Controls strip — transport + mode + country buttons.
   Spreads edge-to-edge on wide screens; scrolls on phones. */
.bar-quick {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(36, 22, 48, 0.7);
  justify-content: flex-start;
}
.bar-quick::-webkit-scrollbar { display: none; }
.bar-quick .bar-left { flex: 0 0 auto; }
.bar-quick .time-controls { margin-top: 0 !important; }
.bar-quick .geo-hops { margin: 0 2px !important; }
.bar-quick .compass-controls { margin-top: 0 !important; margin-left: 4px !important; margin-right: 4px !important; }
.bar-quick .bar-left .presets { margin-top: 0 !important; }
/* On wide screens: spread controls edge-to-edge with no scrollbar */
@media (min-width: 640px) {
  .bar-quick {
    overflow-x: visible;
    justify-content: space-between;
  }
}

/* Icon tab row — Stellarium-style icon + label, fills full width */
.tab-icon-row {
  flex: 0 0 32px;
  display: flex;
  align-items: stretch;
}
.tab-icon-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition: color 0.12s, background 0.12s;
}
.tab-icon-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.tab-icon-btn[aria-selected="true"] {
  color: var(--accent);
  background: rgba(255, 154, 60, 0.14);
  border-top: 2px solid var(--accent);
}
.tab-icon-btn .btn-icon { font-size: 14px; line-height: 1; pointer-events: none; }
.tab-icon-btn .btn-label { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; pointer-events: none; }
.body-search { position: relative; width: 220px; }
.body-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  font: 12px/1.2 ui-monospace, Menlo, monospace;
  color: var(--fg);
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
.body-search-input:focus { border-color: var(--accent); }
.body-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: rgba(20, 24, 33, 0.97);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.body-search-row {
  font: 12px/1.2 ui-monospace, Menlo, monospace;
  padding: 6px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(120, 150, 200, 0.12);
  cursor: pointer;
}
.body-search-row:last-child { border-bottom: 0; }
.body-search-row:hover,
.body-search-row.active { background: rgba(255, 154, 60, 0.14); }
.body-search-row .feature-row-label { display: block; color: var(--fg); }
.body-search-row .feature-row-path {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
/* TimeControlPatch — .time-speed, .speed-stack, .time-jump-grid
   rules removed. Their DOM consumers were the speedReadout span,
   speedStack container, and jumpGrid skippers — all deleted from
   controlPanel.js. */

/* Column-major flow: items fill column 1 top-to-bottom, then spill
   into column 2. Priority items at the top of the rows[] list end up
   stacked vertically (left column) so the user can click straight
   down through them. */
.group[data-group-title="Tracker Options"] .group-body {
  column-count: 2;
  column-gap: 14px;
}
.group[data-group-title="Tracker Options"] .group-body > .row {
  break-inside: avoid;
}
.group[data-group-title="Tracker Options"] .group-body > .row.action-row,
.group[data-group-title="Tracker Options"] .group-body > .row.action-group-row,
.group[data-group-title="Tracker Options"] .group-body > .row.button-grid-row {
  column-span: all;
}


.map-picker-popup {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 180px;
  padding: 4px;
  background: rgba(20, 24, 33, 0.97);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.map-picker-popup .map-picker-row {
  font: 12px/1.3 ui-monospace, Menlo, monospace;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
}
.map-picker-popup .map-picker-row:hover { background: rgba(255, 154, 60, 0.14); }
.map-picker-popup .map-picker-row.active {
  color: var(--accent);
  background: rgba(255, 154, 60, 0.18);
  font-weight: 600;
}
#tracking-info-popup .ti-row.ti-refr-info {
  color: #ff8c00;
  font-size: 12px;
  padding-left: 16px;
  opacity: 0.85;
}
#tracking-info-popup .ti-row.ti-refr-info span:first-child { color: #ff8c00; }

/* Old text-tab container hidden — replaced by .tab-icon-row */

#tab-popups {
  position: absolute;
  left: 0; right: 0; bottom: 96px;
  height: 0;
  z-index: 35;
  pointer-events: none;
}
.tab-popup {
  position: absolute;
  bottom: 0;
  pointer-events: auto;
  background: rgba(16, 20, 30, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  padding: 12px 14px 14px;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  animation: popup-slide 0.15s ease-out;
  /* Mirror the bottom bar's viewport-driven zoom so popup contents
     scale with the rest of the chrome. */
  zoom: var(--ui-zoom);
}
@keyframes popup-slide {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Collapsible groups inside a popup. */
.tab-popup .group { margin-bottom: 8px; }
.tab-popup .group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-align: left;
}
.tab-popup .group-header:hover { background: rgba(255, 154, 60, 0.08); }
.tab-popup .group-arrow {
  display: inline-block;
  transition: transform 0.12s;
  font-size: 10px;
  color: var(--muted);
}
.tab-popup .group-header:not(.collapsed) .group-arrow {
  transform: rotate(90deg);
  color: var(--accent);
}
.tab-popup .group-body {
  padding: 8px 12px 2px;
  max-width: 720px;
}

/* External-link list inside the Info tab. */
.info-links { display: flex; flex-direction: column; gap: 6px; }
.info-link {
  display: block;
  padding: 8px 12px;
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.info-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 154, 60, 0.08);
}

/* Educational text and glossary inside the Info tab. */
.info-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
}
.info-text:last-child { margin-bottom: 0; }
.info-glossary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.info-glossary dt {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.info-glossary dd { margin: 0; color: var(--fg); }

/* Override the old full-panel `.group-title` style — it's gone now. */
.group-title { display: none; }

.row {
  display: grid;
  grid-template-columns: 96px 78px 18px 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.row label { color: var(--muted); font-size: 12px; text-align: right; }
.row .unit { color: var(--muted); font-size: 11px; }
.row input.slider { width: 100%; accent-color: var(--accent); }
.row input[type="text"], .row input.num {
  width: 100%;
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 5px;
  font: inherit;
  text-align: right;
  -moz-appearance: textfield;
}
.row input.num::-webkit-outer-spin-button,
.row input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.row input.num:focus { border-color: var(--accent); outline: none; }
.row.bool { grid-template-columns: 96px 1fr; }
.row.bool input { justify-self: start; }
.row.bool select.sel {
  background: var(--row); color: var(--fg); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 5px; font: inherit;
}
.row.pair-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 6px;
}
/* LANG-TIERS — tier headers inside the control-panel language grid. */
.lang-select-group {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 210, 160, 0.75);
  border-bottom: 1px solid rgba(230, 210, 160, 0.22);
  padding: 6px 2px 3px;
  margin-top: 2px;
}

.lang-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px 0;
}
.lang-select-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font: inherit; font-size: 12px;
  text-align: left; cursor: pointer;
}
.lang-select-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-select-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 154, 60, 0.18);
  font-weight: 600;
}
.row.pair-select select.sel {
  width: 100%;
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 5px; font: inherit;
}
.row.bool select.sel:focus { border-color: var(--accent); outline: none; }
.row.datetime { grid-template-columns: 96px 1fr 1fr; }
.row.datetime input[type="date"],
.row.datetime input[type="time"] {
  background: var(--row); color: var(--fg); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 5px; font: inherit; color-scheme: dark;
}
.row.datetime input:focus { border-color: var(--accent); outline: none; }
.group-title { margin: 12px 0 4px; font-weight: bold; font-size: 12px; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 2px; }

footer#desc { display: none; }

.row.cardinal-buttons { grid-template-columns: 96px repeat(4, 1fr); gap: 4px; }
.row.cardinal-buttons button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 0; font: inherit; cursor: pointer;
}
.row.cardinal-buttons button:hover { border-color: var(--accent); color: var(--accent); }
.row.cardinal-buttons button.active {
  background: #ff8c1a; color: #1a1a1a;
  border-color: #ff8c1a; font-weight: bold;
}
.row.cardinal-buttons button.active:hover { background: #ffa040; border-color: #ffa040; color: #1a1a1a; }

.row.nudge-buttons { gap: 3px; }
.row.nudge-buttons button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 0; font: inherit; font-size: 11px;
  cursor: pointer;
}
.row.nudge-buttons button:hover { border-color: var(--accent); color: var(--accent); }

.row.action-row { grid-template-columns: 1fr; }
.row.action-row label { display: none; }
.row.action-row .action-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 10px; font: inherit; cursor: pointer; width: 100%;
}
.row.action-row .action-btn:hover { border-color: var(--accent); color: var(--accent); }
.row.action-group-row {
  display: flex; gap: 4px; padding: 0;
}
.row.action-group-row.wrap {
  flex-wrap: wrap;
}
.row.action-group-row .action-btn {
  flex: 1; min-width: 0;
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 6px; font: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row.action-group-row.wrap .action-btn {
  flex: 0 1 auto;
  padding: 4px 8px;
  font-size: 12px;
}
.row.action-group-row .action-btn:hover { border-color: var(--accent); color: var(--accent); }
.row.action-row .action-btn.active {
  background: #ff8c1a; color: #1a1a1a; border-color: #ff8c1a; font-weight: bold;
}
.row.action-row .action-btn.active:hover { background: #ffa040; border-color: #ffa040; color: #1a1a1a; }

/* TimeControlPatch — .autoplay-* rules removed (no DOM consumers
   after Autoplay.renderInto was dropped). */

.demo-controls { display: flex; gap: 4px; margin-top: 8px; }
.demo-controls button { flex: 1; padding: 6px 8px; background: var(--row); color: var(--fg); border: 1px solid var(--border); cursor: pointer; font: inherit; }
.demo-controls button:hover { border-color: var(--accent); color: var(--accent); }
.demo-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 240px; overflow: auto; }
.demo-list button { text-align: left; padding: 4px 6px; background: var(--row); color: var(--fg); border: 1px solid var(--border); cursor: pointer; font: inherit; }
.demo-list button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.demo-list .demo-row { display: flex; gap: 2px; align-items: stretch; }
.demo-list .demo-row .demo-play { flex: 1 1 auto; }
.demo-list .demo-row .demo-jump { flex: 0 0 auto; min-width: 28px; text-align: center; padding: 4px 6px; }



/* S200 — eclipse-demo group headers + "play all" buttons. The
   demo-list height grows because there are 100+ eclipse entries;
   max-height pushed up so the section is scrollable independently. */
.demo-list { max-height: 380px; }
.demo-group-header {
  margin-top: 8px;
  padding: 4px 6px;
  background: rgba(255, 154, 60, 0.10);
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  border-radius: 3px;
  user-select: none;
}
.demo-group-header:first-child { margin-top: 0; }
.demo-play-all {
  text-align: left;
  padding: 3px 8px;
  margin-bottom: 2px;
  background: rgba(255, 154, 60, 0.06);
  color: var(--accent);
  border: 1px dashed rgba(255, 154, 60, 0.5);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.demo-play-all:hover { background: rgba(255, 154, 60, 0.15); }

/* --- Mobile / narrow-viewport pass --------------------------------------
   Keeps the desktop layout intact above 900 px; below that, the bottom
   bar gets a horizontal-scroll fallback, popups go near-full-width, the
   HUD shrinks, and touch tap targets are bumped where possible. */
@media (max-width: 900px) {
  html, body { -webkit-text-size-adjust: 100%; }

    
  /* On phones, tab popups span full width and fill the space between
     the header and the bottom bar. */
  .tab-popup {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 26px !important;
    bottom: 96px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: auto;
    border-radius: 0 !important;
    z-index: 35 !important;
  }

  .tracking-info-panel { max-width: calc(100vw - 12px); font-size: 11px; }
  .info-popup { position: fixed; left: 4px; right: 4px; max-width: none; }
}

/* Phone-sized — base tweaks (Ptolemaic section extends these below) */
@media (max-width: 520px) {
      
  /* Touch-action: prevent double-tap zoom on all buttons */
  button { touch-action: manipulation; }

  /* Info panel right-side accordions: narrow on phones */
  .info-panel-body { width: 200px; font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ANCIENT GREEK / PTOLEMAIC THEME
   Colour palette: parchment · burnished gold · terracotta · dark stone
   Motifs: Doric triglyph frieze · Greek fret border · column ornaments
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fret (Greek key step) border SVG, 24 × 8 tile, repeats-x ── */
/* polyline: 0,2 → 8,2 (top) → 8,6 (down) → 16,6 (bottom) → 16,2 (up) → 24,2 */
/* Produces a continuous alternating-step meander when tiled.          */

/* Outer golden frame removed (Phase 9 final polish) — was a double
   ring with body::after; user wanted only ONE frame. The surviving
   body::after below is the single theme-tinted hairline at inset:8px. */
body::after {
  content: '';
  position: fixed;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
  z-index: 9999;
}

/* ── Body & root background ─────────────────────────────────────────── */
html, body {
  background: var(--bg);
  /* Phase 4.5 — Inter for body, Cinzel reserved for display headings.
     Falls back to the legacy Georgia stack if the Google Font fails. */
  font-family: var(--type-body, Georgia, 'Times New Roman', system-ui, serif);
}

/* ── Header — stone lintel with gold-ruled border ───────────────────── */
header {
  background: linear-gradient(180deg, var(--row) 0%, var(--panel) 100%);
  border-bottom: none;
  position: relative;
}
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpolyline points='0,2 8,2 8,6 16,6 16,2 24,2' fill='none' stroke='%23d4a020' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-size: 24px 8px;
  background-repeat: repeat-x;
}
header h1 {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--marble);
  opacity: 0.9;
}
header .info-btn {
  background: linear-gradient(180deg, var(--border) 0%, var(--row) 100%);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
}
header .info-btn:hover {
  border-color: var(--accent);
  color: var(--gold);
  background: linear-gradient(180deg, var(--stone-mid) 0%, var(--border) 100%);
}
header .info-popup {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(212,160,32,0.1);
  color: var(--muted);
}
header .info-popup.legend-popup {
  background: var(--panel);
  color: var(--fg);
  border: 2px solid var(--accent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 0 0 1px var(--terracotta);
}
header .info-popup.legend-popup h1 { color: var(--gold); font-style: italic; }
header .info-popup.legend-popup h2 { color: var(--accent); }
header .info-popup.legend-popup th { background: var(--row); }
header .info-popup.legend-popup hr { border-top-color: var(--border); }
header .info-popup.legend-popup a  { color: var(--accent); }
header .info-popup.legend-popup code {
  background: var(--row);
  color: var(--marble);
}

/* ── HUD overlay — warm parchment on dark stone ─────────────────────── */

/* ── Tracker HUD blocks ──────────────────────────────────────────────── */

/* ── Tracking info popup ─────────────────────────────────────────────── */
#tracking-info-popup {
  background: rgba(20, 12, 4, 0.96);
  border: 1px solid rgba(160, 100, 30, 0.55);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#tracking-info-popup .ti-header {
  background: rgba(212, 160, 32, 0.10);
  border-bottom: 1px solid rgba(160, 100, 30, 0.30);
}
#tracking-info-popup .ti-header-name { color: var(--accent); }
#tracking-info-popup .ti-mini {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
#tracking-info-popup .ti-mini:hover { border-color: var(--accent); color: var(--accent); }
#tracking-info-popup .ti-name  { color: var(--accent); }
#tracking-info-popup .ti-cat   { color: var(--muted); }
#tracking-info-popup .ti-art-row { border-bottom: 1px solid rgba(160, 100, 30, 0.30); }
#tracking-info-popup .ti-art {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(160, 100, 30, 0.40);
}
#tracking-info-popup .ti-row span:first-child { color: var(--muted); }
#tracking-info-popup .ti-vis-ok { color: #90c860; }
#tracking-info-popup .ti-vis-no { color: #e06050; }

/* ── Epicycle diagram canvas — Greek parchment style ───────────────── */
#epicycle-canvas {
  border: none;   /* border drawn inside canvas by _drawGreekBorder() */
  box-shadow:
    0 0 0 2px rgba(212, 160, 32, 0.50),
    0 0 0 3px rgba(80,  40,  5,  0.70),
    0 0 24px rgba(212, 160, 32, 0.22),
    0 6px 20px rgba(0,  0,   0,  0.70);
}

/* ── Right-edge info panels ──────────────────────────────────────────── */
.info-panel-tab {
  background: rgba(26, 16, 6, 0.90);
  border: 1px solid rgba(106, 62, 28, 0.60);
  border-right: none;
  color: var(--muted);
}
.info-panel-tab:hover,
.info-panel-item.ip-open .info-panel-tab {
  color: var(--gold);
  background: rgba(212, 160, 32, 0.14);
}
.info-panel-body {
  background: rgba(22, 14, 4, 0.97);
  border: 1px solid rgba(106, 62, 28, 0.55);
  border-right: none;
  color: var(--fg);
}
.info-panel-body h3    { color: var(--accent); font-style: italic; }
.info-panel-body strong { color: var(--marble); }
.info-panel-body em    { color: var(--gold); }

/* ── Tracker multi-select buttons ───────────────────────────────────── */
.tracker-btn {
  background: rgba(40, 26, 10, 0.80);
  border: 1px solid rgba(106, 62, 28, 0.55);
  color: var(--fg);
}
.tracker-btn:hover { background: rgba(58, 40, 16, 0.90); }
.tracker-btn.on {
  background: rgba(212, 160, 32, 0.20);
  border-color: rgba(212, 160, 32, 0.85);
  color: var(--accent);
}

/* ── Bottom bar — temple podium ──────────────────────────────────────── */
/* IMPORTANT: keep position:absolute so bar stays pinned to viewport bottom */
/* Greek-fret decorative strip removed — it sat just above the bottom-
   bar's top border and cut through the time bar and info-bar text on
   small viewports. The 3px gold top border below is enough divider. */

/* ── Search strip ────────────────────────────────────────────────────── */
.bar-search-row {
  border-bottom: 1px solid rgba(106, 62, 28, 0.55);
  background: rgba(14, 8, 4, 0.70);
  flex: 0 0 24px; /* slightly taller than default 22px */
}

/* ── Controls row — bigger touch targets, breathing room between groups ── */
.bar-quick {
  border-bottom: 1px solid rgba(106, 62, 28, 0.55);
  flex: 0 0 46px;
  gap: 6px;
  padding: 3px 14px;
}
/* Visual divider between major control groups */
.bar-quick .bar-left,
.bar-quick .time-controls,
.bar-quick .geo-hops,
.bar-quick .compass-controls {
  position: relative;
  padding-left: 10px;
}
.bar-quick .time-controls::before,
.bar-quick .geo-hops::before,
.bar-quick .compass-controls::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(160, 100, 30, 0.40);
}

/* ── Tab icon row — 52px for icon + label + sublabel + bottom breathing room */
.tab-icon-row {
  flex: 0 0 52px;
  border-top: 1px solid rgba(106, 62, 28, 0.55);
  background: linear-gradient(180deg, rgba(26,16,6,0.70) 0%, rgba(12,8,2,0.92) 100%);
}

/* ── Stellarium-style tab buttons — stone column capitals ─────────────── */
.tab-icon-btn {
  color: var(--muted);
  border-right: 1px solid rgba(106, 62, 28, 0.35);
  transition: color 0.15s, background 0.15s;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px 10px;  /* 10px bottom = clear of frame edge */
}
.tab-icon-btn:last-child { border-right: none; }
.tab-icon-btn:hover {
  color: var(--fg);
  background: rgba(212, 160, 32, 0.10);
}
.tab-icon-btn[aria-selected="true"] {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(212,160,32,0.22) 0%, rgba(212,160,32,0.08) 100%);
  border-top: 2px solid var(--accent);
  border-right-color: rgba(106, 62, 28, 0.35);
}
.tab-icon-btn .btn-icon {
  font-size: 17px;
  line-height: 1;
}
.tab-icon-btn .btn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  font-family: Georgia, serif;
  text-transform: uppercase;
  line-height: 1;
}
/* Subtitle description line */
.tab-icon-btn .btn-sublabel {
  font-size: 9px;
  letter-spacing: 0.03em;
  font-family: Georgia, serif;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}
.tab-icon-btn:hover .btn-sublabel,
.tab-icon-btn[aria-selected="true"] .btn-sublabel {
  color: var(--accent);
  opacity: 1;
}
/* Desktop: more generous text sizes when there's room */
@media (min-width: 640px) {
  .tab-icon-btn .btn-icon   { font-size: 18px; }
  .tab-icon-btn .btn-label  { font-size: 12px; letter-spacing: 0.12em; }
  .tab-icon-btn .btn-sublabel { font-size: 10px; }
}

/* ── All transport / mode buttons — carved stone look ────────────────── */
/* Active / pressed state — gold inlay */
/* Larger grid/jump buttons that already size themselves */
/* TimeControlPatch — .time-speed rule removed */

/* ── Search boxes ────────────────────────────────────────────────────── */
.body-search-input {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: inherit;
}
.body-search-input:focus { border-color: var(--accent); }
.body-search-panel {
  background: rgba(22, 14, 6, 0.98);
  border: 1px solid var(--border);
}
.body-search-row { color: var(--fg); border-bottom: 1px solid rgba(106, 62, 28, 0.25); }
.body-search-row:hover,
.body-search-row.active { background: rgba(212, 160, 32, 0.14); }
.body-search-row .feature-row-path { color: var(--muted); }

/* ── Info bar (date/coords readout) ─────────────────────────────────── */

/* ── Tab popup panels ────────────────────────────────────────────────── */
.tab-popup {
  background: rgba(22, 14, 4, 0.99);
  border: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(212,160,32,0.15);
}
.tab-popup .group-header {
  background: var(--row);
  border: 1px solid var(--border);
  color: var(--accent);
  font-style: italic;
  letter-spacing: 0.04em;
}
.tab-popup .group-header:hover { background: rgba(212, 160, 32, 0.10); }
.tab-popup .group-arrow { color: var(--muted); }
.tab-popup .group-header:not(.collapsed) .group-arrow { color: var(--accent); }

/* ── Row inputs & selects ────────────────────────────────────────────── */
.row label { color: var(--muted); }
.row input[type="text"],
.row input.num {
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
}
.row input.num:focus { border-color: var(--accent); }
.row.bool select.sel,
.row.pair-select select.sel {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.row.datetime input[type="date"],
.row.datetime input[type="time"] {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
  color-scheme: dark;
}
.row.cardinal-buttons button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.row.cardinal-buttons button:hover { border-color: var(--accent); color: var(--accent); }
.row.cardinal-buttons button.active {
  background: var(--accent); color: #1a0c00;
  border-color: var(--accent); font-weight: bold;
}
.row.nudge-buttons button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.row.nudge-buttons button:hover { border-color: var(--accent); color: var(--accent); }
.row.action-row .action-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.row.action-row .action-btn:hover { border-color: var(--accent); color: var(--accent); }
.row.action-row .action-btn.active {
  background: var(--accent); color: #1a0c00;
  border-color: var(--accent); font-weight: bold;
}
.row.action-group-row .action-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.row.action-group-row .action-btn:hover { border-color: var(--accent); color: var(--accent); }
.group-title { color: var(--accent); border-bottom: 1px solid var(--border); }

/* ── Info links (external Ptolemy resources) ─────────────────────────── */
.info-link {
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
  font-style: italic;
}
.info-link:hover {
  border-color: var(--accent);
  color: var(--gold);
  background: rgba(212, 160, 32, 0.08);
}
.info-text { color: var(--fg); }
.info-glossary dt { color: var(--accent); }
.info-glossary dd { color: var(--fg); }

/* ── Language / map pickers ──────────────────────────────────────────── */
.map-picker-popup {
  background: rgba(22, 14, 4, 0.98);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.map-picker-popup .map-picker-row { color: var(--fg); }
.map-picker-popup .map-picker-row:hover { background: rgba(212, 160, 32, 0.14); }
.map-picker-popup .map-picker-row.active {
  color: var(--accent);
  background: rgba(212, 160, 32, 0.18);
}
.lang-select-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.lang-select-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-select-btn[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent);
  background: rgba(212, 160, 32, 0.18);
}

/* ── Demo list ───────────────────────────────────────────────────────── */
.demo-controls button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.demo-controls button:hover { border-color: var(--accent); color: var(--accent); }
.demo-list button {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border);
}
.demo-list button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.demo-group-header {
  background: rgba(212, 160, 32, 0.10);
  color: var(--accent);
}
.demo-play-all {
  color: var(--accent);
  border: 1px dashed rgba(212, 160, 32, 0.5);
  background: rgba(212, 160, 32, 0.06);
}
.demo-play-all:hover { background: rgba(212, 160, 32, 0.15); }

/* TimeControlPatch — .autoplay-* theme overrides removed alongside the
   base rules above. Clock UI is now self-styled inline in clockWidget.js. */

/* ── Scrollbar styling (Webkit) ──────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--panel); }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); }

/* ── Legend popup scrollbar & heading colour ─────────────────────────── */
header .info-popup.legend-popup::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Greek ornament: column capitals in header corners ──────────────── */
header .info-box::before {
  content: '𓂀';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(212, 160, 32, 0.40);
  pointer-events: none;
}

/* ── Bar height: 24px search + 46px controls + 52px tabs = 122px ─────── */
/* bottom offsets use calc(Xpx * var(--ui-zoom)) so they track the bar's
   zoomed layout height across all viewport sizes. */
#tab-popups   { bottom: calc(122px * var(--ui-zoom)); }
#info-panels-wrap { bottom: calc(122px * var(--ui-zoom)); }
#epicycle-canvas  { bottom: calc(136px * var(--ui-zoom)); }

/* ── Compact right-panel tabs on short viewports (laptops, small desktops) */
@media (max-height: 860px) {
  .info-panel-tab .ip-label { display: none; }
  .info-panel-tab { padding: 8px 5px; gap: 0; }
}
@media (max-width: 900px) {
  .tab-popup { bottom: 122px !important; top: 26px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHONE REVAMP — Stellarium-style bottom nav (≤ 520 px)
   Collapses the bottom bar to a single tab-icon strip, full-height
   slide-up panels, and touch-friendly targets throughout.
   Overrides must come AFTER all Ptolemaic theme rules.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  /* Set zoom to 1:1 so every explicit px value is face-value — no
     calc(Xpx * var(--ui-zoom)) gymnastics needed at phone size. */
  :root { --ui-zoom: 1; }

  /* ── Bottom bar: Stellarium-style icon strip only ──────────── */
  .bar-search-row { display: none !important; }
  .bar-quick      { display: none !important; }
  
  /* ── Overlay bottom offsets match the new 62 px bar ─────────── */
    #tab-popups       { bottom: 62px !important; }
  #info-panels-wrap { bottom: 62px !important; }
  #epicycle-canvas  { bottom: 76px !important; }

  /* ── Tab popups: full-height slide-up sheets ─────────────────── */
  .tab-popup {
    position: fixed !important;
    top: 26px !important;
    right: 0 !important;
    bottom: 62px !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
  }

  /* ── Tab icon row: fill bar, comfortable 44 px tap targets ───── */
  .tab-icon-row { flex: 1 0 auto; align-items: stretch; }
  .tab-icon-btn {
    padding: 6px 2px 10px;
    gap: 2px;
    min-height: 44px;
  }
  .tab-icon-btn .btn-icon     { font-size: 22px; }
  .tab-icon-btn .btn-label    { font-size: 10px; letter-spacing: 0.07em; }
  .tab-icon-btn .btn-sublabel { display: none; }

  /* ── HUD: compact so it doesn't eat canvas space ─────────────── */
      
  /* ── Tracking-info popup: constrain to screen width ─────────── */
  #tracking-info-popup {
    max-width: calc(100vw - 8px) !important;
    min-width: 0 !important;
  }

  /* ── Group headers: 44 px minimum tap target ────────────────── */
  .tab-popup .group-header {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }

  /* ── Form rows: larger inputs for fingers ────────────────────── */
  .row {
    grid-template-columns: 74px 62px 14px 1fr;
    gap: 4px;
    padding: 5px 0;
  }
  .row label { font-size: 11px; }
  .row input.num {
    min-height: 34px;
    font-size: 14px;
    padding: 5px 6px;
  }
  .row input.slider { height: 24px; }
  .row input[type="date"],
  .row input[type="time"] { min-height: 34px; font-size: 14px; }

  /* ── Header info popup: full-width on phone ──────────────────── */
  header .info-popup {
    font-size: 15px;
    left: 4px;
    right: 4px;
    width: auto;
    max-width: none;
  }

  /* ── LOOK UP / EXIT SKY button: keep it comfortable ─────────── */
  #find-me-btn { padding: 10px 20px; }

  /* ── Safe-area inset handling for system status bar + home
     indicator (real device chrome on Capacitor; simulated in the
     tools/mobile-preview.html harness). Pushes the app's own header
     and bottom bar OUT of the way of platform UI. ────────────── */
  header {
    /* ⚠️ THE RULE THAT ACTUALLY DECIDES IT ON A PHONE. Three `header`
       rules set this; this one carries !important INSIDE the mobile media
       query, so it beats all of them at the width every real user is at.
       Two earlier attempts to fix the title clash edited the other two and
       measured no change - if you are changing header top spacing, change
       it HERE, then re-measure at <=520px.

       The old value was max(3px, inset): it treats the notch inset as the
       WHOLE allowance, so a notched phone puts the title flush against the
       status bar and a desktop gets a 3px hairline. Clearance must be the
       inset PLUS a gutter, never the larger of the two. */
    padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 14px) !important;
    padding-bottom: 8px !important;
  }
  
  /* ── Header action buttons: shrink + wrap so 7+ icons all fit at
     412 px. Hide the title text entirely on phones — the action
     icons make the app self-identifying. ───────────────────────── */
  header h1 { display: none; }
  header .sub, header .sub-note { display: none; }
  header .info-box {
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
    justify-content: flex-end;
  }
  header .info-box > .info-btn,
  header .header-action-btn {
    padding: 4px 6px !important;
    font-size: 14px;
    margin: 0 !important;
    min-width: 30px;
  }
  /* Hide the "About" / "Legend" text labels — keep just the ⓘ / 📖 icons */
  header .info-btn [data-i18n="about_btn"],
  header .info-btn [data-i18n="legend_btn"] { display: none; }

  /* ── Tab icon row: evenly distribute across viewport so the last
     icon (INFO) never falls off the right edge at 412 px. ──────── */
  .tab-icon-row { display: flex !important; justify-content: stretch; }
  .tab-icon-btn { flex: 1 1 0 !important; min-width: 0 !important; }
  .tab-icon-btn .btn-label { font-size: 9px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Feature 8 — Parchment Theme (REMOVED 2026-05-20).
   The standalone parchment palette is now the "Parchment Scholastica"
   entry in the multi-theme dropdown — wired through the html.theme-*
   token bridge at the top of this file. The previous body.theme-parchment
   block + the #view background override are gone because the new system
   is strictly UI chrome and must never touch the WebGL viewport.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   Feature 4/8 — Header action buttons (GPS, Screenshot, Theme toggle)
   ════════════════════════════════════════════════════════════════════════ */
.header-action-btn {
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
  line-height: 1;
}
.header-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.header-action-btn:disabled { opacity: 0.6; cursor: default; }

/* GPS pulse animation while locating */
.header-action-btn.gps-locating {
  animation: gps-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes gps-pulse {
  from { border-color: var(--border); }
  to   { border-color: var(--accent); color: var(--accent); }
}

/* GPS tooltip */
.gps-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  animation: tooltip-fade 2s ease forwards;
}
@keyframes tooltip-fade {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── FIND ME / LOOK UP floating action button ──────────────────────────── */
#find-me-btn {
  position: absolute;
  bottom: 38%;           /* roughly lower-third of the visible sky */
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;

  display: flex;
  align-items: center;
  gap: 8px;

  background: linear-gradient(135deg, rgba(30,16,4,0.94), rgba(18,10,2,0.96));
  border: 1.5px solid var(--gold);
  border-radius: 28px;
  padding: 10px 22px;
  cursor: pointer;
  font-family: 'Trajan Pro', 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(232,192,64,0.6);
  box-shadow:
    0 0 18px rgba(212,160,32,0.35),
    0 0 40px rgba(212,160,32,0.15),
    inset 0 1px 0 rgba(255,220,100,0.15);
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  zoom: var(--ui-zoom, 1);
}
#find-me-btn:hover,
#find-me-btn:focus-visible {
  border-color: #ffe066;
  color: #ffe066;
  box-shadow:
    0 0 28px rgba(212,160,32,0.55),
    0 0 60px rgba(212,160,32,0.25),
    inset 0 1px 0 rgba(255,240,120,0.2);
  transform: translateX(-50%) translateY(-2px);
}
#find-me-btn:active {
  transform: translateX(-50%) translateY(0);
}
#find-me-btn.fmb-active {
  background: linear-gradient(135deg, rgba(4,18,30,0.94), rgba(2,10,18,0.96));
  border-color: #88aadd;
  color: #88aadd;
  text-shadow: 0 0 10px rgba(100,160,240,0.6);
  box-shadow:
    0 0 18px rgba(80,130,220,0.35),
    0 0 40px rgba(80,130,220,0.15);
}
#find-me-btn.fmb-locating {
  opacity: 0.7;
  cursor: wait;
}
.fmb-icon {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(232,192,64,0.7));
}
.fmb-active .fmb-icon {
  filter: drop-shadow(0 0 6px rgba(100,160,240,0.7));
}
.fmb-label {
  font-size: 11px;
  letter-spacing: 3px;
}

@keyframes fmb-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(212,160,32,0.35), 0 0 40px rgba(212,160,32,0.15); }
  50%       { box-shadow: 0 0 28px rgba(212,160,32,0.6),  0 0 60px rgba(212,160,32,0.3);  }
}
/* Pulse animation only when not already active/in-vault */
#find-me-btn:not(.fmb-active) {
  animation: fmb-pulse 3s ease-in-out infinite;
}

/* Hide EXIT-SKY / find-me FAB while a Birth Sky or Synastry Sky
   walkthrough is actively narrating — the FAB sits over the centre of
   the dome and competes with the camera tweens / cartouche labels.
   The walkthrough modules add this body class on startTour and clear
   it on endTour (see natalSkyWalkthrough.js + synastrySkyWalkthrough.js). */
body.ptol-sky-walkthrough-active #find-me-btn {
  display: none !important;
}

/* FPO-06/11 — hide the "LOOK UP" entry FAB once we are ALREADY inside the
   rendered first-person dome (body.fp-mode, set when InsideVault flips true).
   The FAB is the entry control; left visible inside FP it parks a generic
   "LOOK UP" pill dead-centre over the empty sky — exactly where the finder
   reticle and the low ecliptic bodies live — reading as the reticle itself.
   Inside the dome you are already looking up, so the entry button is retired
   until you leave. (Walkthrough rule above covers the narrated-tour case.) */
body.fp-mode #find-me-btn {
  display: none !important;
}

/* INFO-AUTOLINK — the "first mention per section" term links stamped by
   js/ui/infoAutolink.js. A whisper-quiet dotted gold underline: legible as
   "there's more here" without turning prose into a field of hyperlinks.
   Short-tap → the 5s gloss tooltip; long-press → the full index entry. */
.info-term {
  /* IT-1 — clearly visible link affordance: every indexed term reads as
     tappable at a glance (was a faint 0.55-alpha dotted rule). */
  text-decoration: underline dotted rgba(212, 160, 32, 0.85);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  -webkit-text-decoration: underline dotted rgba(212, 160, 32, 0.85);
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}
.info-term:hover,
.info-term:focus-visible {
  text-decoration-color: rgba(212, 160, 32, 1);
  background: rgba(212, 160, 32, 0.08);
  border-radius: 2px;
}
/* During an active long-press the host adds .info-term--holding (optional);
   keep the cue gentle so it never reads as a pressed button. */
.info-term.info-term--holding {
  background: rgba(212, 160, 32, 0.16);
}

/* One-shot reason toast shown above the FAB the first time per
   session geolocation is requested. Mirrors Google Play's
   "purpose evident at request time" guidance — appears briefly
   so the user reads what the location is for before the OS prompt
   pops. Positioned above the FAB; auto-removed after ~2.4s. */
.fmb-reason-toast {
  position: absolute;
  bottom: calc(38% + 60px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(8, 12, 22, 0.92);
  border: 1px solid rgba(232, 192, 64, 0.55);
  border-radius: 6px;
  color: #f5e6c0;
  font: 12px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  pointer-events: none;
  z-index: 1200;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  animation: fmb-reason-fade 2.4s ease-out forwards;
}
@keyframes fmb-reason-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
}

/* ════════════════════════════════════════════════════════════════════════
   TimeControlPatch — the entire .stel-* block (Stellarium-style time
   bar) is removed. The unified clockWidget (js/ui/clockWidget.js) is
   self-styled inline; no shared CSS hooks remain.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   Feature 1 — Onboarding Overlay
   ════════════════════════════════════════════════════════════════════════ */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.onboarding-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px 24px;
  max-width: 460px;
  width: calc(100vw - 48px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: card-appear 0.25s ease-out;
}
@keyframes card-appear {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.onboarding-step-count {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.06em;
}
.onboarding-title {
  font-size: 20px;
  color: var(--accent);
  margin: 0;
}
.onboarding-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
}
.onboarding-extra {
  display: flex;
  justify-content: center;
}
.onboarding-preview-canvas {
  border-radius: 80px;
  background: #0a0e16;
  border: 1px solid var(--border);
  display: block;
}
.onboarding-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.onboarding-btn {
  font: inherit;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.onboarding-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.onboarding-btn.primary:hover { opacity: 0.88; }
.onboarding-btn.secondary {
  background: var(--row);
  color: var(--fg);
}
.onboarding-btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.onboarding-skip {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}
.onboarding-skip:hover { color: var(--fg); }

/* ════════════════════════════════════════════════════════════════════════
   Feature 3 — Splash Screen
   ════════════════════════════════════════════════════════════════════════ */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  animation: splash-in 0.4s ease-out;
}
@keyframes splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#splash-canvas {
  border-radius: 100px;
  display: block;
}
/* SPLASH-1 — the splash image is now the lettered banner (1024×500
   feature graphic), which already carries the wordmark. Scale to the
   viewport width up to a sensible max so it stays legible across
   devices without overrunning narrow phones. The previous square-icon
   sizing (200×200) cropped to the banner's middle on Safari. */
#splash-icon {
  width: min(88vw, 480px);
  height: auto;
  display: block;
}
#splash-title {
  font-size: 17px;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin: 0;
  font-style: italic;
  text-align: center;
  padding: 0 16px;
}
#splash-title[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   Feature 5 — Constellation Canvas Overlay
   ════════════════════════════════════════════════════════════════════════ */
#constellation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════════════════
   Feature AS-3 — Safe Area / Notch Handling (iOS / Android)
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️ THE TITLE-CLASH RULE. This is where the header's top padding is actually
   decided - the base `header` rule far above is overridden here, which is why
   editing that one changes nothing (measured: header buttons stayed at top:6px).
   `max(3px, inset)` is the defect: it treats the notch inset as the WHOLE
   allowance, so a notched device gets the title flush against the status bar
   and a browser gets a 3px hairline. Clearance has to be inset PLUS a gutter,
   never the larger of the two. Measured across astrology / astronomy / AI. */
header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: 8px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
#desc {
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
#control-panel {
  padding-left: max(0px, env(safe-area-inset-left));
}

/* ════════════════════════════════════════════════════════════════════════
   Feature AS-4 — Loading Progress Bar
   ════════════════════════════════════════════════════════════════════════ */
#load-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100;
  background: rgba(255,255,255,0.08);
}
#load-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   Feature AS-5 — Body Info Card (top-right docked panel)
   Previously a bottom-sheet that slid up from the bottom; that
   covered the FP bottom strip's menu buttons. Now docks top-right
   beneath the planet picker and slides in from the right edge.
   ════════════════════════════════════════════════════════════════════════ */
#body-info-card {
  position: fixed;
  /* Sits below the epicycle overlay (top:56, ~36px collapsed) so
     they stack along the right edge rather than colliding. */
  top: 110px; right: 8px;
  /* Narrower + lighter for the live scene (user note): a slimmer column, tighter
     padding, and a softer shadow so it floats rather than blocks the sky. */
  width: min(264px, calc(100vw - 16px));
  z-index: 200;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.42);
}
#body-info-card.open {
  transform: translateX(0);
  opacity: 0.94;
  pointer-events: auto;
}
#body-info-card .bic-handle {
  /* Bottom-sheet drag indicator no longer applies — keep the element
     so the existing innerHTML template doesn't 404 on querySelector,
     but render nothing. */
  display: none;
}
#body-info-card .bic-name {
  font-size: 18px; font-weight: 700;
  color: var(--accent);
  margin-bottom: 3px;
}
#body-info-card .bic-category {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
#body-info-card .bic-period {
  font-size: 12.5px;
  color: var(--fg);
  margin-bottom: 5px;
}
#body-info-card .bic-riseSet {
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 10px;
}
#body-info-card .bic-riseSet-row { display: flex; gap: 8px; margin-bottom: 2px; }
#body-info-card .bic-rs-label { color: var(--muted); min-width: 44px; }
/* JPL-CHK-06 — diagnostics readout; revealed only when long-press opens
   the card in extended mode (data-extended="true"). */
#body-info-card .bic-jpl {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 184, 54, 0.18);
  border-radius: 6px;
  background: rgba(255, 184, 54, 0.05);
  font-size: 13px;
  line-height: 1.4;
}
#body-info-card .bic-jpl-head {
  font: 600 10px/1.2 "Cinzel", Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffb836;
  margin-bottom: 6px;
}
#body-info-card .bic-jpl-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  margin-bottom: 2px;
}
#body-info-card .bic-jpl-label { color: var(--muted); }
#body-info-card .bic-jpl-ours,
#body-info-card .bic-jpl-jpl   { color: var(--fg); font-variant-numeric: tabular-nums; }
#body-info-card .bic-jpl-delta { color: #ffe9b3; font-weight: 600; font-variant-numeric: tabular-nums; }
#body-info-card .bic-jpl-verdict {
  margin-top: 6px;
  font: 400 12px/1.34 "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: #d8c9a3;
}
#body-info-card .bic-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg);
  font-style: italic;
}
#body-info-card .bic-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none; border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}
#body-info-card .bic-close:hover { color: var(--fg); }

/* ════════════════════════════════════════════════════════════════════════
   Feature AS-6 — Tracker Search Box
   ════════════════════════════════════════════════════════════════════════ */
#tracker-search-wrap {
  padding: 6px 8px 4px;
}
#tracker-search {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
#tracker-search:focus { border-color: var(--accent); }
#tracker-search::placeholder { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════════
   Feature AS-9 — Paywall Modal
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   First-Person Simple Mode (fp-mode)
   Shown when InsideVault = true. Hides the full bottom bar and shows
   a clean Stellarium-style overlay instead.
   ════════════════════════════════════════════════════════════════════════ */

/* Hide full chrome in fp-mode */
body.fp-mode #tab-popups        { display: none !important; }
body.fp-mode #info-panels-wrap  { display: none !important; }
body.fp-mode header             { display: none !important; }
body.fp-mode footer#desc        { display: none !important; }

/* fp overlay — sits over the 3-D view, pointer-events off by default */
#fp-overlay {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}
body.fp-mode #fp-overlay { display: block; }

/* FP-1 — when the planet geometry card (.opc-backdrop z-9850) is open,
   force the sky WebGL canvases BELOW it. A GPU-composited canvas can
   otherwise paint over a higher-z DOM overlay on mobile (Cloudflare
   build), so the card "pops up behind the canvas". opc is modal, so
   dropping the sky layers under it for the duration is safe. */
body.opc-card-open #feCanvas,
body.opc-card-open #fp-ground-canvas,
body.opc-card-open #fp-planet-labels,
body.opc-card-open #fp-overlay,
body.opc-card-open #ar-overlay,
body.opc-card-open #ar-canvas { z-index: 1 !important; }

/* FP-5 — aether-purple horizon glow. A soft violet bloom rising from
   the lower sky so first-person reads in the same quintessence palette
   as the new orrery, without touching the WebGL renderer. Pointer-
   transparent; only shown in fp-mode, sits under the FP chrome. */
#fp-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(126, 74, 188, 0.34) 0%, rgba(70, 46, 140, 0.16) 38%, rgba(10, 6, 28, 0) 70%),
    radial-gradient(90% 50% at 18% 100%, rgba(92, 58, 158, 0.20) 0%, rgba(10, 6, 28, 0) 60%);
}

/* ── Three.js ground canvas (full-screen, alpha renderer) ─────────── */
/* Horizon is handled by 3D perspective — no CSS crop needed.          */
/* Sky above horizon stays transparent → main dome renderer shows through. */
#fp-ground-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
}
body:not(.fp-mode) #fp-ground-canvas { display: none; }

/* ── planet label canvas ─────────────────────────────────────────── */
#fp-planet-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* ── left sidebar: country quick-hops ──────────────────────────────── */
.fp-sidebar {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: auto;
}
.fp-hop {
  width: 44px;
  height: 26px;
  background: rgba(10,6,0,0.72);
  border: 1px solid rgba(200,150,50,0.35);
  color: #d4b060;
  font-size: 10px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s;
}
.fp-hop:hover {
  background: rgba(30,18,0,0.88);
  border-color: rgba(200,150,50,0.8);
  color: #f0c860;
}

/* .fp-time-bar and .fp-btn removed — replaced by .stel-bar */

/* ── bottom strip ───────────────────────────────────────────────────── */
.fp-bottom-strip {
  position: absolute;
  /* Sit 10px above the global bottom-nav bar so the FP control strip
     (Stellarium-style toggles + zoom + exit) stays visible. --mode-bar-h
     is published on <html> by bottomNav.js; falls back to 0 if the
     bar isn't mounted yet. */
  bottom: calc(10px + var(--mode-bar-h, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  background: rgba(12, 16, 38, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 210, 99, 0.38);
  border-radius: 24px;
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 210, 99, 0.12);
}
.fp-strip-btn {
  width: 40px;
  height: 40px;
  background: rgba(20, 26, 56, 0.6);
  border: 1px solid rgba(255, 210, 99, 0.25);
  color: var(--color-accent-2, #FFD263);
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s, border-color 0.13s;
  font-family: inherit;
}
.fp-strip-btn:hover {
  background: rgba(36, 44, 84, 0.88);
  border-color: rgba(255, 210, 99, 0.7);
  color: #FFE9B8;
}
.fp-strip-btn--vr[aria-pressed="true"] {
  background: rgba(255, 210, 99, 0.26);
  border-color: rgba(255, 210, 99, 0.75);
  color: #fff1c0;
}
.fp-strip-btn--flash {
  animation: fp-strip-flash 0.42s ease-out;
}
@keyframes fp-strip-flash {
  0%   { box-shadow: 0 0 0 2px rgba(240, 200, 96, 0.9); }
  100% { box-shadow: 0 0 0 14px rgba(240, 200, 96, 0); }
}
.fp-strip-btn[aria-pressed="true"] {
  background: rgba(255, 210, 99, 0.2);
  border-color: rgba(255, 210, 99, 0.85);
  color: #FFE9B8;
}
/* vault button — slightly larger face */
.fp-vault-btn { font-size: 20px; }
/* world model button — text label */
.fp-world-btn { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
/* sky button — unicode icon */
.fp-sky-btn   { font-size: 16px; }
.fp-strip-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 210, 99, 0.25);
  flex-shrink: 0;
}

/* ── submenu panels (shared) ────────────────────────────────────────── */
.fp-submenu {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 16, 38, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 210, 99, 0.42);
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 220px;
  pointer-events: auto;
  display: none;
  z-index: 26;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.fp-submenu.open { display: block; }
.fp-submenu-title {
  color: var(--color-accent, #FFD263);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fp-submenu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 210, 99, 0.1);
  color: var(--color-accent-2, #FFD263);
  font-size: 12px;
  gap: 12px;
}
.fp-submenu-row:last-child { border-bottom: none; }

/* toggle switch */
.fp-toggle {
  width: 36px;
  height: 20px;
  min-width: 36px;
  background: rgba(20, 26, 56, 0.8);
  border: 1px solid rgba(255, 210, 99, 0.3);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background 0.18s;
}
.fp-toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #6a708e;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.18s, background 0.18s;
}
.fp-toggle[aria-pressed="true"] {
  background: rgba(255, 210, 99, 0.35);
  border-color: rgba(255, 210, 99, 0.85);
}
.fp-toggle[aria-pressed="true"]::after {
  transform: translateX(16px);
  background: var(--color-accent, #FFD263);
}

/* planet grid */
.fp-planet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.fp-planet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(20, 26, 56, 0.6);
  border: 1px solid rgba(255, 210, 99, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s;
  font-family: inherit;
}
.fp-planet-btn:hover { background: rgba(36, 44, 84, 0.88); }
.fp-planet-btn[aria-pressed="true"] {
  background: rgba(255, 210, 99, 0.2);
  border-color: rgba(255, 210, 99, 0.85);
}
.fp-planet-sym { font-size: 18px; line-height: 1; }
.fp-planet-lbl { font-size: 9px; color: var(--color-accent-2, #FFD263); opacity: 0.8; }
.fp-planet-sub {
  font-size: 8px;
  color: #7a8290;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fp-planet-btn--below {
  opacity: 0.55;
}
.fp-planet-btn--below .fp-planet-sub { color: #c0742c; }
.fp-planet-btn--flash {
  animation: fp-planet-flash 0.4s;
}
@keyframes fp-planet-flash {
  0%, 100% { background: rgba(40,26,8,0.6); }
  50%      { background: rgba(192,116,44,0.45); }
}

/* FPO-06 — the PERSISTENT docked planet picker. The seven luminaries sit in a
   single always-visible glyph row just above the FP bottom strip (was a pop-up
   submenu behind a toggle). Overrides the .fp-submenu hide + the 4-col grid;
   drops the title row + per-button labels so it reads as a compact picker. */
/* TM-01 — docked first-person time scrubber (sits above the planet row) */
/* TT-04 — first-person host for the shared (compact, embedded) day-bar +
   transport. Bottom-centred pill where FP users expect the time dock. */
.fp-daybar-host {
  position: absolute;
  /* Sit clear ABOVE the always-on planet picker (bottom 66px, ~45px tall → top
     ~111px) so the scrubber never covers the per-body altitude readouts when a
     planet is selected. Was 104px, which overlapped the picker's top edge. */
  bottom: calc(124px + var(--mode-bar-h, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 94vw);
  z-index: 24;
  pointer-events: auto;
  border-radius: 16px;
  background: rgba(8, 10, 22, 0.74);
  border: 1px solid rgba(255, 210, 99, 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 2px 6px 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.fp-time-dock {
  position: absolute;
  bottom: calc(112px + var(--mode-bar-h, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 24;
  max-width: calc(100vw - 16px);
  padding: 5px 12px;
  border-radius: 18px;
  background: rgba(12, 16, 38, 0.74);
  border: 1px solid rgba(255, 210, 99, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fp-time-dock .fp-time-now { width: 34px; height: 34px; }
.fp-time-scrub {
  width: 150px;
  max-width: 42vw;
  height: 22px;
  accent-color: #ffd263;          /* gold thumb/track on modern browsers */
  cursor: pointer;
}
.fp-time-label {
  min-width: 44px;
  font: 600 12px/1 Cinzel, Georgia, serif;
  color: rgba(224, 200, 140, 0.9);
  text-align: center;
}
.fp-time-label--scrubbed { color: rgba(255, 184, 140, 0.96); }

.fp-planet-menu--docked {
  display: flex !important;        /* override .fp-submenu display:none */
  align-items: center;
  bottom: calc(66px + var(--mode-bar-h, 0px));
  padding: 5px 9px;
  min-width: 0;
  max-width: calc(100vw - 16px);
  border-radius: 18px;
  background: rgba(12, 16, 38, 0.74);
  z-index: 24;                     /* below the sky/map submenus (26), above the canvas */
}
.fp-planet-menu--docked .fp-submenu-title { display: none; }
.fp-planet-menu--docked .fp-planet-grid {
  display: flex;                   /* one row of 7, not the 4-col grid */
  grid-template-columns: none;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 0;
}
.fp-planet-menu--docked .fp-planet-btn { min-width: 40px; padding: 4px 3px; }
.fp-planet-menu--docked .fp-planet-lbl { display: none; }  /* glyph + below/up sub only */

/* map choice buttons */
.fp-map-row { justify-content: flex-start; }
.fp-map-choice {
  width: 100%;
  padding: 6px 10px;
  background: rgba(20, 26, 56, 0.6);
  border: 1px solid rgba(255, 210, 99, 0.25);
  border-radius: 7px;
  color: var(--color-accent-2, #FFD263);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.13s;
  font-family: inherit;
}
.fp-map-choice:hover { background: rgba(36, 44, 84, 0.88); color: #FFE9B8; }
.fp-map-choice[aria-pressed="true"] {
  background: rgba(255, 210, 99, 0.2);
  border-color: rgba(255, 210, 99, 0.85);
  color: #FFE9B8;
}

/* ── God-mode floating buttons (left side, 3rd-person only) ─────────── */
#god-fabs {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  pointer-events: auto;
}
body.fp-mode #god-fabs { display: none; }
.god-fab {
  width: 44px;
  height: 44px;
  background: rgba(12, 16, 38, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 210, 99, 0.45);
  border-radius: 50%;
  color: var(--color-accent-2, #FFD263);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 210, 99, 0.12);
}
.god-fab:hover {
  background: rgba(36, 44, 84, 0.92);
  border-color: rgba(255, 210, 99, 0.9);
  color: #FFE9B8;
}
/* Record / share fab — single circular dot icon. Pulses red while
   recording and the label switches to a live countdown. */
.god-fab-rec {
  color: #d44848;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.god-fab-rec.rec-share-btn--recording,
.rec-share-btn--recording {
  background: rgba(120, 20, 20, 0.85);
  border-color: #e85050;
  color: #fff;
  animation: rec-share-pulse 1.1s ease-in-out infinite;
  font-size: 14px;
}
@keyframes rec-share-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 80, 80, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 80, 80, 0.05); }
}

#paywall-modal {
  position: fixed;
  inset: 0;
  /* Above #bottom-nav (9800) — otherwise the nav and its raised ASK button
     render ON TOP of the purchase dialog and cover the Restore/Later buttons.
     Stays below the 9900+ system overlays. */
  z-index: 9850;
  background: rgba(2, 3, 8, 0.86);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
/* HTML `hidden` attribute must win over display:flex — otherwise the invisible
   modal covers the whole viewport and blocks all clicks/touches. */
#paywall-modal[hidden] { display: none !important; }
#paywall-modal.open { opacity: 1; pointer-events: auto; }
#paywall-card {
  /* Dark starry void + low purple-nebula glow — the same treatment as the AI
     screen and the Astrology/Theatre scene, so the purchase surface reads as
     part of the app instead of a stock blue dialog. Near-black, NOT var(--panel)
     (which is navy on the default palette and looked pasted-on). */
  background-color: #05060e;
  background-image:
    radial-gradient(760px 420px at 12% -10%, color-mix(in srgb, var(--color-accent-cool, #7a5cff) 24%, transparent), transparent 62%),
    radial-gradient(700px 520px at 104% 4%, color-mix(in srgb, #6a3cc8 20%, transparent), transparent 58%),
    radial-gradient(700px 620px at 50% 118%, color-mix(in srgb, #3a2a7a 26%, transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 30px 40px,  rgba(255,255,255,0.80), transparent 52%),
    radial-gradient(1.2px 1.2px at 130px 95px, rgba(255,255,255,0.50), transparent 52%),
    radial-gradient(1.5px 1.5px at 90px 165px, rgba(255,255,255,0.65), transparent 52%);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, 210px 210px, 170px 170px, 250px 250px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) inset;
  border-radius: 16px;
  padding: 30px 26px 26px;
  max-width: 400px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: center;
  position: relative;
  color: #ece9e0;
}
/* The card carries its own void, so the palette's body/muted tokens must not
   wash it out on the lighter themes. */
#paywall-card .pw-subtitle { color: #b9b3a6; }
#paywall-card .pw-features li { color: #ece9e0; }
.pw-icon { font-size: 40px; margin-bottom: 8px; line-height: 1; }
/* ⚠️ PW-TEST (STRIP BEFORE LAUNCH) — fake test-receipt styling (paywall.js). */
.pw-test-check { color: #7ade8e; }
.pw-test-badge {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 5px 12px;
  border: 1px solid rgba(122, 222, 142, 0.65);
  border-radius: 999px;
  color: #7ade8e;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pw-title {
  font-size: 24px; font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}
.pw-subtitle {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 20px;
}
.pw-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}
.pw-features li {
  font-size: 15px;
  color: var(--fg);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ⛔ NO GREEN TICKS AND NO FILLED YELLOW. The screen read as a SaaS pricing
   table: lime checkmarks, a solid amber "Unlock — $19.99" slab, an amber pill
   repeating the price. Against an audience that reads Hellenistic sources, that
   styling is the claim — it says consumer app, and it says it before a word of
   the copy is read. The whole surface is restated below in the app's own
   register: engraved gold hairlines, small caps, one accent, no fills. */
.pw-check {
  color: var(--gold, #c9a961);
  font-size: 12px;
  line-height: 1.6;
  flex-shrink: 0;
  opacity: 0.75;
}
/* The three exports, named with their page counts — the buyer should know
   exactly what lands on their device before paying. */
.pw-exports {
  text-align: left;
  margin: 0 0 18px;
  padding: 14px 14px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
  background: rgba(255,255,255,0.028);
}
.pw-exports-head {
  margin: 0 0 10px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent, #FFB836);
  opacity: 0.9;
}
.pw-export-list { list-style: none; margin: 0; padding: 0; }
.pw-export-list li { margin: 0 0 11px; }
.pw-export-list li:last-child { margin-bottom: 4px; }
.pw-export-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #f2eee4;
  margin-bottom: 2px;
}
.pw-export-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: #a9a396;
}
.pw-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}
.pw-btn:disabled { opacity: 0.55; cursor: default; }
/* ⭐ THE PRIMARY IS AN ENGRAVED PLATE, NOT A HIGHLIGHTER. A hairline gold border,
   gold small-caps type, and the faintest warm wash — the same treatment the app
   already gives its own section rules. It still reads unmistakably as the primary
   action because nothing else on the card is bordered in gold. */
.pw-btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold, #c9a961) 13%, transparent),
    color-mix(in srgb, var(--gold, #c9a961) 6%, transparent));
  color: var(--gold, #c9a961);
  border-color: color-mix(in srgb, var(--gold, #c9a961) 62%, transparent);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px 12px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pw-btn-primary:hover:not(:disabled), .pw-btn-primary:focus-visible {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold, #c9a961) 22%, transparent),
    color-mix(in srgb, var(--gold, #c9a961) 11%, transparent));
  border-color: var(--gold, #c9a961);
  color: #f4ecd8;
}
@media (prefers-reduced-motion: reduce) { .pw-btn-primary { transition: none; } }
.pw-btn-secondary {
  background: var(--row);
  color: var(--fg);
  border-color: var(--border);
}
.pw-btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.pw-btn-ghost {
  background: none;
  color: var(--muted);
  border-color: transparent;
  font-weight: 400;
  margin-bottom: 0;
}
.pw-btn-ghost:hover { color: var(--fg); }
/* PW §4 — Complete Reading Engine modal extras + locked-content components */
/* ⭐ THE PROOF BLOCK — the answer to this reader's only real objection, which is
   not price but "does this app actually do the technique". Set apart with a rule
   rather than a box, so it reads as a statement rather than another feature card. */
.pw-proof {
  text-align: left;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold, #c9a961) 22%, transparent);
}
.pw-proof-head {
  margin: 0 0 6px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c9a961);
  opacity: 0.9;
}
.pw-proof-body { margin: 0; font-size: 12.5px; line-height: 1.55; color: #a9a396; }

/* ⛔ THE PRICE IS TYPOGRAPHY, NOT A PILL. It appeared twice — once in an amber
   pill and again inside the button label — which is how a $19.99 one-time
   purchase manages to feel like a hard sell. Stated once, in the app's serif,
   with the terms in small quiet type beneath it. */
.pw-terms {
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold, #c9a961) 22%, transparent);
}
.pw-price-line { margin: 0 0 6px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.pw-price-figure {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #f2eee4;
  letter-spacing: 0.01em;
}
.pw-price-once {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #c9a961);
  opacity: 0.85;
}
.pw-terms-line { margin: 0 0 5px; font-size: 0.8rem; line-height: 1.5; color: #a9a396; }
.pw-free-line  { margin: 0; font-size: 0.78rem; line-height: 1.5; color: #8e8a7e; opacity: 0.85; }
.pw-lock-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 10px 0; padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--gold, #c9a961) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold, #c9a961) 8%, transparent);
}
.pw-lock-glyph { font-size: 1.05rem; opacity: 0.9; }
.pw-lock-glyph--big { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.pw-lock-line { flex: 1 1 200px; font-size: 0.88rem; font-style: italic; opacity: 0.92; }
/* ⛔ THE SECOND FILLED-GOLD SLAB, and it sits inline in the middle of a reading —
   the worst possible place for one. Same engraved treatment as the modal's primary,
   so the in-reading prompt and the purchase screen finally look like one product. */
.pw-lock-cta {
  border: 1px solid color-mix(in srgb, var(--gold, #c9a961) 55%, transparent);
  border-radius: 8px; padding: 8px 15px; cursor: pointer;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--gold, #c9a961) 9%, transparent);
  color: var(--gold, #c9a961);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pw-lock-cta:hover, .pw-lock-cta:focus-visible {
  background: color-mix(in srgb, var(--gold, #c9a961) 18%, transparent);
  border-color: var(--gold, #c9a961);
  color: #f4ecd8;
}
@media (prefers-reduced-motion: reduce) { .pw-lock-cta { transition: none; } }
.pw-sample-ribbon {
  margin: 6px 0 10px; padding: 6px 12px; border-radius: 8px;
  font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0.85;
  background: color-mix(in srgb, var(--gold, #c9a961) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold, #c9a961) 30%, transparent);
}
.pw-syn-locked {
  margin: 18px 0; padding: 26px 20px; text-align: center;
  border: 1px dashed color-mix(in srgb, var(--gold, #c9a961) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold, #c9a961) 7%, transparent);
}
.pw-syn-locked-title { margin: 4px 0 8px; font-size: 1.05rem; }
.pw-syn-locked-body { margin: 0 0 14px; font-size: 0.9rem; opacity: 0.85; }
.pw-syn-locked-demo {
  display: block; margin: 10px auto 0; background: none; border: 0;
  color: var(--gold, #c9a961); text-decoration: underline; cursor: pointer;
  font-size: 0.85rem;
}
/* Subscription plan buttons */
.pw-plan-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.pw-plan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 12px;
  background: var(--row);
  color: var(--fg);
  border-color: var(--border);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.pw-plan-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--hover, rgba(212,160,32,0.08));
}
.pw-plan-featured {
  border-color: var(--accent);
  background: rgba(212,160,32,0.08);
  order: -1;
}
.pw-plan-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 2px;
}
.pw-plan-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.pw-plan-price {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}
.pw-status {
  font-size: 13px;
  min-height: 18px;
  margin: 8px 0 0;
  color: #a8d8a0;
}

/* ════════════════════════════════════════════════════════════════════════
   Privacy footer link
   ════════════════════════════════════════════════════════════════════════ */
.privacy-link {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 10px;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   NATAL CHART MODAL
   ════════════════════════════════════════════════════════════════════════ */

#natal-chart-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#natal-chart-overlay[hidden] { display: none; }

.nc-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(212,160,32,0.12);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 16px;
}

.nc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--row) 0%, var(--panel) 100%);
  border-radius: 10px 10px 0 0;
}
.nc-title {
  font: bold 15px Georgia, serif;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.nc-close {
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  font: 14px/1 inherit;
  padding: 4px 9px;
}
.nc-close:hover { border-color: var(--accent); color: var(--accent); }

.nc-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 18px 6px;
}
.nc-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nc-lbl {
  color: var(--muted);
  font-size: 12px;
  min-width: 110px;
  flex-shrink: 0;
}
.nc-input {
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: 12px/1.4 system-ui, sans-serif;
  padding: 3px 8px;
  outline: none;
  flex: 0 1 auto;
}
.nc-input:focus { border-color: var(--accent); }
.nc-btn {
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  font: 12px/1.4 inherit;
  padding: 3px 10px;
  flex-shrink: 0;
}
.nc-btn:hover { border-color: var(--accent); color: var(--accent); }
.nc-loc-label {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.nc-canvas {
  display: block;
  margin: 10px auto 0;
  max-width: 100%;
  border-radius: 6px;
}

/* Planet list below canvas */
.nc-planet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px 0;
}
.nc-prow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 13px;
  font-family: Georgia, serif;
}
.nc-prow:hover { background: rgba(212,160,32,0.07); }
.nc-psym { width: 20px; text-align: center; font-size: 15px; }
.nc-pname { color: var(--muted); font-size: 12px; min-width: 72px; }
.nc-ppos { color: var(--fg); }
.nc-retro {
  color: #ff9090;
  font-size: 11px;
  font-style: italic;
  margin-left: 4px;
}
.nc-asc-row { color: var(--accent); font-weight: 600; background: rgba(212,160,32,0.06); }
.nc-mc-row  { color: #a0c0e0; background: rgba(160,192,224,0.05); }

/* Body info card — zodiac row */
.bic-zodiac { padding: 0 14px; }
.bic-zodiac .bic-riseSet-row { gap: 8px; }
.bic-zodiac-pos { color: var(--fg); font-size: 13px; font-family: Georgia, serif; }
.bic-retro-badge {
  font-size: 11px;
  font-style: italic;
  color: #ff9090;
  padding: 1px 5px;
  border: 1px solid rgba(255,144,144,0.4);
  border-radius: 3px;
  background: rgba(255,144,144,0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   AR SKY OVERLAY
   ════════════════════════════════════════════════════════════════════════ */

#ar-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  /* AR-scoped palette. Recoloured from the old cyan to the app's gold-
     on-blue so the first-person sky reads as part of the app (user
     request: "fit the theme"). DOM chrome reads these; the canvas uses
     the JS AR{}. */
  --arc:      #FFD263;
  --arc-line: rgba(255,210,99,0.40);
  --arc-ink:  #f2e6c4;
  --arc-dim:  rgba(242,230,196,0.78);
  --arc-bg:   rgba(12,16,38,0.62);
}
#ar-overlay[hidden] { display: none; }
/* No-camera starfield fallback (chunk D toggles .ar-starfield). */
#ar-overlay.ar-starfield {
  /* Aether-purple nebula field (was cool blue-black) — matches the new
     orrery quintessence palette. */
  background:
    radial-gradient(ellipse at 50% 32%, #1c1340 0%, #0e0a26 55%, #060410 100%),
    radial-gradient(ellipse at 78% 88%, rgba(126,74,188,0.22) 0%, rgba(6,4,16,0) 60%);
}

#ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#ar-overlay.ar-starfield #ar-video { display: none; }
#ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; touch-action: none; cursor: grab; }
#ar-overlay.ar-starfield #ar-canvas:active, #ar-canvas:active { cursor: grabbing; }

/* AR-RETIRE — natal/famous-chart walkthrough composited OVER the rendered
   first-person dome (#view). The overlay goes fully transparent (the dome IS
   the sky behind it) and drops its own camera chrome; only the natal-scaffold
   canvas remains, and it lets taps fall through to the dome's own tap-to-inspect. */
#ar-overlay.ar-over-dome,
#ar-overlay.ar-over-dome.ar-starfield { background: transparent !important; }
#ar-overlay.ar-over-dome #ar-video { display: none; }
#ar-overlay.ar-over-dome #ar-canvas { pointer-events: none; cursor: default; }
#ar-overlay.ar-over-dome .ar-cluster,
#ar-overlay.ar-over-dome .ar-bottombar,
#ar-overlay.ar-over-dome .ar-close,
#ar-overlay.ar-over-dome .ar-info,
#ar-overlay.ar-over-dome .ar-location,
#ar-overlay.ar-over-dome #ar-panel,
#ar-overlay.ar-over-dome #ar-find-pop { display: none !important; }

/* ── Shared glass surface (self-contained; no dependency on .ac-glass) ── */
#ar-overlay .ar-glass {
  background: linear-gradient(160deg, rgba(10,16,26,0.62) 0%, rgba(6,10,18,0.42) 100%);
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  border: 1px solid var(--arc-line);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Round glass icon buttons (cluster + close + info) ── */
#ar-overlay .ar-iconbtn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--arc-ink);
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#ar-overlay .ar-iconbtn:hover { color: var(--arc); border-color: var(--arc); }
#ar-overlay .ar-iconbtn[aria-pressed="true"] { color: var(--arc); border-color: var(--arc); background: rgba(255,210,99,0.14); }

/* ── Walkthrough highlight glow — skyWalkthrough.js lights up one control per step ── */
#ar-overlay .ar-wt-target { animation: arWtPulse 1.4s ease-in-out infinite; border-radius: 12px; }
@keyframes arWtPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,210,99,0.55), 0 0 12px 2px rgba(255,210,99,0.45); }
  50%      { box-shadow: 0 0 0 3px rgba(255,210,99,0.95), 0 0 22px 6px rgba(255,210,99,0.75); }
}

#ar-overlay .ar-cluster {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: max(12px, env(safe-area-inset-left, 12px));
  z-index: 9100; display: flex; flex-direction: column; gap: 10px;
}
#ar-overlay .ar-close { position: absolute; top: max(12px, env(safe-area-inset-top, 12px)); right: max(12px, env(safe-area-inset-right, 12px)); z-index: 9100; }
#ar-overlay .ar-info  { position: absolute; bottom: max(14px, env(safe-area-inset-bottom, 14px)); right: max(12px, env(safe-area-inset-right, 12px)); z-index: 9100; }
#ar-overlay .ar-location { position: absolute; top: max(12px, env(safe-area-inset-top, 12px)); left: max(12px, env(safe-area-inset-left, 12px)); z-index: 9100; }

/* ── Find-a-body popover (off the cluster find button) ── */
#ar-overlay .ar-findpop {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: calc(max(12px, env(safe-area-inset-left, 12px)) + 56px);
  z-index: 9120; width: 148px; max-height: 64vh; overflow-y: auto;
  padding: 6px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: auto; color: var(--arc-ink);
}
#ar-overlay .ar-findpop[hidden] { display: none; }
#ar-overlay .ar-findpop-item {
  text-align: left; font: 12px/1.3 system-ui, sans-serif; color: var(--arc-dim);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; letter-spacing: 0.02em;
}
#ar-overlay .ar-findpop-item:hover { background: rgba(255,210,99,0.10); color: var(--arc-ink); }
#ar-overlay .ar-findpop-item[aria-checked="true"] { background: rgba(255,210,99,0.18); color: var(--arc); border-color: var(--arc-line); }
#ar-overlay .ar-findpop-clear { margin-top: 2px; border-top: 1px solid rgba(255,210,99,0.12); border-radius: 0 0 8px 8px; }

/* ── Collapsible layers / settings panel ── */
#ar-overlay .ar-panel {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: calc(max(12px, env(safe-area-inset-left, 12px)) + 56px);
  z-index: 9100; width: min(258px, 72vw);
  max-height: 72vh; overflow-y: auto;
  padding: 12px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: auto; color: var(--arc-ink);
}
#ar-overlay .ar-panel[hidden] { display: none; }
#ar-overlay .ar-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ar-overlay .ar-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 11px/1.2 system-ui, sans-serif; color: var(--arc-dim);
  background: rgba(255,210,99,0.06);
  border: 1px solid var(--arc-line); border-radius: 999px;
  padding: 5px 11px 5px 8px; cursor: pointer; letter-spacing: 0.03em;
}
#ar-overlay .ar-chip svg { opacity: 0.85; }
#ar-overlay .ar-chip[aria-pressed="true"] { background: rgba(255,210,99,0.18); color: var(--arc-ink); border-color: var(--arc); }
#ar-overlay .ar-chip[aria-pressed="true"] svg { opacity: 1; }
#ar-overlay .ar-slider-wrap { display: flex; flex-direction: column; gap: 4px; font: 10px/1.2 ui-monospace, monospace; color: var(--arc-dim); }
#ar-overlay .ar-slider-label { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.04em; }
#ar-overlay .ar-slider-label b { color: var(--arc); font-weight: 600; }
#ar-overlay .ar-slider-wrap input[type=range] { width: 100%; accent-color: var(--arc); }
#ar-overlay .ar-slider-wrap select {
  font: 11px/1.2 system-ui, sans-serif; color: var(--arc-ink);
  background: rgba(8,12,18,0.7); border: 1px solid var(--arc-line);
  border-radius: 8px; padding: 4px 6px; accent-color: var(--arc);
}

/* ── Persistent bottom identification bar ── */
#ar-overlay .ar-bottombar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 9100; display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  min-width: 120px; max-width: 78vw;
  padding: 7px 18px; border-radius: 14px;
  pointer-events: none; text-align: center; color: var(--arc-ink);
  transition: opacity 0.25s ease;
}
#ar-overlay .ar-bottombar[data-empty="true"] { opacity: 0.45; }
#ar-overlay .ar-bb-name { font: 600 16px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.02em; }
#ar-overlay .ar-bb-meta { font: 11px/1.3 ui-monospace, monospace; color: var(--arc); opacity: 0.85; }
#ar-overlay .ar-bb-meta:empty { display: none; }

/* ── Transient status toast (top-center) ── */
#ar-overlay .ar-status {
  position: absolute; top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%; transform: translateX(-50%); z-index: 9100;
  background: var(--arc-bg); border: 1px solid var(--arc-line);
  border-radius: 8px; color: var(--arc-ink);
  font: 12px/1.4 system-ui, sans-serif; padding: 6px 14px;
  pointer-events: none; max-width: 70vw; text-align: center;
}
#ar-overlay .ar-status:empty { display: none; }

/* ── Permission / about card ── */
#ar-overlay .ar-permission-card {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 9200;
  border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  padding: 26px 26px 20px; width: min(380px, 90vw);
  text-align: center; color: var(--arc-ink);
}
#ar-overlay .ar-permission-card[hidden] { display: none; }
#ar-overlay .ar-perm-icon { display: grid; place-items: center; margin-bottom: 8px; color: var(--arc); }
#ar-overlay .ar-perm-icon svg { width: 34px; height: 34px; }
#ar-overlay .ar-perm-title { font: bold 16px "Cinzel", Georgia, serif; color: var(--arc); margin-bottom: 12px; letter-spacing: 0.04em; }
#ar-overlay .ar-perm-body { color: var(--arc-ink); font-size: 13px; line-height: 1.55; text-align: left; margin-bottom: 16px; }
#ar-overlay .ar-perm-body p { margin: 0 0 8px; }
#ar-overlay .ar-perm-body p:last-child { margin-bottom: 0; }
#ar-overlay .ar-perm-body strong { color: var(--arc); }
#ar-overlay .ar-perm-body em { color: var(--arc); font-style: normal; }
#ar-overlay .ar-perm-btn {
  background: rgba(255,210,99,0.14); border: 1px solid var(--arc);
  border-radius: 10px; color: var(--arc-ink); cursor: pointer;
  font: bold 14px "Cinzel", Georgia, serif; padding: 11px 28px;
  width: 100%; transition: background 0.15s; letter-spacing: 0.03em;
}
#ar-overlay .ar-perm-btn:hover { background: rgba(255,210,99,0.26); }
#ar-overlay .ar-perm-skip { background: transparent; border-color: var(--arc-line); color: var(--arc-dim); font-weight: 500; margin-top: 8px; }
#ar-overlay .ar-perm-error { margin-top: 10px; color: #ff9090; font-size: 12px; line-height: 1.4; }
#ar-overlay .ar-perm-error[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   PLANETARY HOURS WIDGET
   ════════════════════════════════════════════════════════════════════════ */

#planetary-hours-widget {
  /* Docked top-left as a small chip that pops out when clicked. The
     previous bottom-right anchor was hidden behind the time bar and
     the FP bottom strip, and once minimised the user had no way to
     re-open it. Top-left tucks under the tracking-info popup
     (also top-left, but only shows when a body is tracked) and stays
     reachable. */
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 16;
  zoom: var(--ui-zoom);
  font-family: Georgia, serif;
  min-width: 160px;
  max-width: 240px;
  pointer-events: auto;
}
/* When a body is tracked the tracking-info popup also docks top-left;
   nudge the hours widget right so they don't collide. */
body:has(#tracking-info-popup:not([hidden])) #planetary-hours-widget {
  left: 252px;
}
/* On HOME the planetary-hours widget was relocated from the sky overlay; it
   flows inline as a small centred card instead of the absolute top-left dock. */
.home-hours-host {
  display: flex;
  justify-content: center;
  margin: 2px 0 4px;
}
.home-hours-host #planetary-hours-widget {
  position: relative;
  top: auto; left: auto;
  z-index: auto;
  max-width: min(320px, 90vw);
}
/* Collapsed state */
.ph-widget.ph-collapsed .ph-collapsed-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(212,160,32,0.5);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  font: 12px/1.4 Georgia, serif;
  padding: 5px 10px;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.ph-widget.ph-collapsed .ph-collapsed-btn:hover {
  background: rgba(212,160,32,0.12);
}
.ph-cur-sym { font-size: 15px; }
.ph-cur-planet { font-weight: 600; font-size: 12px; }
.ph-until { color: var(--muted); font-size: 11px; flex: 1; }
.ph-arrow { color: var(--muted); font-size: 10px; }

/* Expanded state — flex column so schedule scroll area grows to fill */
.ph-widget.ph-expanded {
  background: rgba(10,14,22,0.94);
  border: 1px solid rgba(212,160,32,0.5);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc((100vh - 160px) / var(--ui-zoom));
}
.ph-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(212,160,32,0.08);
  border-bottom: 1px solid rgba(212,160,32,0.25);
}
.ph-hdr-sym { font-size: 16px; }
.ph-hdr-title { flex: 1; font: bold 13px Georgia, serif; color: var(--fg); }
.ph-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: 11px/1 inherit;
  padding: 2px 4px;
}
.ph-close-btn:hover { color: var(--accent); }
.ph-cur-until {
  padding: 5px 12px;
  font-size: 11px;
  color: var(--muted);
}
/* HD-01 — hours-card locale label ("Hours for Salzburg · Change"). Full-width
   tap target that opens the place picker; disclaims a non-device observer. */
.ph-locale {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  padding: 4px 12px 6px; background: transparent; border: 0;
  cursor: pointer; text-align: left; font: inherit;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 72%, #f0e5c2 28%);
}
.ph-locale .ph-locale-txt { font-size: 11px; letter-spacing: 0.02em; }
.ph-locale .ph-locale-cta {
  margin-left: auto; font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.62;
}
.ph-divider {
  height: 1px;
  background: rgba(212,160,32,0.2);
  margin: 0 8px;
}
.ph-schedule-label {
  padding: 5px 12px 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ph-schedule {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,160,32,0.3) transparent;
}
.ph-hour-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 10px;
  font-size: 11px;
  border-left: 2px solid transparent;
  transition: background 0.1s;
}
.ph-hour-row:hover { background: rgba(212,160,32,0.07); }
.ph-hour-current {
  background: rgba(212,160,32,0.12) !important;
  font-weight: 600;
}
.ph-hr-sym { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.ph-hr-name { min-width: 58px; color: var(--fg); }
.ph-hr-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 10px; }
.ph-hr-sep { color: rgba(154,130,88,0.5); font-size: 10px; }
.ph-hr-end { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 10px; }
.ph-hr-tag {
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.ph-day   { background: rgba(255,224,102,0.12); color: #ffe066; }
.ph-night { background: rgba(160,192,224,0.12); color: #a0c0e0; }

.privacy-link:hover { opacity: 1; color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Classical Astrology App  (#astrology-app)
   ═══════════════════════════════════════════════════════════════════════════ */
#astrology-app {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#astrology-app[hidden] { display: none !important; }

.pa-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--panel); flex-shrink: 0;
  flex-wrap: wrap;
}
.pa-title {
  font-size: 18px; font-weight: 700;
  color: var(--accent); margin: 0; white-space: nowrap;
}
.pa-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.pa-tab-btn {
  background: var(--row); color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.pa-tab-btn.active,
.pa-tab-btn:hover {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}

.pa-body {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
}
.pa-tab {
  height: 100%; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Chart tab layout */
.pa-chart-layout {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.pa-chart-canvas-wrap {
  flex: 0 0 auto;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(212,160,32,0.18), 0 0 80px rgba(80,40,160,0.12);
}
.pa-chart-canvas-wrap canvas {
  display: block;
  max-width: min(520px, 92vw);
  height: auto;
  border-radius: 50%;
}
.pa-chart-sidebar {
  flex: 1; min-width: 260px;
  display: flex; flex-direction: column; gap: 12px;
}
.pa-inputs-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.pa-input {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font: inherit; font-size: 12px;
}
.pa-input:focus { outline: none; border-color: var(--accent); }
.pa-btn {
  background: var(--row); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 12px; font: inherit; cursor: pointer; font-size: 12px;
}
.pa-btn:hover { border-color: var(--accent); color: var(--accent); }
.pa-btn-primary {
  background: var(--accent); color: var(--bg);
  border-color: var(--accent); font-weight: 700;
}
.pa-btn-primary:hover { background: var(--gold); color: var(--bg); }

/* Ptolemy quote strip */
.pa-ptolemy-quote {
  font-family: 'Cinzel','Trajan Pro',Georgia,serif;
  font-size: 11px; font-style: italic;
  color: rgba(212,160,32,0.70);
  border-left: 2px solid rgba(212,160,32,0.30);
  padding: 5px 10px; margin-bottom: 10px;
  line-height: 1.5;
}

/* Planet list */
.pa-planet-list { display: flex; flex-direction: column; gap: 2px; }
.pa-planet-row {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; padding: 3px 6px; border-radius: 3px;
}
.pa-planet-row:hover { background: var(--row); }
.pa-planet-sym  { width: 20px; text-align: center; font-size: 15px; }
.pa-planet-name { width: 66px; color: var(--muted); }
.pa-planet-sign { flex: 1; color: var(--fg); font-size: 11px; }
.pa-planet-retro { color: #ff6666; font-size: 10px; font-style: italic; }

/* Dignity tag inline */
.pa-dig-tag {
  font-size: 10px; font-family: 'Cinzel',Georgia,serif;
  white-space: nowrap; opacity: 0.88;
}

/* Planetary nature tags */
.pa-nature-tag {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  font-family: 'Cinzel',Georgia,serif; white-space: nowrap;
}
.pa-nature-benefic  { background: rgba(80,160,80,0.18); color: #88dd88; }
.pa-nature-malefic  { background: rgba(160,50,50,0.18); color: #ff8866; }
.pa-nature-common   { background: rgba(140,130,80,0.18); color: #ccbb77; }

/* Inline nature in planet rows (no box) */
.pa-nat-benefic { color: #88dd88; }
.pa-nat-malefic { color: #ff8866; }
.pa-nat-common  { color: #ccbb77; }

.pa-angle-row   { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 6px; }
.pa-asc { color: var(--accent); font-weight: 700; }
.pa-mc  { color: #88aadd; }

/* Interpretation boxes — Ptolemaic */
.pa-interp-box {
  background: var(--row); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; font-size: 12px;
  margin-bottom: 8px; line-height: 1.55;
}
.pa-interp-header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.pa-interp-in { color: var(--muted); }
.pa-interp-nature {
  font-size: 10px; color: rgba(188,148,60,0.72);
  font-family: 'Cinzel',Georgia,serif; margin-bottom: 5px;
  font-style: italic;
}
.pa-interp-text { color: var(--fg); margin: 4px 0 5px; }
.pa-interp-dig-note {
  color: rgba(212,160,32,0.68); font-style: italic;
  font-size: 10.5px; font-family: 'Cinzel',Georgia,serif;
  border-top: 1px solid rgba(180,140,50,0.18); margin-top: 5px; padding-top: 4px;
}
.pa-interp-breakdown {
  font-size: 10px; color: var(--muted); margin-top: 3px; font-style: italic;
}
.pa-muted { color: var(--muted); }

/* Aspects */
.pa-aspects-list { display: flex; flex-direction: column; gap: 3px; }
.pa-aspect-row  { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 2px 4px; }
.pa-asp-easy    { border-left: 2px solid #66dd88; padding-left: 4px; }
.pa-asp-hard    { border-left: 2px solid #ff6644; padding-left: 4px; }
.pa-asp-neutral { border-left: 2px solid #aaaaaa; padding-left: 4px; }
.pa-asp-tag { font-size: 9px; color: var(--muted); margin-left: 6px; opacity: 0.75; }
.pa-asp-tag.exact      { color: #ffd060; opacity: 1; }
.pa-asp-tag.tight      { color: #c4aa78; }
.pa-asp-tag.wide       { color: #888; }
.pa-asp-tag.applying   { color: #66dd88; }
.pa-asp-tag.separating { color: #888; }
/* Heliacal-phase badges (Guide 09) */
.pa-helio { font-size: 10px; margin-left: 6px; opacity: 0.85; }
.pa-helio-cazimi                { color: #ffd060; }
.pa-helio-combust               { color: #ff6644; }
.pa-helio-first-heliacal-rising { color: #66dd88; }
.pa-helio-morning-star          { color: #66ccee; }
.pa-helio-acronychal-rising     { color: #d4a8c4; }
.pa-helio-evening-star          { color: #c4aa78; }
.pa-helio-last-heliacal-setting { color: #ff9944; }

/* Today panel (Guide 17) — daily-engagement loop above the tabs */
#pa-today-panel {
  background: rgba(212,184,120,0.04);
  border: 1px solid rgba(212,184,120,0.2);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
#pa-today-panel:empty { display: none; }
.pa-today-row { margin: 4px 0; line-height: 1.5; }
.pa-today-row strong { color: var(--accent); margin-right: 4px; }
.pa-today-events {
  font-size: 11px; color: var(--muted); margin-top: 6px;
  padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06);
}
.pa-today-events div { padding: 1px 0; }

/* Export menu (Guide 16) — centred overlay over the astrology view */
.pa-menu-overlay {
  /* z 9900 — a focused modal (export format / theme picker, etc.) must sit
     ABOVE the Aether Theatre (z 9700) and the global bottom nav (z 9800/9801);
     at the old 8600 the dark/light export picker rendered BEHIND the Theatre
     and was only reachable after leaving the screen. */
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
}
.pa-menu-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 220px;
}
.pa-menu-title {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--accent); font-size: 14px; text-align: center;
  margin-bottom: 6px;
}
.pa-menu-opt    { padding: 8px 18px; font-size: 13px; cursor: pointer; text-align: center; }
.pa-menu-cancel { padding: 6px 12px; font-size: 11px; color: var(--muted); }

/* Natal report (Guide 15) — verdict badges + collapsible sections */
.pa-report-summary { margin-bottom: 18px; }
.pa-summary-row {
  display: flex; gap: 10px; padding: 4px 0; font-size: 12px;
  align-items: baseline;
}
.pa-summary-verdict { min-width: 120px; font-size: 11px; }
.pa-summary-key     { min-width: 90px;  color: var(--muted); text-transform: capitalize; }
.pa-verdict-flourishing { color: #66dd88; }
.pa-verdict-difficulty  { color: #ff7055; }
.pa-verdict-mixed       { color: #d4a824; }
.pa-verdict-neutral     { color: #888; }
.pa-report-section,
.pa-report-subsection { margin-bottom: 10px; }
.pa-report-section summary,
.pa-report-subsection summary {
  display: flex; gap: 10px; cursor: pointer;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  font-size: 12px;
}
.pa-report-subsection summary {
  background: rgba(255,255,255,0.015);
  margin-left: 14px;
  font-size: 11px;
}
.pa-section-key      { color: var(--accent); font-weight: 700; min-width: 90px; text-transform: capitalize; }
.pa-section-verdict  { min-width: 120px; }
.pa-section-headline { color: var(--fg); flex: 1; }
.pa-section-body     { padding: 8px 12px; font-size: 12px; color: #ccc; }
.pa-section-body p   { margin: 6px 0; }

/* Ephemeris dignity overlay (Guide 14) — augments tracker HUD blocks */
.tracker-block.dig-dom    { box-shadow: inset 3px 0 0 #c8a84b; }
.tracker-block.dig-exalt  { box-shadow: inset 3px 0 0 #ffd060; }
.tracker-block.dig-tri    { box-shadow: inset 3px 0 0 #a8d888; }
.tracker-block.dig-term   { box-shadow: inset 3px 0 0 #88ccaa; }
.tracker-block.dig-face   { box-shadow: inset 3px 0 0 #888; }
.tracker-block.dig-per    { box-shadow: inset 3px 0 0 #444; }
.tracker-block.dig-det    { box-shadow: inset 3px 0 0 #c54040; }
.tracker-block.dig-fall   { box-shadow: inset 3px 0 0 #7a3030; }
.dig-badge {
  font-size: 9px; opacity: 0.85; margin-left: 6px;
  padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.05);
}
.tracker-events {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 10px;
}
.tracker-event       { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; }
.tracker-event-date  { color: var(--muted); min-width: 36px; }
.tracker-event-body  { color: #d4a824; }
.tracker-event-detail{ color: #ccc; }
.tracker-event-empty { color: var(--muted); font-style: italic; }

/* Ephemeris tab (inside astrology) — dignity-coloured table */
.pa-ephem-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pa-ephem-table th {
  color: var(--muted); padding: 4px 6px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pa-ephem-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pa-ephem-table tr.dig-dom    td:first-child { border-left: 3px solid #c8a84b; }
.pa-ephem-table tr.dig-exalt  td:first-child { border-left: 3px solid #ffd060; }
.pa-ephem-table tr.dig-tri    td:first-child { border-left: 3px solid #a8d888; }
.pa-ephem-table tr.dig-term   td:first-child { border-left: 3px solid #88ccaa; }
.pa-ephem-table tr.dig-face   td:first-child { border-left: 3px solid #888; }
.pa-ephem-table tr.dig-det    td:first-child { border-left: 3px solid #c54040; }
.pa-ephem-table tr.dig-fall   td:first-child { border-left: 3px solid #7a3030; }
.pa-ephem-table tr.dig-per    td:first-child { border-left: 3px solid #444; }

/* Transit cards + timeline (Guide 10) */
.pa-transit-card {
  background: rgba(212, 184, 120, 0.04);
  border: 1px solid rgba(212, 184, 120, 0.15);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pa-transit-headline {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; font-weight: 700;
  flex-wrap: wrap;
}
.pa-strength        { color: #ffd060; font-size: 11px; }
.pa-transit-quality { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }
.pa-transit-meta    { font-size: 10px; color: #888; margin-top: 4px; }
.pa-transit-station { color: #d4a824; margin: 0 4px; }

/* D1 dataset overlay — classical-reading paragraphs */
.pa-report-dataset {
  background: rgba(212, 184, 120, 0.04);
  border: 1px solid rgba(212, 184, 120, 0.18);
  border-radius: 4px;
  margin-bottom: 14px;
}
.pa-ds-para {
  margin: 8px 0;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.pa-ds-para:last-child { border-bottom: 0; }
.pa-ds-verdict {
  font-style: italic;
  color: #d4b878;
  font-size: 13px;
  line-height: 1.4;
}
.pa-ds-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #ccc;
  line-height: 1.55;
}
.pa-ds-closing {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,184,120,0.2);
  color: #e8e4d8;
  font-size: 13px;
}
.pa-transit-dataset {
  margin: 6px 0;
  padding: 6px 8px;
  background: rgba(212, 184, 120, 0.05);
  border-left: 2px solid rgba(212, 184, 120, 0.35);
  border-radius: 0 4px 4px 0;
}
.pa-transit-dataset .pa-ds-verdict { font-size: 12px; }
.pa-transit-dataset .pa-ds-body    { margin-top: 4px; font-size: 11px; color: #bbb; font-style: italic; }
.pa-ds-mods {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-ds-mod {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(212, 184, 120, 0.1);
  border-radius: 8px;
  color: #d4b878;
}
.pa-today-ds em {
  font-size: 11px;
  line-height: 1.45;
}

/* Home / landing tab — interactive tile grid */
.pa-home { padding: 18px 0; }
.pa-home-banner {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(212,184,120,0.08), rgba(212,184,120,0.02));
  border: 1px solid rgba(212, 184, 120, 0.22);
  border-radius: 6px;
}
.pa-home-banner h2 { margin: 0 0 4px; font-size: 18px; color: #e8e4d8; }
.pa-home-banner p  { margin: 0; font-size: 12px; color: var(--muted); }

.pa-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.pa-home-tile {
  background: rgba(212, 184, 120, 0.05);
  border: 1px solid rgba(212, 184, 120, 0.22);
  border-radius: 6px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.pa-home-tile:hover {
  background: rgba(212, 184, 120, 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pa-home-tile-glyph { font-size: 24px; color: var(--accent); margin-bottom: 6px; }
.pa-home-tile-name  { font-size: 14px; color: #e8e4d8; margin-bottom: 3px; }
.pa-home-tile-sub   { font-size: 11px; color: var(--muted); line-height: 1.4; }
.pa-home-reading {
  margin-top: 18px;
  padding: 14px;
  background: rgba(212, 184, 120, 0.04);
  border: 1px solid rgba(212, 184, 120, 0.18);
  border-radius: 4px;
}
.pa-home-reading h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
.pa-home-reading em {
  display: block;
  color: #ccc;
  font-size: 13px;
  line-height: 1.55;
}

/* Real Table of Contents on the Home page — the FIRST block, listing
   all 17 scrolls as clickable rows.  Sits above the sky/transit/event
   blocks so the user immediately sees the full navigation surface and
   doesn't have to scroll down hunting for it. */
.pa-home-toc { padding: 12px 10px; }
.pa-home-toc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.pa-home-toc-row {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent, #d4a845) 18%, transparent);
  border-radius: 5px;
  color: var(--color-fg, #e8d9a6);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.pa-home-toc-row:hover,
.pa-home-toc-row:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #d4a845) 14%, transparent);
  border-color: var(--color-accent, #d4a845);
  color: var(--color-accent-2, #ffe8a8);
}
.pa-home-toc-numeral {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-accent, #d4a845);
  text-align: center;
}
.pa-home-toc-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.pa-home-toc-arrow {
  color: var(--color-accent, #d4a845);
  opacity: 0.7;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 480px) {
  .pa-home-toc-list { grid-template-columns: 1fr; }
}

/* Home content blocks — sky-now, top transits, profection, events, reading.
   All share the soft-gold panel look but are clickable to deeper tabs. */
.pa-home-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(212, 184, 120, 0.05);
  border: 1px solid rgba(212, 184, 120, 0.20);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.pa-home-block[role="button"] { cursor: pointer; }
.pa-home-block[role="button"]:hover {
  background: rgba(212, 184, 120, 0.12);
  border-color: var(--accent);
}
.pa-home-block h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pa-home-link {
  font-size: 10px;
  color: var(--accent);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  opacity: 0.7;
}
.pa-home-link:hover { opacity: 1; text-decoration: underline; }

.pa-home-sky-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.pa-home-sky-glyph  { font-size: 16px; color: var(--accent); width: 18px; }
.pa-home-sky-text   { font-size: 13px; color: #e8e4d8; }
.pa-home-sky-sub    { color: var(--muted); font-size: 11px; margin-left: 4px; }

.pa-home-transit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.pa-home-transit-row:last-child { border-bottom: 0; }
.pa-home-transit-row:hover { background: rgba(255, 255, 255, 0.04); border-radius: 3px; }
.pa-home-transit-aspect { color: #ccc; font-size: 11px; }
.pa-home-transit-pct    { margin-left: auto; color: #ffd060; font-size: 11px; }

.pa-home-prof-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #e8e4d8;
}
.pa-home-prof-age    { color: var(--accent); font-weight: 700; }
.pa-home-prof-arrow  { color: var(--muted); }
.pa-home-prof-house  { color: #e8e4d8; font-weight: 600; }
.pa-home-prof-row .pa-home-link { margin-left: auto; }

.pa-home-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  cursor: pointer;
}
.pa-home-event-row:hover { background: rgba(255, 255, 255, 0.04); border-radius: 3px; }
.pa-home-event-date   { color: var(--muted); min-width: 56px; font-size: 11px; }
.pa-home-event-body   { color: var(--accent); font-size: 14px; width: 18px; }
.pa-home-event-detail { color: #ccc; flex: 1; }

.pa-home-reading-empty em { color: var(--muted); }

.pa-home-grid-title {
  margin: 22px 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Profiles tab — saved nativities list ─────────────────────────────────
   Each record from chartStore (IndexedDB) becomes a card with metadata and
   action buttons. Primary profile gets a gold border + badge. */
.pa-profiles { padding: 18px 0; }
.pa-profiles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-profiles-header h2 {
  margin: 0;
  font-size: 18px;
  color: #e8e4d8;
}
.pa-profiles-sub {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.pa-profile-new { white-space: nowrap; }
.pa-profiles-loading,
.pa-profiles-empty {
  padding: 24px 16px;
  text-align: center;
  background: rgba(212, 184, 120, 0.04);
  border: 1px dashed rgba(212, 184, 120, 0.2);
  border-radius: 6px;
  color: var(--muted);
}
.pa-profiles-empty h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #e8e4d8;
}
.pa-profiles-empty p { margin: 0; font-size: 12px; line-height: 1.5; }

.pa-profile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pa-profile-card {
  padding: 12px 14px;
  background: rgba(212, 184, 120, 0.05);
  border: 1px solid rgba(212, 184, 120, 0.20);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.pa-profile-card:hover {
  background: rgba(212, 184, 120, 0.10);
  border-color: rgba(212, 184, 120, 0.40);
}
.pa-profile-primary {
  border-color: var(--accent);
  background: rgba(212, 184, 120, 0.10);
  box-shadow: 0 0 0 1px rgba(212, 184, 120, 0.18);
}
.pa-profile-head { margin-bottom: 10px; }
.pa-profile-name {
  font-size: 15px;
  color: #e8e4d8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pa-profile-badge {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--accent);
  color: #1a1408;
  border-radius: 3px;
  font-weight: 700;
}
.pa-profile-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-profile-upd { font-style: italic; }
.pa-profile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pa-profile-actions .pa-btn {
  font-size: 11px;
  padding: 4px 10px;
}
.pa-btn-danger {
  background: rgba(220, 70, 50, 0.15);
  border-color: rgba(220, 70, 50, 0.4);
  color: #ff9080;
}
.pa-btn-danger:hover {
  background: rgba(220, 70, 50, 0.28);
  border-color: rgba(220, 70, 50, 0.7);
  color: #ffb0a0;
}

/* Full natal synthesis block — sits at the bottom of the Report tab, above
   the closing Tetrabiblos quote. The verdict at the end is italic and
   visually heavier than the paragraphs (the reader's takeaway). */
.pa-synthesis {
  margin: 22px 0 14px;
  padding: 16px 18px;
  background: rgba(212, 184, 120, 0.06);
  border: 1px solid rgba(212, 184, 120, 0.28);
  border-radius: 6px;
}
.pa-synthesis-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  font-family: var(--font-greek, Georgia, serif);
}
.pa-syn-para {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #ddd;
}
.pa-syn-para:last-of-type { margin-bottom: 14px; }
.pa-syn-verdict {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 184, 120, 0.25);
  font-size: 13px;
  line-height: 1.6;
  color: #e8e4d8;
}
.pa-syn-verdict em { color: #e8d4a0; }

/* Diagnostics link at the bottom of the Home tab — quietly visible,
   not a primary CTA. Routes to /diagnostics.html in a new tab. */
.pa-home-diagnostics-link {
  margin: 14px 0 4px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.pa-home-diagnostics-link a {
  color: var(--muted, #8c8779);
  text-decoration: none;
  border-bottom: 1px dotted rgba(212,184,120,0.3);
  padding-bottom: 1px;
}
.pa-home-diagnostics-link a:hover {
  color: var(--accent, #d4b878);
  border-bottom-color: var(--accent, #d4b878);
}

/* Final Judgement — the chapter-35 personal closing.
   Visually heavier than the synthesis so the chart's overall verdict
   reads as the definitive end-of-report statement.            */
.pa-final-judgement {
  margin: 26px 0 18px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(212, 184, 120, 0.10) 0%, rgba(212, 184, 120, 0.04) 100%);
  border: 1px solid rgba(212, 184, 120, 0.45);
  border-left: 3px solid var(--accent, #d4b878);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) inset;
}
.pa-final-judgement-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #d4b878);
  margin-bottom: 12px;
  font-family: var(--font-greek, Georgia, serif);
  font-weight: 600;
}
.pa-final-judgement-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #ece6d8;
  font-style: normal;
}
/* Compact inline variant — used on Home / Profiles cards. */
.pa-final-judgement-inline {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(212, 184, 120, 0.06);
  border-left: 2px solid var(--accent, #d4b878);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.55;
  color: #d8d2c2;
}
.pa-final-judgement-inline-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #d4b878);
  margin-bottom: 4px;
  font-family: var(--font-greek, Georgia, serif);
}

/* + New chart button in the astrology header */
.pa-newchart {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(212, 184, 120, 0.08);
  border: 1px solid rgba(212, 184, 120, 0.35);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.pa-newchart:hover {
  background: rgba(212, 184, 120, 0.18);
  border-color: var(--accent);
}

/* Astrology onboarding modal (Guide 09) — must sit ABOVE the Aether
   Theatre's #aether-theatre stacking context (z-9700) so the
   "Cast your nativity → Begin" name-entry sheet isn't covered by a
   roster panel or Theatre chrome when the user lands fresh on HOME
   and taps Begin. Keep below tour cards (.pa-tour-card z-9960). */
.pa-onb-overlay {
  position: fixed; inset: 0; z-index: 9750;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
}
.pa-onb-modal {
  position: relative;
  width: min(480px, 92vw);
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 22px;
  font-size: 14px;
}
.pa-onb-modal h2 { font-family: 'Cinzel', Georgia, serif; color: var(--accent); margin: 0 0 4px; font-size: 22px; }
.pa-onb-modal h3 { font-family: 'Cinzel', Georgia, serif; color: var(--accent); margin: 0 0 10px; font-size: 16px; }
.pa-onb-modal p  { color: var(--muted); margin: 0 0 12px; }
.pa-onb-modal .pa-input { width: 100%; margin-bottom: 10px; padding: 8px 10px; font-size: 14px; }
.pa-onb-modal .pa-btn { padding: 8px 16px; font-size: 13px; cursor: pointer; }
.pa-onb-cancel {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.pa-onb-cancel:hover { color: var(--fg); }
.pa-onb-tagline { font-style: italic; }
.pa-onb-screen { display: none; }
.pa-onb-screen.active { display: block; }
.pa-onb-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pa-onb-row .pa-input { flex: 1; min-width: 0; margin-bottom: 0; }
.pa-onb-accuracy-warn,
.pa-onb-offline-notice {
  color: #d4a824; font-size: 11px; margin: 8px 0;
  padding: 6px 8px; background: rgba(212, 168, 36, 0.08);
  border: 1px solid rgba(212, 168, 36, 0.25); border-radius: 4px;
}
.pa-onb-loc-results {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; max-height: 220px; overflow-y: auto;
}
.pa-onb-loc-opt {
  text-align: left; background: rgba(212, 184, 120, 0.05);
  border: 1px solid rgba(212, 184, 120, 0.18); border-radius: 4px;
  padding: 6px 10px; color: var(--fg); cursor: pointer;
  font-size: 12px;
}
.pa-onb-loc-opt:hover { background: rgba(212, 184, 120, 0.12); border-color: var(--accent); }
.pa-onb-no-results { font-size: 11px; color: var(--muted); padding: 6px 4px; }
.pa-onb-manual    { margin-top: 12px; font-size: 12px; }
.pa-onb-manual summary { cursor: pointer; color: var(--muted); }
.pa-onb-summary   { font-size: 12px; line-height: 1.7; margin-bottom: 14px; }
.pa-onb-summary span { color: var(--muted); display: inline-block; min-width: 64px; }
.pa-onb-error     { color: #ff7055; font-size: 12px; margin-bottom: 10px; }
.pa-onb-spinner   { font-size: 32px; text-align: center; animation: pa-onb-spin 1.2s linear infinite; }
@keyframes pa-onb-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* TZ-FIX — editable confirm screen (in-place fields + live local/UTC readout) */
.pa-onb-confirm-grid { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; max-height: 46vh; overflow-y: auto; }
.pa-onb-cf { display: block; font-size: 11px; color: var(--muted); }
.pa-onb-cf .pa-input { margin-top: 2px; margin-bottom: 6px; }
.pa-onb-cf-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg); margin: 0 0 8px; }
.pa-onb-cf-check input { margin: 0; }
.pa-onb-confirm-grid .pa-onb-row .pa-onb-cf { flex: 1; min-width: 0; }
.pa-onb-tz-bad { border-color: #ff7055 !important; }
.pa-onb-dst-warn {
  color: #d4a824; font-size: 11px; margin-top: 6px;
  padding: 6px 8px; background: rgba(212, 168, 36, 0.08);
  border: 1px solid rgba(212, 168, 36, 0.25); border-radius: 4px;
}

/* Profiles grid */
.pa-profiles-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pa-profile-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; min-width: 200px; max-width: 240px;
}
.pa-profile-name { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.pa-profile-date { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pa-profile-signs { font-size: 12px; line-height: 1.8; margin-bottom: 10px; }
.pa-profile-actions { display: flex; gap: 6px; }

/* Transits */
.pa-transit-list { display: flex; flex-direction: column; gap: 4px; }
.pa-transit-row {
  display: flex; flex-direction: column; gap: 0;
  font-size: 13px; padding: 6px 8px; border-radius: 4px;
  background: var(--row); margin-bottom: 3px;
}
.pa-transit-row-inner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;
}
.pa-transit-easy { border-left: 3px solid #66dd88; }
.pa-transit-hard { border-left: 3px solid #ff6644; }

/* Transit section headers */
.pa-tr-section      { margin-bottom: 14px; }
.pa-tr-section-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 4px 0 4px; margin-bottom: 6px;
}

/* Applying / separating / exact badges */
.pa-tr-apply    { font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 700;
                  background: rgba(80,220,120,0.14); color: #50dc78; border: 1px solid #50dc7840; }
.pa-tr-separate { font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 700;
                  background: rgba(160,160,160,0.12); color: #909090; border: 1px solid #90909040; }
.pa-tr-exact    { font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 700;
                  background: rgba(255,215,0,0.14); color: #ffd700; border: 1px solid #ffd70040; }

/* Synastry */
.pa-synastry-selectors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-compat-bar {
  height: 8px; background: var(--row); border-radius: 4px; overflow: hidden; margin: 8px 0;
  max-width: 300px;
}
.pa-compat-fill {
  height: 100%;
  background: linear-gradient(to right, #ff6644, #ffe066, #66dd88);
  border-radius: 4px; transition: width 0.4s ease;
}

/* ── Synastry panels ─────────────────────────────────────────────────────── */
.pa-syn-marriage-panel,
.pa-syn-key-panel,
.pa-syn-small-panel {
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pa-syn-section-title {
  font-family: var(--font-greek);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pa-syn-sig-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}
.pa-syn-key-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pa-syn-key-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Canvas */
#pa-chart-wheel,
#pa-transit-wheel,
#pa-synastry-wheel {
  display: block;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
}

/* Responsive: stack canvas below sidebar on narrow screens */
@media (max-width: 680px) {
  .pa-chart-layout { flex-direction: column; }
  #pa-chart-wheel,
  #pa-transit-wheel,
  #pa-synastry-wheel { width: 320px !important; height: 320px !important; }
}

/* ── Scrolls / Cards tab ─────────────────────────────────────────────────── */
.pa-tab-btn-cards { border-color: rgba(212,160,32,0.5) !important; color: var(--accent) !important; }
.pa-tab-btn-cards.active { background: var(--accent) !important; color: var(--bg) !important; }

/* ── Scrolls / Card Deck ─────────────────────────────────────────────────── */
.pa-sc-hero {
  text-align: center;
  padding: 16px 0 12px;
  border-bottom: 1px solid rgba(212,160,32,0.2);
  margin-bottom: 16px;
}
.pa-sc-hero-title {
  font-family: 'Cinzel','Trajan Pro',Georgia,serif;
  font-size: 13px; font-weight: 400; letter-spacing: 0.3em;
  color: #555; margin-bottom: 5px;
}
.pa-sc-hero-sub {
  font-size: 11px; color: #3a3a3a; font-style: italic; letter-spacing: 0.05em;
}

.pa-sc-sethdr {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(212,160,32,0.12);
  margin-bottom: 8px;
}
.pa-sc-setnum {
  font-family: 'Cinzel',serif; font-size: 9px; letter-spacing: 0.15em; color: #484848;
}
.pa-sc-settitle {
  font-family: 'Cinzel',serif; font-size: 12px; letter-spacing: 0.1em; color: #888;
}
.pa-sc-setcount { font-size: 10px; font-style: italic; color: #404040; }

/* Ptolemy quote block */
.pa-sc-quote {
  margin: 10px 0 18px;
  padding: 10px 16px;
  border-left: 1.5px solid rgba(212,160,32,0.22);
  max-width: 560px;
}
.pa-sc-quote-text {
  font-family: 'IM Fell English','Georgia',serif;
  font-size: 11px; font-style: italic; color: #555; line-height: 1.7;
  margin-bottom: 6px;
}
.pa-sc-quote-src {
  font-family: 'Cinzel',serif; font-size: 8px; letter-spacing: 0.12em; color: #3a3a3a;
}

.pa-sc-deck {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: flex-start;
  margin-bottom: 36px;
}

/* ── Base card shell ─────────────────────────────────────────────────────── */
.pa-sc-card {
  width: 155px; height: 258px;
  border-radius: 12px; position: relative; flex-shrink: 0;
  transition: transform 0.15s;
}
.pa-sc-card:hover { transform: translateY(-3px); }
.pa-sc-acard { height: 290px; }
.pa-sc-inner {
  width: 100%; height: 100%;
  border-radius: 12px; border: 1.5px solid;
  display: flex; flex-direction: column;
  align-items: center; overflow: hidden;
  position: relative;
}
.pa-sc-inset {
  position: absolute; inset: 6px;
  border-radius: 8px; border: 0.5px solid;
  pointer-events: none; z-index: 2;
}
.pa-sc-corner {
  position: absolute; font-size: 13px; z-index: 4; font-family: serif;
}
.pa-sc-tl { top: 9px; left: 10px; }
.pa-sc-br { bottom: 9px; right: 10px; }

.pa-sc-content {
  position: relative; z-index: 3;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; padding: 14px 10px 10px;
}
.pa-sc-title {
  font-family: 'Cinzel',serif; font-size: 10px; letter-spacing: 0.14em;
  text-align: center; font-weight: 600; margin-bottom: 3px;
}
.pa-sc-angle {
  font-family: 'Cinzel',serif; font-size: 9px; letter-spacing: 0.08em;
  opacity: 0.5; margin-bottom: 4px;
}
.pa-sc-glyph { font-size: 36px; line-height: 1; margin: 6px 0 4px; }
.pa-sc-sub {
  font-family: 'IM Fell English','Georgia',serif;
  font-size: 8.5px; font-style: italic; text-align: center; opacity: 0.68; margin-bottom: 8px;
}
.pa-sc-divider { width: 52px; height: 0.5px; margin-bottom: 8px; opacity: 0.32; }
.pa-sc-scene {
  width: 100%; flex: 1; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
}
.pa-sc-scene svg { width: 100%; display: block; }
.pa-sc-footer {
  width: 100%; display: flex; justify-content: space-between;
  align-items: flex-end; padding: 5px 2px 0;
}
.pa-sc-kw {
  font-family: 'IM Fell English','Georgia',serif;
  font-size: 8px; font-style: italic; line-height: 1.5; opacity: 0.62;
}
.pa-sc-num { font-family: 'Cinzel',serif; font-size: 8.5px; opacity: 0.42; }
.pa-sc-ruler {
  font-family: 'Cinzel',serif; font-size: 7.5px; letter-spacing: 0.1em;
  opacity: 0.5; margin-top: 2px; text-align: center; width: 100%;
}
.pa-sc-interp {
  font-family: 'IM Fell English','Georgia',serif;
  font-size: 8.5px; font-style: italic; line-height: 1.55; text-align: center;
  opacity: 0.68; padding-top: 8px; border-top: 0.5px solid; width: 100%;
}
.pa-sc-htag {
  font-family: 'Cinzel',serif; font-size: 7px; letter-spacing: 0.12em;
  padding: 2px 6px; border-radius: 3px;
}

/* ── Planet colour variants ──────────────────────────────────────────────── */
.pa-sc-sat .pa-sc-inner   { background: #161210; border-color: #4a3f28; }
.pa-sc-sat .pa-sc-inset   { border-color: #342c1c; }
.pa-sc-sat .pa-sc-title, .pa-sc-sat .pa-sc-glyph { color: #c8b070; }
.pa-sc-sat .pa-sc-sub, .pa-sc-sat .pa-sc-kw { color: #8a7850; }
.pa-sc-sat .pa-sc-divider { background: #4a3f28; }
.pa-sc-sat .pa-sc-num     { color: #6a5a38; }
.pa-sc-sat .pa-sc-corner  { color: #a09050; opacity: 0.5; }

.pa-sc-jup .pa-sc-inner   { background: #0a1525; border-color: #284878; }
.pa-sc-jup .pa-sc-inset   { border-color: #1a3458; }
.pa-sc-jup .pa-sc-title, .pa-sc-jup .pa-sc-glyph { color: #78a8e8; }
.pa-sc-jup .pa-sc-sub, .pa-sc-jup .pa-sc-kw { color: #4878a8; }
.pa-sc-jup .pa-sc-divider { background: #284878; }
.pa-sc-jup .pa-sc-num     { color: #385888; }
.pa-sc-jup .pa-sc-corner  { color: #6898d8; opacity: 0.45; }

.pa-sc-mar .pa-sc-inner   { background: #1c0a0a; border-color: #681818; }
.pa-sc-mar .pa-sc-inset   { border-color: #481010; }
.pa-sc-mar .pa-sc-title, .pa-sc-mar .pa-sc-glyph { color: #e87878; }
.pa-sc-mar .pa-sc-sub, .pa-sc-mar .pa-sc-kw { color: #a84848; }
.pa-sc-mar .pa-sc-divider { background: #681818; }
.pa-sc-mar .pa-sc-num     { color: #782828; }
.pa-sc-mar .pa-sc-corner  { color: #c86868; opacity: 0.45; }

.pa-sc-sol .pa-sc-inner   { background: #1c1600; border-color: #786000; }
.pa-sc-sol .pa-sc-inset   { border-color: #584400; }
.pa-sc-sol .pa-sc-title, .pa-sc-sol .pa-sc-glyph { color: #f0c838; }
.pa-sc-sol .pa-sc-sub, .pa-sc-sol .pa-sc-kw { color: #b08820; }
.pa-sc-sol .pa-sc-divider { background: #785800; }
.pa-sc-sol .pa-sc-num     { color: #886800; }
.pa-sc-sol .pa-sc-corner  { color: #d0a828; opacity: 0.45; }

.pa-sc-ven .pa-sc-inner   { background: #0a180a; border-color: #285828; }
.pa-sc-ven .pa-sc-inset   { border-color: #184818; }
.pa-sc-ven .pa-sc-title, .pa-sc-ven .pa-sc-glyph { color: #88d888; }
.pa-sc-ven .pa-sc-sub, .pa-sc-ven .pa-sc-kw { color: #4a9850; }
.pa-sc-ven .pa-sc-divider { background: #285828; }
.pa-sc-ven .pa-sc-num     { color: #386838; }
.pa-sc-ven .pa-sc-corner  { color: #68c868; opacity: 0.45; }

.pa-sc-mer .pa-sc-inner   { background: #0c0c1c; border-color: #383878; }
.pa-sc-mer .pa-sc-inset   { border-color: #282858; }
.pa-sc-mer .pa-sc-title, .pa-sc-mer .pa-sc-glyph { color: #a8a8ee; }
.pa-sc-mer .pa-sc-sub, .pa-sc-mer .pa-sc-kw { color: #6868a8; }
.pa-sc-mer .pa-sc-divider { background: #383878; }
.pa-sc-mer .pa-sc-num     { color: #484888; }
.pa-sc-mer .pa-sc-corner  { color: #8888ce; opacity: 0.45; }

.pa-sc-moo .pa-sc-inner   { background: #10101e; border-color: #383868; }
.pa-sc-moo .pa-sc-inset   { border-color: #282850; }
.pa-sc-moo .pa-sc-title, .pa-sc-moo .pa-sc-glyph { color: #d0d0f8; }
.pa-sc-moo .pa-sc-sub, .pa-sc-moo .pa-sc-kw { color: #7878b8; }
.pa-sc-moo .pa-sc-divider { background: #383868; }
.pa-sc-moo .pa-sc-num     { color: #484880; }
.pa-sc-moo .pa-sc-corner  { color: #a8a8d8; opacity: 0.45; }

/* ── Zodiac element variants ─────────────────────────────────────────────── */
.pa-sc-fire .pa-sc-inner  { background: #1a0e04; border-color: #6a3010; }
.pa-sc-fire .pa-sc-inset  { border-color: #4a2008; }
.pa-sc-fire .pa-sc-title, .pa-sc-fire .pa-sc-glyph { color: #e8a050; }
.pa-sc-fire .pa-sc-sub, .pa-sc-fire .pa-sc-kw, .pa-sc-fire .pa-sc-ruler { color: #a06030; }
.pa-sc-fire .pa-sc-divider { background: #6a3010; }
.pa-sc-fire .pa-sc-num    { color: #7a4020; }
.pa-sc-fire .pa-sc-corner { color: #c88040; opacity: 0.48; }

.pa-sc-earth .pa-sc-inner { background: #0e120a; border-color: #3a4818; }
.pa-sc-earth .pa-sc-inset { border-color: #2a3810; }
.pa-sc-earth .pa-sc-title, .pa-sc-earth .pa-sc-glyph { color: #a8c870; }
.pa-sc-earth .pa-sc-sub, .pa-sc-earth .pa-sc-kw, .pa-sc-earth .pa-sc-ruler { color: #6a8840; }
.pa-sc-earth .pa-sc-divider { background: #3a4818; }
.pa-sc-earth .pa-sc-num   { color: #4a6828; }
.pa-sc-earth .pa-sc-corner { color: #90b858; opacity: 0.45; }

.pa-sc-air .pa-sc-inner   { background: #0a0e18; border-color: #283858; }
.pa-sc-air .pa-sc-inset   { border-color: #182848; }
.pa-sc-air .pa-sc-title, .pa-sc-air .pa-sc-glyph { color: #88b8e8; }
.pa-sc-air .pa-sc-sub, .pa-sc-air .pa-sc-kw, .pa-sc-air .pa-sc-ruler { color: #4878a8; }
.pa-sc-air .pa-sc-divider { background: #283858; }
.pa-sc-air .pa-sc-num     { color: #385878; }
.pa-sc-air .pa-sc-corner  { color: #6898c8; opacity: 0.45; }

.pa-sc-water .pa-sc-inner { background: #08100e; border-color: #204838; }
.pa-sc-water .pa-sc-inset { border-color: #143828; }
.pa-sc-water .pa-sc-title, .pa-sc-water .pa-sc-glyph { color: #68c8a8; }
.pa-sc-water .pa-sc-sub, .pa-sc-water .pa-sc-kw, .pa-sc-water .pa-sc-ruler { color: #3a8868; }
.pa-sc-water .pa-sc-divider { background: #204838; }
.pa-sc-water .pa-sc-num   { color: #286848; }
.pa-sc-water .pa-sc-corner { color: #50a888; opacity: 0.45; }

/* ── Aspect colour variants ──────────────────────────────────────────────── */
.pa-sc-conj .pa-sc-inner  { background: #181200; border-color: #6a5000; }
.pa-sc-conj .pa-sc-inset  { border-color: #4a3800; }
.pa-sc-conj .pa-sc-title, .pa-sc-conj .pa-sc-glyph { color: #e8b838; }
.pa-sc-conj .pa-sc-sub, .pa-sc-conj .pa-sc-interp { color: #a07820; }
.pa-sc-conj .pa-sc-divider, .pa-sc-conj .pa-sc-interp { border-color: #4a3800; }
.pa-sc-conj .pa-sc-num    { color: #7a5800; }
.pa-sc-conj .pa-sc-corner { color: #c89828; opacity: 0.55; }
.pa-sc-conj .pa-sc-htag   { background: #2a2000; color: #c89828; border: 0.5px solid #5a4000; }
.pa-sc-conj .pa-sc-angle  { color: #8a6818; }

.pa-sc-sext .pa-sc-inner  { background: #081410; border-color: #1e5838; }
.pa-sc-sext .pa-sc-inset  { border-color: #104828; }
.pa-sc-sext .pa-sc-title, .pa-sc-sext .pa-sc-glyph { color: #68d8a0; }
.pa-sc-sext .pa-sc-sub, .pa-sc-sext .pa-sc-interp { color: #3a9868; }
.pa-sc-sext .pa-sc-divider, .pa-sc-sext .pa-sc-interp { border-color: #1e5838; }
.pa-sc-sext .pa-sc-num    { color: #287848; }
.pa-sc-sext .pa-sc-corner { color: #50b888; opacity: 0.5; }
.pa-sc-sext .pa-sc-htag   { background: #0a2018; color: #50b888; border: 0.5px solid #1e5838; }
.pa-sc-sext .pa-sc-angle  { color: #287848; }

.pa-sc-squa .pa-sc-inner  { background: #180808; border-color: #681818; }
.pa-sc-squa .pa-sc-inset  { border-color: #481010; }
.pa-sc-squa .pa-sc-title, .pa-sc-squa .pa-sc-glyph { color: #e87878; }
.pa-sc-squa .pa-sc-sub, .pa-sc-squa .pa-sc-interp { color: #a84848; }
.pa-sc-squa .pa-sc-divider, .pa-sc-squa .pa-sc-interp { border-color: #481010; }
.pa-sc-squa .pa-sc-num    { color: #782828; }
.pa-sc-squa .pa-sc-corner { color: #c86868; opacity: 0.5; }
.pa-sc-squa .pa-sc-htag   { background: #200808; color: #c86868; border: 0.5px solid #601818; }
.pa-sc-squa .pa-sc-angle  { color: #884040; }

.pa-sc-trin .pa-sc-inner  { background: #080c1e; border-color: #204078; }
.pa-sc-trin .pa-sc-inset  { border-color: #183060; }
.pa-sc-trin .pa-sc-title, .pa-sc-trin .pa-sc-glyph { color: #78a8e8; }
.pa-sc-trin .pa-sc-sub, .pa-sc-trin .pa-sc-interp { color: #4878a8; }
.pa-sc-trin .pa-sc-divider, .pa-sc-trin .pa-sc-interp { border-color: #183060; }
.pa-sc-trin .pa-sc-num    { color: #385888; }
.pa-sc-trin .pa-sc-corner { color: #6898d8; opacity: 0.5; }
.pa-sc-trin .pa-sc-htag   { background: #0a1030; color: #6898d8; border: 0.5px solid #204078; }
.pa-sc-trin .pa-sc-angle  { color: #386898; }

.pa-sc-oppo .pa-sc-inner  { background: #1a0c04; border-color: #6a2c10; }
.pa-sc-oppo .pa-sc-inset  { border-color: #4a1c08; }
.pa-sc-oppo .pa-sc-title, .pa-sc-oppo .pa-sc-glyph { color: #e89058; }
.pa-sc-oppo .pa-sc-sub, .pa-sc-oppo .pa-sc-interp { color: #a85830; }
.pa-sc-oppo .pa-sc-divider, .pa-sc-oppo .pa-sc-interp { border-color: #4a1c08; }
.pa-sc-oppo .pa-sc-num    { color: #7a4020; }
.pa-sc-oppo .pa-sc-corner { color: #c87848; opacity: 0.5; }
.pa-sc-oppo .pa-sc-htag   { background: #221008; color: #c87848; border: 0.5px solid #602010; }
.pa-sc-oppo .pa-sc-angle  { color: #8a5030; }

.pa-sc-aver .pa-sc-inner  { background: #121212; border-color: #383838; }
.pa-sc-aver .pa-sc-inset  { border-color: #282828; }
.pa-sc-aver .pa-sc-title, .pa-sc-aver .pa-sc-glyph { color: #888888; }
.pa-sc-aver .pa-sc-sub, .pa-sc-aver .pa-sc-interp { color: #585858; }
.pa-sc-aver .pa-sc-divider, .pa-sc-aver .pa-sc-interp { border-color: #282828; }
.pa-sc-aver .pa-sc-num    { color: #484848; }
.pa-sc-aver .pa-sc-corner { color: #686868; opacity: 0.5; }
.pa-sc-aver .pa-sc-htag   { background: #1a1a1a; color: #686868; border: 0.5px solid #383838; }
.pa-sc-aver .pa-sc-angle  { color: #585858; }

@media (max-width: 600px) {
  .pa-sc-card { width: 130px; height: 216px; border-radius: 10px; }
  .pa-sc-acard { height: 244px; }
  .pa-sc-glyph { font-size: 30px; }
  .pa-sc-title { font-size: 9px; }
  .pa-sc-sub { font-size: 7.5px; }
  .pa-sc-kw { font-size: 7px; }
  .pa-sc-deck { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Houses Tab  (pa-hs-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* Two-column layout: wheel on left, house cards scrolling on right */
.pa-hs-layout {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}

/* Left column — wheel + legend + angles note */
.pa-hs-wheel-wrap {
  flex: 0 0 auto; min-width: 280px; max-width: 540px;
  display: flex; flex-direction: column; gap: 12px;
}
.pa-hs-wheel-title {
  font-family: 'Cinzel','Trajan Pro',Georgia,serif;
  font-size: 11px; letter-spacing: 0.18em; color: var(--accent);
  text-align: center; margin-bottom: 2px;
}

/* Strength legend chips */
.pa-hs-legend {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 4px;
}
.pa-hs-badge {
  font-family: 'Cinzel',serif; font-size: 9px; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.pa-hs-badge.pa-hs-angular  { background: rgba(200,150,10,0.18); color: #c8960a; border: 0.5px solid #6a4800; }
.pa-hs-badge.pa-hs-succedent { background: rgba(80,120,120,0.15); color: #709898; border: 0.5px solid #305050; }
.pa-hs-badge.pa-hs-cadent   { background: rgba(70,70,70,0.15);  color: #686868; border: 0.5px solid #383838; }

/* Angles note panel */
.pa-hs-angles-note {
  background: var(--row); border: 1px solid var(--border);
  border-radius: 7px; padding: 10px 12px;
  font-size: 11px; line-height: 1.6;
}

/* Right column — scrolling list of house cards */
.pa-hs-cards-col {
  flex: 1; min-width: 280px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Individual house card */
.pa-hs-card {
  background: var(--row); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  border-left: 3px solid var(--border);
}
.pa-hs-card.pa-hs-angular  { border-left-color: #c8960a; }
.pa-hs-card.pa-hs-succedent { border-left-color: #507878; }
.pa-hs-card.pa-hs-cadent   { border-left-color: #484848; }

/* Card head row: roman numeral + name + badge */
.pa-hs-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.pa-hs-num {
  font-family: 'Cinzel',Georgia,serif; font-size: 16px; font-weight: 700;
  color: var(--accent); min-width: 28px; line-height: 1;
}
.pa-hs-card-name {
  font-family: 'Cinzel',Georgia,serif; font-size: 13px; font-weight: 600;
  color: var(--fg); line-height: 1.2;
}
.pa-hs-greek {
  font-size: 10px; color: var(--muted); font-style: italic; margin-top: 1px;
}

/* Ruler line */
.pa-hs-ruler {
  font-family: 'Cinzel',serif; font-size: 10px; color: var(--accent);
  opacity: 0.72; margin-bottom: 4px;
  letter-spacing: 0.06em;
}

/* Keywords */
.pa-hs-kw {
  font-family: 'IM Fell English','Georgia',serif;
  font-size: 11px; font-style: italic; color: var(--muted);
  margin-bottom: 5px; line-height: 1.5;
}

/* Signification text */
.pa-hs-sig {
  font-size: 12px; color: var(--fg); line-height: 1.55;
  margin-bottom: 6px;
}

/* Ptolemy quote */
.pa-hs-quote {
  font-family: 'Cinzel','Trajan Pro',Georgia,serif;
  font-size: 10px; font-style: italic;
  color: rgba(212,160,32,0.65);
  border-left: 2px solid rgba(212,160,32,0.25);
  padding: 3px 8px; line-height: 1.55;
}

/* Responsive: on narrow screens stack wheel above cards */
@media (max-width: 680px) {
  .pa-hs-layout { flex-direction: column; }
  .pa-hs-wheel-wrap { max-width: 100%; width: 100%; }
}

/* ── Houses: natal planet chips & dignity badges ──────────────────────── */
.pa-hs-planet-strip {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 6px 0 4px;
}
.pa-hs-pchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}
.pa-hs-pchip-rx {
  font-size: 9px; color: #ff8844; font-weight: 700; margin-left: 1px;
}
.pa-hs-dig-badge {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  display: inline-block; margin-top: 4px;
}
.pa-hs-dig-dom  { background: rgba(80,220,80,0.15);  color: #50dc50; border: 1px solid #50dc5040; }
.pa-hs-dig-exalt{ background: rgba(255,215,0,0.15);  color: #ffd700; border: 1px solid #ffd70040; }
.pa-hs-dig-fall { background: rgba(255,100,50,0.15); color: #ff6432; border: 1px solid #ff643240; }
.pa-hs-dig-det  { background: rgba(180,60,60,0.15);  color: #cc4444; border: 1px solid #cc444440; }
.pa-hs-dig-none { background: rgba(80,80,80,0.12);   color: #777;    border: 1px solid #77777730; }

/* ── Houses: stellium / empty callouts ────────────────────────────────── */
.pa-hs-callout {
  margin: 8px 0 2px; padding: 5px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
}
.pa-hs-callout-stellium {
  background: rgba(200,150,10,0.14); border-left: 3px solid #c8960a; color: #f0c840;
}
.pa-hs-callout-empty {
  background: rgba(80,80,80,0.10); border-left: 3px solid #555; color: #777;
}

/* ── Houses: hemisphere / quadrant balance bar ────────────────────────── */
.pa-hs-balance {
  margin: 10px 0 14px; padding: 10px 12px;
  background: rgba(255,255,255,0.03); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
}
.pa-hs-balance-head {
  font-size: 10px; color: var(--muted); letter-spacing: 0.5px;
  margin-bottom: 8px; line-height: 1.5;
}
.pa-hs-balance-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.pa-hs-bal-lbl {
  font-size: 10px; color: #aaa; min-width: 130px; flex-shrink: 0;
}
.pa-hs-bal-bar {
  flex: 1; height: 8px; background: rgba(255,255,255,0.07);
  border-radius: 4px; overflow: hidden;
}
.pa-hs-bal-bar > div {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.pa-hs-bal-val {
  font-size: 10px; color: #ccc; min-width: 20px; text-align: right;
}
.pa-hs-bal-sep {
  font-size: 10px; color: rgba(255,255,255,0.25); flex-shrink: 0;
}
.pa-hs-balance-quads {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.pa-hs-bal-quad {
  font-size: 9px; padding: 2px 7px; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: #aaa; letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* ── Transits: interpretation text + station badge ────────────────────── */
.pa-tr-interp {
  font-size: 11px; color: var(--muted); line-height: 1.65;
  padding: 6px 8px 2px; font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px;
}
.pa-tr-station {
  font-size: 9px; padding: 1px 6px; border-radius: 8px;
  background: rgba(255,136,68,0.18); color: #ff8844;
  border: 1px solid rgba(255,136,68,0.35);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── 30-day transit timeline ──────────────────────────────────────────── */
.pa-tl-wrap   { margin-top: 18px; }
.pa-tl-head   { font-size: 12px; color: var(--accent); font-weight: 700;
                margin-bottom: 8px; letter-spacing: 0.6px; }
.pa-tl-day    { margin-bottom: 10px; }
.pa-tl-day-label {
  font-size: 10px; color: var(--muted); font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 3px; margin-bottom: 4px;
}
.pa-tl-item {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; font-size: 11px;
}
.pa-tl-easy    { color: #66dd88; }
.pa-tl-hard    { color: #ff6644; }

/* ════════════════════════════════════════════════════════════════════════
   Zodiac Wheel Tab
   ════════════════════════════════════════════════════════════════════════ */
.zw-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 8px 0;
  flex-wrap: wrap;
}
.zw-wheel-col {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 500px;
}
.zw-right-col {
  flex: 1 1 220px;
  min-width: 200px;
}
.zw-hint {
  font-size: 10px;
  color: rgba(200,160,60,0.4);
  text-align: center;
  margin: 2px 0 6px;
  letter-spacing: 0.05em;
}

/* Dossier card */
.zw-dossier {
  background: rgba(20,14,4,0.85);
  border: 1px solid rgba(200,160,60,0.2);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin-top: 4px;
}
.zw-doss-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.zw-doss-glyph {
  font-size: 40px;
  line-height: 1;
}
.zw-doss-name {
  font-size: 20px;
  font-weight: 700;
  font-family: ui-serif, Georgia, serif;
  letter-spacing: 0.03em;
  color: #e8c870;
}
.zw-doss-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin: 0 0 12px;
}
.zw-dl-row {
  display: contents;
}
.zw-doss-dl dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(200,160,60,0.55);
}
.zw-doss-dl dd {
  font-size: 12px;
  color: rgba(220,200,140,0.9);
  margin: 0;
}
.zw-doss-desc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(200,180,130,0.8);
  margin: 0 0 12px;
  font-family: ui-serif, Georgia, serif;
}
.zw-doss-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zw-nav-btn {
  background: rgba(200,160,60,0.08);
  border: 1px solid rgba(200,160,60,0.25);
  border-radius: 6px;
  color: #c89840;
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.zw-nav-btn:hover {
  background: rgba(200,160,60,0.18);
  border-color: rgba(200,160,60,0.6);
  color: #f0d070;
}
.zw-doss-pos {
  font-size: 10px;
  color: rgba(200,160,60,0.45);
  letter-spacing: 0.06em;
}

/* Wedge hover (handled via JS mouseenter, but cursor pointer declared in SVG attr) */
.zw-wedge { cursor: pointer; }

/* Mobile: stack wheel above dossier */
@media (max-width: 540px) {
  .zw-wrap { flex-direction: column; align-items: center; }
  .zw-wheel-col { max-width: 340px; }
  .zw-right-col { width: 100%; max-width: 400px; }
  .zw-doss-dl { grid-template-columns: 1fr 1fr; }
}
.pa-tl-neutral { color: #aaaaaa; }
/* ════════════════════════════════════════════════════════════════════
   Theme dropdown picker (header). Uses bridged var names so it
   automatically restyles when the user switches palettes.
   ════════════════════════════════════════════════════════════════════ */
.theme-picker { position: relative; flex-shrink: 0; }

.theme-picker-btn {
  font-size: 14px;
  line-height: 1;
}

.theme-picker-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, 94vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  z-index: 60;
  font-family: 'Cinzel', Georgia, serif;
}

.theme-picker-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "sw label badge"
    "sw sub   badge";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.theme-picker-row:hover {
  background: var(--row);
  border-color: var(--border);
}
.theme-picker-row.active {
  border-color: var(--accent);
}

.theme-picker-swatch {
  grid-area: sw;
  width: 32px; height: 32px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.theme-picker-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.theme-picker-sub {
  grid-area: sub;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.25;
}
.theme-picker-badge {
  grid-area: badge;
  font-size: 14px;
  color: var(--accent);
  min-width: 16px;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════
   Epicycle overlay wrapper (the corner "Mars · al-Shatir" inset). All
   chrome here is var()-based so the panel restyles with the active
   theme. Drag handle lives on .epi-header; resize grip is the
   bottom-left 28×28 of the canvas itself (set in JS).
   ════════════════════════════════════════════════════════════════════ */
.epi-wrap {
  position: fixed;
  /* Docked top-right by default. Clear of the FP status bar (~30px)
     and the planet picker (~50px), out of the way of EXIT SKY and the
     planet-label canvas. Drag to relocate; on next page-load the user-
     saved position is restored. */
  right: 8px;
  top: 56px;
  left: auto;
  z-index: 9500;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 0 3px color-mix(in srgb, var(--border) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 22%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.70);
  overflow: hidden;
}
.epi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--row) 90%, var(--accent) 8%),
    var(--panel)
  );
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: grab;
  font: italic 12px Georgia, 'Palatino Linotype', serif;
  color: var(--fg);
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.epi-collapse-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--fg);
  border-radius: 3px;
  padding: 1px 8px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.epi-collapse-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Historical Sky tab ─────────────────────────────────────────── */
/* Famous-skies catalogue. Each card has a banner thumb (image or
   gradient), narrative body, and two action buttons (open + share).
   Designed for the share-card export to look continuous with the
   on-screen card.                                                    */
.pa-hist-intro {
  padding: 16px 18px 6px;
}
.pa-hist-heading {
  font-size: 22px; font-weight: 700; margin: 0 0 6px;
  color: var(--fg);
}
.pa-hist-blurb {
  color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 6px;
}
.pa-hist-section {
  padding: 12px 18px 4px;
}
.pa-hist-section-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 8px;
}
.pa-hist-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pa-hist-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.pa-hist-card:hover {
  border-color: var(--accent); transform: translateY(-1px);
}
.pa-hist-thumb {
  height: 140px; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px;
  background-size: cover; background-position: center;
}
.pa-hist-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pa-hist-cat {
  font-size: 22px; color: #f4ecd8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pa-hist-ancient {
  font-size: 10px; padding: 3px 7px; border-radius: 3px;
  background: rgba(13, 17, 23, 0.75); color: #c8a84b;
  border: 1px solid rgba(200, 168, 75, 0.5);
  backdrop-filter: blur(2px);
}
.pa-hist-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.pa-hist-title {
  font-size: 17px; font-weight: 600; color: var(--fg);
}
.pa-hist-sub {
  font-size: 13px; color: var(--fg); opacity: 0.78; font-style: italic;
}
.pa-hist-when {
  font-size: 11px; color: var(--muted); font-variant: small-caps;
  letter-spacing: 0.06em;
}
.pa-hist-narr {
  font-size: 12.5px; line-height: 1.55; color: var(--fg);
  opacity: 0.9; margin: 4px 0 0;
}
.pa-hist-cite {
  font-size: 11px; font-style: italic; color: var(--muted);
  margin-top: 4px;
}
.pa-hist-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.pa-hist-btn {
  flex: 1; padding: 8px 10px; border-radius: 5px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--row);
  color: var(--fg); font-family: inherit;
}
.pa-hist-btn:hover { border-color: var(--accent); color: var(--accent); }
.pa-hist-btn-share {
  background: var(--accent); border-color: var(--accent); color: #1a1a2e;
}
.pa-hist-btn-share:hover { filter: brightness(1.1); color: #1a1a2e; }
.pa-hist-error {
  margin: 8px 18px; padding: 10px 14px;
  background: rgba(214, 107, 107, 0.12);
  border: 1px solid rgba(214, 107, 107, 0.4);
  border-radius: 6px; color: #d66b6b; font-size: 13px;
}

/* ── Ephemeris tab (reworked) ─────────────────────────────────────── */
/* Plain-text two-column comparison against the modern Kepler reference.
   Rows are <details> elements so the dignity breakdown and full
   precision values only appear when the user expands them.            */
.pa-ephem-header {
  padding: 14px 18px;
  background: var(--row);
  border-radius: 6px;
  margin: 10px 18px;
  border: 1px solid var(--border);
}
.pa-ephem-date     { font-size: 14px; color: var(--fg); font-weight: 600; }
.pa-ephem-engine   { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pa-ephem-legend   { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

.pa-ephem-rows { padding: 0 18px; }

.pa-ephem-row {
  border-bottom: 1px solid var(--border);
}
.pa-ephem-row:last-child { border-bottom: none; }
.pa-ephem-row[open] {
  background: var(--row);
}

.pa-ephem-summary {
  display: grid;
  grid-template-columns: 100px 1fr 180px 100px;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}
.pa-ephem-summary::-webkit-details-marker { display: none; }
.pa-ephem-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: -8px;
  color: var(--muted);
  transition: transform .15s;
  font-size: 10px;
}
.pa-ephem-row[open] .pa-ephem-summary::before { transform: rotate(90deg); }

.pa-ephem-name {
  font-weight: 600;
  color: var(--fg);
}
.pa-ephem-pos {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pa-ephem-dig {
  color: var(--muted);
  font-size: 13px;
}
.pa-ephem-cmp {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}
.pa-ephem-err-ok   { color: #7bbf63; }
.pa-ephem-err-warn { color: #d8c45b; }
.pa-ephem-err-bad  { color: #d66b6b; }

.pa-ephem-detail {
  padding: 8px 32px 14px;
  font-size: 13px;
  color: var(--fg);
}
.pa-ephem-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.pa-ephem-detail-row:last-child { border-bottom: none; }
.pa-ephem-detail-row span:first-child {
  color: var(--muted);
}
.pa-ephem-detail-row span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pa-ephem-events-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 18px 8px;
}
.pa-ephem-event {
  display: grid;
  grid-template-columns: 60px 100px 1fr;
  gap: 12px;
  padding: 6px 18px;
  font-size: 13px;
  color: var(--fg);
}
.pa-ephem-event-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.pa-ephem-event-body { color: var(--fg); font-weight: 500; }
.pa-ephem-event-detail { color: var(--fg); opacity: 0.85; }
.pa-ephem-event-empty { padding: 10px 18px; color: var(--muted); font-style: italic; }

/* Phone layout */
@media (max-width: 520px) {
  .pa-ephem-summary {
    grid-template-columns: 90px 1fr 80px;
  }
  .pa-ephem-cmp { display: none; }    /* show only on expanded row */
}

/* ── Natal wheel in the Report tab ──────────────────────────────── */
/* The wheel is the centerpiece of the chart view. Fluid sizing fits
   any phone (320–520 px) while staying crisp on tablets and desktop.
   The outer glow + drop-shadow gives the SVG visual weight against the
   panel background.                                                    */
.pa-report-wheel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 12px 8px;
  position: relative;
}
.pa-natal-wheel-svg {
  width: 100%;
  height: auto;
  /* Adaptive: fill the column up to the viewport's smaller dimension. The 88vh
     guard keeps it from overflowing vertically on short screens; the 820px cap
     lets it grow large on tablets (was a flat 560px — too small there). */
  max-width: min(96vw, 88vh, 820px);
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 16px rgba(200, 168, 75, 0.25))
    drop-shadow(0 8px 32px rgba(0, 0, 0, 0.55));
}

/* ── Historical-event header above the wheel in Report ─────────── */
/* Shown only when the user opened a famous-event chart. Narrative +
   citation surface before the engine's Tetrabiblos verdict.            */
.pa-report-hist {
  padding: 16px 18px;
  margin: 0 0 8px;
  background: linear-gradient(135deg, rgba(200, 168, 75, 0.08), rgba(200, 168, 75, 0.02));
  border: 1px solid rgba(200, 168, 75, 0.25);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.pa-report-hist-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  font-family: 'Georgia', serif;
}
.pa-report-hist-sub {
  font-size: 13px;
  color: var(--fg);
  opacity: 0.8;
  font-style: italic;
  margin-top: 4px;
}
.pa-report-hist-when {
  font-size: 11px;
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-report-hist-when .pa-hist-ancient {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(184, 137, 61, 0.15);
  color: var(--accent);
  border: 1px solid rgba(184, 137, 61, 0.35);
  letter-spacing: 0;
}
.pa-report-hist-narr {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
  opacity: 0.92;
  margin-top: 10px;
  font-family: 'Georgia', serif;
}
.pa-report-hist-cite {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin-top: 8px;
  font-family: 'Georgia', serif;
}

/* Phone tweaks — slightly tighter padding so the wheel takes more space */
@media (max-width: 520px) {
  .pa-report-wheel  { padding: 12px 6px 4px; }
  .pa-report-hist   { padding: 12px 14px; margin-left: 6px; margin-right: 6px; }
  .pa-natal-wheel-svg { max-width: 98vw; }
}

/* ── Neon glyph pulse animations on the natal wheel ─────────────── */
/* Pulse animations disabled. Earlier opacity oscillation caused a
   subtle "floating" effect because browsers re-rasterize SVG filter
   results (the neon glow) at each opacity step, which can shift the
   filter's center by a sub-pixel amount. Visually that reads as the
   glyphs drifting across the wheel. The static neon glow is striking
   enough on its own — no animation needed. Keeping the .pa-wheel-*
   classes for future targetability (data hooks, hover effects).      */
.pa-wheel-planet, .pa-wheel-planet-outer, .pa-wheel-sign {
  /* No animation — neon glow filter alone provides the luminous look. */
  opacity: 1;
}

/* ─── Synastry top-level mode (base overlay positioning) ─────────────
   Most of the chrome (rod caps, Greek-key sides, dark plasma palette)
   comes from astrology-scrolls.css via `body.pa-scroll-mode
   :is(#astrology-app, #synastry-app)`. This block just wires the
   overlay positioning and the deck-friendly flex layout. The .pa-syn-*
   sub-component styles below apply INSIDE .pa-scroll-inner. */
#synastry-app {
  position: fixed; inset: 0; z-index: 7800;
  background: var(--bg, #0c0d14);
  color: var(--fg, #e8e4d8);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}
#synastry-app[hidden] { display: none !important; }
:is(#synastry-app, #at-synastry-reading) .pa-body { flex: 1; position: relative; overflow: hidden; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pills {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); color: #aaa;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer;
  --syn-bond-tint: #999;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill:hover { background: rgba(255,255,255,0.08); color: #fff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill[data-active] {
  background: rgba(255,255,255,0.1); color: var(--syn-bond-tint);
  border-color: var(--syn-bond-tint);
  box-shadow: 0 0 12px -2px var(--syn-bond-tint);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill-glyph { color: var(--syn-bond-tint); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-pickers {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 20px;
  padding: 14px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker { display: flex; flex-direction: column; gap: 4px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker select {
  background: rgba(255,255,255,0.06); color: #e8e4d8;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
  padding: 6px 8px; font: inherit; font-size: 13px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-run {
  grid-column: 1 / -1;
  background: var(--syn-bond-tint, #d68bc8); color: #15161e;
  border: 0; border-radius: 4px; padding: 8px 16px;
  font: inherit; font-weight: 600; cursor: pointer;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-run:hover { filter: brightness(1.08); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-result { min-height: 80px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-result-hint { color: #999; font-style: italic; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-result-error { color: #ff8c8c; font-style: normal; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin: 0 0 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
  border-left: 4px solid var(--syn-bond-tint, #d68bc8);
  border-top: 0;
  border-radius: 4px;
  font-size: 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-glyph { font-size: 24px; color: var(--syn-bond-tint, #d68bc8); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-label { font-weight: 600; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-total { margin-left: auto; color: #aaa; font-size: 13px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-parts {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: #888; padding: 0 18px; margin-bottom: 14px;
}
/* SR-07 — at-a-glance bond cover panel (this pair across all the bond modes). */
:is(#synastry-app, #at-synastry-reading) .at-bond-cover {
  padding: 14px 18px; margin: 0 0 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.12));
  border-left: 4px solid var(--syn-bond-tint, #d68bc8); border-radius: 4px;
}
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-h2 { margin: 0 0 8px; font-size: 17px; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-top { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13.5px; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-extreme em { color: #b9a36a; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-strong { color: #e8d4a0; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-weak { color: #b9b1c4; }
/* P10 — "Most strained as" extreme (only shown for a genuinely poor-band bond). */
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-strained { color: #e0726a; }
/* P10/P13 — Best Use block + "Step Into The Bond Sky" CTA. */
:is(#synastry-app, #at-synastry-reading) .pa-syn-bestuse { margin: 10px 0 4px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-sky-highlight { margin: 12px 0 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-sky-cta { display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: 999px;
  font: 600 12px/1 "Cinzel", Georgia, serif; letter-spacing: 0.05em; cursor: pointer;
  color: #0c1424; background: linear-gradient(180deg,#9fd9ff,#6fb8e8); border: 1px solid #6fb8e8; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-sky-cta:hover { filter: brightness(1.08); }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-flat { font-size: 13px; color: #b9b1c4; margin: 0 0 10px; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-list { list-style: none; margin: 0; padding: 0; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-row {
  display: grid; grid-template-columns: minmax(96px, 0.9fr) 1.4fr auto; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-radius: 4px; cursor: pointer; border-left: 2px solid transparent;
  /* tap target inside the pan-y reading scroller — mark it manipulation so a tap
     is delivered as a click rather than being absorbed as a scroll gesture. */
  touch-action: manipulation;
}
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-row:hover,
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-row:focus-visible { background: rgba(255,255,255,0.06); outline: none; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-row.is-current { background: rgba(214,139,200,0.14); border-left-color: var(--syn-bond-tint, #d68bc8); }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-row--lead .at-bond-cover-mode::after { content: '\2605'; color: #d8b85a; font-size: 10px; margin-left: 6px; vertical-align: 1px; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-mode { font-weight: 600; color: #e7dcc4; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-verdict { color: #c9bfae; font-size: 13px; }
/* P2-13 — the natal-capacity cap reason, dim and small under the verdict word. */
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-cap { display: block; color: #8a93a3; font-size: 10.5px; font-style: italic; margin-top: 2px; line-height: 1.25; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-idx { justify-self: end; color: #9fb0c6; font-size: 12.5px; white-space: nowrap; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-idx strong { color: #e8d4a0; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry {
  display: grid; grid-template-columns: minmax(96px, 0.9fr) 1.4fr auto; align-items: baseline; gap: 10px;
  margin-top: 8px; padding: 7px 10px; border-radius: 4px; cursor: pointer; border-top: 1px dashed rgba(255,255,255,0.12);
  touch-action: manipulation;
}
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry:hover,
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry:focus-visible { background: rgba(255,80,80,0.08); outline: none; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry.is-current { background: rgba(214,90,90,0.14); }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry-axis { color: #d68b8b; }
:is(#synastry-app, #at-synastry-reading) .at-bond-cover-note { margin: 10px 0 0; font-size: 11.5px; color: #8b8b8b; font-style: italic; }
@media (max-width: 560px) {
  :is(#synastry-app, #at-synastry-reading) .at-bond-cover-row,
  :is(#synastry-app, #at-synastry-reading) .at-bond-cover-rivalry { grid-template-columns: 1fr auto; }
  :is(#synastry-app, #at-synastry-reading) .at-bond-cover-verdict { grid-column: 1 / -1; order: 3; }
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mod { color: #d68bc8; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-debug {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; padding: 10px 14px; margin-top: 8px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-debug summary { cursor: pointer; color: #aaa; font-size: 12px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-debug-json {
  background: rgba(0,0,0,0.4); padding: 10px; border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 11px;
  color: #c0c4d0; white-space: pre-wrap; word-wrap: break-word;
  max-height: 500px; overflow-y: auto;
}
:is(#synastry-app, #at-synastry-reading) .pa-verdict-fortified .pa-syn-verdict-glyph { color: #ffd86b; }
:is(#synastry-app, #at-synastry-reading) .pa-verdict-supported .pa-syn-verdict-glyph { color: #6cc8ff; }
:is(#synastry-app, #at-synastry-reading) .pa-verdict-contested .pa-syn-verdict-glyph { color: #b8b8c0; }
:is(#synastry-app, #at-synastry-reading) .pa-verdict-impeded   .pa-syn-verdict-glyph { color: #ffa060; }
:is(#synastry-app, #at-synastry-reading) .pa-verdict-severed   .pa-syn-verdict-glyph { color: #ff6868; }

/* ─── v2 disclosure — Why strip, breakdown table, tap-to-expand contacts ─ */
:is(#synastry-app, #at-synastry-reading) .pa-syn-why-strip {
  border-left: 3px solid #7dd3fc;
  background: rgba(125, 211, 252, 0.06);
  padding: 10px 14px; margin: 0 0 14px;
  border-radius: 0 4px 4px 0;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-why-body {
  margin: 0; color: #d8e8f8; font-size: 13px; font-style: italic; line-height: 1.55;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px; padding: 10px 14px;
  margin: 0 0 14px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-table { width: 100%; border-collapse: collapse; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-table td { padding: 4px 8px; font-size: 13px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-k { color: #c0c4d0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-v { text-align: right; font-family: 'Courier New', monospace; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-v.pos { color: #86d0a8; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-breakdown-v.neg { color: #f4a896; }
/* MB-C — synastry stacked-bar decomposition + limiting-factor caption. */
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-wrap { margin: 4px 0 12px; }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-h {
  font: 600 10px/1.4 'Cinzel', Georgia, serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #a4b1cb; margin-bottom: 6px;
}
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar {
  display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
}
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; padding: 0 4px;
  font: 600 9px/1 'Cinzel', Georgia, serif; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-seg + .mb-syn-bar-seg { border-left: 1px solid rgba(0,0,0,0.35); }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-pos { color: #0c1424; background: linear-gradient(180deg, #a5e4c0, #7fd6a0); }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-neg { color: #2a0f0f; background: linear-gradient(180deg, #f4a896, #e0726a); }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-seg.is-limiter { box-shadow: inset 0 0 0 2px #ffd263; }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-seg-l { overflow: hidden; text-overflow: ellipsis; }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-caption { margin: 6px 0 0; font-size: 12px; color: #c0c4d0; }
:is(#synastry-app, #at-synastry-reading) .mb-syn-bar-caption strong { color: #ffd263; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-top-contacts {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-details {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 0;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-details[open] {
  background: rgba(125, 211, 252, 0.04);
  border-color: rgba(125, 211, 252, 0.18);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  list-style: none; user-select: none;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-summary::-webkit-details-marker { display: none; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-summary::marker { display: none; content: ''; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-summary::before {
  content: '▸'; color: #888; font-size: 10px; margin-right: 2px;
  transition: transform 0.15s ease;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-details[open] .pa-syn-contact-summary::before {
  transform: rotate(90deg);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-glyph { flex: 1; font-size: 14px; color: #e8e0c0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-glyph svg { color: var(--syn-bond-tint, #f0c040); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-score { font-family: 'Courier New', monospace; font-size: 13px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-pos { color: #86d0a8; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-neg { color: #f4a896; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-detail {
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: #c0c4d0; line-height: 1.7;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-row { margin: 2px 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-row strong { color: #f0c040; font-weight: 500; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-contact-house strong { color: #7dd3fc; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-method-footer {
  font-size: 10.5px; color: rgba(232, 216, 168, 0.45);
  text-align: center; margin: 18px 0 0;
  font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.05em;
  text-transform: uppercase;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-g { display: inline-block; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-svg { display: inline-block; }

/* ─── Synastry Phase 2/3 — section panels + Quick view ───────────── */
:is(#synastry-app, #at-synastry-reading) .pa-syn-view-toggle {
  margin-left: 8px;
  background: rgba(255,255,255,0.08);
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-view-toggle:hover { background: rgba(255,255,255,0.16); color: #fff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 12px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-verdict {
  margin: 0 0 10px;
  color: #e8d4a0;
  font-size: 14px;
  line-height: 1.5;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-mech {
  margin: 0 0 12px;
  color: #ddd;
  font-size: 13px;
  line-height: 1.6;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-fact {
  margin: 6px 0;
  color: #c0c4d0;
  font-size: 13px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-q { color: #888; font-size: 11px; margin-left: 4px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-sections { display: flex; flex-direction: column; gap: 8px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-section summary {
  cursor: pointer;
  color: var(--syn-bond-tint, #d68bc8);
  font-weight: 600;
  font-size: 14px;
  padding: 4px 0;
  user-select: none;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-section summary:hover { color: #fff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-para-block { margin: 8px 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-para {
  margin: 0 0 4px;
  color: #ddd;
  font-size: 13px;
  line-height: 1.6;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-para-verdict {
  margin: 0 0 0;
  color: #e8d4a0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}

/* ─── Synastry Phase 3 — inner sub-tabs ──────────────────────────── */
:is(#synastry-app, #at-synastry-reading) .pa-syn-inner-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-inner-tab {
  background: transparent;
  color: #888;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-inner-tab:hover { color: #fff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-inner-tab[data-active] {
  color: var(--syn-bond-tint, #d68bc8);
  border-bottom-color: var(--syn-bond-tint, #d68bc8);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-inner-body { min-height: 200px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-reading-toolbar { margin-bottom: 10px; }

/* Composite tab */
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-intro {
  margin: 0; color: #ccc; font-size: 13px; line-height: 1.6;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--syn-bond-tint, #d68bc8);
  padding: 10px 14px; border-radius: 4px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-wheel { display: flex; justify-content: center; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #ddd;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-line { margin: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-note { margin: 6px 0 0; color: #888; font-size: 12px; }

/* Timeline tab */
:is(#synastry-app, #at-synastry-reading) .pa-syn-timeline { display: flex; flex-direction: column; gap: 18px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-band { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 10px 14px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-title { margin: 0 0 8px; font-size: 13px; color: var(--syn-bond-tint, #d68bc8); font-weight: 600; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-list { list-style: none; padding: 0; margin: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-hit {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 13px; color: #ddd;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-hit:last-child { border-bottom: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-date { font-family: 'Courier New', monospace; color: #aaa; min-width: 96px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-relevance { color: #888; font-size: 12px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_warming      .pa-syn-tl-relevance { color: #7ce0a3; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_intensifying .pa-syn-tl-relevance { color: #ffd86b; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_stressing    .pa-syn-tl-relevance { color: #ff8c8c; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_steadying    .pa-syn-tl-relevance { color: #6cc8ff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof { width: 100%; border-collapse: collapse; font-size: 12px; color: #ddd; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof th { text-align: left; padding: 4px 6px; color: #888; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof td { padding: 4px 6px; border-bottom: 1px dashed rgba(255,255,255,0.05); }

/* Wheel tab */
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-pane { display: flex; flex-direction: column; align-items: center; gap: 10px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-host { display: flex; justify-content: center; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-legend { color: #aaa; font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-legend-key { display: inline-block; width: 18px; height: 2px; vertical-align: middle; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-pos { background: #7ce0a3; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-neg { background: #ff8c8c; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-neu { background: #9aa0b0; }

/* ─── Synastry Phase 4 — Save/Share + Recent strip ───────────────── */
:is(#synastry-app, #at-synastry-reading) .pa-syn-actions {
  display: inline-flex; gap: 6px; margin-left: auto;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-action {
  background: rgba(255,255,255,0.08); color: #ddd;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 4px;
  padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-action:hover { background: rgba(255,255,255,0.16); color: #fff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-action-error { background: rgba(255, 100, 100, 0.2); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-title {
  margin: 0 0 10px; font-size: 12px;
  color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-list {
  display: flex; flex-direction: column; gap: 6px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 10px; align-items: center;
  background: rgba(255,255,255,0.03); color: #ddd;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
  padding: 8px 12px; font: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
  --syn-bond-tint: #d68bc8;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--syn-bond-tint);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-name { color: #e8e4d8; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-mode { color: var(--syn-bond-tint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-grade { color: #aaa; font-size: 12px; font-style: italic; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-date { color: #666; font-family: 'Courier New', monospace; font-size: 11px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-delete {
  color: #666; font-size: 16px; padding: 0 6px; cursor: pointer;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-delete:hover { color: #ff8c8c; }

/* ─── Synastry scroll-context content styles (v3-final) ───────────── */
/* These render INSIDE .pa-scroll-inner so the plasma palette is the
   default. We just style the synastry-specific pieces. */
:is(#synastry-app, #at-synastry-reading) .pa-syn-intro {
  margin: 0 0 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--scroll-ink, #e8d8a8);
  font-style: italic;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-h3 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--scroll-gold, #f0c040);
  margin: 22px 0 10px;
  text-shadow: 0 0 6px var(--scroll-gold-soft, rgba(240,192,64,0.45));
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-h4 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--scroll-ink-deep, #f4e6c0);
  margin: 14px 0 8px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-placeholder,
:is(#synastry-app, #at-synastry-reading) .pa-syn-empty {
  font-style: italic;
  color: var(--scroll-ink-faded, rgba(232,216,168,0.62));
  margin: 12px 0;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-setup-error {
  background: rgba(232, 120, 120, 0.15);
  border: 1px solid var(--scroll-rubric, #e87878);
  color: var(--scroll-rubric, #e87878);
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 4px;
  font-style: italic;
}
/* Bond-mode pill row on Setup scroll */
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20, 14, 36, 0.8);
  color: var(--scroll-ink-faded);
  border: 1px solid var(--scroll-violet-dim);
  border-radius: 20px;
  padding: 6px 14px;
  font: 600 12px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-transform: uppercase;
  --syn-bond-tint: var(--scroll-violet);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.18s;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill:hover {
  background: rgba(18, 28, 60, 0.85);
  color: var(--scroll-ink-deep);
  border-color: var(--syn-bond-tint);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill[data-active] {
  background: rgba(18, 28, 60, 0.95);
  color: var(--syn-bond-tint);
  border-color: var(--syn-bond-tint);
  box-shadow: 0 0 14px -2px var(--syn-bond-tint), inset 0 0 8px rgba(0,0,0,0.4);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mode-pill-glyph { color: var(--syn-bond-tint); }
/* Picker form */
:is(#synastry-app, #at-synastry-reading) .pa-syn-pickers {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 22px;
  padding: 16px;
  background: rgba(20, 14, 36, 0.55);
  border: 1px solid var(--scroll-violet-dim);
  border-radius: 6px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker { display: flex; flex-direction: column; gap: 4px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker-label {
  font: 600 10px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scroll-ink-faded);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-picker select {
  background: rgba(20, 14, 36, 0.85);
  border: 1px solid var(--scroll-violet);
  color: var(--scroll-ink);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-run {
  grid-column: 1 / -1;
  background: var(--scroll-gold);
  color: var(--scroll-bg-deep);
  border: 1px solid var(--scroll-gold-bright);
  border-radius: 4px;
  padding: 10px 18px;
  font: 700 13px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 12px var(--scroll-gold-soft);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-run:hover {
  background: var(--scroll-gold-bright);
  box-shadow: 0 0 18px var(--scroll-gold-soft);
}

/* Verdict badge in scroll context */
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, rgba(20,14,36,0.85), rgba(18,28,60,0.55));
  border-left: 4px solid var(--syn-bond-tint, var(--scroll-gold));
  border-top: 0;
  border-radius: 4px;
  font: 600 18px/1.2 'Cinzel', Georgia, serif;
  color: var(--scroll-ink-deep);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-glyph {
  font-size: 32px;
  color: var(--syn-bond-tint, var(--scroll-gold));
  filter: drop-shadow(0 0 6px var(--scroll-gold-soft));
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-stack { display: flex; flex-direction: column; gap: 4px; flex: 1; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-label { font-size: 22px; letter-spacing: 0.04em; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-total {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--scroll-ink-faded);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-parts {
  display: flex; gap: 14px; flex-wrap: wrap;
  font: 11px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scroll-ink-faded);
  padding: 0 22px;
  margin-bottom: 18px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-mod { color: var(--scroll-rubric, #e87878); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-facts {
  padding: 12px 16px;
  background: rgba(20, 14, 36, 0.45);
  border-left: 2px solid var(--scroll-violet);
  border-radius: 4px;
  margin: 10px 0 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-fact {
  margin: 6px 0;
  font-size: 14px;
  color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-q { color: var(--scroll-ink-faded); font-size: 11px; margin-left: 6px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-para-block { margin: 12px 0 18px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-para {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-para-verdict {
  margin: 0;
  color: var(--scroll-violet-bright, #d6c8e8);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

/* Aspect testimony table */
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; color: var(--scroll-ink);
  margin: 10px 0 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--scroll-violet);
  font: 600 10px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--scroll-gold);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-table td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--scroll-violet-dim);
  vertical-align: middle;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-row.pa-syn-aspect-pos td:last-child { color: #7ce0a3; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-row.pa-syn-aspect-neg td:last-child { color: #ff8c8c; }

/* Reception grid */
:is(#synastry-app, #at-synastry-reading) .pa-syn-reception-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 10px 0 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 14px; color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-list li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--scroll-violet-dim);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-list li:last-child { border-bottom: 0; }

/* Composite */
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-wheel {
  display: flex; justify-content: center; margin: 14px 0 12px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-line { margin: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-note {
  margin: 8px 0 0;
  color: var(--scroll-ink-faded);
  font-size: 12px;
}

/* Timeline */
:is(#synastry-app, #at-synastry-reading) .pa-syn-timeline { display: flex; flex-direction: column; gap: 20px; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-band {
  background: rgba(20, 14, 36, 0.55);
  border: 1px solid var(--scroll-violet-dim);
  border-radius: 6px;
  padding: 14px 16px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-list { list-style: none; padding: 0; margin: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-hit {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--scroll-violet-dim);
  font-size: 13px;
  color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-hit:last-child { border-bottom: 0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-date {
  font-family: 'Courier New', monospace;
  color: var(--scroll-ink-faded);
  min-width: 100px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-relevance {
  color: var(--scroll-ink-faded);
  font-style: italic;
  font-size: 12px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_warming      .pa-syn-tl-relevance { color: #7ce0a3; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_intensifying .pa-syn-tl-relevance { color: #ffd86b; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_stressing    .pa-syn-tl-relevance { color: #ff8c8c; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-bond_steadying    .pa-syn-tl-relevance { color: #6cc8ff; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof {
  width: 100%; border-collapse: collapse; font-size: 13px;
  color: var(--scroll-ink);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof th {
  text-align: left; padding: 4px 8px;
  color: var(--scroll-gold);
  font: 600 10px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--scroll-violet);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-prof td {
  padding: 4px 8px;
  border-bottom: 1px dashed var(--scroll-violet-dim);
}

/* Wheel */
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-pane {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-legend {
  font: 12px/1.4 'Cormorant Garamond', Georgia, serif;
  color: var(--scroll-ink-faded);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-legend-key {
  display: inline-block; width: 20px; height: 2px;
  vertical-align: middle;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-pos { background: #7ce0a3; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-neg { background: #ff8c8c; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-wheel-neu { background: #b8b8c0; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-result-hint {
  margin: 6px 0; font-size: 12px;
  color: var(--scroll-ink-faded); font-style: italic;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-result-error {
  color: var(--scroll-rubric, #e87878);
  font-style: italic;
}

/* Corner buttons — match astrology save/share style */
:is(#synastry-app, #at-synastry-reading) .pa-syn-save-corner,
:is(#synastry-app, #at-synastry-reading) .pa-syn-share-corner {
  bottom: auto;
}

/* Phase 4 recent strip — override the older standalone-overlay styling
   so it reads cleanly on the plasma palette */
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--scroll-violet-dim);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-item {
  background: rgba(20, 14, 36, 0.65);
  border: 1px solid var(--scroll-violet-dim);
  color: var(--scroll-ink);
  --syn-bond-tint: var(--scroll-gold);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-item:hover {
  background: rgba(18, 28, 60, 0.85);
  border-color: var(--syn-bond-tint);
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-name { color: var(--scroll-ink-deep); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-mode { color: var(--syn-bond-tint); }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-grade { color: var(--scroll-ink-faded); }

/* ─── Synastry typography overrides (readability bump) ────────────
   User-requested larger / more comfortable text. Lives at the END of
   the file so it wins via source order over the smaller defaults in
   the scroll-context block above. */
:is(#synastry-app, #at-synastry-reading) .pa-syn-para           { font-size: 17px !important; line-height: 1.7 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-para-verdict   { font-size: 16px !important; line-height: 1.65 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-fact     { font-size: 17px !important; line-height: 1.6 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-verdict  { font-size: 16px !important; line-height: 1.65 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-quick-mech     { font-size: 16px !important; line-height: 1.7 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-intro          { font-size: 19px !important; line-height: 1.65 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-h3             { font-size: 16px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-h4             { font-size: 14px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-list           { font-size: 16px !important; line-height: 1.7 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-list li        { padding: 6px 0 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-empty,
:is(#synastry-app, #at-synastry-reading) .pa-syn-placeholder    { font-size: 16px !important; line-height: 1.65 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-cap-summary    { font-size: 15px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-cap-row        { font-size: 15px !important; padding: 8px 0 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-cap-cond       { font-size: 12px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-label  { font-size: 26px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-total  { font-size: 14px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-verdict-glyph  { font-size: 38px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-aspect-table   { font-size: 14px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-hit         { font-size: 15px !important; padding: 7px 0 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-tl-title       { font-size: 15px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-line { font-size: 15px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-intro { font-size: 16px !important; line-height: 1.7 !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-result-hint    { font-size: 13px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-q              { font-size: 12px !important; }
:is(#synastry-app, #at-synastry-reading) .pa-syn-recent-date { color: var(--scroll-ink-faded); }

/* v3 composite scroll — foundation grid, static description, per-temperament bond paragraph */
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-foundation {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 16px; margin: 14px 0;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-foundation dt {
  font: 600 11px 'Cinzel', Georgia, serif;
  color: rgba(240, 192, 64, 0.80);
  text-transform: uppercase; letter-spacing: 0.06em;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-foundation dd {
  font: 14px Georgia, serif; color: rgba(244, 230, 192, 0.92);
  margin: 0;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-foundation dd svg {
  vertical-align: middle; margin-right: 2px;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-desc {
  font: italic 14px Georgia, serif;
  color: rgba(232, 216, 168, 0.80);
  margin: 16px 0 12px; line-height: 1.6;
}
:is(#synastry-app, #at-synastry-reading) .pa-syn-composite-bond {
  font: italic 15px Georgia, serif;
  color: #d8e8f8; line-height: 1.65;
  border-left: 3px solid #7dd3fc;
  padding: 12px 16px; margin: 0 0 16px;
  background: rgba(125, 211, 252, 0.06);
  border-radius: 0 4px 4px 0;
}

/* ── Life Domains tab (v10.2) ─────────────────────────────────────────
   Four plain-language verdicts (Career, Partnership, Health, Year)
   surfaced via the parallel LIFE_DOMAINS assembly template.  Tone
   mirrors the Final Judgement teaser: soft-gold accent, generous
   line-height, italic verdict + roman text body. */
.pa-domains {
  padding: 20px 16px 36px;
  max-width: 760px;
  margin: 0 auto;
}
.pa-domains-title {
  font: 600 22px/1.2 Georgia, serif;
  color: var(--accent, #d4b878);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.pa-domains-intro {
  font: italic 13px/1.55 Georgia, serif;
  color: var(--muted, #a09684);
  margin: 0 0 28px;
}
.pa-domain-section {
  position: relative;
  margin: 0 0 28px;
  padding: 14px 18px 18px;
  background: rgba(212, 184, 120, 0.04);
  border-left: 3px solid var(--accent, #d4b878);
  border-radius: 0 5px 5px 0;
}
.pa-domain-rule { display: none; }    /* reserved for future divider tweaks */
.pa-domain-slot {
  font: 600 11px/1 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent, #d4b878);
  margin: 0 0 6px;
}
.pa-domain-label {
  font: italic 15px/1.4 Georgia, serif;
  color: #f0e8d4;
  margin: 0 0 8px;
}
.pa-domain-short {
  font: 500 13.5px/1.5 Georgia, serif;
  color: #d8d2c4;
  margin: 0 0 10px;
}
.pa-domain-text {
  font: 13px/1.7 Georgia, serif;
  color: rgba(232, 224, 200, 0.88);
  margin: 0;
}
.pa-domains-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted, #a09684);
}
.pa-domains-empty p { margin: 0 0 8px; }
.pa-domains-empty .pa-muted { font-size: 12px; opacity: 0.75; }

/* ── Home-tab Life-Domains teaser strip ────────────────────────────
   Sits beneath the Final Judgement teaser.  Each row clicks through
   to the full Domains tab via the generic [data-tab] delegate. */
.pa-home-domains .pa-home-domain-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: color 0.15s;
}
.pa-home-domains .pa-home-domain-row:last-child { border-bottom: 0; }
.pa-home-domains .pa-home-domain-row:hover { color: var(--accent, #d4b878); }
.pa-home-domain-slot {
  flex: 0 0 110px;
  font: 600 10.5px/1 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #d4b878);
}
.pa-home-domain-short {
  flex: 1 1 auto;
  font: italic 12.5px/1.4 Georgia, serif;
  color: #d8d2c4;
}

/* ── JPL Horizons source badge ──────────────────────────────────────
   Surfaces fetch state for the live "Modern Reference (JPL/NASA)"
   ephemeris source. Sits inline next to the BodySource dropdown in
   the Ephemeris control panel.

   States (set via className): default (latent), loading, live, error.
*/
.jpl-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.6em;
  font-size: 11px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.05em;
  color: var(--chrome-text-soft, #a09070);
  padding: 0.18em 0.55em;
  border: 1px solid var(--chrome-border, #3a3020);
  border-radius: 3px;
  background: var(--chrome-card-bg, rgba(0,0,0,0.18));
  vertical-align: middle;
  line-height: 1.4;
}
.jpl-source-badge[hidden] { display: none !important; }
.jpl-source-badge--loading {
  color: var(--color-accent-2, #c9a84c);
  border-color: var(--color-accent-2, #c9a84c);
}
.jpl-source-badge--live {
  color: #6fcc63;
  border-color: #6fcc63;
}
.jpl-source-badge--error {
  color: #d4654a;
  border-color: #d4654a;
}

/* ════════════════════════════════════════════════════════════════════
   Onboarding V2 (Phase 5 of UI redesign).
   Fullscreen overlay, 5-screen flow, mass-appeal aesthetic that
   inherits the Phase 4.5 visual refresh (Cinzel display, Cormorant
   body, Inter chrome, saturated indigo + gold + cool accent).
   ════════════════════════════════════════════════════════════════════ */

#onb2-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% -10%,
      rgba(255, 184, 54, 0.20) 0%,
      transparent 55%),
    radial-gradient(ellipse at 80% 100%,
      rgba(125, 169, 255, 0.18) 0%,
      transparent 60%),
    linear-gradient(180deg, #06081C 0%, #03051A 100%);
  animation: onb2-overlay-in 0.42s cubic-bezier(.2,.8,.4,1);
}
@keyframes onb2-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#onb2-overlay.is-leaving {
  animation: onb2-overlay-out 0.32s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes onb2-overlay-out {
  to { opacity: 0; transform: scale(1.02); }
}

.onb2-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100vh;
  padding: 56px 28px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  font-family: var(--type-body, system-ui, sans-serif);
  color: #F0E5C2;
  text-align: center;
}

.onb2-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: rgba(125, 169, 255, 0.85);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.14s ease-out, color 0.14s ease-out;
}
.onb2-skip:hover { color: #A5C2FF; background: rgba(125, 169, 255, 0.10); }

.onb2-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb2-content.is-fading > * {
  animation: onb2-fade-in 0.36s cubic-bezier(.2,.8,.4,1);
}
@keyframes onb2-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.onb2-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.onb2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 184, 54, 0.20);
  transition: background 0.18s ease-out, transform 0.18s ease-out;
}
.onb2-dot.is-active {
  background: #FFB836;
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(255, 184, 54, 0.55);
}

.onb2-splash, .onb2-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 420px;
}
.onb2-splash-glyph {
  font-size: 56px;
  color: #FFD263;
  filter: drop-shadow(0 0 16px rgba(255, 184, 54, 0.55));
  margin-bottom: 8px;
  animation: onb2-glyph-pulse 3s ease-in-out infinite;
}
@keyframes onb2-glyph-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(255, 184, 54, 0.55)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 24px rgba(255, 184, 54, 0.75)); }
}
.onb2-screen-icon {
  font-size: 40px;
  color: #FFB836;
  filter: drop-shadow(0 0 12px rgba(255, 184, 54, 0.45));
  margin-bottom: 4px;
}
.onb2-screen-icon--big { font-size: 64px; filter: drop-shadow(0 0 20px rgba(255, 184, 54, 0.70)); }

.onb2-h1 {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 32px;
  font-weight: 700;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: #FFD263;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.onb2-h2 {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 24px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  color: #FFD263;
  margin: 0;
}

.onb2-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: #F0E5C2;
  max-width: 380px;
  margin: 0;
}
.onb2-subline {
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(169, 150, 112, 0.85);
  max-width: 320px;
  margin: 0;
}
.onb2-subline--margin { margin-top: 8px; }

.onb2-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.55;
  color: #F0E5C2;
  max-width: 380px;
  margin: 0;
}

/* ── "This very hour" closing screen ─────────────────────────────────── */
.onb2-hour-label {
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 210, 99, 0.72);
  margin: 0 0 2px;
}
.onb2-hour-computed { max-width: 400px; }
/* the live Sun/Moon signs + day ruler — the only bright words in the line */
.onb2-hour-em {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
  color: #FFD263;
  font-style: normal;
}
.onb2-hour-pivot { margin-top: 4px; }
.onb2-hour-source { max-width: 360px; margin-top: 6px; }
.onb2-hour-credo {
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: rgba(169, 150, 112, 0.62);
  max-width: 360px;
  margin: 6px 0 0;
}

.onb2-cta {
  margin-top: 12px;
  border: 0;
  padding: 14px 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFD263 0%, #FFB836 60%, #C88E1A 100%);
  color: #06081C;
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 184, 54, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1), box-shadow 0.16s ease-out;
}
.onb2-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(255, 184, 54, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.onb2-cta:active { transform: translateY(0); }

.onb2-cta-secondary {
  border: 0;
  background: transparent;
  color: #A5C2FF;
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-style: dashed;
  text-decoration-color: rgba(125, 169, 255, 0.55);
  transition: color 0.14s ease-out, background 0.14s ease-out;
}
.onb2-cta-secondary:hover {
  color: #C5DAFF;
  background: rgba(125, 169, 255, 0.08);
  text-decoration-color: #7DA9FF;
}

.onb2-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.onb2-theme-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  max-width: 380px;
}
.onb2-theme-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 1.5px solid rgba(255, 184, 54, 0.18);
  border-radius: 10px;
  background: rgba(15, 20, 50, 0.6);
  cursor: pointer;
  transition: border-color 0.16s ease-out, transform 0.16s ease-out;
  font-family: inherit;
  color: inherit;
}
.onb2-theme-tile:hover { transform: translateY(-2px); border-color: rgba(255, 184, 54, 0.45); }
.onb2-theme-tile.is-selected {
  border-color: #FFB836;
  box-shadow: 0 0 18px rgba(255, 184, 54, 0.45),
              inset 0 0 0 1px rgba(255, 210, 99, 0.40);
}
.onb2-theme-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 232, 168, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.onb2-theme-name {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: #FFD263;
  margin-top: 4px;
}
.onb2-theme-sub {
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(169, 150, 112, 0.85);
  line-height: 1.25;
}

@media (max-width: 480px) {
  .onb2-h1 { font-size: 28px; }
  .onb2-h2 { font-size: 20px; }
  .onb2-tagline { font-size: 16px; }
  .onb2-body { font-size: 15px; }
  .onb2-cta { padding: 13px 26px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════
   Today tab (Phase 6 of UI redesign).
   Default landing for returning users — daily-hook surface.
   ════════════════════════════════════════════════════════════════════ */

#today-app {
  position: fixed;
  inset: 0;
  bottom: var(--mode-bar-h, 72px);
  z-index: 8000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 50% -10%,
      rgba(255, 184, 54, 0.12) 0%,
      transparent 50%),
    radial-gradient(ellipse at 80% 100%,
      rgba(125, 169, 255, 0.08) 0%,
      transparent 55%),
    linear-gradient(180deg, var(--color-bg, #06081C) 0%, #02041A 100%);
  color: var(--color-fg, #F0E5C2);
  font-family: var(--type-body, system-ui, sans-serif);
}
#today-app[hidden] { display: none !important; }

.today-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.today-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.today-h1 {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 36px;
  font-weight: 700;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: var(--color-accent-2, #FFD263);
  margin: 0;
  line-height: 1;
}
.today-date {
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(169, 150, 112, 0.85);
}

.today-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  font-family: var(--type-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(240, 229, 194, 0.92);
}
.today-pill strong {
  color: var(--color-accent-2, #FFD263);
  font-weight: 500;
}
.today-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FBF6A;
  box-shadow: 0 0 6px rgba(127, 191, 106, 0.7);
  animation: today-pill-pulse 2s ease-in-out infinite;
}
@keyframes today-pill-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.today-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-fg, #F0E5C2);
  margin: 0;
  padding: 4px 0;
}
/* HG-14 — the fused state-of-the-sky → bearing-on-you line. */
.today-fused-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 94%, transparent);
  margin: 0;
  padding: 6px 10px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent-2, #FFD263) 60%, transparent);
  background: color-mix(in srgb, var(--color-surface, #0A1228) 40%, transparent);
  border-radius: 0 8px 8px 0;
}
/* LEVER-9 (ADDENDUM, join #4) — convergence today-slice "bearing on you" line. */
.today-bearing-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 88%, var(--color-fg, #F0E5C2));
  margin: 5px 0 0;
  padding: 5px 10px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  border-radius: 0 8px 8px 0;
}
/* HW-01..04 — dual-ring now-wheel: the nativity (inner) with the live sky as the
   outer transit ring, rendered by the shared renderChartWheelSvg. The Natal /
   Transits switch gates the outer ring + its cross-aspect chords. */
.today-dualring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
}
/* Natal / Transits ring toggle — modelled on the Sky/Meaning pill. */
.today-nowwheel-toggle {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface, #0A1228) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
}
.tnw-btn {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #e8e9ec) 78%, transparent);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.tnw-btn:hover { color: var(--color-fg, #e8e9ec); }
.tnw-btn.tnw-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-2, #FFD263) 30%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent));
  color: var(--color-fg, #F0E5C2);
}
/* The wheel host — the SVG sets its own width/height; cap it so the chart never
   overflows the narrow Home column and centres on any viewport. */
.today-nowwheel-host {
  line-height: 0;
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
}
.today-nowwheel-host svg { max-width: 100%; height: auto; }

.today-theatre-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent, #FFB836) 22%, var(--color-surface-raised, #1A2148) 100%) 0%,
    var(--color-surface, #0F1432) 100%);
  border: 1px solid var(--color-accent, #FFB836);
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 60%, transparent),
    inset 0 1px 0 rgba(255, 232, 168, 0.18);
  transition: transform 0.16s cubic-bezier(.2,.8,.4,1), box-shadow 0.16s ease-out;
  text-align: left;
}
.today-theatre-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.6),
    0 0 36px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 80%, transparent),
    inset 0 1px 0 rgba(255, 232, 168, 0.30);
}
.today-theatre-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px var(--color-accent-glow, rgba(255,184,54,0.7)));
  flex: 0 0 auto;
}
.today-theatre-label {
  flex: 1;
  font-variant-caps: small-caps;
}
.today-theatre-label strong {
  font-weight: 700;
  color: var(--color-accent-2, #FFD263);
}

/* ── Today landing mode buttons (folded-in Home cards) ─────────────────────
   Three entry buttons below Today's content: Astrology / Synastry / Astronomy.
   Each routes into the Theatre with the proper mode. Avatar-style hero icon +
   pillar title + subtitle, in the same gold-on-violet language as the CTAs but
   visually lighter (these are secondary "explore" routes, not the primary
   day-hook action above). Icons are inline SVG (no Unicode). */
.today-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.today-modes-h { margin-bottom: 2px; }
.today-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-surface, #0F1432) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  color: var(--color-accent-2, #FFD263);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s cubic-bezier(.2,.8,.4,1), border-color 0.14s, box-shadow 0.14s ease-out;
}
.today-mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent, #FFB836);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5),
              0 0 24px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 50%, transparent);
}
.today-mode-card:active { transform: scale(0.99); }
.today-mode-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--color-accent-2, #FFD263);
  background: radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--color-accent, #FFB836) 24%, transparent),
    color-mix(in srgb, var(--color-accent, #FFB836) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 34%, transparent);
  filter: drop-shadow(0 0 6px var(--color-accent-glow, rgba(255,184,54,0.5)));
}
.today-mode-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.today-mode-title {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-caps: small-caps;
  color: var(--color-accent-2, #FFD263);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.today-mode-sub {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 70%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.today-mode-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid; place-items: center;
  opacity: 0.6;
  transition: opacity 0.14s, transform 0.14s;
}
.today-mode-card:hover .today-mode-arrow { opacity: 1; transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .today-mode-card, .today-mode-arrow { transition: none; }
}

.today-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface, #0F1432) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
}
.today-section-h {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.10em;
  color: var(--color-accent-2, #FFD263);
  margin: 0;
  opacity: 0.92;
}

.today-transits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-transit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-bg, #06081C) 50%, transparent);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
}
.today-transit-bodies {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-fg, #F0E5C2);
}
.today-transit-bodies strong {
  font-weight: 600;
  color: var(--color-accent-2, #FFD263);
}
.today-transit-aspect {
  color: rgba(125, 169, 255, 0.85);
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 11px;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}
.today-transit-pct {
  font-family: var(--type-mono, monospace);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent, #FFB836);
}

.today-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  text-align: center;
}
/* HG-16 — the first-run hero leads with the Sample Reading; the create-chart
   CTA is the secondary (ghost) action. */
.today-empty--sample { gap: 16px; }
.today-cta--primary { display: inline-flex; align-items: center; gap: 8px; }
.today-cta--ghost {
  background: transparent;
  color: var(--color-accent-2, #FFD263);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 50%, transparent);
  box-shadow: none;
}
.today-cta--ghost:hover { background: color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent); }
.today-empty-glyph {
  font-size: 56px;
  color: var(--color-accent, #FFB836);
  filter: drop-shadow(0 0 16px var(--color-accent-glow, rgba(255,184,54,0.55)));
}
.today-empty-h2 {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 22px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-accent-2, #FFD263);
  margin: 0;
}
.today-empty-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-fg, #F0E5C2);
  max-width: 340px;
  margin: 0;
}
.today-cta {
  border: 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFD263 0%, #FFB836 60%, #C88E1A 100%);
  color: #06081C;
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 184, 54, 0.45);
  transition: transform 0.16s ease-out;
}
.today-cta:hover { transform: translateY(-2px); }

@media (max-width: 480px) {
  .today-app { padding: 20px 16px 28px; gap: 16px; }
  .today-h1 { font-size: 30px; }
  .today-headline { font-size: 16px; }
  .today-theatre-cta { font-size: 14px; padding: 13px 16px; }
  .today-theatre-icon { font-size: 24px; }
}

/* Today embedded Eclipse-Wheel widget — mini wheel + tabbed strip
   (Eclipse · Aspects · Soon). Each tab gives quick context that ties
   the live sky to the user's chart, and "Open full Eclipse Wheel ↗"
   surfaces the predictor app underneath. */
.today-wheel-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface, #0A1228) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-bg, #03061A) 85%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-accent-2, #FFD263) 16%, transparent),
    0 6px 22px rgba(0, 0, 0, 0.55);
}

/* HG-09 — "the sky now" label marks the top wheel as the live sky, not a natal chart. */
.today-wheel-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: var(--type-display, 'Cinzel', Georgia, serif);
}
.today-wheel-label-txt {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 85%, transparent);
}
.today-wheel-label-time {
  font-size: 11px;
  color: var(--color-fg, #e8e9ec);
  opacity: 0.78;
}

.today-wheel-host {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px auto 0;
  padding: 0;
  width: 100%;
  max-width: 380px;
  /* Square viewport forces 1:1 inside; without this the constructor's
     inline canvas.style.width was fighting the flex parent and
     stretching the wheel into an ellipse (user-reported). */
  aspect-ratio: 1 / 1;
}
/* The home eclipse wheel is JUST the EclipseWheel canvas — the chart-style
   overlays (the HG-21 Asc/MC hub and the HG-13 natal bi-wheel ring + transit
   chords + verdict caption) were removed; their styles went with them. */
.today-wheel-canvas {
  display: block;
  width: 100% !important;     /* override constructor's px-fixed inline style */
  height: 100% !important;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
  cursor: zoom-in;
  transition: filter 0.18s ease-out;
}
.today-wheel-canvas:hover {
  filter: drop-shadow(0 4px 24px rgba(255, 184, 54, 0.55));
}

.today-wheel-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg, #03061A) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-cool, #7DA9FF) 18%, transparent);
}
.today-wheel-tab {
  border: 0;
  padding: 7px 8px;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 65%, transparent);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s ease-out, color 0.14s ease-out;
}
.today-wheel-tab:hover { color: var(--color-accent-2, #FFD263); }
.today-wheel-tab[aria-selected="true"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent) 0%,
    color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent) 100%);
  color: var(--color-accent-2, #FFD263);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent),
    0 0 10px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 60%, transparent);
}

.today-wheel-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  animation: today-wheel-tab-in 0.20s ease-out;
}
@keyframes today-wheel-tab-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.today-wheel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px;
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
}
.today-wheel-row:last-of-type { border-bottom: 0; }
.today-wheel-row-key {
  font-family: var(--type-display, 'Cinzel', serif);
  font-variant-caps: small-caps;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--color-accent-cool, #7DA9FF);
  flex: 0 0 auto;
}
.today-wheel-row-val {
  text-align: right;
  color: var(--color-fg, #F0E5C2);
}
.today-wheel-row-val strong {
  color: var(--color-accent-2, #FFD263);
  font-weight: 600;
}
.today-wheel-meta {
  color: rgba(169, 150, 112, 0.85);
  font-family: var(--type-mono, monospace);
  font-size: 11.5px;
  margin-left: 4px;
}

.today-wheel-note {
  margin: 6px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 85%, transparent);
}
/* HG-15 — the eclipse card's meaning line (darkened sign · lord · region). */
.today-wheel-meaning {
  margin: 8px 0 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-fg, #F0E5C2);
  border-top: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  padding-top: 8px;
}
.today-wheel-note em {
  font-style: normal;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-accent-2, #FFD263);
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 11.5px;
  margin-right: 6px;
}
.today-wheel-note--quiet { color: rgba(169, 150, 112, 0.85); }

.today-wheel-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.today-wheel-event-row {
  display: grid;
  grid-template-columns: 48px auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 12.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 10%, transparent);
}
.today-wheel-event-row:last-of-type { border-bottom: 0; }
.today-wheel-event-date {
  font-family: var(--type-mono, monospace);
  color: var(--color-accent-cool, #7DA9FF);
  font-size: 11.5px;
}
.today-wheel-event-body {
  font-weight: 600;
  color: var(--color-accent-2, #FFD263);
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}
.today-wheel-event-detail { color: var(--color-fg, #F0E5C2); }

.today-wheel-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(169, 150, 112, 0.85);
  text-align: center;
  padding: 18px 8px;
  margin: 0;
}

.today-wheel-open {
  align-self: center;
  border: 0;
  padding: 6px 12px;
  background: transparent;
  color: var(--color-accent-cool, #7DA9FF);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-accent-cool, #7DA9FF) 45%, transparent);
  border-radius: 0;
  transition: color 0.14s ease-out;
}
.today-wheel-open:hover { color: var(--color-accent-cool-2, #A5C2FF); }

@media (max-width: 480px) {
  .today-wheel-widget { padding: 14px 12px 12px; gap: 10px; }
  .today-wheel-host { max-width: 320px; }
  .today-wheel-tab { font-size: 10.5px; padding: 6px 6px; }
  .today-wheel-row { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   HTML page overlay (Phase post-7 final-polish).
   Fullscreen iframe overlay for the standalone HTML pages
   (ibn-alshatir.html ephemeris, observation-mode-explained.html
   orrery explainer). Reached via the Sky sub-nav Ephemeris pill and
   the orrery overlay's "? Explain" button.
   ════════════════════════════════════════════════════════════════════ */
#html-page-overlay {
  position: fixed;
  inset: 0;
  /* Above #learn-app (9920) so the Learn "Further Reading" pages (Seven Planets /
     Signs & Houses / Aspects-Lots-Dignity) open ON TOP of the Learn screen
     instead of loading behind it; still below the 99999 critical top tier. */
  z-index: 9970;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #03061A);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
#html-page-overlay.is-open { opacity: 1; }
#html-page-overlay[hidden] { display: none !important; }

#html-page-overlay .hpo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface, #0A1228) 95%, transparent) 0%,
      color-mix(in srgb, var(--color-bg, #03061A) 92%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  flex: 0 0 auto;
}
#html-page-overlay .hpo-label {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 14px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.10em;
  color: var(--color-accent-2, #FFD263);
}
#html-page-overlay .hpo-close {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-2, #FFD263);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease-out, color 0.14s ease-out;
}
#html-page-overlay .hpo-close:hover {
  background: var(--color-accent, #FFB836);
  color: var(--color-bg, #03061A);
}
#html-page-overlay .hpo-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  background: var(--color-bg, #03061A);
}

/* Demos overlay — reuses the same header/close affordances as the
   html-page overlay above, but hosts the Demos panel DOM directly
   (not an iframe). Surfaced from the Sky sub-nav "Demos" pill. */
#demos-overlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #03061A);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
#demos-overlay.is-open { opacity: 1; }
#demos-overlay[hidden] { display: none !important; }
#demos-overlay .hpo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface, #0A1228) 95%, transparent) 0%,
      color-mix(in srgb, var(--color-bg, #03061A) 92%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  flex: 0 0 auto;
}
#demos-overlay .hpo-label {
  font-family: var(--type-display, 'Cinzel', serif);
  font-size: 14px;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: 0.10em;
  color: var(--color-accent-2, #FFD263);
}
#demos-overlay .hpo-close {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-2, #FFD263);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease-out, color 0.14s ease-out;
}
#demos-overlay .hpo-close:hover {
  background: var(--color-accent, #FFB836);
  color: var(--color-bg, #03061A);
}
#demos-overlay .demos-overlay-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg, #03061A);
}

/* ════════════════════════════════════════════════════════════════════
   Sky sub-nav (Phase 7 of UI redesign).
   Horizontal pill strip across the top of the Sky surface — six
   astronomy surfaces in one place. Ephemeris/Stars/Mundane deep-link
   into Chart's accordion via window.__ptolJumpToScroll.
   ════════════════════════════════════════════════════════════════════ */
/* The legacy Sky sub-nav (ORRERY / ECLIPSE / DEMOS / EPHEMERIS / STARS /
   MUNDANE) is RETIRED — the three-screen redesign's bottom nav + per-screen
   chrome supersede it, and the user wants this top menu bar gone from the
   third-person / first-person sky. Hidden globally (keeps the module + its
   deep-links intact, just never shows the strip). */
#sky-subnav { display: none !important; }
#sky-subnav {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9700;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  max-width: calc(100vw - 24px);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(10, 14, 32, 0.55) 0%,
      rgba(6, 8, 22, 0.85) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 32%, transparent);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in srgb, var(--color-accent-2, #FFD263) 18%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  overscroll-behavior-x: contain;
  touch-action: pan-x;                 /* a horizontal swipe scrolls the strip */
}
#sky-subnav::-webkit-scrollbar { display: none; }
#sky-subnav[hidden] { display: none !important; }

.sky-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  min-width: 50px;
  min-height: 44px;          /* full touch target */
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 60%, transparent);
  font-family: var(--type-body, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s ease-out, color 0.14s ease-out;
  flex: 0 0 auto;
}
.sky-pill:hover { color: var(--color-accent-2, #FFD263); }
.sky-pill.is-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent, #FFB836) 25%, transparent) 0%,
    color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent) 100%);
  color: var(--color-accent-2, #FFD263);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent),
    0 0 10px color-mix(in srgb, var(--color-accent-glow, rgba(255,184,54,0.55)) 60%, transparent);
}
.sky-pill-glyph {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.sky-pill.is-active .sky-pill-glyph {
  filter: drop-shadow(0 0 4px var(--color-accent-glow, rgba(255,184,54,0.55)));
}
.sky-pill-label { font-size: 8.5px; line-height: 1; }

@media (max-width: 480px) {
  #sky-subnav { gap: 0; padding: 3px; }
  .sky-pill { min-width: 46px; padding: 6px 7px; gap: 2px; }
  .sky-pill-glyph { font-size: 15px; }
  .sky-pill-label { font-size: 8px; }
}
@media (max-width: 380px) {
  .sky-pill-label { display: none; }
  .sky-pill { min-width: 36px; padding: 9px 6px; }
  .sky-pill-glyph { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════════
   Ephemeris row v2 — all planets always-expanded in one column, with
   the selected engine on the left and JPL Horizons on the right for
   side-by-side comparison.
   ════════════════════════════════════════════════════════════════════ */
.pa-ephem-row.pa-ephem-row-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
}
.pa-ephem-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pa-ephem-row-head .pa-ephem-name { color: var(--color-accent-2, #FFD263); }
.pa-ephem-row-head .pa-ephem-dig  {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.78;
  color: var(--color-text, #E6EAF2);
}
.pa-ephem-row-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pa-ephem-col {
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-surface, #0A1228) 50%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
}
.pa-ephem-col-engine {
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
}
.pa-ephem-col-jpl {
  border-left: 2px solid color-mix(in srgb, var(--color-accent-cool, #7090c0) 55%, transparent);
}
.pa-ephem-col-hdr {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}
.pa-ephem-col-pos {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text, #E6EAF2);
}
.pa-ephem-col-lon {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10.5px;
  opacity: 0.7;
  margin-top: 3px;
}
.pa-ephem-col-diff {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10.5px;
  margin-top: 4px;
}
.pa-ephem-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: 'IM Fell English', 'Georgia', serif;
  font-size: 11.5px;
  opacity: 0.72;
  padding-top: 4px;
}
@media (max-width: 480px) {
  .pa-ephem-row-cols { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   Aspect card v2 — classical + modern dual-section layout.
   The legacy  is a fixed 155x258 grid cell suited to the
   short single-paragraph interp. The new aspect cards carry two full
   sections (Classical Reading + Modern Interpretation) plus a
   transit header line, so they auto-grow vertically and the body
   text wraps left-aligned at a readable column.

   Scope: any .pa-sc-card whose inner contains .pa-sc-interp-stack
   (the marker the new renderer emits). Cards that still use the
   short .pa-sc-interp single paragraph (eg the planet/zodiac decks
   above) are untouched.
   ════════════════════════════════════════════════════════════════════ */

.pa-sc-card:has(.pa-sc-interp-stack) {
  width: 100%;
  max-width: 360px;
  height: auto;
  min-height: 320px;
  margin: 0 auto;
}
.pa-sc-card:has(.pa-sc-interp-stack) .pa-sc-content {
  padding: 22px 18px 16px;
  align-items: stretch;
}
.pa-sc-card:has(.pa-sc-interp-stack) .pa-sc-scene {
  flex: 0 0 auto;
  max-height: 88px;
  margin-bottom: 4px;
}
.pa-sc-card:has(.pa-sc-interp-stack) .pa-sc-glyph {
  font-size: 30px;
}

/* Transit identification header — the TRANSIT mars opposes NATAL venus
   strip that sits above the title on Theatre live popups. */
.pa-sc-transit-hdr {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-align: center;
  opacity: 0.78;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 0.5px dotted currentColor;
  width: 100%;
}
.pa-sc-transit-hdr .pa-sc-th-glyph {
  font-size: 13px;
  margin: 0 3px;
}
.pa-sc-transit-hdr .pa-sc-th-verb {
  margin: 0 6px;
  opacity: 0.62;
  font-style: italic;
}
/* Planet glyphs in the header are now inline SVG sprites (no Unicode); keep
   them vertically centred and roughly the old cap height. */
.pa-sc-transit-hdr .pa-sc-th-glyph svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
/* Synastry variant — the two endpoints are PEOPLE ("Albert's Mars opposes
   Marcus's Venus"). Proper names are mixed-case, so ease the all-caps
   tracking and give the possessive names a hair more presence than the body. */
.pa-sc-transit-hdr-syn {
  letter-spacing: 0.06em;
}
.pa-sc-transit-hdr-syn .pa-sc-th-name {
  font-style: italic;
  opacity: 0.92;
}

/* Dual-section stack — Classical Reading + Modern Interpretation. */
.pa-sc-interp-stack {
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 0.5px solid;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pa-sc-section { display: flex; flex-direction: column; gap: 4px; }

/* Section header — small-caps Cinzel rule. */
.pa-sc-section-hdr {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
  padding-bottom: 4px;
  position: relative;
}
.pa-sc-section-hdr::before,
.pa-sc-section-hdr::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 0.5px;
  margin: 0 8px;
  background: currentColor;
  opacity: 0.5;
}

/* Modern Interpretation section reads in a contrasting hue + typeface
   so the eye separates it from the classical reading without losing
   the aspect's overall colour bath. */
.pa-sc-section-modern .pa-sc-section-hdr {
  font-style: italic;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

/* Section body — wider column, paragraph layout, left-aligned. */
.pa-sc-section-body {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: left;
  opacity: 0.9;
}
.pa-sc-section-body i,
.pa-sc-section-body em { opacity: 0.75; }

/* Modal  variant must also grow tall enough for the
   dual section + transit header. Override the fixed 290px above. */
.pa-sc-acard:has(.pa-sc-interp-stack) {
  height: min(86vh, 640px) !important;
  width: min(92vw, 380px) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer pinned to the bottom of the auto-growing card. */
.pa-sc-card:has(.pa-sc-interp-stack) .pa-sc-footer {
  margin-top: 14px;
}

/* Per-aspect colour wash for the Modern section, slightly muted from
   the Classical to give the eye a visual rest. */
.pa-sc-conj .pa-sc-section-modern .pa-sc-section-body { color: #8a6818; }
.pa-sc-sext .pa-sc-section-modern .pa-sc-section-body { color: #3a8868; }
.pa-sc-squa .pa-sc-section-modern .pa-sc-section-body { color: #a86060; }
.pa-sc-trin .pa-sc-section-modern .pa-sc-section-body { color: #486898; }
.pa-sc-oppo .pa-sc-section-modern .pa-sc-section-body { color: #a06040; }
.pa-sc-aver .pa-sc-section-modern .pa-sc-section-body { color: #686878; }

/* Aversion variant colour pack (was missing entirely). */
.pa-sc-aver .pa-sc-inner  { background: #0f0f14; border-color: #404050; }
.pa-sc-aver .pa-sc-inset  { border-color: #2a2a38; }
.pa-sc-aver .pa-sc-title, .pa-sc-aver .pa-sc-glyph { color: #b0b0c0; }
.pa-sc-aver .pa-sc-sub, .pa-sc-aver .pa-sc-interp,
.pa-sc-aver .pa-sc-section-body { color: #888898; }
.pa-sc-aver .pa-sc-divider, .pa-sc-aver .pa-sc-interp,
.pa-sc-aver .pa-sc-interp-stack { border-color: #2a2a38; }
.pa-sc-aver .pa-sc-num    { color: #585868; }
.pa-sc-aver .pa-sc-corner { color: #888898; opacity: 0.5; }
.pa-sc-aver .pa-sc-htag   { background: #18181f; color: #888898; border: 0.5px solid #2a2a38; }
.pa-sc-aver .pa-sc-angle  { color: #585868; }

/* ════════════════════════════════════════════════════════════════════
   INFO scroll panel — collapses Houses / Ephemeris / Scrolls deck /
   Old vs New into one menu so the main astrology TOC isn't crowded.
   ════════════════════════════════════════════════════════════════════ */
.pa-info-shell {
  max-width: 540px;
  margin: 0 auto;
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pa-info-intro {
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  padding: 4px 0 4px 14px;
}
.pa-info-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--color-accent-2, #FFD263);
  margin-bottom: 4px;
}
.pa-info-blurb {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text, #E6EAF2) 78%, transparent);
}
.pa-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pa-info-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface, #0A1228) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-bg, #03061A) 92%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s ease-out, border-color 0.12s ease-out, background 0.18s ease-out;
}
.pa-info-link:hover,
.pa-info-link:focus-visible {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface, #0A1228) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-bg, #03061A) 100%, transparent) 100%);
  outline: none;
}
.pa-info-glyph {
  flex: 0 0 auto;
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
  color: var(--color-accent-2, #FFD263);
}
.pa-info-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pa-info-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--color-accent-2, #FFD263);
}
.pa-info-sub {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text, #E6EAF2) 65%, transparent);
}
.pa-info-chev {
  flex: 0 0 auto;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
}

/* Info sub-panel — when the user taps a reference panel inside Info,
   the existing #pa-tab-<sub> element is adopted into this host so the
   panel's render function still finds its content child. */
.pa-info-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 45%, transparent);
  border-radius: 999px;
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: background 0.14s ease-out;
}
.pa-info-back:hover,
.pa-info-back:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
  outline: none;
}
.pa-info-sub-host {
  width: 100%;
}
/* When a panel is adopted into the info host, force it visible — the
   parent tabs system may have set display:none on it via switchTab. */
.pa-info-sub-host > .pa-tab {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════════
   First-launch + Take-the-tour walkthrough — styles for the engine in
   js/ui/walkthrough.js. Until this section landed, .pa-tour-highlight
   inherited zero visible style; the engine just positioned an empty div
   with no border or background. Now: glowing gold outline + a huge
   ring-shadow that darkens everything else on the page so the spotlight
   reads as a "cutout" through the rest of the UI.
   ════════════════════════════════════════════════════════════════════ */

#pa-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9940;
  pointer-events: none;          /* backdrop element below catches clicks */
}
#pa-tour-overlay[hidden] { display: none !important; }

.pa-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9941;
  background: transparent;       /* the highlight's ring-shadow does the darken */
  pointer-events: auto;
}

.pa-tour-highlight {
  position: fixed;
  z-index: 9950;
  pointer-events: none;
  border: 2px solid var(--color-accent, #FFB836);
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(2, 4, 16, 0.66),       /* darken everything else */
    0 0 24px 6px rgba(255, 184, 54, 0.55),   /* outer gold glow */
    inset 0 0 16px rgba(255, 232, 168, 0.30);
  transition:
    top    0.32s cubic-bezier(.2,.8,.4,1),
    left   0.32s cubic-bezier(.2,.8,.4,1),
    width  0.32s cubic-bezier(.2,.8,.4,1),
    height 0.32s cubic-bezier(.2,.8,.4,1),
    opacity 0.20s ease-out;
}
.pa-tour-highlight[hidden] { display: none; }

/* CT-01 — circular glowing spotlight (first-entry corner tours). Steps that
   set shape:'circle' get a round cutout centered on the corner button plus a
   slow glow pulse. Every keyframe restates the 9999px dim ring so the page-
   darken never flickers while the glow breathes. */
.pa-tour-highlight--circle {
  border-radius: 50%;
  animation: pa-tour-glow-pulse 1.7s ease-in-out infinite;
}
@keyframes pa-tour-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(2, 4, 16, 0.66),
      0 0 18px 4px rgba(255, 184, 54, 0.50),
      inset 0 0 14px rgba(255, 232, 168, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(2, 4, 16, 0.66),
      0 0 34px 12px rgba(255, 200, 90, 0.85),
      inset 0 0 22px rgba(255, 232, 168, 0.45);
  }
}

/* Spotlight on the currently-highlighted target. The walkthrough
   engine adds .pa-tour-spotlight to the target element while its
   step is active (and removes it on navigate / endTour). Without
   this, targets with intrinsically faded children — inactive bond-
   mode pills, muted scroll-deck rows, dim "pending" buttons — read
   as greyed-out even when the tour is pointing at them. The boost
   lifts faded children to full visibility WITHOUT changing their
   structural styling (colors, borders, layout stay the same; just
   the opacity + brightness reads through). */
.pa-tour-spotlight {
  filter: brightness(1.22) saturate(1.18);
}
.pa-tour-spotlight,
.pa-tour-spotlight *:not([hidden]) {
  opacity: 1 !important;
}

.pa-tour-card {
  position: fixed;
  z-index: 9960;
  width: min(420px, calc(100vw - 32px));
  /* Safety net — if the card content (dual-voice body + CTA grid) is
     taller than the viewport, cap the height so positionTooltip's
     clamp keeps the whole card on-screen; the inner scrolls if needed
     so the BACK/PAUSE/SKIP controls (or CTA grid) stay reachable. */
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg,
    rgba(14, 18, 36, 0.96), rgba(8, 10, 22, 0.985));
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 184, 54, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.7);
  color: var(--color-fg, #f0e5c2);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  font-family: var(--type-body);
  pointer-events: auto;
  overflow: hidden;
}

.pa-tour-card-inner {
  padding: 14px 18px 12px;
  /* Flex-grow lets the inner consume remaining vertical space inside
     the capped card; overflow-y:auto means it scrolls instead of
     clipping the controls when content exceeds card height. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pa-tour-progress {
  position: relative;
  height: 3px;
  background: rgba(255, 184, 54, 0.10);
  overflow: hidden;
}
.pa-tour-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent),
    var(--color-accent-2, #FFD263));
  box-shadow: 0 0 8px var(--color-accent-glow, rgba(255,184,54,0.5));
  transition: width 0.28s ease-out;
}
.pa-tour-progress-subfill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 232, 168, 0.45);
}

.pa-tour-end {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 60%, transparent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.16s ease-out, background 0.16s ease-out;
  z-index: 2;
}
.pa-tour-end:hover {
  color: var(--color-accent-2, #FFD263);
  background: rgba(255, 184, 54, 0.10);
}

.pa-tour-rod-cap {
  height: 6px;
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-accent, #FFB836) 60%, transparent),
      transparent);
}
.pa-tour-rod-cap--top    { border-bottom: 1px solid rgba(255, 184, 54, 0.20); }
.pa-tour-rod-cap--bottom { border-top:    1px solid rgba(255, 184, 54, 0.20); transform: scaleY(-1); }
.pa-tour-rosette {
  position: absolute;
  top: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-accent-2, #FFD263);
  box-shadow: 0 0 4px var(--color-accent-glow, rgba(255,184,54,0.6));
}

.pa-tour-step-counter {
  margin: 4px 0 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 75%, transparent);
}

.pa-tour-title {
  margin: 0 0 10px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent-2, #FFD263);
}

.pa-tour-body {
  font-size: 13px;
  line-height: 1.62;
  color: #d8d4c0;
  margin: 0 0 14px;
}
.pa-tour-body em      { color: #c8c0a8; font-style: italic; }
.pa-tour-body strong  { color: #f4d878; font-weight: 600; }
.pa-tour-body code    {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #ffd060;
  background: rgba(0,0,0,0.30);
  padding: 1px 5px;
  border-radius: 3px;
}

.pa-tour-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 184, 54, 0.14);
}
.pa-tour-ctrl {
  width: 36px;
  height: 30px;
  background: rgba(8, 10, 22, 0.65);
  border: 1px solid rgba(255, 184, 54, 0.30);
  border-radius: 6px;
  color: var(--color-accent-2, #FFD263);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease-out, border-color 0.16s ease-out, transform 0.12s ease-out;
}
.pa-tour-ctrl:hover {
  background: rgba(255, 184, 54, 0.14);
  border-color: var(--color-accent, #FFB836);
  transform: translateY(-1px);
}
.pa-tour-ctrl:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.pa-tour-ctrl--skip {
  margin-left: auto;     /* push the skip-button to the right */
}

/* ─── Pillar-tour CTA grid + dual-voice body (Chunk 1) ──────────────
   Replaces the BACK/NEXT/SKIP control row on the final step of each
   pillar's first-launch tour. installCtaGrid() inlines a CTA grid
   into the panel; each CTA dismisses the tour + triggers its onClick.
   Dual-voice body stacks classical (italic, leading § ornament) +
   modern (Inter) voices visible at once — mirrors the Aether Theatre
   tour pattern. */

.pa-tour-cta-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 184, 54, 0.14);
}
.pa-tour-cta-grid[data-cols="2"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pa-tour-cta-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: rgba(8, 10, 22, 0.65);
  border: 1px solid rgba(255, 184, 54, 0.28);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-fg, #f0e5c2);
  font-family: inherit;
  transition: background 0.16s ease-out, border-color 0.16s ease-out, transform 0.12s ease-out;
}
.pa-tour-cta-btn:hover:not(.pa-tour-cta-btn--disabled) {
  background: rgba(255, 184, 54, 0.10);
  border-color: var(--color-accent, #FFB836);
  transform: translateY(-1px);
}
.pa-tour-cta-btn--primary {
  border-color: var(--color-accent, #FFB836);
  background: linear-gradient(180deg,
    rgba(255, 184, 54, 0.16),
    rgba(8, 10, 22, 0.78));
  box-shadow: 0 0 12px rgba(255, 184, 54, 0.16);
}
.pa-tour-cta-btn--disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.pa-tour-cta-btn-label {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-accent-2, #FFD263);
}
.pa-tour-cta-btn--primary .pa-tour-cta-btn-label {
  color: #ffe49a;
}
.pa-tour-cta-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.78;
  color: #d8d4c0;
}
.pa-tour-cta-skip {
  display: block;
  align-self: center;
  margin-top: 6px;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--color-fg, #f0e5c2) 55%, transparent);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.pa-tour-cta-skip:hover {
  color: var(--color-accent-2, #FFD263);
}

.pa-tour-body--dual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pa-tour-body-classical {
  font-style: italic;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.85;
  color: #c8c0a8;
  padding-left: 16px;
  position: relative;
}
.pa-tour-body-classical::before {
  content: "§";
  position: absolute;
  left: 0;
  top: 0;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 70%, transparent);
  opacity: 0.7;
  font-style: normal;
  font-weight: 500;
}
/* CT-02 — a REAL citation line under a four-mode guide passage. Deliberately
   unlike .pa-tour-body-classical::before (the decorative "§" that made every
   unsourced line look sourced): this element only ever renders when the step
   actually carries a `source`, and every value is pinned in REFERENCES.md. */
/* ⚠️ COLOUR FROM currentColor, NOT --color-accent-2. The first version used
   `color-mix(in srgb, var(--color-accent-2, #FFD263) 78%, transparent)`, copying
   the ::before above it — but --color-accent-2 is DEFINED as #000000, and a
   var() fallback only applies when the variable is UNDEFINED, never when it is
   defined-but-unwanted. The citation therefore computed to rgb(0 0 0 / .78):
   black text on a dark card, i.e. invisible. Measured on the rendered surface,
   not inferred from the selector. Inheriting currentColor tracks the card's own
   text colour in every theme and cannot go invisible. */
.pa-tour-source {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: inherit;
  opacity: 0.72;
}
/* Keep the rule hairline without dragging the text's opacity down with it. */
.pa-tour-source { border-top-color: color-mix(in srgb, currentColor 28%, transparent); }
.pa-tour-body-modern {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #d8d4c0;
}
.pa-tour-body-modern em     { color: #c8c0a8; font-style: italic; }
.pa-tour-body-modern strong { color: #f4d878; font-weight: 600; }

/* ─── RTL (B8) — Arabic + Hebrew layout adjustments ───────────────── */
/* When <html dir="rtl"> is set (i18n.js's setLang(ar|he) → main.js's
 * refreshTitle), flip text alignment + mirror padding-left / margin-
 * left to logical equivalents on the main app containers. Chart wheel
 * SVG geometry is locale-neutral (degree positions are absolute), so
 * we don't flip the wheel itself — only the panels around it.
 *
 * Settled per-language number-direction handling: numbers stay LTR
 * inside an RTL paragraph via Unicode bidi, which jsPDF and the
 * browser handle correctly. No manual <span dir="ltr"> needed for
 * lat/long/degree readouts.
 */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .today-app,
[dir="rtl"] .pa-app,
[dir="rtl"] .welcome-inner,
[dir="rtl"] #settings-app .settings-card {
  text-align: right;
}
/* Settings + Welcome cards: flip the rod-cap rosette positions */
[dir="rtl"] .welcome-rod-rosette[style*="left:"] { left: auto; right: 10px; }
[dir="rtl"] .welcome-rod-rosette[style*="right:"] { right: auto; left: 10px; }
[dir="rtl"] .settings-rosette[style*="left:"]   { left: auto; right: 10px; }
[dir="rtl"] .settings-rosette[style*="right:"]  { right: auto; left: 10px; }
/* Tour panel: BACK / NEXT arrow buttons retain their physical
 * direction in RTL too (← is still "back", → is still "forward"
 * in the tour metaphor, not "previous in document"). */
[dir="rtl"] .pa-tour-controls { flex-direction: row; }
/* Replay-pill in welcome cards floats top-right in LTR; mirror to
 * top-left in RTL. */
[dir="rtl"] .welcome-card__replay-badge { right: auto; left: 8px; }
/* Eclipse wheel + chart wheel canvases — locale-neutral, no flip */
[dir="rtl"] .today-wheel-canvas,
[dir="rtl"] .welcome-eclipse-canvas,
[dir="rtl"] .welcome-mini-wheel,
[dir="rtl"] .pa-chart-svg { direction: ltr; text-align: center; }

/* ── Welcome screen — global language strip ────────────────────────
 * Horizontally-scrollable autonym rail surfaced at the top of the
 * welcome screen (above the pillar cards) so a first-time visitor
 * picks their language up-front before they enter a pillar. The strip
 * is rendered by renderLangStrip() in welcomeApp.js; click flips the
 * active language for the whole app + re-renders the welcome shell.
 *
 * Bug landing: the markup shipped without these rules, so the strip
 * collapsed to an unstyled run of buttons. Lesson re-applied:
 * mirror every welcome-* class to BOTH styles.css and styles.min.css.
 */
.welcome-lang-strip {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 16px;
  padding: 4px 12px 6px;
  display: flex;
  justify-content: center;
}
.welcome-lang-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 4px 2px;
  max-width: 100%;
}
.welcome-lang-rail::-webkit-scrollbar { height: 4px; }
.welcome-lang-rail::-webkit-scrollbar-thumb {
  background: var(--accent, #c8a050);
  border-radius: 2px;
  opacity: 0.5;
}
.welcome-lang-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  font: 500 12px/1.2 var(--font-sans, system-ui, -apple-system, sans-serif);
  color: var(--text-secondary, #cfc8b8);
  background: var(--surface, rgba(20, 22, 30, 0.6));
  border: 1px solid var(--border, rgba(200, 160, 80, 0.25));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.welcome-lang-chip:hover {
  background: var(--surface-hover, rgba(40, 36, 24, 0.75));
  color: var(--text, #efe8d8);
  border-color: var(--accent, #c8a050);
}
.welcome-lang-chip.is-active {
  background: var(--accent, #c8a050);
  color: var(--bg, #0c0c12);
  border-color: var(--accent, #c8a050);
  font-weight: 600;
}
.welcome-lang-chip:active { transform: scale(0.96); }
[dir="rtl"] .welcome-lang-rail { direction: rtl; }
@media (max-width: 480px) {
  .welcome-lang-strip { padding: 4px 8px; margin-bottom: 12px; }
  .welcome-lang-chip { padding: 5px 10px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — cinematic "dissolving glass" overhaul.
   (design handoff: design_handoff_aether_theatre)
   Reusable glass / dissolve / lower-third treatments + the neon glyph
   pulse. Fixed gold-on-night cinematic palette — the Theatre is its own
   dark stage, not theme-variable. Also reused by the global clock console
   + bottom nav rail for one coherent look.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --ac-gold:       #c9a854;   /* primary gold (rings, active controls) */
  --ac-gold-brt:   #ffd068;   /* bright gold (active glyph, NOW, highlights) */
  --ac-amber:      #ffb836;   /* browse / affordance amber */
  --ac-ink:        #e8d8a8;   /* body / reading text */
  --ac-ink-dim:    rgba(232,216,168,0.62);
  --ac-line:       rgba(201,168,84,0.22);   /* hairline gold border */
  --ac-glass-top:  rgba(14,17,28,0.60);
  --ac-glass-bot:  rgba(14,17,28,0.04);
  --ac-glass-blur: 11px;
  --ac-core-cool:  #9fb8ff;   /* wheel centre glow (cool, cinematic) */
}

/* Glass — translucent blurred pane with a hairline gold edge. */
.ac-glass {
  background: linear-gradient(180deg, var(--ac-glass-top), var(--ac-glass-bot));
  -webkit-backdrop-filter: blur(var(--ac-glass-blur));
          backdrop-filter: blur(var(--ac-glass-blur));
  border: 1px solid var(--ac-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}

/* Dissolve — fade the bottom edge into the stage (the hero gesture; use
   sparingly). Pair with a transparent bottom border. */
.ac-dissolve-down {
  border-bottom-color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

/* Lower-third — the verdict caption rises out of a vertical gradient with
   no box at all. */
.ac-lowerthird {
  background: linear-gradient(to top,
    rgba(4,6,14,0.96) 0%, rgba(4,6,14,0.60) 55%, transparent 100%);
}

/* Neon glyph glow pulse — active/featured bodies only. The steady glow is
   drawn on the wheel canvas (shadowBlur); this animates the DOM halo
   element layered above the canvas. The halo is centre-anchored via
   translate(-50%,-50%), so that offset is baked into the keyframe. */
@keyframes ac-glyph-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ac-halo-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
.ac-pulse { animation: ac-glyph-pulse 2.6s ease-in-out infinite; }
.ac-halo  { transform: translate(-50%, -50%); animation: ac-halo-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ac-pulse, .ac-halo { animation: none; opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — vertical layout reserves (astro-future redesign).
   The bi-wheel scene (aetherTheatreScene.js) reads these two custom props
   off #aether-theatre to reserve a TOP band for the swipe day bar and a
   BOTTOM band for the enlarged donut panel + summary line, so the wheel
   sits ENTIRELY between them with no overlap.
     --at-top-h     top reserve (status-bar safe area + the day bar)
     --at-summary-h budget for the verdict ticker "summary line"
     --at-donuts-h  height of the donut panel
     --at-bottom-h  total bottom reserve (mode bar + summary + donuts + gaps)
   ════════════════════════════════════════════════════════════════════ */
#aether-theatre {
  /* TOP STACK (re-stacked into clean, non-overlapping horizontal bands):
       1. icon cluster row    — height --at-iconrow-h (escape / export / zoom / help / orrery)
       2. time ribbon row     — height --at-daybar-h, FULL-WIDTH, directly below #1
     --at-top-h is the wheel's total top reserve = both bands, so the bi-wheel
     (which reads --at-top-h in aetherTheatreScene.js) sits ENTIRELY below the
     ribbon with nothing over it. */
  --at-iconrow-h: calc(env(safe-area-inset-top, 0px) + 56px);
  /* The bar now stacks TWO rows — the swipe day-strip (~54px) and ROW 2, which
     carries the long date (left), the time-transport (centre) and the year/time
     chips (right) on one line so the scrubber sits IN LINE with the date instead
     of on a third row that overlapped the wheel. ROW 2 grows a little in synastry
     (the bond pill stacks above the transport), so the band is sized to fit that
     taller case; natal simply leaves a little slack. */
  --at-daybar-h: 134px;
  --at-top-h: calc(var(--at-iconrow-h) + var(--at-daybar-h));
  /* Budget for the verdict-ticker summary at the very bottom (eyebrow pill +
     ~2-line italic reading + "browse" expander). The donut panel docks above
     this, and the wheel-scene reserves the whole bottom band below. */
  --at-summary-h: 80px;
  /* Gauges arranged as a gentle triangle (the date/SCRUBBED line above them was
     removed; the day-bar shows it). Note 1 — trimmed again (was clamp(150,40vw,
     208)) so the bi-wheel becomes the screen's centerpiece and reclaims the
     freed vertical space on a phone; the three gauges read as a compact
     instrument cluster docked beneath it. */
  --at-donuts-h: clamp(84px, 22vw, 112px);
  --at-bottom-h: calc(var(--mode-bar-h, 80px) + var(--at-summary-h) + var(--at-donuts-h) + 12px);
}

/* ── Hide the global floating clock widget while the Theatre is open ────────
   The Theatre's own top swipe-bar is the time control here; the clockWidget
   (mounted to <body>, z-index 10000) would otherwise float over the wheel and
   duplicate the control. Targeted by its toolbar role/label (it has no id). */
body[data-aether="on"] [role="toolbar"][aria-label="Time controls"] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — TOP finger-swipe DAY BAR (theatreDayBar.js).
   A horizontal day strip docked full-width at the very top (Theatre-only).
   Centre cell = the selected day (emphasised); drag/fling left↔right scrubs
   days → model.setState({ DateTime }). Below it: the long day caption + a
   calendar/year chip + a clock/time chip. One big fling surface; ≥44px tall.
   Icons are inline SVG (no Unicode glyphs).
   ════════════════════════════════════════════════════════════════════ */
.at-daybar {
  position: absolute;
  /* The time ribbon gets its OWN full-width row BELOW the top icon cluster
     (escape / export / zoom / help / orrery), so nothing overlaps it. The
     cluster occupies ~safe-area+56px at the very top; the ribbon starts just
     under it. --at-top-h (the wheel's top reserve) accounts for BOTH bands. */
  top: var(--at-iconrow-h, calc(env(safe-area-inset-top, 0px) + 56px));
  left: 0; right: 0;
  z-index: 16;                 /* above the canvas (0), reading-scroll (14) + bond ring (15);
                                  below the header icon cluster (20) so the × stays tappable */
  /* Own stacking context, hardened. The bar is already a direct child of the
     Theatre root (#aether-theatre, the single z-9700 context) AND the LAST
     top-level child painted, so z16 wins over the canvas / reading-scroll (14) /
     bond-ring (15) siblings. `isolation:isolate` makes that bulletproof: it pins
     the bar's whole subtree into one self-contained stacking context so no future
     descendant z (or a re-ordered sibling) can ever paint the ring/reading ABOVE
     the ribbon. The robust win is STRUCTURAL (shared root context + last child +
     own isolated context + the band claims pointer events below), not the number. */
  isolation: isolate;
  height: var(--at-daybar-h, 112px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: linear-gradient(to bottom,
              rgba(4,6,14,0.92) 0%, rgba(4,6,14,0.82) 62%,
              rgba(4,6,14,0.6) 88%, transparent 100%);
  -webkit-user-select: none; user-select: none;
  /* The ENTIRE top band claims pointer events — not just the strip + chips. The
     bond ring's outer arc (≥44px radial) overflows UP into this band (segments
     reach ~48px inside it on a phone-width wheel), and the canvas sits full-bleed
     beneath; with pointer-events:none on the bar, a tap that misses a chip by a
     few px fell THROUGH to a bond segment (z15) or a planet bead, so the time bar
     felt "intercepted / un-tappable". Claiming the band makes the ribbon the
     reliably-topmost INTERACTIVE layer over the wheel + bond ring + reading
     overlay in ALL modes. The bar is a FIXED-height top band (--at-daybar-h,
     112px) — NOT full-height — so it never becomes a transparent full-screen
     sink that swallows wheel/bond taps below its band. */
  pointer-events: auto;
}
.at-daybar.is-dragging .at-daybar-strip { cursor: grabbing; }

/* TT-04 — embedded day-bar (first-person): flow inline in the host (a bottom
   pill) instead of absolute-docking to the surface top; the host supplies the
   width cap + background. */
.at-daybar.at-daybar--embedded {
  position: relative;
  top: auto; left: auto; right: auto;
  height: auto;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  isolation: auto;
}

/* ── ROW 1: the day strip — a single fling surface; cells are absolutely
   positioned so the centre day pins to the horizontal centre. ───────────── */
.at-daybar-strip {
  position: relative;
  height: 54px;
  flex: 0 0 54px;     /* NEVER let the flex column squeeze the day-strip — at the
                         old 100px band it crushed to ~8px and clipped the numbers */
  margin-top: 4px;
  overflow: hidden;
  will-change: transform;
  touch-action: pan-y;         /* horizontal drags are ours; keep vertical scroll */
  cursor: grab;
  pointer-events: auto;
  /* Centre emphasis vignette — a soft bright pillar behind the selected cell. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.at-daybar-cell {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  line-height: 1;
  color: rgba(232,216,168,0.5);
  transition: color 0.2s ease;
}
.at-daybar-cell-num {
  font: 600 16px/1 "Cinzel", Georgia, serif;
  letter-spacing: 0.02em;
}
/* Centre cell: weekday ABOVE the number, month BELOW — three stacked lines. */
.at-daybar-cell-wd,
.at-daybar-cell-mo {
  font: 600 9px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.at-daybar-cell-wd { margin-bottom: 3px; color: #ffd068; }
.at-daybar-cell-mo { margin-top: 3px; color: #ffd068; }
/* OR-10 — faint 3-letter month micro-label + hairline rule at a day-1 month seam
   (non-centre cells; the centre cell already prints its month below). */
.at-daybar-cell-seam {
  position: absolute;
  bottom: 100%;
  margin-bottom: 4px;
  font: 600 8px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,208,104,0.6);
  white-space: nowrap;
  pointer-events: none;
}
.at-daybar-cell.is-month-seam::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(255,208,104,0.28);
  pointer-events: none;
}
.at-daybar-cell.is-center {
  color: #ffe3a0;
}
.at-daybar-cell.is-center .at-daybar-cell-num {
  font-size: 22px;
  text-shadow: 0 0 12px rgba(255,210,99,0.55);
}

/* ── ROW 2: long printed date (LEFT) + calendar-year & timestamp (RIGHT). ── */
.at-daybar-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* date · transport · year/time chips */
  align-items: center;
  gap: 10px;
  padding: 3px 14px 6px;
  min-height: 46px;            /* row-2 keeps a ≥44px vertical tap band */
  flex: 0 0 auto;             /* hold its row height in the fixed-height band */
}
.at-daybar-day   { justify-self: start; }
.at-daybar-chips { justify-self: end; }
/* ROW-2 centre slot — the time transport (and, in synastry, the bond pill
   stacked above it) ride here, in line with the date and the year/time chips,
   instead of dropping onto a separate lower row that overlaps the wheel. */
.at-daybar-cslot {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.at-daybar-cslot .time-transport { padding-top: 0; padding-bottom: 0; }
/* Phones can't fit date + a full transport + chips on one line, so ROW 2 wraps:
   the date and chips share the top line and the transport drops to its own line
   beneath them (still inside ROW 2, still above the wheel). */
@media (max-width: 680px) {
  .at-daybar-meta {
    grid-template-columns: 1fr auto;
    grid-template-areas: "date chips" "slot slot";
    row-gap: 5px;
  }
  .at-daybar-day   { grid-area: date; }
  .at-daybar-chips { grid-area: chips; }
  .at-daybar-cslot { grid-area: slot; justify-self: center; }
}

/* "The Shape of the Figure" glance panel — docked on the LEFT of the wheel in
   single-chart mode (figureShapePanel.js content). Read-only glance, so it never
   intercepts wheel taps. Hidden on narrow screens where the wheel fills the
   width (the same facts live in the reading). */
#at-figure-panel {
  position: absolute;
  left: clamp(12px, 3vw, 46px);
  top: 52%;
  transform: translateY(-50%);
  width: clamp(188px, 17vw, 236px);
  z-index: 12;
  pointer-events: none;
}
#at-figure-panel .fig-shape-panel { margin: 0; }
@media (max-width: 1040px) {
  #at-figure-panel { display: none !important; }
}
.at-daybar-day {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12px/1.2 "Cinzel", Georgia, serif;
  letter-spacing: 0.04em;
  color: #f0e0b8;
}
.at-daybar-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.at-daybar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;            /* tappable pill; the row-2 band keeps a ≥44px
                                  vertical hit zone via its padding */
  min-width: 44px;             /* ≥44px in the narrow axis for thumbs */
  padding: 7px 12px;
  border: 1px solid rgba(201,168,84,0.34);
  border-radius: 999px;
  background: rgba(8,10,18,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ffd068;
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  pointer-events: auto;
}
.at-daybar-chip svg { display: block; opacity: 0.92; }
.at-daybar-chip:hover,
.at-daybar-chip:focus-visible { border-color: rgba(255,210,99,0.6); color: #ffe3a0; outline: none; }
.at-daybar-chip:active { transform: translateY(0.5px); }

/* ── Time transport (TT-01): ⏮ ⏪ ⏸/▶ ⏩ ⏭ · speed · Now · 📅 jump. ────────────
   The unified transport row, mounted onto the day bar. Matches the chip theme. */
.time-transport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 6px;
  pointer-events: auto;
  flex: 0 0 auto;            /* hold its row height in the fixed-height day-bar band */
}
/* In first-person sky the scrubber is 90% transparent so it stays out of the
   way of the live sky; it wakes to full opacity on hover / touch / keyboard
   focus so it remains usable. */
body.fp-mode .time-transport {
  opacity: 0.1;
  transition: opacity 0.25s ease;
}
body.fp-mode .time-transport:hover,
body.fp-mode .time-transport:focus-within,
body.fp-mode .time-transport:active {
  opacity: 1;
}
.time-transport .tt-btn,
.time-transport .tt-speed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 36px;
  padding: 4px 9px;
  border: 1px solid rgba(201,168,84,0.34);
  border-radius: 999px;
  background: rgba(8,10,18,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ffd068;
  font: 600 14px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.time-transport .tt-speed {
  min-width: 56px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.time-transport .tt-now {
  min-width: 48px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.time-transport .tt-play { font-size: 16px; }
.time-transport .tt-btn:hover,
.time-transport .tt-speed:hover,
.time-transport .tt-btn:focus-visible,
.time-transport .tt-speed:focus-visible {
  border-color: rgba(255,210,99,0.6);
  color: #ffe3a0;
  outline: none;
}
.time-transport .tt-btn:active { transform: translateY(0.5px); }
.time-transport .tt-btn.is-active,
.time-transport .tt-play.is-playing {
  border-color: rgba(255,210,99,0.85);
  background: rgba(60,46,18,0.6);
  color: #fff0c4;
}
.time-transport.tt-compact { gap: 4px; padding: 3px 6px 4px; }
.time-transport.tt-compact .tt-btn,
.time-transport.tt-compact .tt-speed { min-height: 30px; min-width: 32px; padding: 3px 7px; font-size: 13px; }

/* Chart-date jump popup — opens upward above the transport row. */
.time-transport .tt-jump-pop {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
  min-width: 180px;
  padding: 6px;
  border: 1px solid rgba(201,168,84,0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,17,30,0.98), rgba(11,10,18,0.98));
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.time-transport .tt-jump-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #f0e0b8;
  font: 600 13px/1.2 "Cinzel", Georgia, serif;
  cursor: pointer;
  text-align: left;
}
.time-transport .tt-jump-item:hover,
.time-transport .tt-jump-item:focus-visible { background: rgba(60,46,18,0.55); color: #ffe3a0; outline: none; }
.time-transport .tt-jump-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-transport .tt-jump-date { flex: 0 0 auto; color: #ffd068; font-variant-numeric: tabular-nums; }
.time-transport .tt-jump-empty { padding: 10px 12px; color: #9a8e74; font: 500 12px/1.2 "Inter", system-ui, sans-serif; }

/* ── Picker sheet: choose the COMPLETE date + time. ──────────────────────── */
.at-daybar-sheet-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;                 /* above the day bar + header chrome while open */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  background: rgba(2,4,10,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  pointer-events: auto;
  animation: at-sheet-fade 0.16s ease both;
}
@keyframes at-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.at-daybar-sheet {
  width: min(340px, calc(100vw - 32px));
  border: 1px solid rgba(201,168,84,0.42);
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(20,17,30,0.97), rgba(11,10,18,0.97));
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,210,99,0.08) inset;
  color: #f0e0b8;
  animation: at-sheet-rise 0.2s cubic-bezier(0.2,0.8,0.3,1) both;
}
@keyframes at-sheet-rise { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.at-daybar-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font: 600 14px/1 "Cinzel", Georgia, serif;
  letter-spacing: 0.06em;
  color: #ffe3a0;
}
.at-daybar-sheet-title svg { display: block; }
.at-daybar-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
}
.at-daybar-field-cap {
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240,224,184,0.7);
}
.at-daybar-input {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(201,168,84,0.4);
  border-radius: 10px;
  background: rgba(8,10,18,0.7);
  color: #ffe3a0;
  font: 600 14px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color-scheme: dark;          /* native date/time pickers render dark */
}
.at-daybar-input:focus { outline: none; border-color: rgba(255,210,99,0.7); }
.at-daybar-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.at-daybar-sheet-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,84,0.4);
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.at-daybar-sheet-cancel {
  background: transparent;
  color: rgba(240,224,184,0.8);
}
.at-daybar-sheet-cancel:hover { color: #ffe3a0; border-color: rgba(255,210,99,0.55); }
.at-daybar-sheet-ok {
  background: linear-gradient(180deg, #ffd870, #d8a83a);
  border-color: #ffd870;
  color: #221a08;
}
.at-daybar-sheet-ok:hover { filter: brightness(1.06); }

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — CAO instrument gauges (theatreDonuts.js).
   Three brass-instrument rings (Temperament · Sect · Dignity) per the
   Classic Aesthetic Color Overhaul spec — single Ring chassis, hardcoded
   illuminated-codex palette (a physical material scene: NEVER themeable,
   never inverts with host light/dark). Motion doctrine (CAO §4): values
   SNAP — deliberately NO keyframed motion, NO transform rotation, NOTHING
   eased on any gauge node; the renderer rebuilds the SVG at the new value;
   the only "motion" is the pip riding live data. The .rings-fx class (above
   floor GPU tier) gates gradients/glow filters only — FLAT tier gets solid
   fills, identical geometry. Glyphs are drawn SVG sprites, never Unicode.
   ════════════════════════════════════════════════════════════════════ */
.td-panel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--mode-bar-h, 80px) + var(--at-summary-h, 96px));
  height: var(--at-donuts-h, clamp(150px, 38vw, 208px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  /* Nudged DOWN 2026-07-18 (8px -> 30px top): the ring tops were grazing the
     bi-wheel's lower rim in every mode — natal, horoscope and synastry all
     share this panel, so one value fixes all three. Folded into the shorthand
     deliberately: a separate padding-top here loses to this declaration. */
  padding: 30px 14px 10px;
  pointer-events: none;   /* the gauges are decorative readouts */
  /* No banner — the gauges float directly on the scene (user request). The
     CAO palette still lives in the gauges themselves; only the panel's
     background strip + border + drop-shadow are removed so the three faces
     read as free-standing instruments, not a docked card. */
  background: none;
  border-top: none;
  box-shadow: none;
}
.td-cells {
  display: flex;
  justify-content: center;
  align-items: center;          /* baseline for the triangle offsets below */
  width: 100%;
}
.td-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;                  /* labels ride closer to the ring (was 3px) */
  /* SPREAD, not stacked: the cells used to overlap by a heavy negative margin
     (clamp 14–30px each side) AND lift the flanks UP into the bi-wheel, so the
     three rings piled onto each other and onto the chart spheres. Now the
     overlap is trimmed to a whisper and the flanks fan OUTWARD + DOWN (see the
     per-child transforms) — on a wide screen they separate fully; on a phone the
     vw-scaled spread stays gentle so the row never overflows. */
  /* ⚠️ 2026-07-18: the negative margin is GONE. It pulled the cells together by
     up to 12px a side, which was fine for the rings but made the three CAPTIONS
     collide — on a phone "humoral balance of the birth chart" / "day or night" /
     "displacement strength" ran into one another and read as one garbled line.
     Equal thirds with min-width:0 makes collision impossible by construction
     rather than by tuning a clamp, and it also delivers the evenly-spaced bar
     that was asked for. Captions wrap inside their own column. */
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.td-cap, .td-sub {
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* The flanks fan outward-and-down, the middle drops straight down — clearing the
   bi-wheel above and pulling the trio apart so neither the rings nor their labels
   collide. The horizontal fan is vw-scaled so a wide screen spreads them far while
   a phone keeps them tucked. */
/* Horoscope mode: the orbs+captions are sandwiched between the wheel (above) and
   the verdict-ticker eyebrow (below). Slightly smaller orbs shorten the cluster so
   the centered caption stack rises clear of the eyebrow AND the orb tops stay clear
   of the wheel — fixing both sides of the sandwich at once. */
.td-panel.td-panel--horoscope { padding-bottom: 44px; }
.td-panel.td-panel--horoscope .ring { width: clamp(84px, 21vw, 112px); }
/* ONE BAR, not a fan (owner ruling 2026-07-18). The middle dial used to be
   dropped further than its flanks (20px vs 12px) as a shallow arc; measured on
   a 375px phone that put SECT's cap at y=656 against 650 for the other two and
   its sub-caption at 681 against 675 — close enough to look like a mistake
   rather than a curve, and the low sub then collided with the Horoscope /
   Synastry buttons at y=671. All three now share one Y, and the row sits high
   enough that the sub-captions clear those buttons. Keep the three values
   IDENTICAL if you touch this — the horizontal spread is the only fan left. */
.td-cell:nth-child(1) { transform: translate(calc(-1 * clamp(6px, 3.6vw, 60px)), 2px); }
.td-cell:nth-child(2) { transform: translate(0, 2px); }
.td-cell:nth-child(3) { transform: translate(clamp(6px, 3.6vw, 60px), 2px); }
.td-panel .ring {
  /* Note 1 — shrunk from clamp(130,34vw,188) so the compact gauge cluster gives
     the bi-wheel above it the dominant share of the phone screen. */
  width: clamp(94px, 25vw, 138px);
  height: clamp(94px, 25vw, 138px);
  display: block;
  overflow: visible;   /* the bezel + glow live outside the track radius */
}
.td-cap {
  font: 600 12.5px/1.1 "Cinzel", Georgia, serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A98C4E;            /* CAO text.label */
}
/* Engraved dash between ring and caption (reference-mockup detail). */
.td-cap::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  margin: 0 auto 3px;        /* tuck the engraved dash + caption up under the ring */
  background: #7A6526;
  opacity: 0.55;
}
/* The dial caption sub-line. Was `italic 500 9.5px "Cormorant Garamond"` — a
   light italic serif at 9.5px, which is unreadable on a phone in BOTH themes
   (it is the smallest type in the app and it was also the most decorative).
   Upright UI face, larger, with the colour lifted for contrast. The Cinzel
   caption ABOVE it keeps the display face: it is short, uppercase and legible,
   which is the same line the reading-prose pass drew. */
.td-sub {
  font: 500 12px/1.35 "Inter", system-ui, -apple-system, sans-serif;
  font-style: normal;
  color: #A08A52;
  letter-spacing: 0.01em;
}

/* ── Centre stack typography (CAO §2.1 text tokens, hardcoded) ─────────── */
.td-panel .cao-value {
  font: 600 26px/1 "Cinzel", Georgia, serif;
  font-variant: small-caps;
  fill: #F0DA90;
  letter-spacing: 0.06em;
}
.td-panel .cao-value--num {
  font: 600 30px/1 "JetBrains Mono", ui-monospace, monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}
.td-panel .cao-glyphline {
  font: 600 12px/1 "Cinzel", Georgia, serif;
  fill: #A98C4E;
  letter-spacing: 0.28em;
}
.td-panel .cao-band {
  font: 600 11px/1 "Cinzel", Georgia, serif;
  fill: #8F9A9C;             /* CAO text.descriptor */
  letter-spacing: 0.22em;
}
.td-panel .cao-pole--weak   { font: 600 18px/1 Georgia, serif; fill: #9AA7A8; }
.td-panel .cao-pole--strong { font: 600 18px/1 Georgia, serif; fill: #C2A85E; }
/* Dual-layer live transit overlay line ("NOW +2" / "NOW HOT · DRY"). A muted
   secondary mark riding under the fixed natal verdict; gold when the clock is
   live, steel-blue when scrubbed off the wall clock. */
.td-panel .cao-now {
  font: 600 8px/1 "Inter", system-ui, sans-serif;
  fill: #C2A85E; letter-spacing: 0.14em; opacity: 0.82;
}
.td-panel .cao-now--scrubbed { fill: #9AA7A8; }

/* ── Shared time/motion readout (CAO §5.2) — one moment for the triad ──── */
.cao-time {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 4px;
  pointer-events: none;
}
.cao-time-clock { color: #A98C4E; font-size: 12px; }
.cao-time-text {
  font: 600 10.5px/1 "Cinzel", Georgia, serif;
  letter-spacing: 0.14em;
  color: #A98C4E;
}
.cao-time-pill {
  font: 700 9px/1 "Cinzel", Georgia, serif;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.cao-time-pill--live     { color: #DCB858; border-color: #6A571F; }
.cao-time-pill--scrubbed { color: #89A4B2; border-color: #44545E; }

/* CAO §4 motion doctrine: values SNAP. There are deliberately NO keyframes,
   NO transform rotation and nothing eased on any gauge node — the renderer
   rebuilds the SVG at the new value. The only motion is the pip riding the
   live data. (The CAO-MOTION-A grep sweeps this region for motion tokens.) */

@media (max-width: 420px) {
  /* Note 1 — phones: shrink the donut panel + rings so the bi-wheel above is
     the screen's centerpiece (was donuts clamp(150,46vw,196) / ring 36vw). The
     gauges stay a legible compact instrument cluster docked beneath the wheel. */
  #aether-theatre { --at-summary-h: 80px; --at-donuts-h: clamp(76px, 22vw, 104px); }
  .td-panel .ring { width: clamp(72px, 21vw, 100px); height: clamp(72px, 21vw, 100px); }
  .td-cell { margin: 0; }   /* see the desktop rule — negative margin collided the captions */
  .td-cap   { font-size: 11px; letter-spacing: 0.10em; }
  .td-cap::before { width: 18px; margin-bottom: 3px; }
  .td-sub   { font-size: 11px; }    /* was 8.5px — below the legible floor */
  /* Phone: flanks spread outward, all three on ONE BAR (see the base block —
     the vertical fan was retired; only the horizontal spread remains). */
  .td-cell:nth-child(1) { transform: translate(calc(-1 * clamp(4px, 2.5vw, 16px)), 0); }
  .td-cell:nth-child(2) { transform: translate(0, 0); }
  .td-cell:nth-child(3) { transform: translate(clamp(4px, 2.5vw, 16px), 0); }
}


/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — launch chrome (theatreProfileChip.js + aetherTheatre.js)
   Three corner launchers added to the Theatre:
     • TOP-LEFT  — the "Main Person" profile chip (avatar + name + birth date),
                   tapping it opens the Select-Main-Person sheet.
     • TOP-RIGHT — the orrery launch (#at-orrery, styled via .ac-glass inline).
     • BOTTOM-RIGHT — the first-person SKY launch (#at-sky / .at-sky-fab, cyan).
   The global capture FAB (#capture-cluster) is nudged DOWN while the Theatre is
   open (body[data-aether="on"]) so the SKY button takes the prime corner. All
   icons are inline SVG (uiIcons.js) — no Unicode glyphs.
   ════════════════════════════════════════════════════════════════════ */

/* ── Top-left "Main Person" chip ─────────────────────────────────────── */
.at-profile-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(58vw, 280px);
  min-height: 44px;
  padding: 5px 13px 5px 8px;
  border-radius: 22px;
  color: var(--ac-ink, #e8d8a8);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.at-profile-chip:hover { border-color: rgba(201,168,84,0.5); }
.at-profile-chip:active { transform: scale(0.98); }
.at-pc-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ac-gold-brt, #ffd068);
  background: radial-gradient(circle at 50% 38%, rgba(201,168,84,0.26), rgba(201,168,84,0.06));
  border: 1px solid rgba(201,168,84,0.34);
}
.at-pc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.at-pc-name {
  font: 600 13px/1.18 'Cinzel', Georgia, serif;
  letter-spacing: 0.02em;
  color: var(--ac-gold-brt, #ffd068);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-pc-date {
  font: 500 10.5px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0.04em;
  color: var(--ac-ink-dim, rgba(232,216,168,0.62));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Edge-docked avatar variant ──────────────────────────────────────────
   The profile control as an avatar-FORWARD round button parked on the wheel's
   edge (Person A left, Person B right) — frees the top ribbon. The avatar is a
   full 44px tap target; a compact name caption rides beside it (clipped on
   narrow phones, full name lives in the sheet). The button hugs its left edge
   so the avatar always sits flush to the screen edge; the right-side mirror
   flips so the avatar stays outermost. */
.at-profile-chip--edge {
  gap: 8px;
  max-width: min(52vw, 240px);
  padding: 4px 14px 4px 4px;
  border-radius: 26px;
}
.at-profile-chip--edge .at-pc-avatar {
  width: 36px; height: 36px;
}
.at-pc-name--compact {
  font: 600 12.5px/1.15 'Cinzel', Georgia, serif;
  letter-spacing: 0.02em;
  color: var(--ac-gold-brt, #ffd068);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Right-edge mirror — avatar outermost (toward the screen edge), caption inside. */
.at-profile-chip--right {
  flex-direction: row-reverse;
  padding: 4px 4px 4px 14px;
}

/* ── Select-Main-Person sheet ────────────────────────────────────────── */
.at-profile-sheet {
  position: absolute;
  inset: 0;
  z-index: 60;                 /* above the day bar (12) + donuts (4) + ticker */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* SYN-BR-1 — `display: flex` above is more specific than [hidden]'s
   user-agent `display: none`, so closing the sheet via `el.hidden = true`
   visually fades it (scrim + card opacity → 0) but the flex container
   stays laid out as a z:60 invisible click trap, covering the bond ring
   and every other interactive element in the Theatre. Pair the [hidden]
   attribute with an explicit author rule so the closed sheet really
   leaves the layout. (Same lesson as the astronomy-home bug — see
   `feedback_hidden_vs_inline_display`.) */
.at-profile-sheet[hidden] { display: none; }
.at-ps-scrim {
  position: absolute; inset: 0;
  background: rgba(3,4,10,0.62);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.at-profile-sheet--in .at-ps-scrim { opacity: 1; }
.at-ps-card {
  position: relative;
  width: min(560px, 96vw);
  max-height: min(74vh, 620px);
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(13,16,28,0.97) 0%, rgba(8,10,20,0.98) 100%);
  border: 1px solid rgba(201,168,84,0.30);
  border-radius: 18px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.2,0.8,0.25,1), opacity 0.24s ease;
  overflow: hidden;
}
.at-profile-sheet--in .at-ps-card { transform: translateY(0); opacity: 1; }
.at-ps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px 18px;
  border-bottom: 1px solid rgba(201,168,84,0.16);
}
.at-ps-title {
  font: 600 14px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-gold, #c9a854);
}
.at-ps-x {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ac-ink-dim, rgba(232,216,168,0.7));
  cursor: pointer;
}
.at-ps-x:hover { color: var(--ac-gold-brt, #ffd068); border-color: rgba(201,168,84,0.3); }
.at-ps-list {
  padding: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.at-ps-row {
  display: flex; align-items: center;
  gap: 6px;
  margin: 4px 2px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.at-ps-row--current {
  background: rgba(201,168,84,0.10);
  border-color: rgba(201,168,84,0.34);
}
.at-ps-pick {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 7px 8px 7px 10px;
  background: transparent;
  border: 0;
  color: var(--ac-ink, #e8d8a8);
  cursor: pointer;
  text-align: left;
  border-radius: 11px;
}
.at-ps-pick:hover { background: rgba(255,255,255,0.04); }
.at-ps-av {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ac-gold-brt, #ffd068);
  background: radial-gradient(circle at 50% 38%, rgba(201,168,84,0.24), rgba(201,168,84,0.05));
  border: 1px solid rgba(201,168,84,0.3);
}
.at-ps-av-i {
  position: absolute;
  font: 700 11px/1 system-ui, sans-serif;
  color: var(--ac-gold-brt, #ffd068);
  opacity: 0;                  /* SVG avatar is primary; initial is a hidden a11y fallback */
}
.at-ps-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.at-ps-name {
  font: 600 14px/1.2 'Cinzel', Georgia, serif;
  color: var(--ac-ink, #e8d8a8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-ps-date {
  font: 500 11px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ac-ink-dim, rgba(232,216,168,0.6));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at-ps-cur {
  margin-left: auto;
  display: grid; place-items: center;
  color: var(--ac-gold-brt, #ffd068);
}
/* PW/W2 — pinned sample-fixture tag in the profile sheet */
.at-ps-sample-tag {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  border-radius: 6px; vertical-align: middle;
  color: var(--ac-gold-brt, #ffd068);
  border: 1px solid color-mix(in srgb, var(--ac-gold-brt, #ffd068) 55%, transparent);
  background: color-mix(in srgb, var(--ac-gold-brt, #ffd068) 12%, transparent);
}
.at-ps-rowacts { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.at-ps-act {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ac-ink-dim, rgba(232,216,168,0.55));
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s, background 0.13s;
}
.at-ps-rename:hover { color: var(--ac-gold-brt, #ffd068); border-color: rgba(201,168,84,0.3); }
.at-ps-del:hover { color: #ff6a5a; border-color: rgba(255,106,90,0.42); background: rgba(255,106,90,0.08); }
.at-ps-new {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 4px);
  /* Leads the list now, so the breathing room belongs BELOW it — separating the
     create action from the saved charts — rather than above, where it used to
     detach itself from the last profile. */
  margin: 2px 2px 12px;
  min-height: 52px;
  padding: 7px 10px;
  background: transparent;
  border: 1px dashed rgba(201,168,84,0.42);
  border-radius: 12px;
  color: var(--ac-gold, #c9a854);
  font: 600 13.5px/1.2 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.at-ps-new:hover { background: rgba(201,168,84,0.08); border-color: rgba(201,168,84,0.7); color: var(--ac-gold-brt, #ffd068); }
.at-ps-new-plus {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201,168,84,0.4);
  color: var(--ac-gold-brt, #ffd068);
}

/* ── Bottom-right first-person SKY launch (cyan) ─────────────────────────
   Geometry: the Theatre reserves a bottom band of
     --at-band = mode-bar + summary + donuts
   just above which sits a small CAPTURE STACK (two 44px FABs + 6px gap ≈ 94px).
   In Theatre mode the capture cluster docks at the band top (--at-cap-bot) and
   the SKY button sits ABOVE the capture stack with a clear gap — so the three
   never overlap and the SKY button owns the prime corner. */
#aether-theatre, body[data-aether="on"] {
  --at-band:    calc(var(--mode-bar-h, 80px) + var(--at-summary-h, 120px) + var(--at-donuts-h, 150px));
  --at-cap-bot: calc(var(--at-band) + 8px);   /* capture stack bottom (Theatre) */
  --at-cap-h:   94px;                          /* two 44px FABs + 6px gap */
}
.at-sky-fab {
  position: absolute;
  right: 6px;
  /* Prime bottom-right corner — directly above the (shifted-down) capture stack,
     with a 12px breathing gap. Anchored to the reserved bottom band so it never
     collides with the wheel above or the donut panel below. */
  bottom: calc(var(--at-cap-bot) + var(--at-cap-h) + 12px);
  z-index: 9801;               /* above the capture cluster (9800) */
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255,210,99,0.22), rgba(8,16,22,0.9));
  border: 1px solid rgba(255,210,99,0.55);
  color: #FFD263;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 14px rgba(255,210,99,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.at-sky-fab:hover {
  border-color: rgba(255,210,99,0.9);
  color: #f2e6c4;
  box-shadow: 0 4px 22px rgba(0,0,0,0.5), 0 0 20px rgba(255,210,99,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.at-sky-fab:active { transform: scale(0.95); }

/* ── Theatre-scoped: push the global capture FAB DOWN so the SKY button owns
      the prime corner. ONLY while the Theatre is open — every other mode
      keeps the capture cluster exactly where it was. ───────────────────── */
body[data-aether="on"] #capture-cluster {
  bottom: var(--at-cap-bot);
}

/* ── Eclipse-Wheel-scoped: hide the global capture FAB. The eclipse-wheel
      header has its own screenshot button, AND the floating FAB at
      right:6px sits ON TOP OF the right-hand card column at phone widths
      (eclipseWheelOverlay.js panels grid extends edge-to-edge). Hiding it
      removes the overlap without losing capture — the in-header button
      stays. ─────────────────────────────────────────────────────────────── */
body[data-eclipse-full="on"] #capture-cluster {
  display: none;
}

/* Phones — slightly smaller sky FAB + re-anchor to the (tighter) mobile bands. */
@media (max-width: 420px) {
  .at-sky-fab { width: 48px; height: 48px; }
  .at-profile-chip { max-width: 56vw; }
  /* Edge buttons: cap the caption tighter so the two never meet mid-wheel. */
  .at-profile-chip--edge { max-width: 42vw; }
}

/* Respect reduced-motion — drop the press/hover scale transitions. */
@media (prefers-reduced-motion: reduce) {
  .at-profile-chip, .at-sky-fab, .at-ps-card, .at-ps-scrim { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — WHEEL-MODE selector + SYNASTRY chrome
   (theatreBondControls.js + aetherTheatre.js Person-B chip).
     • BOTTOM-LEFT — a glass FAB (#at-mode-fab) that fans out a 3-option
       cluster (Basic / Synastry / Synastry-future). Mirror of the
       bottom-right SKY FAB, on the opposite corner.
     • RIGHT — the Person B profile chip (#at-personb-wrap), hidden in
       Basic mode, slides in from the right when synastry activates.
     • The 12-bond arc-segment ring (.at-bond-ring) — an SVG overlay of
       12 annular sectors (paths + curved textPath labels + SVG glyphs,
       geometry set per-frame in JS) around the canvas wheel; grows in
       only in synastry / future modes.
   All icons are inline SVG (uiIcons + BOND_GLYPHS) — no Unicode glyphs.
   ════════════════════════════════════════════════════════════════════ */

/* ── Bottom-left mode FAB + fan-out cluster ──────────────────────────── */
.at-modewrap {
  position: absolute;
  left: 6px;
  /* Mirror the SKY FAB's vertical anchor on the opposite corner — sit just
     above the (shifted-down) capture stack so nothing in the bottom band
     overlaps the wheel above or the donut panel below. */
  bottom: calc(var(--at-cap-bot, 120px) + var(--at-cap-h, 94px) + 12px);
  z-index: 9801;
  display: flex;
  flex-direction: column-reverse;   /* FAB at bottom, menu grows upward */
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;             /* only the FAB + options are interactive */
}
.at-mode-fab {
  pointer-events: auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(201,168,84,0.22), rgba(16,12,8,0.9));
  border: 1px solid rgba(201,168,84,0.55);
  color: var(--ac-gold-brt, #ffd068);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 14px rgba(201,168,84,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.at-mode-fab:hover {
  border-color: rgba(201,168,84,0.9);
  color: #fff3d6;
  box-shadow: 0 4px 22px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,84,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.at-modewrap--open .at-mode-fab { transform: rotate(45deg); }
.at-mode-fab:active { transform: scale(0.95); }

.at-mode-menu {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  /* Collapsed → grow up + fade in when the wrap opens. */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: bottom left;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2,0.8,0.25,1);
}
/* When collapsed (JS sets the [hidden] attr after the fade), drop out of layout
   entirely — the class `display:flex` above otherwise beats the UA [hidden] rule,
   leaving the invisible option buttons hit-testable at z9801 and stealing taps
   from the left-edge profile chip beside the wheel. */
.at-mode-menu[hidden] { display: none; }
.at-modewrap--open .at-mode-menu { opacity: 1; transform: translateY(0) scale(1); }
.at-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 15px 7px 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,18,30,0.96), rgba(9,11,20,0.97));
  border: 1px solid rgba(201,168,84,0.34);
  color: var(--ac-ink, #e8d8a8);
  cursor: pointer;
  white-space: nowrap;
  font: 600 12.5px/1.1 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: border-color 0.13s, background 0.13s, color 0.13s, transform 0.1s;
}
.at-mode-opt:hover { border-color: rgba(201,168,84,0.7); color: var(--ac-gold-brt, #ffd068); }
.at-mode-opt:active { transform: scale(0.97); }
.at-mode-opt-ic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ac-gold-brt, #ffd068);
  border: 1px solid rgba(201,168,84,0.28);
  background: radial-gradient(circle at 50% 38%, rgba(201,168,84,0.2), rgba(201,168,84,0.04));
}
.at-mode-opt[aria-checked="true"] {
  border-color: rgba(201,168,84,0.85);
  background: linear-gradient(180deg, rgba(201,168,84,0.18), rgba(9,11,20,0.97));
  color: var(--ac-gold-brt, #ffd068);
}

/* ── LEFT Person A (Main Person) button ───────────────────────────────────
   The Main Person control sits in a slim row DIRECTLY UNDER the day-bar
   (user request: chips below the time bar, out of the wheel's way — they
   used to dock mid-wheel and covered the wheel + bond-ring arcs).
   Mirrors the right-side Person B button. */
.at-persona-wrap {
  position: absolute;
  /* Just under the day-bar's bottom edge (--at-top-h = iconrow + day-bar). */
  top: calc(var(--at-top-h, 168px) + 8px);
  left: 8px;
  z-index: 17;                 /* above the bond ring (15) + day-bar (16); below the header (20) */
  display: flex;
  flex-direction: column;      /* the add-chart button stacks BELOW the profile chip */
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.at-persona-wrap .at-profile-chip { pointer-events: auto; }
/* "Add your chart" — dedicated, directly below the Main Person pill, all modes. */
.at-add-chart-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font: 600 11px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.02em;
  color: var(--gold-2, #e8c877);
  background: color-mix(in srgb, var(--panel, #12101d) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-2, #e8c877) 55%, transparent);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.at-add-chart-btn:hover { background: color-mix(in srgb, var(--gold-2, #e8c877) 18%, var(--panel, #12101d)); border-color: var(--gold-2, #e8c877); }
.at-add-chart-btn:active { transform: translateY(1px); }

/* ── Right Person B chip — same under-the-day-bar row ──────────────────── */
.at-personb-wrap {
  position: absolute;
  /* Dropped below the top-right NATAL/TRANSITS toggle (#at-natal-toggle) — at the
     old +8px the Person-B pill's chip overlapped that button in synastry mode.
     +64px clears the toggle (bottom y243) with an ~11px gap at both 1280px and
     380px (TWA-realistic) — the toggle + this pill share a fixed top, so the
     clearance is width-independent; measured at both. */
  top: calc(var(--at-top-h, 168px) + 64px);
  right: 8px;
  z-index: 17;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Cap the whole control (tag + chip) so a long Person-B name can never spill
     off the right edge; the chip ellipsizes within this budget (min-width:0). */
  max-width: min(58vw, 300px);
  pointer-events: none;
  /* Slide in from the right when synastry activates. */
  opacity: 0;
  transform: translate(24px, 0);
  transition: opacity 0.24s ease, transform 0.26s cubic-bezier(0.2,0.8,0.25,1);
}
.at-personb-wrap--in { opacity: 1; transform: translate(0, 0); }
.at-personb-tag {
  font: 600 10px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-ink-dim, rgba(232,216,168,0.6));
}
/* The Person B chip reuses .at-profile-chip; ensure it stays tappable + capped. */
.at-personb-wrap .at-profile-chip { pointer-events: auto; max-width: min(46vw, 230px); }

/* ── 12-bond ARC-SEGMENT ring ──────────────────────────────────────────────
   An SVG overlay (.at-bond-svg) of 12 annular sectors (.at-bond-seg) ringing
   the wheel just outside its rim. Each sector = a tinted clickable hit <path>
   (.at-bond-seg-hit, ≥44px radial thickness), a curved bond-name <textPath>
   (.at-bond-seg-lbl) on the outer side, and the bond's SVG glyph
   (.at-bond-seg-glyph) inner of the label. Replaces the former round toggles. */
.at-bond-ring {
  position: absolute;
  inset: 0;
  /* ABOVE the day-bar (16) so the TOP bond sectors stay tappable. In
     synastry-with-transits the wheel grows a third (transit) ring, so the
     bond ring's top arc (Marriage + neighbours) rides up UNDER the day-bar's
     date row — which claims the whole top band's pointer events — and those
     bonds became unclickable. Only the thin segment hit-paths opt into pointer
     events (the SVG itself passes through), and the top arc overlaps just the
     day-bar's NON-interactive date label, so winning there costs nothing while
     the strip/chips keep working everywhere else. Still below the header
     cluster (20) so the export/zoom/orrery icons stay on top. */
  z-index: 18;
  pointer-events: none;        /* only the segment hit-paths take pointer events */
  opacity: 0;
  transition: opacity 0.26s ease;
}
.at-bond-ring--in { opacity: 1; }
.at-bond-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;        /* container passes through; hit-paths opt back in */
}
/* Sectors fade in with the ring. We deliberately animate OPACITY ONLY (no
   transform): a transform:scale entrance shifts each sector's hit geometry while
   it interpolates — which (a) drifts the ≥44px tap area mid-flight and (b) leaves
   the hit area mis-placed whenever rAF is paused (headless verify, backgrounded
   tab) and the transition can't settle. Opacity never moves the geometry, so the
   sector is hit-testable at its true radius the instant it exists. The ring
   container's own opacity fade (.at-bond-ring) supplies the reveal feel. */
.at-bond-seg {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.24s ease;
}
/* The clickable, tinted sector body. A (near-)transparent fill is REQUIRED for
   SVG hit-testing across the whole wedge — without a fill, only the stroke is
   tappable. pointer-events:auto opts this path back in over the pe:none parents. */
.at-bond-seg-hit {
  pointer-events: auto;
  fill: color-mix(in srgb, var(--bond-tint, #e2c178) 9%, rgba(8,10,18,0.62));
  stroke: color-mix(in srgb, var(--bond-tint, #e2c178) 42%, transparent);
  stroke-width: 1;
  transition: fill 0.14s ease, stroke 0.14s ease, filter 0.16s ease;
}
.at-bond-seg:hover .at-bond-seg-hit {
  fill: color-mix(in srgb, var(--bond-tint, #e2c178) 18%, rgba(8,10,18,0.62));
  stroke: var(--bond-tint, #e2c178);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bond-tint, #e2c178) 45%, transparent));
}
/* The ACTIVE bond — brighter fill + a clear neon glow ring around the sector. */
.at-bond-seg[aria-checked="true"] .at-bond-seg-hit {
  fill: color-mix(in srgb, var(--bond-tint, #e2c178) 30%, rgba(8,10,18,0.62));
  stroke: var(--bond-tint, #e2c178);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--bond-tint, #e2c178) 70%, transparent));
}
/* Curved bond-name caption — font-size is set per-frame in JS (shrink-to-fit the
   arc); here we own weight / tracking / colour / the dark legibility halo. */
.at-bond-seg-lbl {
  fill: color-mix(in srgb, var(--bond-tint, #e2c178) 55%, #e8d8a8);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;        /* taps fall through to the hit-path below */
  paint-order: stroke;
  stroke: rgba(4,4,9,0.85);
  stroke-width: 2.2px;
  stroke-linejoin: round;
  transition: fill 0.14s ease;
}
.at-bond-seg:hover .at-bond-seg-lbl,
.at-bond-seg[aria-checked="true"] .at-bond-seg-lbl {
  fill: color-mix(in srgb, var(--bond-tint, #e2c178) 92%, #fff6df);
}
/* The bond SVG glyph (<use> of a wheelGlyphs symbol). currentColor = tint. */
.at-bond-seg-glyph {
  color: color-mix(in srgb, var(--bond-tint, #e2c178) 78%, #e8d8a8);
  pointer-events: none;
  transition: color 0.14s ease, filter 0.16s ease;
}
.at-bond-seg:hover .at-bond-seg-glyph,
.at-bond-seg[aria-checked="true"] .at-bond-seg-glyph {
  color: var(--bond-tint, #e2c178);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bond-tint, #e2c178) 60%, transparent));
}

/* Phones — tighten the bottom-left FAB to match the SKY FAB. The arc segments
   keep a full ≥44px radial tap depth (repo rule) even on narrow screens; the
   ring layout clamps its radius so the band still fits around the wheel. */
@media (max-width: 420px) {
  .at-mode-fab { width: 48px; height: 48px; }
  .at-personb-wrap .at-profile-chip { max-width: 44vw; }
}

@media (prefers-reduced-motion: reduce) {
  .at-mode-fab, .at-mode-menu, .at-mode-opt,
  .at-personb-wrap, .at-bond-ring, .at-bond-seg { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   AETHER THEATRE — CANONICAL Z-ORDER MAP  (one stacking context: #aether-theatre, z 9700)
   ────────────────────────────────────────────────────────────────────
   Every Theatre control lives inside the z-9700 root EXCEPT the global
   #bottom-nav (a <body> child) + the global clock (hidden in Theatre). The
   in-root stack, bottom → top, and which layer owns pointer events:

     z  0  canvas wheel (beads / zodiac)            ............ pe:auto (taps focus planets)
     z 14  reading-scroll CONTAINER + spacer        ............ pe:NONE  (see below)
            └─ .at-reading-panel  (BELOW the fold)  ............ pe:auto (scroll + read)
            └─ .at-reading-peek   (in the fold)     ............ pe:auto (scroll affordance)
     z 15  .at-bond-ring                            ............ pe:none on ring+svg; pe:auto on each segment hit-path
     z 16  .at-daybar (time ribbon, isolation:isolate)  ........ pe:AUTO on the WHOLE 112px top band (always-topmost interactive)
     z 17  profile edge chips (#at-persona-wrap / #at-personb-wrap)  pe:none wrap; pe:auto chip
     z 20  header icon cluster (×, export, zoom, ?, orrery)  ...... pe:none header; pe:auto buttons
     z 40  .at-daybar-sheet-overlay (date/time picker, transient) .. pe:auto
     z 9801 bottom-left mode FAB + bottom-right SKY FAB + capture stack  pe:auto
   ── outside the root ──
     z 9800 global #bottom-nav (body child, floats over the whole Theatre) .. pe:auto

   RULE: the reading-scroll CONTAINER is pointer-events:none so it never steals
   taps over the fold (bug: a full-viewport pe:auto scroller buried the bond
   ring / day-bar / planet beads beneath it). Only its real content — the panel
   (which lives entirely BELOW the 1-screen fold) and the peek button — take
   pointer events. The bond ring sits ABOVE the scroller (z15 > z14) so every
   toggle is hit-testable; the day-bar + chips + header sit above the ring so the
   ribbon band reads cleanly. The profile chips are docked at the WHEEL's
   mid-height edges (see .at-persona-wrap / .at-personb-wrap) — clear of the
   ribbon band that now occupies its own full-width row below the icon cluster.

   TIME-BAR RULE (always-topmost interactive, every mode): .at-daybar takes
   pointer-events on its WHOLE band (not just strip + chips) and carries
   isolation:isolate. It is a direct child of the root AND the last top-level
   child painted, so z16 already beats the canvas / reading (14) / bond ring (15)
   structurally — isolation hardens that so no descendant/sibling z can ever
   re-order the ring or reading ABOVE it. Why the band (not just chips): the bond
   ring's outer arc (≥44px radial) overflows UP ~48px INTO the ribbon band on a
   phone-width wheel, and the canvas is full-bleed beneath — so with pe:none on
   the bar a near-miss tap beside a chip fell THROUGH to a bond segment (z15) or a
   planet bead, and the time bar felt "intercepted". The bar is a FIXED-height top
   band (--at-daybar-h, 112px), NOT full-height, so it claims ONLY its own band
   and never swallows wheel/bond/reading taps below it. The picker sheet (z40),
   profile sheet (z60), FABs (z9801) and global #bottom-nav (z9800) all still sit
   ABOVE it and stay reachable.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Aether Theatre — BELOW-THE-WHEEL synastry reading (aetherTheatreReading.js).
   In synastry / synastry-future modes the wheel + donuts + ticker are the TOP
   FOLD; the user scrolls DOWN past them to reach the full per-comparison reading
   (same content as the standalone Synastry screen, rendered by the shared
   synastryReadingRender.js). Basic mode never shows this — the scroller is
   [hidden] + emptied.

   Layering (see the canonical z-order map above): the scroll CONTAINER is at
   z 14 but pointer-events:NONE — it must never intercept taps meant for the
   wheel, bond ring (z15) or day-bar (z16) sitting in the same fold. The reading
   PANEL (below the fold) + the peek button re-enable pointer events on
   themselves, so the reading stays scrollable/tappable while the fold chrome
   underneath stays fully interactive. Still BELOW the global #bottom-nav
   (z 9800, a body child) so the bottom mode/nav bar stays reachable. */
.at-reading-scroll {
  position: absolute;
  inset: 0;
  z-index: 14;                 /* below the bond ring (15) + day-bar (16); under #bottom-nav (9800) */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* The CONTAINER itself never takes pointer events — otherwise a full-viewport
     scroller buries the bond ring / day-bar / planet beads in the fold. Only the
     real content (.at-reading-panel below the fold + the peek button) re-enables
     pointer events on itself below. */
  pointer-events: none;
}
.at-reading-scroll[hidden] { display: none !important; }

/* First fold — reserve a full screen so the reading begins below the wheel.
   Transparent + click-through so the canvas / ring / corner FABs underneath
   stay visible AND interactive for the first screenful. */
.at-reading-spacer {
  position: relative;
  height: 100vh;
  height: 100dvh;              /* dvh tracks the mobile URL-bar collapse */
  pointer-events: none;
}

/* "Pull-up" affordance — a slim, pinned cue near the bottom of the fold (just
   above the donut panel + summary line) that there's a reading below, and a tap
   target that smooth-scrolls it into view. pointer-events:auto (the only live
   thing in the spacer). */
.at-reading-peek {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--mode-bar-h, 80px) + var(--at-summary-h, 120px) + var(--at-donuts-h, 150px) + 18px);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(214,139,200,0.42);
  background: rgba(10,12,22,0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #f0d9ec;
  font-family: "Cinzel", Georgia, serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  -webkit-tap-highlight-color: transparent;
  animation: at-reading-peek-bob 2.4s ease-in-out infinite;
}
.at-reading-peek:hover { border-color: rgba(214,139,200,0.7); color: #fff; }
.at-reading-peek-chev { display: inline-flex; opacity: 0.9; }
@keyframes at-reading-peek-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .at-reading-peek { animation: none; }
}

/* The reading content panel — opaque "scroll" parchment over the night stage.
   id #at-synastry-reading also activates the re-scoped `.pa-syn-*` rules
   (`:is(#synastry-app, #at-synastry-reading) .pa-syn-…`). Generous bottom pad so
   the last block clears the floating bottom nav. */
.at-reading-panel {
  position: relative;
  pointer-events: auto;
  min-height: 60vh;
  padding: 22px 18px calc(var(--mode-bar-h, 80px) + 48px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(40,28,52,0.55) 0%, rgba(8,8,18,0) 60%),
    linear-gradient(to bottom, #0a0b16 0%, #07070f 100%);
  border-top: 1px solid rgba(214,139,200,0.28);
  box-shadow: 0 -18px 40px rgba(0,0,0,0.55);
  color: #e9e2d2;
}

/* ── Classical Horoscope reading (HOR-08) ──────────────────────────────── */
.ath-reading { line-height: 1.7; color: #ece7f4; }
/* Sticky header so the title + the "Show working" pill stay reachable while the
   reading scrolls (the pill was scrolling off the top, "no pill for me"). */
/* NOT sticky: pinning it to the scroll-container top collided with the Theatre's
   top chrome (the engraved gold band) and could clip the title. The always-visible
   chrome pill (#at-horo-method, top-right) is the persistent toggle, so the reading
   header can scroll normally. */
.ath-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; padding: 4px 0 12px; border-bottom: 1px solid rgba(214,139,200,0.22); }
.ath-head h2 { margin: 0; font: 600 22px/1.2 "Cinzel", Georgia, serif; color: var(--ac-gold-brt, #ffd068); }
.ath-date { color: #9aa6c8; font-size: 13px; letter-spacing: 0.04em; }
.ath-method-toggle { margin-left: auto; pointer-events: auto; cursor: pointer; background: rgba(34,27,56,0.7); color: var(--ac-gold-brt,#ffd068); border: 1px solid rgba(255,208,104,0.4); border-radius: 999px; padding: 4px 12px; font: 600 11px/1 "Cinzel", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; }
.ath-sec { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(214,139,200,0.16); }
.ath-sec:first-of-type { border-top: none; }
.ath-sec h3 { margin: 0 0 6px; font: 600 16px/1.3 "Cinzel", Georgia, serif; color: var(--ac-gold-brt, #ffd068); }
.ath-sec .verdict { margin: 0 0 8px; font-style: italic; color: #cfc7e6; }
.ath-modern p { margin: 6px 0; color: #ded7ee; }
/* "Expand full natal promise" — native <details>, no JS. */
.ath-expand { margin: 4px 0 0; }
.ath-expand > summary { cursor: pointer; color: var(--ac-gold-brt,#ffd068); font: 600 11px/1.5 "Cinzel", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; padding: 4px 0; }
.ath-expand > summary::-webkit-details-marker { display: none; }
.ath-expand > summary::after { content: " ⌄"; }
.ath-expand[open] > summary::after { content: " ⌃"; }
.ath-expand[open] > summary { opacity: 0.65; }
.ath-working { margin: 10px 0 2px; padding: 10px 14px; background: rgba(14,16,30,0.55); border-left: 2px solid var(--ac-gold-brt, #ffd068); border-radius: 4px; font-size: 13px; color: #bfb6da; }
.ath-working-h { color: var(--ac-gold-brt,#ffd068); font: 600 11px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.ath-working ul { margin: 0; padding-left: 18px; }
.ath-working li { margin: 3px 0; }
/* Per-section time-scale caption (what changes on a scrub vs holds). */
.ath-sec h3 .ath-scale { display: block; margin-top: 2px; font: 600 9.5px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.09em; text-transform: uppercase; color: #8a93b5; }
/* "This Moment" — the live, scrub-reactive block. */
.ath-moment { background: rgba(40,28,52,0.35); border-radius: 8px; padding: 12px 14px; border-top: none; margin-top: 14px; }
.ath-moment-line { margin: 4px 0; color: #ded7ee; }
.ath-moment-k { display: inline-block; min-width: 62px; color: var(--ac-gold-brt,#ffd068); font: 600 11px/1.4 "Cinzel", Georgia, serif; letter-spacing: 0.05em; text-transform: uppercase; }
/* Methodology toggle: hide the (always-rendered) working when collapsed — pure
   class flip, no re-render. Mirrors the natal `methodology-hidden` pattern. */
.ath-reading.methodology-hidden .ath-working { display: none; }

/* HORO-LIGHT (user 2026-07-01) — the horoscope reading's text colors were
   hardcoded for the dark Theatre backdrop (#ece7f4 etc.) and washed out to
   near-invisible on Light Mode's paper background. Scoped ink overrides so
   the light reading matches the app's light-mode pattern: dark ink body,
   deep-plum italics, terracotta-gold headings stay from --ac-gold vars. */
html.theme-light-mode .ath-reading { color: #2b2436; }
html.theme-light-mode .ath-sec .verdict { color: #4a4160; }
html.theme-light-mode .ath-modern p { color: #332c44; }
html.theme-light-mode .ath-date { color: #6a7390; }
html.theme-light-mode .ath-sec h3 .ath-scale { color: #7a7490; }
html.theme-light-mode .ath-working { background: rgba(43,36,54,0.06); color: #55496b; }
html.theme-light-mode .ath-moment { background: rgba(43,36,54,0.05); }
html.theme-light-mode .ath-moment-line { color: #332c44; }
html.theme-light-mode .ath-method-toggle { background: rgba(43,36,54,0.06); }
.ath-method-toggle[aria-pressed="true"] { background: rgba(255,208,104,0.18); border-color: rgba(255,208,104,0.75); }
/* Transits — the strongest contacts as a single wide list, fully expanded. */
.ath-tr-count { color: #9aa6c8; font-size: 12px; margin: 8px 0 8px; }
.ath-tr-list { display: block; }
.ath-tr { padding: 10px 0 12px; border-bottom: 1px solid rgba(214,139,200,0.12); }
.ath-tr-head { display: flex; align-items: baseline; gap: 10px; }
.ath-tr-lead { flex: 1; color: var(--ac-gold-brt,#ffd068); font: 600 14px/1.3 "Cinzel", Georgia, serif; }
.ath-tr-pct { color: #8a93b5; font-size: 11px; font-variant-numeric: tabular-nums; }
.ath-tr-verdict { margin: 4px 0 4px; color: #cfc7e6; font-size: 13.5px; font-style: italic; }
.ath-tr-facts { margin: 2px 0; color: #8a93b5; font-size: 11.5px; letter-spacing: 0.02em; }
.ath-tr-mod { margin: 2px 0 0; color: #bfb6da; font-size: 12px; }
/* TD-03 — per-contact classical-detail expander (tap to reveal the five blocks). */
.ath-tr-more { margin: 6px 0 0; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  font: 600 10.5px/1 "Cinzel", Georgia, serif; letter-spacing: 0.03em; color: #c8b7e0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(214,139,200,0.28); }
.ath-tr-more:hover { background: rgba(255,255,255,0.09); color: #ead9ff; }
.ath-tr-more[aria-expanded="true"] { color: #1a1326; background: rgba(214,139,200,0.65); border-color: rgba(214,139,200,0.65); }
.ath-tr-detail { margin: 8px 0 2px; padding: 8px 12px; border-left: 2px solid rgba(214,139,200,0.35);
  background: rgba(255,255,255,0.025); border-radius: 0 6px 6px 0; }
.ath-tr-detail-block { margin: 0 0 8px; }
.ath-tr-detail-block:last-child { margin-bottom: 0; }
.ath-tr-detail-label { display: block; color: var(--ac-gold-brt,#ffd068); font: 700 10px/1.2 "Cinzel", Georgia, serif;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.ath-tr-detail-text { margin: 0; color: #d3ccea; font-size: 12.5px; line-height: 1.5; }
.ath-tr-detail-lines { margin: 3px 0 0; padding-left: 16px; color: #a9a0c6; font-size: 11.5px; line-height: 1.45; }
.ath-tr-detail-lines li { margin: 1px 0; }
/* Horoscope-mode orb extras: the orb tap-detail (in the donut panel). */
.td-orb-detail { margin: 10px auto 0; max-width: 560px; text-align: center; font-size: 13px; font-style: italic; color: #cfc7e6; padding: 8px 14px; border-top: 1px solid rgba(214,139,200,0.18); }


/* ── Light-ground dial text (owner override of INV-AES-5, 2026-07-18) ─────
   The ring geometry re-lights itself from PAL_LIGHT in theatreDonuts.js; these
   are the fills that live in CSS rather than in that palette, so they have to
   move in the same breath or the captions stay pale-gold on white. Same
   material logic as the JS half: darken to hold contrast, never invert. */
html.theme-light-mode .td-cap { color: #6E5820; }
html.theme-light-mode .td-cap::before { background: #8A6F28; opacity: 0.5; }
html.theme-light-mode .td-sub { color: #7A6733; }
html.theme-light-mode .td-panel .cao-value { fill: #4A3810; }
html.theme-light-mode .td-panel .cao-glyphline { fill: #7A6224; }
html.theme-light-mode .td-panel .cao-band { fill: #596365; }
html.theme-light-mode .td-panel .cao-pole--weak { fill: #5A6668; }
html.theme-light-mode .td-panel .cao-pole--strong { fill: #856418; }
html.theme-light-mode .td-panel .cao-now { fill: #856418; opacity: 0.9; }
html.theme-light-mode .td-panel .cao-now--scrubbed { fill: #5A6668; }
html.theme-light-mode .td-orb-detail { color: #4a4160; border-top-color: rgba(90,70,120,0.22); }/* "Natal ground" constitution line at the top of the horoscope reading (demoted
   from under the orbs — see aetherHoroscopeReading._natalGroundLine). */
.ath-ground { margin: 2px 0 10px; color: #a98c4e; font-size: 12.5px; letter-spacing: 0.02em; }
.ath-ground .ath-ground-cap { color: var(--ac-gold-brt,#ffd068); font: 600 10px/1.4 "Cinzel", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 7px; }
/* Structured Summary headline: Year structure · Current trigger · Judgment. */
.ath-summary .ath-struct { margin: 8px 0 11px; }
.ath-struct-h { color: var(--ac-gold-brt,#ffd068); font: 600 10.5px/1.4 "Cinzel", Georgia, serif; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 3px; }
.ath-struct-line { margin: 1px 0; color: #e7e0f2; font-size: 14px; line-height: 1.4; }
.ath-struct-line.ath-trigger-lead { color: var(--ac-gold-brt,#ffd068); font-weight: 600; }
.ath-struct-facts { margin: 2px 0 0; color: #8a93b5; font-size: 11.5px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ath-summary .ath-struct .ath-modern { margin-top: 2px; }
.ath-summary .ath-struct .ath-modern p { margin: 1px 0; }
/* P3 — the "Classical Agreement" convergence card (Horoscope + Today/Home).
   Tier-keyed accent: coincident=green · agreeing=gold · contrary=red · neutral=grey. */
.conv-card { margin: 6px 0 12px; padding: 9px 12px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--conv-accent, #9aa6c8); }
.conv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-card-h { color: var(--ac-gold-brt,#ffd068); font: 600 10.5px/1.4 "Cinzel", Georgia, serif; letter-spacing: 0.1em; text-transform: uppercase; }
.conv-tier-badge { color: var(--conv-accent, #9aa6c8); font: 700 11px/1 "Cinzel", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--conv-accent,#9aa6c8) 16%, transparent); white-space: nowrap; }
.conv-card-body { margin: 6px 0 0; color: #e7e0f2; font-size: 13.5px; line-height: 1.42; }
/* MB-B — dual-ring visual inside the Classical Agreement card. */
.conv-card-viz { display: flex; justify-content: center; padding: 6px 0 4px; }
.conv-card-viz svg { display: block; }
.conv-card.conv-compact .conv-card-body { font-size: 12.5px; }
.conv-tier-coincident { --conv-accent: #7Fd6a0; }
.conv-tier-agreeing   { --conv-accent: #FFD263; }
.conv-tier-contrary   { --conv-accent: #E0726A; }
.conv-tier-neutral    { --conv-accent: #9aa6c8; }
/* P2 — horoscope hierarchy: layer tags, perfection lines, transit filters. */
.ath-layer { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font: 700 9px/1.3 "Cinzel", Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
  color: var(--ath-layer-c, #9aa6c8); background: color-mix(in srgb, var(--ath-layer-c,#9aa6c8) 15%, transparent); }
.ath-layer-fixed    { --ath-layer-c: #cdb4ff; }
.ath-layer-annual   { --ath-layer-c: #FFD263; }
.ath-layer-seasonal { --ath-layer-c: #7fc8d6; }
.ath-layer-moment   { --ath-layer-c: #7Fd6a0; }
.ath-perf-pair { margin: 6px 0 8px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.ath-perf { margin: 2px 0; font-size: 13px; line-height: 1.4; color: #e7e0f2; }
.ath-perf-k { color: var(--ac-gold-brt,#ffd068); font-weight: 600; }
.ath-perf-next .ath-perf-k { color: #7Fd6a0; }
.ath-perf-prev .ath-perf-k { color: #8a93b5; }
.ath-tr-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 9px; }
.ath-tr-chip { font: 600 11px/1 "Cinzel", Georgia, serif; letter-spacing: 0.03em; padding: 5px 10px; border-radius: 999px;
  color: #c2c9e0; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
.ath-tr-chip:hover { background: rgba(255,255,255,0.09); }
.ath-tr-chip.active { color: #1a1326; background: var(--ac-gold-brt,#ffd068); border-color: var(--ac-gold-brt,#ffd068); }
.ath-tr-browse { margin-left: auto; }
/* Default view: only the top 5 rows. */
.ath-tr-list:not(.show-all):not(.is-filtered) .ath-tr:nth-child(n+6) { display: none; }
/* Filtered: hide all, then reveal only rows carrying the active flag (no 5-cap). */
.ath-tr-list.is-filtered .ath-tr { display: none; }
.ath-tr-list.filter-applying .ath-tr[data-flags~="applying"],
.ath-tr-list.filter-exact .ath-tr[data-flags~="exact"],
.ath-tr-list.filter-concord .ath-tr[data-flags~="concord"],
.ath-tr-list.filter-angle .ath-tr[data-flags~="angle"],
.ath-tr-list.filter-lot .ath-tr[data-flags~="lot"],
.ath-tr-list.filter-moon .ath-tr[data-flags~="moon"] { display: block; }
.ath-changed { font-size: 12px; color: #9aa6c8; }
.ath-changed p { margin: 2px 0; }
/* P16 — Current Life Stage card; P6 — Repeated Pattern card + per-section tags. */
.atn-ls-stage { margin: 4px 0 2px; font-size: 15px; color: #e7e0f2; }
.atn-ls-stage strong { color: var(--ac-gold-brt,#ffd068); }
.atn-ls-desc { margin: 2px 0; color: #cdd3e6; font-size: 13.5px; line-height: 1.45; }
.atn-ls-tie { margin: 5px 0 0; color: #7Fd6a0; font-size: 12.5px; font-style: italic; }
.atn-block--pattern { border-left: 3px solid var(--ac-gold-brt,#ffd068); }
.atn-pattern-body { margin: 3px 0 0; color: #e7e0f2; font-size: 13.5px; line-height: 1.45; }
.atn-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.atn-tag { font: 600 10px/1.3 "Cinzel", Georgia, serif; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: #cdb4ff; background: rgba(205,180,255,0.12); }
/* Three persistent, labeled Theatre view buttons (Natal · Synastry · Horoscope). */
.at-viewbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 9px 5px; min-width: 52px; border-radius: 14px; color: var(--ac-gold-brt, #ffd068); cursor: pointer; line-height: 1; }
.at-viewbtn svg { display: block; }
.at-viewbtn .at-viewbtn-lbl { font: 600 9px/1.1 "Cinzel", Georgia, serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ac-gold-brt, #ffd068); opacity: 0.82; white-space: nowrap; }
.at-viewbtn--active { box-shadow: 0 0 0 1.5px rgba(255,208,104,0.7), 0 0 14px rgba(255,208,104,0.3); }
.at-viewbtn--active .at-viewbtn-lbl { opacity: 1; }
/* Mobile — on a narrow phone the Horoscope/Synastry corner buttons (.at-viewbtn at
   bottom:96px, ~43px tall) sit over the verdict-ticker's transit narration. Lift the
   ticker's text above them via its bottom-padding var; the gradient background still
   fills down behind the buttons, so nothing is hidden. Desktop keeps 8px. */
@media (max-width: 500px) {
  #at-verdict-ticker { --at-ticker-pb: 60px; }
}

/* Title bar — "Person A × Person B", pinned look at the top of the reading. */
.at-reading-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(214,139,200,0.22);
}
.at-reading-pair {
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #f3e7cf;
  text-align: center;
}
.at-reading-amp { color: var(--syn-bond-tint, #d68bc8); margin: 0 4px; }

/* Each section is a vertically-stacked "scroll" with a Roman-numeral header. */
.at-reading-section { margin: 0 0 26px; }
.at-reading-section:last-child { margin-bottom: 8px; }
.at-reading-h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,184,140,0.2);
  font-family: "Cinzel", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f4e7c8;
}
.at-reading-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--syn-bond-tint, #d68bc8);
  letter-spacing: 0.08em;
  min-width: 1.6em;
}
.at-reading-body { /* inherits the re-scoped .pa-syn-* prose styles */ }

@media (max-width: 480px) {
  .at-reading-panel { padding-left: 14px; padding-right: 14px; }
  .at-reading-h2 { font-size: 15px; }
  .at-reading-pair { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile touch overhaul (Phase G) — finger-friendly targets on COARSE
   pointers only, so desktop / mouse layouts are unchanged. Covers the Sky
   control-panel rows (selects, numeric/date/time inputs, checkboxes,
   cardinal/nudge/grid buttons) and the body search. The Sky sub-nav pills
   already carry a 44px min-height for all pointer types.
   ════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .row select.sel,
  .row input.num,
  .row input[type="text"],
  .row.datetime input[type="date"],
  .row.datetime input[type="time"],
  .body-search-input { min-height: 40px; }
  .row.bool input[type="checkbox"] { width: 22px; height: 22px; }
  .row.cardinal-buttons button,
  .row.nudge-buttons button,
  .row.button-grid-row button { min-height: 40px; }
  /* Kill the 300ms tap delay / double-tap-zoom on the control surfaces. */
  .row, .sky-pill, .body-search-row, .ar-chip { touch-action: manipulation; }
}

/* ── Universal explain card (js/ui/explainCard.js) ─────────────────────
   The one render surface for explainEntity(). Self-contained styling —
   the legacy .pa-tv-* rules live in astrology-scrolls.css scoped under
   the scroll-deck apps and do NOT reach the #pa-explain-sheet singleton,
   so the card carries its own copies scoped under .pa-explain-card. */
.pa-explain-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cinzel', Georgia, serif;
  color: var(--color-accent-2, #FFD263);
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 184, 54, 0.22);
  padding: 2px 28px 10px 0;
  margin-bottom: 12px;
}
.pa-explain-glyph { line-height: 0; flex: none; }
.pa-explain-title { font-size: 17px; }
.pa-explain-kind {
  margin-left: auto; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.55;
}
.pa-explain-close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--color-fg, #f0e5c2);
  font-family: 'Cinzel', serif; font-size: 18px;
  cursor: pointer; opacity: 0.7; z-index: 2;
}
/* HD-05 — Home Three-Voice source header. Without these the toggle rendered as an
   unstyled white <button> on the dark field, and the citation glued straight into
   the link ("…Nocturnal Planetsread source"). Themed dark panel; gold Cinzel
   small-caps attribution; discrete right-aligned "— read source" link. Mirrors the
   explain-card treatment (which wins by specificity when both apply). */
.pa-three-voice .pa-tv-source { margin: 0 0 10px; }
.pa-three-voice .pa-tv-source-toggle {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; text-align: left;
  font-family: 'Cinzel', Georgia, serif; font-size: 11.5px;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 80%, #f0e5c2 20%);
  letter-spacing: 0.06em;
}
.pa-three-voice .pa-tv-source-marker { font-size: 16px; line-height: 1; opacity: 0.7; }
.pa-three-voice .pa-tv-source-attr { flex: 0 1 auto; }
.pa-three-voice .pa-tv-source-cta {
  margin-left: auto; padding-left: 10px; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.62; white-space: nowrap;
}
.pa-three-voice .pa-tv-source-cta::before { content: '— '; opacity: 0.7; }
.pa-three-voice .pa-tv-source-text {
  display: none; margin: 8px 0 0; padding: 0 0 0 12px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  font-style: italic; font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, #f0e5c2 85%, transparent);
}
.pa-three-voice .pa-tv-source.is-expanded .pa-tv-source-text { display: block; }

.pa-explain-card .pa-tv-source { margin: 0 0 10px; }
.pa-explain-card .pa-tv-source-toggle {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; text-align: left;
  font-family: 'Cinzel', Georgia, serif; font-size: 11.5px;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 80%, #f0e5c2 20%);
  letter-spacing: 0.06em;
}
.pa-explain-card .pa-tv-source-marker { font-size: 16px; line-height: 1; opacity: 0.7; }
.pa-explain-card .pa-tv-source-cta {
  margin-left: auto; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6; white-space: nowrap;
}
.pa-explain-card .pa-tv-source-text {
  display: none; margin: 8px 0 0; padding: 0 0 0 12px;
  border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  font-style: italic; font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, #f0e5c2 85%, transparent);
}
.pa-explain-card .pa-tv-source.is-expanded .pa-tv-source-text { display: block; }
.pa-explain-card .pa-tv-doctrine {
  display: block; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent);
}
.pa-explain-card .pa-tv-doctrine-label {
  display: block; margin-bottom: 5px;
  font-family: 'Cinzel', Georgia, serif; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 75%, #f0e5c2 25%);
}
.pa-explain-card .pa-tv-doctrine-text {
  font-style: italic; font-size: 14.5px; line-height: 1.55;
  color: color-mix(in srgb, #f0e5c2 90%, transparent);
}
.pa-explain-facts {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 14px; margin: 0 0 12px;
}
.pa-explain-fact { display: contents; }
.pa-explain-fact-k {
  font-family: 'Cinzel', Georgia, serif; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: capitalize;
  color: #a89a6a; align-self: baseline; padding-top: 2px;
}
.pa-explain-fact-v { font-size: 14px; color: #f0e5c2; }
.pa-explain-reading p {
  margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #efe5c2;
}
.pa-explain-reading p:last-child { margin-bottom: 0; }
.pa-explain-card .pa-tv-foryou {
  display: block; margin: 12px 0 0; padding: 10px 12px;
  border-radius: 10px;
  border-inline-start: 3px solid color-mix(in srgb, #c8b0ff 55%, transparent);
  background: color-mix(in srgb, #c8b0ff 6%, transparent);
}
.pa-explain-card .pa-tv-foryou-label {
  display: block; margin-bottom: 4px;
  font-family: 'Cinzel', Georgia, serif; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, #c8b0ff 78%, #f0e5c2 22%);
}
.pa-explain-card .pa-tv-foryou-text { font-size: 14px; line-height: 1.5; color: #e8e2f2; }
.pa-explain-locked {
  margin: 4px 0 8px; padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--color-accent, #FFB836) 40%, transparent);
  border-radius: 10px; text-align: center;
}
.pa-explain-locked-text {
  display: block; font-size: 13px; font-style: italic;
  color: color-mix(in srgb, #f0e5c2 75%, transparent); margin-bottom: 8px;
}
.pa-explain-unlock {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 55%, transparent);
  border-radius: 9px; padding: 7px 14px;
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', Georgia, serif; font-size: 12px;
  letter-spacing: 0.08em; cursor: pointer;
}
.pa-explain-trace { margin-top: 12px; }
.pa-explain-trace > summary {
  cursor: pointer; list-style: none;
  font-family: 'Cinzel', Georgia, serif; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent, #FFB836) 75%, #f0e5c2 25%);
  padding: 6px 0;
}
.pa-explain-trace > summary::-webkit-details-marker { display: none; }
.pa-explain-trace > summary::before { content: '\203A '; }
.pa-explain-trace[open] > summary::before { content: '\2304 '; }
.pa-explain-trace ol {
  margin: 6px 0 0; padding: 0 0 0 4px; list-style: none;
  counter-reset: trace;
}
.pa-explain-trace-node {
  counter-increment: trace;
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px;
  padding: 7px 0 7px 26px; position: relative;
  border-top: 1px dashed color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
}
.pa-explain-trace-node::before {
  content: counter(trace);
  position: absolute; left: 2px; top: 8px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 50%, transparent);
  color: var(--color-accent-2, #FFD263);
  font-size: 10px; line-height: 17px; text-align: center;
  font-family: 'Cinzel', Georgia, serif;
}
.pa-explain-trace-label {
  font-family: 'Cinzel', Georgia, serif; font-size: 10.5px;
  letter-spacing: 0.1em; color: #a89a6a; align-self: baseline; padding-top: 2px;
}
.pa-explain-trace-value { font-size: 13.5px; color: #f0e5c2; line-height: 1.45; }
.pa-explain-learn {
  display: block; width: 100%; margin-top: 14px; padding: 9px 12px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 35%, transparent);
  border-radius: 10px; cursor: pointer;
  font-family: 'Cinzel', Georgia, serif; font-size: 12px;
  letter-spacing: 0.08em; color: var(--color-accent-2, #FFD263);
}
/* Tap affordances on host rows that open the card. */
.pa-explain-tap { cursor: pointer; }
.pa-explain-tap:hover { background: color-mix(in srgb, var(--color-accent, #FFB836) 7%, transparent); }
.pa-explain-hint { opacity: 0.55; font-size: 1.05em; margin-left: 2px; }

/* ── Marriage front door (js/ui/marriageFlow.js · #pa-marriage-view) ──
   Guided pre-deck view inside #synastry-app. Self-contained styling. */
#pa-marriage-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px
           calc(var(--mode-bar-h, 78px) + 24px);
  background: linear-gradient(180deg, #0a0d1c 0%, #070910 100%);
  color: var(--color-fg, #f0e5c2);
  font-family: 'EB Garamond', Georgia, serif;
  z-index: 5;
}
.pa-mar-wrap { max-width: 560px; margin: 0 auto; }
.pa-mar-head { margin-bottom: 18px; }
.pa-mar-back {
  background: transparent; border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 9px; padding: 6px 12px; margin-bottom: 12px;
  color: var(--color-accent-2, #FFD263); cursor: pointer;
  font-family: 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: 0.06em;
}
.pa-mar-title {
  margin: 0 0 4px; font-family: 'Cinzel', Georgia, serif;
  font-size: 21px; letter-spacing: 0.12em;
  color: var(--color-accent-2, #FFD263);
  text-shadow: 0 0 12px rgba(255, 208, 104, 0.25);
}
.pa-mar-sub { margin: 0; font-style: italic; font-size: 13.5px; opacity: 0.7; }
.pa-mar-setup { display: grid; gap: 14px; }
.pa-mar-person {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  background: rgba(14, 18, 36, 0.5);
}
.pa-mar-label {
  display: block; margin-bottom: 6px;
  font-family: 'Cinzel', Georgia, serif; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #a89a6a;
}
.pa-mar-pick {
  width: 100%; padding: 8px 10px; border-radius: 9px;
  background: #0c1020; color: #f0e5c2;
  border: 1px solid rgba(201, 162, 75, 0.35);
  font-family: inherit; font-size: 14px;
}
.pa-mar-sexrow { display: flex; gap: 14px; margin: 9px 0 6px; font-size: 13px; }
.pa-mar-sexrow label { display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 0.9; }
.pa-mar-sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pa-mar-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 207, 63, 0.07);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: #ffd980; cursor: pointer;
  font-family: 'Cinzel', Georgia, serif; font-size: 11.5px; letter-spacing: 0.04em;
}
.pa-mar-chip:hover { background: rgba(255, 207, 63, 0.14); }
.pa-mar-actions { display: flex; gap: 10px; }
.pa-mar-run {
  flex: 1; padding: 12px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 184, 54, 0.22), rgba(255, 184, 54, 0.10));
  border: 1px solid rgba(255, 184, 54, 0.6);
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', Georgia, serif; font-size: 14px; letter-spacing: 0.1em;
}
.pa-mar-demo {
  padding: 12px 14px; border-radius: 11px; cursor: pointer;
  background: transparent; border: 1px solid rgba(201, 162, 75, 0.35);
  color: #d4c79a; font-family: 'Cinzel', Georgia, serif; font-size: 12px;
}
.pa-mar-recent-h {
  font-family: 'Cinzel', Georgia, serif; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #a89a6a; margin-bottom: 6px;
}
.pa-mar-recent-list { display: grid; gap: 6px; }
.pa-mar-recent-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 9px; cursor: pointer; text-align: left;
  background: rgba(14, 18, 36, 0.5); border: 1px solid rgba(201, 162, 75, 0.22);
  color: #e8dcc0; font-family: inherit; font-size: 13.5px;
}
.pa-mar-recent-grade { font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: 0.06em; }
.pa-mar-error { color: #ff8c8c; font-style: italic; }
.pa-mar-result { margin-top: 22px; }
.pa-mar-verdict {
  text-align: center; padding: 18px 16px; border-radius: 14px;
  background: rgba(14, 18, 36, 0.55);
  border: 1px solid rgba(201, 162, 75, 0.4);
  margin-bottom: 16px;
}
.pa-mar-verdict-glyph { display: block; margin: 0 auto 6px; line-height: 0; }
.pa-mar-verdict-label {
  display: block; font-family: 'Cinzel', Georgia, serif;
  font-size: 19px; letter-spacing: 0.12em;
}
.pa-mar-why { margin: 10px 0 0; font-style: italic; font-size: 14.5px; line-height: 1.55; color: #e8dcc0; }
.pa-mar-sec-h {
  font-family: 'Cinzel', Georgia, serif; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent, #FFB836); margin: 16px 0 8px;
  padding-top: 10px; border-top: 1px solid rgba(255, 184, 54, 0.18);
}
.pa-mar-sigrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.pa-mar-signame { font-family: 'Cinzel', Georgia, serif; font-size: 12.5px; color: #ffd263; min-width: 76px; }
.pa-mar-contact-line { font-size: 15px; line-height: 1.6; }
.pa-mar-contact-q { font-style: italic; color: #d4c79a; }
.pa-mar-reception p { font-size: 14px; line-height: 1.6; color: #e8dcc0; }
.pa-mar-locked {
  margin-top: 16px; padding: 14px;
  border: 1px dashed rgba(255, 184, 54, 0.4); border-radius: 12px; text-align: center;
}
.pa-mar-locked p { margin: 0 0 10px; font-style: italic; font-size: 13.5px; opacity: 0.85; }
.pa-mar-unlock, .pa-mar-deck, .pa-mar-share {
  display: block; width: 100%; margin-top: 12px; padding: 10px 14px;
  border-radius: 10px; cursor: pointer;
  background: rgba(255, 207, 63, 0.08);
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', Georgia, serif; font-size: 12.5px; letter-spacing: 0.08em;
}
.pa-mar-full { margin-top: 8px; }

/* ── Learn Classical Astrology (js/ui/learnTrack.js · #learn-app) ───── */
#learn-app {
  position: fixed; inset: 0; z-index: 9920;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px
           calc(var(--mode-bar-h, 78px) + 28px);
  background: linear-gradient(180deg, #090c1a 0%, #06080f 100%);
  color: var(--color-fg, #f0e5c2);
  font-family: 'EB Garamond', Georgia, serif;
}
.lt-wrap { max-width: 560px; margin: 0 auto; }
.lt-head { margin-bottom: 16px; }
.lt-back {
  background: transparent; border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 9px; padding: 6px 12px; margin-bottom: 12px;
  color: var(--color-accent-2, #FFD263); cursor: pointer;
  font-family: 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: 0.06em;
}
.lt-title {
  margin: 0 0 4px; font-family: 'Cinzel', Georgia, serif;
  font-size: 20px; letter-spacing: 0.1em;
  color: var(--color-accent-2, #FFD263);
  text-shadow: 0 0 12px rgba(255, 208, 104, 0.22);
}
.lt-sub { margin: 0 0 10px; font-style: italic; font-size: 13.5px; opacity: 0.72; }
.lt-progress {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(201, 162, 75, 0.18);
}
.lt-progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #c8a060, #ffd263);
  transition: width 0.4s ease;
}
.lt-progress-n {
  margin: 5px 0 0; font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px; letter-spacing: 0.16em; color: #a89a6a;
}
.lt-list { display: grid; gap: 8px; }
.lt-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(14, 18, 36, 0.5);
  border: 1px solid rgba(201, 162, 75, 0.25);
  color: inherit; font-family: inherit;
}
.lt-row:hover { border-color: rgba(255, 184, 54, 0.5); }
.lt-row-ring {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.55);
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', Georgia, serif; font-size: 12px;
  line-height: 26px; text-align: center;
}
.lt-row.is-done .lt-row-ring {
  background: rgba(255, 210, 99, 0.16);
  border-color: var(--color-accent-2, #FFD263);
}
.lt-row-text { display: block; min-width: 0; }
.lt-row-title { display: block; font-family: 'Cinzel', Georgia, serif; font-size: 13.5px; letter-spacing: 0.04em; color: #f3e9c6; }
.lt-row-topic { display: block; font-size: 11px; font-style: italic; opacity: 0.55; }
.lt-row-arrow { margin-left: auto; opacity: 0.5; font-size: 1.1em; }
.lt-lesson { display: grid; gap: 14px; }
.lt-register {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(14, 18, 36, 0.5);
  border: 1px solid rgba(201, 162, 75, 0.22);
}
.lt-reg-label {
  display: block; margin-bottom: 6px;
  font-family: 'Cinzel', Georgia, serif; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-2, #FFD263) 75%, #f0e5c2 25%);
}
.lt-register--step p { margin: 0; font-style: italic; font-size: 14.5px; line-height: 1.55; }
.lt-register--source > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.lt-register--source > summary::-webkit-details-marker { display: none; }
.lt-cite-src { font-size: 12px; font-style: italic; opacity: 0.65; }
.lt-register--source blockquote {
  margin: 10px 0 0; padding: 0 0 0 12px;
  border-left: 2px solid rgba(255, 184, 54, 0.35);
  font-style: italic; font-size: 13.5px; line-height: 1.55; opacity: 0.9;
}
.lt-register--doctrine p { margin: 0 0 11px; font-size: 15.5px; line-height: 1.6; color: #efe5c2; }
.lt-register--doctrine p:last-child { margin-bottom: 0; }
.lt-demo {
  display: block; width: 100%; padding: 12px;
  border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 184, 54, 0.18), rgba(255, 184, 54, 0.08));
  border: 1px solid rgba(255, 184, 54, 0.55);
  color: var(--color-accent-2, #FFD263);
  font-family: 'Cinzel', Georgia, serif; font-size: 13px; letter-spacing: 0.08em;
}
.lt-demo[disabled] { opacity: 0.6; }
.lt-check { padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(201, 162, 75, 0.35); }
.lt-check-q { margin: 0 0 10px; font-size: 14.5px; }
.lt-check-choice {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(14, 18, 36, 0.6); border: 1px solid rgba(201, 162, 75, 0.25);
  color: #e8dcc0; font-family: inherit; font-size: 13.5px;
}
.lt-check-choice.is-right { border-color: #6cc870; color: #b8f0b8; }
.lt-check-choice.is-wrong { border-color: #e88080; color: #f0b8b8; }
.lt-check-result { margin: 6px 0 0; font-style: italic; font-size: 13px; }
.lt-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.lt-nav-btn {
  max-width: 48%; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid rgba(201, 162, 75, 0.3);
  color: #d4c79a; font-family: 'Cinzel', Georgia, serif; font-size: 11px;
  letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* HOME reference row — Information + The Course link buttons at the
   foot of the HOME screen, always reachable. */
.home-reference-row {
  display: flex; gap: 10px; margin-top: 16px;
}
.home-ref-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 26%, transparent);
  color: var(--color-fg, #f0e5c2);
  font-family: 'EB Garamond', Georgia, serif;
  text-align: left;
}
.home-ref-btn:hover {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
}
.home-ref-btn__title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px; letter-spacing: 0.05em;
  color: var(--color-accent-2, #FFD263);
}
.home-ref-btn__sub {
  font-size: 11px; opacity: 0.66; margin-top: 3px;
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ═════════════════════════════════════════════════════════════════════
   INFO-INDEX I5 — Information deck (#pa-info-deck)
   ───────────────────────────────────────────────────────────────────── */

.pa-info-deck { max-width: 720px; margin: 0 auto; }

.pid-header { margin-bottom: 14px; }
.pid-header h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px; letter-spacing: 0.08em;
  color: var(--color-accent-2, #FFD263);
  margin: 0 0 4px;
}
.pid-header-sub {
  margin: 0; font-style: italic; opacity: 0.66;
  font-size: 13px; color: var(--color-fg, #f0e5c2);
}

.pid-tagbar {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
}
.pid-tag {
  padding: 4px 10px; font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 28%, transparent);
  background: transparent; color: var(--color-fg, #f0e5c2);
  border-radius: 11px; cursor: pointer;
}
.pid-tag.is-active {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 25%, transparent);
  color: var(--color-accent-2, #FFD263);
}

.pid-grid {
  display: grid; grid-template-columns: 1fr; gap: 6px;
}

.pid-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; text-align: left;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  border-radius: 10px; color: var(--color-fg, #f0e5c2); cursor: pointer;
  font-family: 'EB Garamond', Georgia, serif;
}
.pid-row:hover, .pid-row.lp-pressing {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 12%, transparent);
}
.pid-row-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 16%, transparent);
  color: var(--color-accent-2, #FFD263);
  border-radius: 50%; font-size: 14px; flex-shrink: 0;
  text-transform: capitalize;
}
.pid-row-glyph--empty { opacity: 0.45; }
.pid-row-body { flex: 1; min-width: 0; }
.pid-row-title {
  display: block; font-weight: 600; font-size: 15px;
  color: var(--color-accent-2, #FFD263);
}
.pid-row-short {
  display: block; font-size: 12.5px; opacity: 0.78; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pid-row-cta { font-size: 18px; opacity: 0.5; }

/* Entry page */
.pid-entry-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
}
.pid-back {
  display: inline-block; margin-bottom: 8px;
  padding: 4px 10px; font-size: 12px; letter-spacing: 0.04em;
  background: transparent; border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 30%, transparent);
  color: var(--color-accent-2, #FFD263); border-radius: 8px; cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
}
.pid-entry-headline { display: flex; align-items: center; gap: 14px; }
.pid-entry-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 20%, transparent);
  color: var(--color-accent-2, #FFD263);
  border-radius: 50%; font-size: 22px; flex-shrink: 0;
  text-transform: capitalize;
}
.pid-entry-titles h1 {
  margin: 0; font-family: 'Cinzel', Georgia, serif;
  font-size: 22px; letter-spacing: 0.06em;
  color: var(--color-accent-2, #FFD263);
}
.pid-entry-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.pid-tag-chip {
  padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 14%, transparent);
  color: var(--color-fg, #f0e5c2); opacity: 0.78;
  font-family: 'Cinzel', Georgia, serif;
}
.pid-tag-chip--synth {
  background: color-mix(in srgb, #b87cdc 30%, transparent);
  color: #f0d8ff;
}

.pid-facet { margin-bottom: 20px; }
.pid-facet-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-2, #FFD263); opacity: 0.78; margin-bottom: 6px;
}
.pid-facet--astronomy .pid-facet-label {
  color: color-mix(in srgb, #8fb6e8 80%, var(--color-accent-2, #FFD263));
}
.pid-facet-def {
  margin: 0 0 10px; font-size: 15px; line-height: 1.55;
  color: var(--color-fg, #f0e5c2);
}
.pid-engine {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.5;
  font-style: italic; opacity: 0.78;
  padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--color-accent, #FFB836) 32%, transparent);
}
.pid-doctrine {
  margin: 10px 0; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 6%, transparent);
}
.pid-doctrine-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-2, #FFD263); opacity: 0.65; margin-bottom: 4px;
}
.pid-doctrine p {
  margin: 0; font-size: 13.5px; line-height: 1.55; opacity: 0.92;
}

.pid-source {
  margin-top: 10px; padding: 8px 11px;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 22%, transparent);
  border-radius: 8px; font-size: 12.5px;
}
.pid-source-attrib {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-2, #FFD263); opacity: 0.78; margin-bottom: 4px;
}
.pid-source-body {
  font-style: italic; opacity: 0.86; line-height: 1.5;
}

.pid-related { margin-top: 16px; }
.pid-related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pid-related-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--color-accent, #FFB836) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #FFB836) 24%, transparent);
  color: var(--color-fg, #f0e5c2); font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
}
.pid-related-chip:hover, .pid-related-chip.lp-pressing {
  background: color-mix(in srgb, var(--color-accent, #FFB836) 18%, transparent);
}
.pid-related-glyph {
  color: var(--color-accent-2, #FFD263); opacity: 0.88;
  text-transform: capitalize;
}

/* ── OB-06 — gesture coachmark ─────────────────────────────────────────────
   Teaches tap = why · long-press = define + source. A single dismissible bottom
   card in the tour z-band (9945 — above the tours' spotlight, below the V2
   splash at 99999). Mirrored to styles.min.css. */
.ob-gesture-coachmark {
  position: fixed; inset: 0; z-index: 9945;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 88px);
  background: rgba(6, 10, 20, 0.32);
  opacity: 0; transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.ob-gcm-card {
  max-width: 460px; width: 100%;
  background: var(--color-surface, #11161f);
  border: 1px solid var(--color-accent-2, #FFD263);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--color-text, #e8eaf0);
  font-size: 14px; line-height: 1.5;
}
.ob-gcm-line { margin: 0 0 8px; }
.ob-gcm-gesture {
  display: inline-block; font-weight: 700;
  color: var(--color-accent-2, #FFD263);
}
.ob-gcm-dismiss {
  margin-top: 6px; width: 100%;
  background: var(--color-accent-2, #FFD263); color: #11161f;
  border: 0; border-radius: 10px; padding: 10px 0;
  font-weight: 700; font-size: 14px; cursor: pointer;
}

/* ── OB-07 — help-ladder deep-links ────────────────────────────────────────
   explain → glossary ("Define this term →") and glossary → Learn ("Learn this
   → <lesson>"). Quiet, link-styled buttons in the accent colour. Mirrored. */
.pa-explain-define, .pid-learn-link {
  display: block; width: 100%; margin-top: 8px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent-2, #FFD263) 45%, transparent);
  border-radius: 10px; padding: 9px 12px;
  color: var(--color-accent-2, #FFD263);
  font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.pa-explain-define:hover, .pid-learn-link:hover {
  background: color-mix(in srgb, var(--color-accent-2, #FFD263) 12%, transparent);
}

/* OB-08 — Learn invite's secondary "Not now" (reuses the coachmark card). */
.ob-learn-skip {
  margin-top: 8px; width: 100%;
  background: transparent; border: 0;
  color: var(--color-text-muted, #9aa3b2);
  font-size: 13px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   READING PROSE — READABILITY PASS (2026-07-18)
   ───────────────────────────────────────────────────────────────────────────
   Measured on-device in light mode, the synastry/natal reading prose rendered
   as "Cormorant Garamond" ITALIC in a parchment tint — .pa-syn-intro came out
   rgb(232,216,168) tan on a cream page, and .pa-syn-para-verdict pale lavender.
   A long italic serif at low contrast is hard work on a desktop and close to
   unreadable on a phone; these are the app's longest prose blocks, so they are
   exactly the wrong place to spend legibility on atmosphere.

   Two rules, deliberately narrow:
     1. BODY PROSE gets the UI face (--type-body, Inter) upright, in BOTH
        themes. Display faces stay where they belong — Cinzel section headings
        are short, uppercase and legible, so they are untouched.
     2. LIGHT MODE forces near-black ink on that same prose, since the
        parchment tints were authored against a dark ground and simply do not
        survive on white.

   The selector leads with :is(#synastry-app, …), whose specificity resolves to
   its highest argument (an id), so this matches the (1,1,0) of the rules it
   supersedes and wins on source order — no !important needed, and per-element
   overrides further down a page still work.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#synastry-app, #at-synastry-reading, #at-natal-reading, .atn-natal) :is(
  .pa-syn-intro, .pa-syn-para, .pa-syn-para-verdict, .pa-syn-why-body,
  .pa-syn-modern-note, .pa-syn-tl-relevance,
  .atn-verdict, .atn-confluence, .atn-sensitivity, .atn-timenote-p,
  .atn-lifearc-line, .atn-convergence-intro, .atn-tension-echo,
  .atn-closing-line, .atn-exec-headline, .atn-exec-overall, .atn-dom-primer,
  .atn-subhead, .atn-modern-synthesis-note,
  .atn-register--step .atn-reg-body p, .at-register, .at-register--step
) {
  font-family: var(--type-body);
  font-style: normal;
}

/* Light mode: the reading is a document, so it reads as ink on paper. */
html.theme-light-mode :is(#synastry-app, #at-synastry-reading, #at-natal-reading, .atn-natal) :is(
  .pa-syn-intro, .pa-syn-para, .pa-syn-para-verdict, .pa-syn-why-body,
  .pa-syn-modern-note, .pa-syn-tl-relevance,
  .atn-verdict, .atn-confluence, .atn-sensitivity, .atn-timenote-p,
  .atn-lifearc-line, .atn-convergence-intro, .atn-tension-echo,
  .atn-closing-line, .atn-exec-headline, .atn-exec-overall, .atn-dom-primer,
  .atn-subhead, .atn-modern-synthesis-note,
  .atn-register--step .atn-reg-body p, .at-register, .at-register--step,
  .pa-syn-h3, .pa-syn-h4, .atn-h2, .atn-h3
) {
  color: var(--ink-strong, #0a0a0a);
}

/* Inline emphasis inside that prose inherits the ink rather than keeping a
   dark-ground accent tint — a gold <em> on white is the same washed-out
   problem one level down. */
html.theme-light-mode :is(#synastry-app, #at-synastry-reading, #at-natal-reading, .atn-natal) :is(
  .pa-syn-intro, .pa-syn-para, .pa-syn-para-verdict, .atn-verdict, .atn-exec-overall
) :is(em, i, b, strong, span:not([class])) {
  color: inherit;
}

/* ── Synastry scoring provenance callout ────────────────────────────────
   The "where does this number come from" note at the head of Scoring Method.
   Marked with a ? so it reads as an explainer rather than more body prose. */
.pa-syn-provenance {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 16px; padding: 12px 14px;
  border-left: 3px solid var(--color-accent, #FFB836);
  background: color-mix(in srgb, var(--color-accent, #FFB836) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.pa-syn-prov-q {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-accent, #FFB836);
  color: var(--color-accent-2, #FFD263);
  font: 700 13px/1 "Inter", system-ui, sans-serif;
}
.pa-syn-prov-body { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* AI-07 — the bond-lens framing note under the mode picker. */
.ai-lens-note {
  margin: 4px 12px 0; font-size: 11.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--color-fg, #F0E5C2) 62%, transparent);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   BRIEF MODE — HOROSCOPE (spec §4) and SYNASTRY (spec §5)
   ═══════════════════════════════════════════════════════════════════════
   ⚠️ REWRITTEN AGAINST THE REAL DOM. The first version of this block was
   written from the spec's PROSE — I invented class names like
   `.pa-syn-sec--capacity` and `.ath-tr-card` that do not exist anywhere in the
   app, so the CSS matched nothing and Brief silently did nothing on either
   surface while I reported it as shipped. Every selector below was read out of
   the renderers. If you add rules here, grep the renderer first.

   Synastry sections had NO per-phase identifier at all (every one emitted the
   same two classes), so `data-syn-sec` was added to sec() to make them
   targetable — the fix had to start in the markup, not the stylesheet.

   HOROSCOPE keeps: the Classical Agreement chip, Year structure, Current
   trigger, Judgement, Natal Promise, one headline per technique row, and the
   next/recent contact lines. Hidden: the classical working block and the full
   transit list with its per-contact detail, filters and browse-all. */
.ath-reading.brief-mode .ath-working,
.ath-reading.brief-mode .ath-tr-list,
.ath-reading.brief-mode .ath-tr-detail,
.ath-reading.brief-mode .ath-tr-detail-block,
.ath-reading.brief-mode .ath-tr-filters,
.ath-reading.brief-mode .ath-tr-browse,
.ath-reading.brief-mode .ath-expand {
  display: none;
}

/* SYNASTRY keeps: the Verdict strip, the at-a-glance bond list, the Verdict
   block, Mechanism, the Bond Judgement and the Modern Synthesis card. Hidden:
   the four per-phase detail sections and the methodology registers inside
   them. Scoring Method is NOT hidden — it is contractually free in every tier
   (D14/PW-I5) and folds under the methodology toggle instead. */
.at-synastry-reading.brief-mode .pa-syn-reading-section[data-syn-sec="capacity"],
.at-synastry-reading.brief-mode .pa-syn-reading-section[data-syn-sec="temperament"],
.at-synastry-reading.brief-mode .pa-syn-reading-section[data-syn-sec="aspects"],
.at-synastry-reading.brief-mode .pa-syn-reading-section[data-syn-sec="reception"] {
  display: none;
}
.at-synastry-reading.brief-mode .at-register--source,
.at-synastry-reading.brief-mode .pa-syn-modern-note {
  display: none;
}

/* ── In-app PDF viewer (devices that cannot download) ────────────────────
   Deliberately neutral chrome: the PAGES carry the report's own theme, so the
   surround must not compete with either the dark or the light export. */
.pdfv-host {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; flex-direction: column;
  background: #14151A;
}
.pdfv-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: #1C1D23; border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #F2F2F4;
}
.pdfv-title { font: 600 14px/1.2 "Inter", system-ui, sans-serif; }
.pdfv-page  { font: 500 12px/1.2 "Inter", system-ui, sans-serif; opacity: 0.7; }
.pdfv-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); background: transparent;
  color: #F2F2F4; font-size: 15px; cursor: pointer;
}
.pdfv-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pdfv-page-canvas {
  display: block; max-width: 100%;
  box-shadow: 0 3px 18px rgba(0,0,0,0.5); border-radius: 2px;
}
.pdfv-slot {
  display: block; background: rgba(255,255,255,0.05); border-radius: 2px;
  box-shadow: 0 3px 18px rgba(0,0,0,0.5); flex: 0 0 auto;
}
.pdfv-status { color: #C9C9CF; font: 400 13px/1.5 "Inter", system-ui, sans-serif; padding: 40px 20px; text-align: center; }

/* ── Export control: prominent, below the back arrow ─────────────────────
   It was a 30px ⬇ glyph inside the top-right header cluster. On a phone that
   cluster already holds the theme toggle, Brief|Full, Show methodology and the
   back arrow, so the export wrapped out of sight — invisible on Android, which
   means the paid artefact had no visible way out of the app.
   Pulled out of the cluster into its own fixed chip UNDER the back arrow, with
   a word on it. Fixed (not absolute) so it rides with the pinned header. */
/* ⚠️ UPDATE (2026-07-18 header layout pass): the fixed lane above is GONE. It
   existed only because the single-row header cluster overflowed, and an
   out-of-flow chip is precisely what defeated the earlier attempt to fix that
   overflow by wrapping — the flowed items wrapped straight into this chip's
   space. The header is now three banded rows and Export flows in band 3
   (#at-header-aux), which has ~200px of slack, so it needs no reserved lane.
   `position` is left to the element's inline `relative`, which is also the
   containing block the invisible <select> overlay is absolutely positioned
   against — do not set `position` here. */
#at-export-wrap {
  width: auto !important;
  height: auto !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  gap: 7px;
  z-index: 21;
  font: 600 11px/1 "Cinzel", Georgia, serif !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#at-export-wrap::after {
  content: attr(data-export-label);
  font: inherit;
  letter-spacing: inherit;
}

/* ── Corner mode chips clear the dials ───────────────────────────────────
   HOROSCOPE (bottom-left) and SYNASTRY (bottom-right) sat at the same height
   as the three gauge captions, so the chips and the caption text collided once
   the dials moved down and the captions grew. Drop the chips below the caption
   band; the dial cluster owns that strip now. */
#at-horoscope-btn, #at-synastry-btn,
.at-cornerbtn--horoscope, .at-cornerbtn--synastry {
  bottom: calc(var(--mode-bar-h, 80px) + 6px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERLAP SWEEP before the final APK (2026-07-18)
   ═══════════════════════════════════════════════════════════════════════
   Found by walking the rendered DOM for intersecting rects and asking
   elementFromPoint who actually wins each collision, rather than by reading
   screenshots. Two root causes, ten symptoms.

   (1) THE BODY HEADER STAYS MOUNTED UNDER THE THEATRE. The app's own header
   row — the six action buttons 📚 ✦ 📍 📸 ⓘ 📖 — sits at top:0 and remains
   display:flex and interactive while the Theatre (z-index 9700) covers the
   whole viewport. So all six were unreachable but still in the hit and
   accessibility trees, and every one of them registered as a buried control.
   The Theatre carries its own header, so the body one must stand down while it
   is open. Hidden rather than merely lowered: a control you cannot see should
   not be focusable either.
   ⚠️ Uses :has(). If a WebView lacks it the rule simply does not apply, which
   is exactly today's behaviour — so this cannot regress anything. */
body:has(#aether-theatre:not([hidden])) > #app > header {
  visibility: hidden;
  pointer-events: none;
}

/* (2) THE PERSON-B NAME PILL RAN OFF THE SCREEN. In synastry the wrap spanned
   x=200..422 on a 412px viewport, so "Paul McCartney" ran under the NATAL
   badge (335..388) AND past the right edge. Reserve the badge's lane and let a
   long name ellipsise instead of colliding — a truncated name the user can
   still read beats a complete one hidden behind a button. */
#at-personb-wrap {
  max-width: calc(100vw - 232px);
  box-sizing: border-box;
}
#at-personb-wrap .at-profile-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* (3) HEADER CLUSTER OVERFLOW — FIXED 2026-07-18 by the header layout pass.
   The diagnosis below stands; the resolution is in js/ui/aetherTheatre.js, where
   the single header row became three banded rows (#at-header-identity /
   #at-header-cluster / #at-header-aux), each with a hard boundary excluding the
   fixed items' lanes, and Export was returned to the flow. Kept verbatim because
   the measurements and the failed attempt are the reason the fix took the shape
   it did.

   ORIGINAL DIAGNOSIS. Measured at 412px:
   the cluster runs x=68..442, i.e. 30px past the screen, because it is
   flex-wrap:nowrap and has accumulated items (theme, Brief|Full, Show
   methodology, Export, ?, Bond Score, back). Whatever overflows stacks on
   what is already there — that is why "?" lands under the back button and
   Bond Score under the methodology pill. It is not a z-index problem.

   ⚠️ I TRIED `flex-wrap: wrap` HERE AND REVERTED IT. It fixed the overflow but
   created NEW collisions on the second row, because the back button and the
   Export chip are position:fixed and do not participate in the wrap — the
   flowed items simply wrapped into their space. One collision better, another
   worse.

   The real fix is a header layout pass: either move the fixed items into the
   flow so wrapping governs everything, or give the cluster a hard right
   boundary that excludes their lanes. That is a design change, not a CSS
   patch, so it is left for a session with room to do it properly rather than
   guessed at here. The two ROOT causes above are fixed and account for 6 of
   the 9 buried controls. */


/* ── WHEEL-OVERFLOW ─────────────────────────────────────────────────────────
   Every chart wheel is an <svg data-wheel="svg"> whose viewBox is -50 → 550:
   the wheel itself occupies units 0..500 and the four axis labels (ASC / DSC /
   MC / IC) live in the 50-unit gutters outside it.

   axisLabelPlacement() already pins those labels INSIDE the viewBox — measured,
   AC starts at x=-49 and DC ends at 548 against bounds of -50/550 — so nothing
   clips within the SVG. The clipping reported on device came from the SVG being
   rendered WIDER THAN ITS CONTAINER: synastryWheel defaults to size:600 and the
   theatre passes fixed pixel sizes, so on a 412px screen the container cuts off
   precisely the two horizontal gutters, which is why the wheel looked complete
   while "ASC Ari 20°16'" showed as "i 20°16'".

   Constraining the SVG lets the viewBox scale instead of overflowing, so the
   labels shrink with the wheel rather than being cropped. `height:auto` keeps
   the aspect ratio; the viewBox does the rest.

   One rule for all five consumers (theatre, synastry, walkthrough, AI, today)
   because the fix belongs at the element, not at each call site's size
   argument — a new caller would otherwise reintroduce it. */
svg[data-wheel="svg"] {
  max-width: 100%;
  height: auto;
}

/* ── CORNER-CAP OVERFLOW ────────────────────────────────────────────────────
   The at-a-glance captions under the Astronomy corner buttons are absolutely
   positioned at left:50% + translateX(-50%) — centred on a ~44px button. A
   short caption ("Help", "Ephemeris") fits; a long one does not. "Celestial
   Sphere" renders ~130px wide, so centred on a button in the RIGHT corner it
   extends ~65px past the button centre and runs off the screen edge, which is
   the reported "text running off the page".

   The caption cannot simply be narrowed — it would ellipsise a two-word label
   into meaninglessness. Instead it is allowed to WRAP and capped at a width
   that fits beside the corner, so "Celestial Sphere" sets as two centred lines
   under its button rather than one line off the edge.

   Applies to the caption only; the button geometry is untouched, so nothing
   that positions against the button moves. */
.ah-corner-cap {
  max-width: 84px;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.15;
}

/* ── DOB-01 — typeable birth date / time ─────────────────────────────────────
   Replaces the native date/time pickers, which on Android open spinner wheels:
   a birth year took ~30 scroll flicks and could not be typed at all. These are
   plain text inputs, so the numeric keypad opens and the value is TYPED.
   Sized for thumbs — the defect was reported on mobile. */
.pa-typed {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}
.pa-typed-seg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pa-typed-seg.is-year { flex: 1.4 1 0; }
.pa-typed-seg.is-month { flex: 1.1 1 0; }
.pa-typed-seg.is-day { flex: 1 1 0; }
.pa-typed-lbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
  white-space: nowrap;
}
.pa-typed-in {
  width: 100%;
  min-width: 0;
  /* 16px minimum — anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
  padding: 10px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  color: inherit;
}
.pa-typed-in:focus {
  outline: none;
  border-color: var(--accent, #d6b45c);
  box-shadow: 0 0 0 2px rgba(214, 180, 92, 0.25);
}
.pa-typed.is-bad .pa-typed-in { border-color: rgba(220, 90, 90, 0.75); }
.pa-typed-mer {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 42px;                 /* thumb target */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  color: inherit;
  cursor: pointer;
}
.pa-typed-mer:hover { border-color: var(--accent, #d6b45c); }
.pa-typed-echo {
  font-size: 12.5px;
  min-height: 1.2em;
  opacity: 0.8;
  margin: -2px 0 10px;
}
.pa-typed-echo.is-bad { color: rgba(228, 120, 120, 0.95); opacity: 1; }

/* OA-08 — the locked judgement list. UI, so the prose never has to advertise. */
.ai-locked-list{margin:14px 0 0;padding:11px 13px;border:1px solid var(--chrome-rod,#3a3428);
  border-radius:9px;background:color-mix(in srgb, var(--panel,#14110b) 88%, transparent)}
.ai-locked-list h4{margin:0 0 7px;font:600 11px/1.3 inherit;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold,#c8a86a)}
.ai-locked-list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:5px 7px}
/* R-P — THESE MUST READ AS LOCKED, NOT MERELY AS A LIST.
   A muted chip prefixed with a middle dot reads as "topics not covered", which
   is an absence. The chips are the strongest part of the ask — twelve titled
   things you cannot have yet — and that only works if they look withheld.
   Dashed border = the outline of something not yet filled in; the padlock is
   the app's EXISTING lock vocabulary (lockBanner.js, todayApp.js), reused
   rather than a second one invented. */
.ai-locked-list li{padding:3px 9px 3px 7px;border:1px dashed var(--chrome-rod,#3a3428);
  border-radius:999px;font-size:11.5px;color:var(--muted,#8f8a7e);opacity:.85;
  display:inline-flex;align-items:center;gap:4px}
/* A literal padlock, not a CSS escape — an escape written through a shell
   layer is how a NUL byte got into this file once already. */
.ai-locked-list li::before{content:'🔒';font-size:9px;opacity:.75;line-height:1}

/* OA-15 — the opening's ask, rendered BELOW the rail and the locked list.
   It used to be the prose's last line, which put it between the paragraph and
   the evidence — asking for the sale before showing the receipts. */
.ai-opening-cta{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--chrome-rod,#3a3428);
  font-size:12.5px;line-height:1.5;color:var(--color-fg,#e8e6df);opacity:.9}
.ai-opening-cta p{margin:0}