/* Evolutionary Astrology Dashboard — Phase 1
   Indigo & Crimson on white: a clean white ground (against the grain of
   moody dark astrology apps), vivid indigo as the primary accent, a rich
   crimson as the secondary ("sign", and a few other distinguishing
   spots). Serif for display headings, a clean system sans for everything
   you actually read, mono reserved for tabular/numeric data (positions,
   degrees, orbs) where fixed-width alignment earns its keep. Every
   accent-tinted background/shadow in this file is color-mix()'d off these
   variables, not hardcoded — swap a variable here and it propagates. */

:root {
  --bg:        #ffffff;   /* clean white — against the grain of moody dark astrology apps */
  --bg-2:      #f7f7f9;   /* panels — barely-there cool grey */
  --bg-3:      #eeeef2;   /* cards, discs, raised surfaces */
  --ink:       #17161c;   /* near-black, body text */
  --ink-dim:   #545159;   /* medium neutral grey */
  --ink-faint: #86828d;   /* lighter secondary, still legible on white */
  --line:      #e3e2e8;   /* soft cool-grey borders */
  --line-soft: #edecf1;

  --accent:    #6a5cff;   /* vivid periwinkle-indigo — primary */
  --accent-2:  #ea4a89;   /* brighter, more saturated rose — matched energy to the primary */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--line));
  /* the shared CTA gradient (New chart, Compare, Request a reading, every
     other primary button) — both stops blended a little toward the page
     background so it reads calmer than the raw accent pair, which ran
     "too aggressive" at full saturation across that many buttons */
  --cta-gradient: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 85%, var(--bg)),
    color-mix(in srgb, var(--accent-2) 85%, var(--bg)));

  /* four element tones, all derived from the two brand colors rather than
     independent hues, so the wheel and Element Balance stay in the same
     pink/indigo family as everything else instead of drifting on their own */
  --fire:  var(--accent-2);                                            /* rose */
  --earth: color-mix(in srgb, var(--accent-2) 40%, var(--accent) 60%); /* rose-into-indigo */
  --air:   var(--accent);                                              /* indigo */
  --water: color-mix(in srgb, var(--accent) 40%, var(--accent-2) 60%); /* indigo-into-rose */

  /* two aspect families, not four arbitrary hues: indigo = harmonious,
     rose = challenging, intensity carries major vs. minor within each */
  --neutral: var(--accent);         /* conjunction — fusion, full primary */
  --flowing: color-mix(in srgb, var(--accent) 62%, white);   /* trine / sextile — lighter primary, ease */
  --dynamic: var(--accent-2);       /* square / opposition — full secondary, tension */
  --friction: color-mix(in srgb, var(--accent-2) 62%, white); /* minor aspects — lighter secondary */

  /* the 12 archetypes — one muted hue each, ~element-themed, legible on white.
     --arch-1 = Aries/1st/Mars … --arch-12 = Pisces/12th/Neptune */
  --arch-1:  #c0483a;  --arch-2:  #7f6a3c;  --arch-3:  #3f6fb0;
  --arch-4:  #4f8f86;  --arch-5:  #cf9233;  --arch-6:  #6f8b48;
  --arch-7:  #9a78c8;  --arch-8:  #9c3f66;  --arch-9:  #b5683c;
  --arch-10: #55606e;  --arch-11: #3fa0bf;  --arch-12: #5b62ac;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
           Georgia, "Times New Roman", serif;
  --sans:  "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", "Menlo", "Consolas", ui-monospace, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.34, .12, .16, 1);   /* gentler, journey-like */
  --dur:  .32s;
  --dur-slow: .5s;

  /* one rounding scale — softer, consistent */
  --r-sm:  9px;    /* inputs, chips, small controls */
  --r-md:  13px;   /* cards, panels, detail blocks */
  --r-lg:  18px;   /* the major standing blocks */
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(ellipse 1100px 720px at 12% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%),
    radial-gradient(ellipse 1000px 680px at 92% 108%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 55%),
    radial-gradient(ellipse 900px 520px at 60% 40%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 68%),
    linear-gradient(178deg, color-mix(in srgb, var(--accent) 3%, var(--bg)), var(--bg) 45%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* "Night sky" — an opt-in dark theme, toggleable from the nav on any
   page (Current Sky defaults to it; everywhere else defaults off until
   chosen). Re-points the full neutral + accent token set rather than
   just the two accents, since a dark theme needs its ink/line colors
   inverted too — every existing --bg/--ink/--line/--accent usage across
   the whole shared component set (wheel, tables, cards, buttons)
   inverts for free. */
body.theme-night {
  --bg: #0a0b16;
  --bg-2: #13152a;
  --bg-3: #1b1d38;
  --ink: #f1f0f5;
  --ink-dim: #b5b2c6;
  --ink-faint: #7b7891;
  --line: #2b2d4a;
  --line-soft: #202138;
  --accent: #8478ff;
  --accent-2: #f568a2;
  background:
    radial-gradient(1.3px 1.3px at 8% 12%, #fff, transparent),
    radial-gradient(1px 1px at 22% 68%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 38% 28%, #fff, transparent),
    radial-gradient(1px 1px at 54% 82%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 15%, #fff, transparent),
    radial-gradient(1px 1px at 79% 55%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 91% 38%, #fff, transparent),
    radial-gradient(1px 1px at 12% 90%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 85% 78%, #fff, transparent),
    radial-gradient(ellipse 1000px 700px at 15% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 650px at 90% 105%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

/* the ambient orbiters night.js injects behind the page content — same
   tilted-ellipse language as the landing hero, toned down to pure
   background texture and fixed to the viewport so it drifts behind
   whatever page you're actually reading */
.night-orbiters {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden; opacity: 0;
  transition: opacity .6s var(--ease-soft);
}
body.theme-night .night-orbiters { opacity: 1; }
.night-orbiters svg { position: absolute; top: 50%; left: 50%;
  width: min(85vw, 900px); height: min(85vw, 900px); transform: translate(-50%, -50%); }
.night-orbit-ring { fill: none; stroke: var(--accent); stroke-opacity: .1; stroke-width: 1; }
.night-orbit-ring-2 { stroke: var(--accent-2); stroke-opacity: .09; }
.night-orbit-glyph { font-family: var(--serif); font-size: 15px; fill: var(--accent); opacity: .35; }
.night-orbit-glyph-2 { fill: var(--accent-2); }
@media (prefers-reduced-motion: no-preference) {
  .night-orbiter { transform-origin: 300px 300px; animation: night-orbit-cw 100s linear infinite; }
  .night-orbiter.is-ccw { animation-name: night-orbit-ccw; }
  .night-orbiter-counter { transform-box: fill-box; transform-origin: center; animation: night-orbit-ccw 100s linear infinite; }
  .night-orbiter.is-ccw .night-orbiter-counter { animation-name: night-orbit-cw; }
}
@keyframes night-orbit-cw  { to { transform: rotate(360deg); } }
@keyframes night-orbit-ccw { to { transform: rotate(-360deg); } }

/* small colored planets drifting past at their own depth/speed — the
   site's own element tones (fire/earth/air/water, already derived from
   the two brand colors) rather than arbitrary rainbow dots */
.night-planet {
  position: absolute; border-radius: 50%;
  opacity: 0;
}
/* a soft light trail behind the ones that get one — a gradient streak
   in the planet's own color, pointing back the way it came */
.night-planet.has-trail::before {
  content: ""; position: absolute; top: 50%; right: 100%;
  width: 60px; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, currentColor);
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .night-planet { animation: night-planet-drift linear infinite; }
}
@keyframes night-planet-drift {
  0%   { opacity: 0; transform: translateX(-8vw); }
  8%   { opacity: .85; }
  92%  { opacity: .85; }
  100% { opacity: 0; transform: translateX(108vw); }
}

/* the occasional comet — rare on purpose, a real night sky doesn't
   stream shooting stars constantly */
.night-comet {
  position: absolute; top: -5%; left: 100%;
  width: 110px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0; transform: rotate(24deg);
}
@media (prefers-reduced-motion: no-preference) {
  .night-comet { animation: night-comet-streak linear infinite; }
}
@keyframes night-comet-streak {
  0%, 96% { opacity: 0; transform: translate(0, 0) rotate(24deg); }
  97% { opacity: .9; }
  99.5% { opacity: 0; }
  100% { opacity: 0; transform: translate(-130vw, 90vh) rotate(24deg); }
}

/* the nav toggle button */
.night-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: var(--r-pill);
  /* the standard spot for a theme toggle: pinned to the far end of the
     header, separated from the nav links and language pills rather
     than wrapping inline with them */
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)),
    var(--bg);
  color: var(--accent);
  transition: color .2s var(--ease-soft), background .2s var(--ease-soft),
    border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft), transform .2s var(--ease-soft);
}
.night-toggle:hover { transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 14%, transparent); }
.night-toggle.is-on {
  position: relative;
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 88%, var(--bg)),
    color-mix(in srgb, var(--accent-2) 88%, var(--bg)));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.night-toggle.is-on:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-2) 26%, transparent); }
/* a slow breathing glow and a tiny twinkling star — the button carries
   a little of the sky it's switching on, at rest not just on hover */
@media (prefers-reduced-motion: no-preference) {
  .night-toggle.is-on { animation: night-toggle-breathe 4.5s ease-in-out infinite; }
  .night-toggle.is-on::after {
    content: ""; position: absolute; top: 4px; right: 11px;
    width: 3px; height: 3px; border-radius: 50%; background: #fff;
    opacity: 0; pointer-events: none;
    animation: night-toggle-twinkle 3.4s ease-in-out infinite 1.2s;
  }
}
@keyframes night-toggle-breathe {
  0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-2) 22%, transparent); }
  50% { box-shadow: 0 2px 16px color-mix(in srgb, var(--accent-2) 40%, transparent); }
}
@keyframes night-toggle-twinkle {
  0%, 85%, 100% { opacity: 0; transform: scale(.6); }
  92% { opacity: .9; transform: scale(1); }
}

/* reading surfaces — larger, roomier body text */
.read-body p, .read-ea p, .chapter-body p, .syn-layer p,
.voc-full p, .voc-term-flat p, .voc-gloss,
.sky-t-detail p, .pp-body p {
  font-size: 15.5px;
  line-height: 1.72;
}

.app {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 100vh;
}

/* --------------------------------------------------------- side panel */
.panel {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; gap: 12px; align-items: baseline; }
.brand-mark {
  font-size: 22px; color: var(--accent);
  line-height: 1;
}
.brand h1 {
  font-family: var(--serif);
  font-size: 20px; font-weight: 600;
  margin: 0; letter-spacing: .01em;
}
.brand p { margin: 2px 0 0; color: var(--ink-dim); font-size: 12px; }

/* Nodal wordmark */
.brand .brand-name {
  font-family: var(--serif);
  font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  margin: 0;
}

.brand .brand-tag {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-faint);
  margin: 1px 0 0;
}
/* on the sub-pages the page name (h1) sits just under the wordmark */
.brand .brand-name + h1 { margin-top: 1px; font-size: 19px; }
.voc-link { color: var(--ink-dim); text-decoration: none; transition: color .15s; }
.voc-link:hover { color: var(--accent); }

/* every important term links to its Library entry — subtle until hovered */
.lib-xref {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color .15s, border-color .15s;
}
.lib-xref:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── the animated brand mark (mark.js injects the SVG) ────────────
   a nested four-point star — the four points read as the four
   elements / triplicities. Two layers counter-rotate and a faint
   element-tinted quad drifts behind them: a slow kaleidoscope. */
.kmark {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -0.16em; overflow: visible; flex: none;
}
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark .kmark { width: 27px; height: 27px; }
.lp-mark { display: inline-flex; align-items: center; }
.lp-mark .kmark { width: 36px; height: 36px; margin-right: 7px; }

.kmark-outer, .kmark-inner {
  transform-box: fill-box; transform-origin: center;
  fill: none; stroke-width: 5.2; stroke-linecap: round;
}
.kmark-outer { stroke: var(--accent-2); }
.kmark-inner { stroke: currentColor; }
.kmark-node { fill: var(--ink); }
.korbit { transform-box: view-box; transform-origin: 32px 32px; }
.korbit circle { fill: var(--accent-2); }
.korbit.korbit-2 circle { fill: currentColor; opacity: .55; }
.korbit.korbit-3 circle { fill: var(--accent-2); opacity: .4; }
.kmark .korbit { display: none; }
.kmark--orbit .korbit { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .kmark--spin .kmark-outer { animation: kmark-cw 42s linear infinite; }
  .kmark--spin .kmark-inner { animation: kmark-ccw 30s linear infinite; }

  .brand-mark { transition: none; }
  .brand-mark:hover .kmark-outer { animation-duration: 9s; }
  .brand-mark:hover .kmark-inner { animation-duration: 6s; }

  .kmark--orbit .korbit-1 { animation: kmark-cw 15s linear infinite; }
  .kmark--orbit .korbit-2 { animation: kmark-ccw 24s linear infinite; }
  .kmark--orbit .korbit-3 { animation: kmark-cw 37s linear infinite; }
}
@keyframes kmark-cw  { to { transform: rotate(360deg); } }
@keyframes kmark-ccw { to { transform: rotate(-360deg); } }

/* shared site nav (nav.js) — inline on the wide-header pages */
.site-nav {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 6px; font-size: 12px; line-height: 1.5;
  padding-bottom: 5px;
}
.site-nav a { color: var(--ink-dim); text-decoration: none; transition: color .15s; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.site-nav-here { color: var(--ink); font-weight: 600; }
.site-nav-dot { color: var(--line); }
.site-nav-div { color: var(--line-soft); margin: 0 3px; }

/* the marker line that follows the pointer and springs back to the
   current page (positioned by nav.js). */
.site-nav-marker {
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
  transition: top .2s cubic-bezier(.4, 0, .2, 1),
              left .2s cubic-bezier(.4, 0, .2, 1),
              width .2s cubic-bezier(.4, 0, .2, 1),
              height .2s cubic-bezier(.4, 0, .2, 1),
              opacity .15s;
}

/* language switcher — a small tail on the shared nav (nav.js + i18n.js) */
.lang-switch { display: flex; gap: 3px; align-items: center; margin-left: 4px; }
.lang-btn {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: none; color: var(--ink-faint);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.lang-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.lang-btn.is-active {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.panel .site-nav .lang-switch {
  margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.panel .site-nav .lang-btn { padding: 4px 9px; }

/* dashboard sidebar — a proper stacked menu, a little more present */
.panel .site-nav {
  flex-direction: column; align-items: stretch;
  gap: 2px; margin-top: 14px;
  padding: 0; font-size: 14px;
}
.panel .site-nav .site-nav-dot { display: none; }
.panel .site-nav .site-nav-div {
  height: 1px; margin: 9px 2px; overflow: hidden; font-size: 0;
  background: var(--line-soft);
}
.panel .site-nav a,
.panel .site-nav .site-nav-here {
  position: relative; z-index: 1;
  display: block; padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink-dim); font-weight: 500;
  transition: color .15s;
}
.panel .site-nav a:hover { color: var(--ink); }
.panel .site-nav .site-nav-here {
  color: var(--accent-2); font-weight: 600;
}
/* the moving pill behind the hovered / current item — the pill fill plus
   colored, bolder text is signal enough on its own; a left inset bar on
   top of that read as a boxed-in "active tab" from another era */
.panel .site-nav .site-nav-marker {
  z-index: 0;
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border-radius: 9px;
}

#birth-form { display: flex; flex-direction: column; gap: 13px; }

.presets {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: var(--ink-dim);
}
.presets button {
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px; font: inherit; font-size: 12px;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.presets button:hover { border-color: var(--accent); color: var(--accent); }

/* collapsible sidebar blocks (birth data, saved charts) */
.side-block { border-top: 1px solid var(--line-soft); padding: 8px 0 2px; }
.side-block > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim); transition: color .15s;
}
.side-block > summary::-webkit-details-marker { display: none; }
.side-block > summary::before {
  content: "⌄ "; display: inline-block; transition: transform .18s;
}
.side-block[open] > summary::before { transform: rotate(180deg); }
.side-block > summary:hover { color: var(--accent); }
.side-block[open] > summary {
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: 8px; margin-left: -8px;
}
.new-chart { margin: 10px 0 4px; }
.side-block[open] { padding-bottom: 12px; }
#birth-panel[open] > summary { margin-bottom: 12px; }
.side-hint, .side-count {
  text-transform: none; letter-spacing: 0; color: var(--ink-faint);
  font-size: 10px; margin-left: 6px;
}
#saved-panel #save-chart-btn { margin: 8px 0 0; }
.saved-search {
  width: 100%; box-sizing: border-box; margin: 8px 0 0;
  font: inherit; font-size: 12px;
  padding: 6px 9px;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
}
.saved-search::placeholder { color: var(--ink-faint); }
.saved-search:focus { outline: none; border-color: var(--accent); }

.saved-list {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 180px; overflow-y: auto;
}
.saved-empty { color: var(--ink-faint); font-size: 12px; padding: 4px 2px; }
.saved-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-radius: 6px; padding: 2px 4px 2px 6px;
}
.saved-item[hidden] { display: none; }
.saved-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.saved-main { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.saved-name {
  font-size: 12.5px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.saved-meta {
  font-size: 10.5px; color: var(--ink-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.saved-item.is-default { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.saved-default {
  background: none; border: none; color: var(--ink-faint);
  font-size: 13px; line-height: 1; padding: 2px 5px; cursor: pointer;
  border-radius: 4px; flex-shrink: 0;
}
.saved-default:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.saved-item.is-default .saved-default { color: var(--accent); }
.saved-del {
  background: none; border: none; color: var(--ink-faint);
  font-size: 15px; line-height: 1; padding: 2px 6px; cursor: pointer;
  border-radius: 4px; flex-shrink: 0;
}
.saved-del:hover { color: var(--dynamic); background: color-mix(in srgb, var(--dynamic) 16%, transparent); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field[hidden] { display: none; }
.field > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim);
}
.field em { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

input[type=text], input[type=date], input[type=time], select, input[type=number] {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
  width: 100%;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
::placeholder { color: var(--ink-faint); }
input[type=date], input[type=time] { color-scheme: light; }

.geo-field { position: relative; }
.geo-results {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 20%, transparent);
  max-height: 220px; overflow-y: auto;
}
.geo-item {
  padding: 6px 9px; border-radius: 5px; font-size: 12.5px;
  color: var(--ink-dim); cursor: pointer;
}
.geo-item:hover, .geo-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }

.tzbox {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.tzbox legend {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim); padding: 0 4px;
}
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.radio + .radio { margin-left: 8px; }
.tzbox { }
.tzbox .radio { display: inline-flex; }

button.primary {
  background: var(--accent);
  color: #fff;
  border: none; border-radius: 7px;
  padding: 10px 14px; font: inherit; font-weight: 600;
  letter-spacing: .02em; cursor: pointer;
  transition: background .15s;
}
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
button.primary:disabled { filter: grayscale(.4) brightness(1.1); opacity: .6; cursor: wait; }

/* the one obvious way in: a real, visible button rather than something
   hidden behind the collapsed "Birth data" accordion below it. Its own
   gradient rather than the flat button.primary fill, matching the CTA
   language used everywhere else on the site (landing, synastry, request
   a reading) instead of reading as a plain form-submit button. */
button.primary.new-chart-top {
  width: 100%; padding: 11px 14px; font-size: 13.5px;
  border-radius: var(--r-pill);
  background: var(--cta-gradient);
  transition: transform .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}
button.primary.new-chart-top:hover {
  background: var(--cta-gradient);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-2) 26%, transparent);
}
button.sm { padding: 6px 11px; font-size: 12px; }
button.ghost {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 11px; font: inherit; cursor: pointer;
}

.form-error {
  background: color-mix(in srgb, var(--dynamic) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--dynamic) 45%, transparent);
  color: var(--dynamic);
  border-radius: 6px; padding: 8px 10px; margin: 0; font-size: 12px;
}

/* config */
.config { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.config summary {
  cursor: pointer; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-dim);
  list-style: none;
}
.config summary::-webkit-details-marker { display: none; }
.config summary::before { content: "▸ "; color: var(--accent); }
.config[open] summary::before { content: "▾ "; }
.config .hint { text-transform: none; letter-spacing: 0; color: var(--ink-faint); margin-left: 6px; }
.config .field .hint { margin-left: 0; margin-top: 4px; font-size: 11px; line-height: 1.4; font-style: normal; }
.config[open] { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.cfg-group { display: flex; flex-direction: column; gap: 7px; }
.cfg-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim);
}
.cfg-label em { text-transform: none; letter-spacing: 0; color: var(--accent-2); font-style: normal; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px 3px 6px;
  font-size: 12px; cursor: pointer; user-select: none;
}
.chip input { accent-color: var(--accent); margin: 0; }
.chip:has(input:checked) { border-color: var(--accent); color: var(--ink); }
.chip:not(:has(input:checked)) { color: var(--ink-faint); }
.chip-glyph { font-family: var(--serif); font-size: 14px; }

.cfg-aspect {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line-soft);
}
.cfg-aspect-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.cfg-aspect-name input { accent-color: var(--accent); }
.cfg-aspect-angle { color: var(--ink-faint); font-size: 11px; }
.cfg-orb { font-size: 11px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 4px; }
.cfg-orb input { width: 56px; padding: 3px 5px; font-family: var(--mono); }
.cfg-actions { display: flex; gap: 8px; }

.panel-foot p { color: var(--ink-faint); font-size: 11px; line-height: 1.45; margin: 0; }

/* --------------------------------------------------------- stage */
.stage { padding: 30px 34px 60px; overflow-x: hidden; }
.chart-head { margin-bottom: 14px; }
.chart-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: 27px; margin: 0;
  letter-spacing: .01em;
}
.chart-bigthree {
  margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 6px; font-size: 13.5px;
}
.b3-glyph { font-family: var(--serif); font-size: 15px; color: var(--accent-2); margin-right: 3px; }
.b3-label { color: var(--ink-faint); }
.b3-sign { color: var(--accent-2); font-weight: 600; }
.b3-sep { color: var(--line); margin: 0 2px; }
.chart-mode {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin: 10px 0 2px;
}
.cm-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-dim);
  transition: color .18s var(--ease-soft), background .18s var(--ease-soft), border-color .18s var(--ease-soft);
}
.cm-btn:hover { color: var(--ink); }
.cm-btn.is-active {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.cm-sr-fields, .cm-prog-fields { display: inline-flex; align-items: center; gap: 6px; }
.cm-sr-fields[hidden], .cm-prog-fields[hidden] { display: none; }
.cm-year {
  font: inherit; font-size: 12.5px; width: 74px;
  padding: 5px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg);
}
.cm-go {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: none; background: var(--accent-2); color: #fff;
}
.cm-note {
  flex-basis: 100%;
  font-size: 11.5px; color: var(--ink-faint); font-style: italic;
}
.cm-note a { color: var(--accent); font-style: normal; }

.prog-headline {
  margin: 8px 0 2px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 400px 160px at 0% -30%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--bg-2);
}
.prog-h {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.prog-age { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.prog-row { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.prog-row:first-of-type { border-top: none; }
.prog-row-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.prog-glyph { font-family: var(--serif); color: var(--accent); }
.prog-name { font-weight: 600; color: var(--ink); }
.prog-where { color: var(--ink-dim); }
.prog-keynote { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.prog-empty { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.prog-deeper { margin-top: 6px; }
.prog-deeper > summary {
  list-style: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent);
}
.prog-deeper > summary::-webkit-details-marker { display: none; }
.prog-deeper > summary::after { content: " ↓"; }
.prog-deeper[open] > summary::after { content: " ↑"; }
.prog-deeper-block { margin-top: 8px; }
.prog-deeper-label {
  display: block; margin-bottom: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint);
}
.prog-deeper-block p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.prog-deeper-block p:last-child { margin-bottom: 0; }

.sr-emphasis {
  margin: 8px 0 2px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--line));
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 400px 160px at 0% -30%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%),
    var(--bg-2);
}
.sr-emphasis-h {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-2); font-weight: 700; margin-bottom: 6px;
}
.sr-emphasis ul { margin: 0; padding-left: 18px; }
.sr-emphasis li { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin: 3px 0; }
.sr-emphasis li b { color: var(--ink); font-weight: 600; }
.sr-emphasis .mini-cap { margin: 8px 0 0; }
.sr-emphasis li .sr-kw { color: var(--accent-2); font-style: italic; font-weight: 400; }
.sr-emphasis li.sr-axis-hit { color: var(--ink); }
.sr-emphasis li.sr-axis-hit b { color: var(--accent-2); }
.sr-axis-frame {
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-faint); line-height: 1.6;
}
.sr-axis-frame a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.sr-axis-frame a:hover { text-decoration: underline; }

.sr-story {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.sr-story > summary {
  list-style: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-2);
}
.sr-story > summary::-webkit-details-marker { display: none; }
.sr-story > summary::after { content: " ↓"; }
.sr-story[open] > summary::after { content: " ↑"; }
.sr-story p { font-size: 13px; line-height: 1.65; color: var(--ink); margin: 9px 0 0; }
.sr-story p b { color: var(--accent-2); }
.sr-story p em {
  font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); display: block; margin-top: 7px;
}

.chart-sub { margin: 8px 0 0; }
.chart-sub summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: 11px; color: var(--ink-faint); transition: color .15s;
}
.chart-sub summary::-webkit-details-marker { display: none; }
.chart-sub summary::before { content: "⌄ "; display: inline-block; transition: transform .15s; }
.chart-sub[open] summary::before { transform: rotate(180deg); }
.chart-sub summary:hover { color: var(--accent); }
#chart-sub { color: var(--ink-dim); font-size: 12px; margin: 6px 0 0; }

/* ask-this-chart navigator */
.ask-wrap { position: relative; margin: 0 0 16px; }
.ask-wrap::before {
  content: "☿︎"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-size: 15px; color: var(--accent);
  pointer-events: none; transition: color .2s var(--ease-soft);
}
.ask-wrap:focus-within::before { color: var(--accent-2); }
#ask-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 13.5px;
  padding: 11px 15px 11px 38px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft);
}
#ask-input::placeholder { color: var(--ink-faint); }
#ask-input:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.ask-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}
.ask-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
}
.ask-item:hover, .ask-item.is-first { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ask-item-label { font-size: 13px; color: var(--ink); }
.ask-item-sub { font-size: 11px; color: var(--ink-faint); }

/* the written answer, "ask this chart" */
.ask-answer {
  margin: -6px 0 18px; padding: 14px 16px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 420px 160px at 0% -30%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--bg-2);
  animation: rise-in .4s var(--ease-soft) both;
}
.ask-answer[hidden] { display: none; }
.ask-a-head { display: flex; align-items: baseline; gap: 10px; }
.ask-a-q {
  flex: 1; font-family: var(--serif); font-size: 14.5px; font-style: italic;
  color: var(--accent-2);
}
.ask-a-close {
  flex: none; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink-faint); padding: 2px 4px;
}
.ask-a-close:hover { color: var(--accent-2); }
.ask-a-loading, .ask-a-error {
  font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin-top: 6px;
}
.ask-a-error { color: var(--accent-2); font-style: normal; }
.ask-a-body { margin-top: 9px; font-size: 13.5px; line-height: 1.66; color: var(--ink); }
.ask-a-body p { margin: 0 0 9px; }
.ask-a-body p:last-child { margin-bottom: 0; }
.ask-a-body h4 {
  font-family: var(--sans); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent-2); margin: 12px 0 4px;
}
.ask-a-body .voc-xref { color: var(--accent); }
.ask-a-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.ask-a-model { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.ask-a-deeper {
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--r-pill); padding: 4px 12px;
  transition: background .18s var(--ease-soft);
}
.ask-a-deeper:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }

.panel-link {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--ink-faint);
  margin-left: 10px; padding: 0;
  transition: color .15s;
}
.panel-link:hover { color: var(--accent); }

.warnings {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 16px;
}
.warn-list { margin: 0; padding-left: 18px; color: var(--accent); font-size: 12px; }

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}
@media (max-width: 1180px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.wheel-wrap {
  background:
    radial-gradient(ellipse 480px 240px at 8% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(ellipse 420px 220px at 100% 120%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 68%),
    var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: 0 6px 28px color-mix(in srgb, var(--accent) 9%, transparent);
  position: sticky; top: 20px;
}
#wheel { width: 100%; }
#wheel.is-loading { opacity: .5; transition: opacity .15s var(--ease-soft); }
.wheel {
  width: 100%; height: auto; display: block;
  transform-origin: center;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--ink) 9%, transparent));
}
/* the rings and tokens sit at slightly different depths */
.w-grid { filter: drop-shadow(0 1px 0 color-mix(in srgb, #fff 50%, transparent))
                   drop-shadow(0 -.5px 0 color-mix(in srgb, var(--ink) 6%, transparent)); }
.w-zodiac { filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 7%, transparent)); }
.w-planet { filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 20%, transparent)); }
.w-angles { filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--accent) 22%, transparent)); }

/* ------------- wheel internals ------------- */
.w-rim { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.2; }
.w-hair { fill: none; stroke: var(--line); stroke-width: 1; }
.w-hair.faint { stroke-opacity: .5; }
.w-center { fill: var(--accent); }

/* a physical disc, not a flat drawing: one soft light from the
   upper-left across the whole face, and a shallow well at the hub where
   the aspect lines converge. Subtle by design — this reads as roundness,
   not as a skeuomorphic 3D object. */
.w-surface-stop-1 { stop-color: color-mix(in srgb, var(--accent) 5%, var(--bg)); stop-opacity: 1; }
.w-surface-stop-2 { stop-color: var(--bg-2); stop-opacity: 1; }
.w-surface { fill: url(#w-surface); opacity: .55; }
.w-hub-stop-1 { stop-color: var(--ink); stop-opacity: 0; }
.w-hub-stop-2 { stop-color: var(--ink); stop-opacity: .05; }
.w-hub-well { fill: url(#w-hub-well); }
.w-gloss-stop-1 { stop-color: #fff; stop-opacity: .55; }
.w-gloss-stop-2 { stop-color: #fff; stop-opacity: 0; }
.w-planet-gloss { fill: url(#w-gloss); pointer-events: none; }
/* on a light disc the white gloss reads as a subtle raised highlight;
   on Night sky's dark discs that same white wash instead haloed the
   glyph underneath it, reading as blur — much weaker here */
body.theme-night .w-gloss-stop-1 { stop-opacity: .16; }

.w-sign { stroke: none; opacity: .13; }
.w-sign.el-fire  { fill: var(--fire); }
.w-sign.el-earth { fill: var(--earth); }
.w-sign.el-air   { fill: var(--air); }
.w-sign.el-water { fill: var(--water); }
.w-sign-div { stroke: var(--line); stroke-width: 1; stroke-opacity: .9; }
.w-angle-stub { stroke: var(--accent); stroke-width: 1.4; stroke-opacity: .7; }
.w-sign-glyph {
  font-family: var(--serif); font-size: 22px; fill: var(--ink);
  opacity: 1;
}
.w-tick { stroke: var(--ink-faint); stroke-width: 1; stroke-opacity: .35; }
.w-tick-md { stroke: var(--ink-dim); stroke-opacity: .6; }
.w-tick-lg { stroke: var(--ink-dim); stroke-width: 1.2; stroke-opacity: .9; }

.w-cusp {
  stroke: var(--ink-dim); stroke-width: 1.5; stroke-opacity: .8;
}
.w-cusp-angle { stroke: var(--accent); stroke-width: 2.6; stroke-opacity: 1; }
.w-house-num {
  font-family: var(--mono); font-size: 11px; fill: var(--ink); opacity: .95;
}
.w-cusp-deg { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-dim); }
.w-angle-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  fill: var(--accent); letter-spacing: .06em;
}

.w-lead { stroke: var(--ink-faint); stroke-width: .8; stroke-opacity: .55; }
.w-lead-elbow { stroke-opacity: .35; }
.w-lead-dot { fill: var(--ink-dim); }

/* every planet the same weight on the wheel — no visual hierarchy between
   them here (EA-core emphasis lives in the reading, not the glyphs). */
.w-planet-disc { fill: var(--bg); stroke: var(--accent-2); stroke-width: 1.1; stroke-opacity: .5; }
.w-planet-glyph { font-family: var(--serif); font-size: 19px; fill: var(--accent-2); }
.w-planet.is-rx .w-planet-glyph { fill: var(--accent); }
.w-planet-deg { font-family: var(--mono); font-size: 8px; fill: var(--ink-faint); }
.w-planet { transition: filter .15s; cursor: default; }
.w-planet.hot .w-planet-disc { stroke: var(--accent); stroke-width: 2; }
.w-planet.hot { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }

/* transit ring — the moving sky, visually distinct from the fixed natal
   chart (rose-toned discs vs. natal's neutral ones) */
.w-transit-track { fill: none; stroke: var(--accent-2); stroke-opacity: .6; stroke-dasharray: 1.5 5; stroke-width: 1.2; }
.w-transit-track-anim { animation: w-sky-drift 120s linear infinite; }
@keyframes w-sky-drift { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .w-transit-track-anim { animation: none; } }
.w-t-lead { stroke: var(--accent-2); stroke-width: 1; stroke-opacity: .6; }
.w-t-planet-disc {
  fill: color-mix(in srgb, var(--accent-2) 10%, var(--bg));
  stroke: var(--accent-2); stroke-width: 1.8;
}
.w-t-planet-glyph { font-family: var(--serif); font-size: 19px; fill: var(--accent-2); font-weight: 500; }
.w-t-planet.is-ea .w-t-planet-disc {
  fill: color-mix(in srgb, var(--accent) 12%, var(--bg));
  stroke: var(--accent); stroke-width: 2.1;
}
.w-t-planet.is-ea .w-t-planet-glyph { fill: var(--accent); }
.w-t-planet.is-rx .w-t-planet-glyph { fill: var(--dynamic); }
.w-t-planet { cursor: grab; transition: filter .2s var(--ease); }
.w-t-planet:hover { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 55%, transparent)); }
.w-t-planet:active { cursor: grabbing; }
.w-t-planet.hot { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-2) 70%, transparent)); }
.w-t-planet.hot .w-t-planet-disc { animation: w-hot-pulse 3.2s var(--ease-soft) infinite; }
@keyframes w-hot-pulse {
  0%, 100% { stroke-width: 1.8; }
  50% { stroke-width: 3; }
}
@media (prefers-reduced-motion: reduce) { .w-t-planet.hot .w-t-planet-disc { animation: none; } }
.w-t-planet.is-dragging .w-t-planet-disc { stroke-width: 2.6; }
.w-t-asp { stroke-linecap: round; transition: stroke-opacity .2s var(--ease); }
.w-t-asp:not(.is-strong) { stroke-dasharray: 2 3; }
.w-t-asp.role-flowing  { stroke: var(--flowing); }
.w-t-asp.role-dynamic  { stroke: var(--dynamic); }
.w-t-asp.role-neutral  { stroke: var(--neutral); }
.w-t-asp.role-friction { stroke: var(--friction); }

.w-asp { stroke-linecap: round; transition: stroke-opacity .15s; }
.w-asp.role-flowing  { stroke: var(--flowing); }
.w-asp.role-dynamic  { stroke: var(--dynamic); }
.w-asp.role-neutral  { stroke: var(--neutral); }
.w-asp.role-friction { stroke: var(--friction); stroke-dasharray: 2 3; }
.w-asp.dim { stroke-opacity: .05 !important; }
.w-asp.hot { stroke-opacity: .95 !important; }

/* --------------------------------------------------------- tables */
.tables { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.table-card, .read-body, .read-body p, .read-ea, .read-baseline,
.read-ea p, .read-baseline p { min-width: 0; overflow-wrap: anywhere; }
.tab-bar {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { white-space: nowrap; }
.tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-faint); font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 12px 8px; cursor: pointer; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab-btn:hover { color: var(--ink-dim); }
.tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Soul Signature reads first — mark it as the primary view without shouting */
.tab-primary {
  color: var(--accent-2);
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--accent-2) 6%, transparent);
}
.tab-primary:hover { color: var(--accent-2); }
.tab-primary.is-active {
  color: var(--accent-2); border-bottom-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
}
.tab-star { font-size: 9px; vertical-align: 1px; opacity: .8; }
.table-card {
  background: var(--bg-2); border-radius: 12px; padding: 14px 16px;
}
.table-card h3 {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  margin: 0 0 10px; color: var(--ink);
}
.mini-cap { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }

.read-cap-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.read-cap-row .mini-cap { margin-bottom: 0; }

/* elements: by sign vs. by house — color and spacing carry the
   hierarchy, no card chrome needed for a folded, secondary stat */
.elem-balance { margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
.elem-balance > summary {
  list-style: none; cursor: pointer; padding: 2px 0;
  font-family: var(--serif); font-size: 14px; color: var(--ink-dim);
}
.elem-balance > summary::-webkit-details-marker { display: none; }
.elem-balance > summary::after { content: " ↓"; color: var(--ink-faint); font-size: 11px; }
.elem-balance[open] > summary::after { content: " ↑"; }
.elem-balance > summary .mini-cap { display: block; font-family: var(--sans); margin-top: 1px; }
.elem-grid { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.elem-row { display: grid; grid-template-columns: 46px 1fr 90px; align-items: center; gap: 10px; }
.elem-name { font-size: 11.5px; font-weight: 600; }
.elem-bar-pair {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--line-soft); border-radius: 3px; overflow: hidden;
}
.elem-bar { height: 5px; border-radius: 3px; }
.elem-bar-sign { opacity: .9; }
.elem-bar-house { opacity: .45; }
.elem-counts { font-size: 10.5px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.elem-counts em { font-style: normal; }
.elem-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); margin: 4px 0 0; }
.elem-note b { color: var(--ink); }
.speak-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-faint); width: 26px; height: 26px;
  padding: 0; cursor: pointer; flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.speak-btn svg { width: 15px; height: 15px; }
.speak-btn:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.speak-btn.is-playing {
  color: #fff; border-color: var(--accent); background: var(--accent);
}
.speak-btn-all { width: auto; padding: 0 10px; gap: 6px; border-radius: var(--r-pill); }
.speak-btn-all::after { content: "Listen"; font-size: 11px; font-weight: 600; }
.speak-btn-all.is-playing::after { content: "Stop"; }
.read-summary .speak-btn { margin-left: auto; }

.pos-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
.pos-table .c-name { font-family: var(--sans); }
.pos-table th {
  text-align: left; font-weight: 500; color: var(--ink-faint);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  padding: 0 6px 6px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pos-table td {
  padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pos-table .c-pos { font-variant-numeric: tabular-nums; }
.pos-table tbody tr { transition: background .12s; }
.pos-table tbody tr:hover, .pos-table tbody tr.hot { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pos-table tbody tr.is-ea .c-name { color: var(--accent); }
.c-glyph { font-family: var(--serif); font-size: 15px; width: 22px; }
.c-name { white-space: nowrap; }
.c-pos .deg { color: var(--ink); }
.c-pos .hoverinfo { display: inline-flex; flex-direction: column; }
.c-sign-name { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--accent-2); line-height: 1.25; }
.c-sign-deg { font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.c-sign-glyph { font-family: var(--serif); }
.c-house { text-align: center; color: var(--ink-dim); width: 76px; }
.c-speed { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.c-kw { color: var(--accent-2); font-weight: 600; font-size: 12px; }
.phase-table .ph-hemi { color: var(--accent-2); font-weight: 600; }
.phase-table .ph-name { color: var(--ink-dim); }
.phase-table .c-name { white-space: normal; }
.c-rx { color: var(--dynamic); width: 20px; text-align: center; }

/* sign vs. house: distinct accent colors throughout (sign = rose, house = gold) */
.house-num { font-size: 13px; font-weight: 700; color: var(--accent); }
.house-kw {
  display: block; font-size: 8px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
}
.c-house .hoverinfo { display: inline-flex; flex-direction: column; align-items: center; }

/* generic hover/focus popover — used for Sign, House, and the Positions
   header explainer. Custom (not native title) so it can carry real,
   formatted, multi-line content instead of a single truncated line. */
.hoverinfo { position: relative; cursor: help; }
.hoverinfo.is-sign .deg { border-bottom: 1px dotted var(--accent-2); }
.info-dot { font-size: 10px; color: var(--ink-faint); margin-left: 4px; vertical-align: super; }
.hoverinfo-pop {
  display: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 7px); z-index: 30;
  width: 230px; text-align: left; white-space: normal;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-dim);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 22%, transparent);
}
.hoverinfo-pop-wide { width: 260px; }
.hoverinfo:hover .hoverinfo-pop,
.hoverinfo:focus .hoverinfo-pop,
.hoverinfo:focus-within .hoverinfo-pop { display: block; }
.hoverinfo-label {
  display: block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px; color: var(--ink-faint);
}
.hoverinfo.is-sign .hoverinfo-label { color: var(--accent-2); }
.hoverinfo.is-house .hoverinfo-label { color: var(--accent); }
.hoverinfo.is-rx .hoverinfo-label { color: var(--dynamic); }
.hoverinfo.is-angle .hoverinfo-label { color: var(--accent); }
.hoverinfo-p { margin: 0 0 6px; }
.hoverinfo-p:last-child { margin-bottom: 0; }
.hoverinfo-p.is-italic { font-style: italic; color: var(--ink); }
.hoverinfo-sub {
  display: block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint); margin: 6px 0 3px;
}

.angle-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.angle-cell { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ang-label { color: var(--ink-dim); white-space: nowrap; }
.ang-pos { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.ang-sign { color: var(--accent-2); font-weight: 600; }
.ang-glyph { color: var(--ink-faint); }
.hoverinfo.is-angle { border-bottom: 1px dotted var(--accent); }
.hoverinfo.is-rx { border-bottom: 1px dotted var(--dynamic); }

.houses-table td { padding: 3px 8px 3px 0; }
.houses-table .c-house { text-align: left; color: var(--accent); width: 28px; }

/* Soul Signature — sits beside the wheel; the chart and its signature seen together */
.soul-anchor {
  padding: 16px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--line));
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 480px 240px at 8% -20%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 68%),
    radial-gradient(ellipse 420px 220px at 100% 120%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%),
    var(--bg-2);
  box-shadow: 0 6px 28px color-mix(in srgb, var(--accent-2) 10%, transparent);
}
.tables { margin-top: 0; }
@media (max-width: 1180px) {
  .soul-anchor { order: -1; }   /* signature first when stacked */
}
.soul-anchor-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  color: var(--accent-2); margin: 0 0 4px;
}
.soul-anchor-star { font-size: 14px; }

.wheel-hint {
  margin: 8px 0 0; text-align: center;
  font-size: 11.5px; color: var(--ink-faint); font-style: italic;
}
#soul .mini-cap a { color: var(--accent); text-decoration: none; }
.soul-group { margin-top: 14px; }
.soul-group:first-of-type { margin-top: 8px; }
.soul-group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent-2); font-weight: 600; margin-bottom: 5px;
}
.soul-leg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-2);
}
.soul-leg.is-ruler {
  margin: 4px 0 0 16px;
  background: none; border-style: dashed;
}
.soul-glyph { font-family: var(--serif); font-size: 15px; color: var(--accent-2); }
.soul-leg.is-ruler .soul-glyph { color: var(--ink-dim); font-size: 13px; }
.soul-body { font-size: 13px; color: var(--ink); font-weight: 600; align-self: baseline; }
.soul-leg.is-ruler .soul-body { font-weight: 400; color: var(--ink-dim); }
.soul-rx { color: var(--dynamic); font-weight: 700; }
.soul-place { grid-column: 2; font-size: 12px; color: var(--ink-dim); }
.soul-sign { color: var(--accent-2); font-weight: 600; }
.soul-kw { color: var(--ink-faint); }
.soul-role { grid-column: 2; font-size: 11px; color: var(--ink-faint); font-style: italic; }
.soul-q {
  grid-column: 2; margin: 3px 0 0;
  font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink);
}
.soul-skip {
  grid-column: 1 / -1; margin: 5px 0 0;
  font-size: 11px; color: var(--dynamic);
  border-top: 1px solid var(--line-soft); padding-top: 5px;
}

.soul-structure {
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.soul-structure-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-2); font-weight: 700; margin-bottom: 5px;
}
.soul-structure-note {
  font-size: 12px; line-height: 1.6; color: var(--ink-dim); margin: 4px 0;
}
.soul-structure-note b { color: var(--ink); font-weight: 600; }
.soul-structure-note .soul-kw { color: var(--ink-faint); font-style: italic; }

.house-synth { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.house-synth .mini-cap { margin-bottom: 2px; }
.hsyn-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--bg-2);
}
.hsyn-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.hsyn-ord {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent);
}
.hsyn-kw { font-size: 12px; font-weight: 600; color: var(--accent-2); }
.hsyn-sentence {
  margin: 0 0 6px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-dim);
}
.hsyn-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hsyn-chip {
  font-size: 11px; color: var(--ink-dim);
  background: var(--bg-3);
  border-radius: 5px;
  padding: 2px 7px;
}
.hsyn-chip b { color: var(--ink); font-weight: 600; }

/* reading (Phase 2 interpretation) */
.read-empty { color: var(--ink-faint); font-size: 12px; }
.read-list { display: flex; flex-direction: column; gap: 2px; }
.read-card {
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 0;
}
.read-card:last-child { border-bottom: none; }
.read-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink);
}
.read-summary::-webkit-details-marker { display: none; }
.read-summary::before {
  content: "▸"; color: var(--ink-faint); font-size: 10px; width: 10px;
}
.read-card[open] > .read-summary::before { content: "▾"; }
.read-glyph { font-family: var(--serif); font-size: 15px; width: 18px; }
.read-name { flex: 1; }
.read-house { color: var(--ink-faint); font-size: 11px; }
.read-badge {
  font-size: 9px; letter-spacing: .05em; font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 4px; padding: 1px 4px;
}
.read-card.is-ea .read-name { color: var(--accent); }

.read-body { padding: 8px 4px 2px 26px; display: flex; flex-direction: column; gap: 10px; }
.read-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 3px;
}
.read-ea {
  margin-top: 12px; padding: 10px 12px 11px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 3px 8px 8px 3px;
}
.read-ea .read-label { color: var(--accent); }

/* markdown sections inside a rendered EA block (Reading panel, aspect
   grid detail, transit detail) — small labelled headings, tight lists */
.read-ea h4, .ag-detail h4, .sky-t-detail h4, .sky-t-ea h4 {
  font-family: var(--sans); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-2); margin: 10px 0 3px;
}
.read-ea h4:first-child, .sky-t-ea h4:first-of-type { margin-top: 4px; }
.read-ea ul, .ag-detail ul, .sky-t-detail ul {
  margin: 0 0 8px; padding-left: 18px;
}
.read-ea ul li, .ag-detail ul li, .sky-t-detail ul li { margin: 2px 0; }
.read-ea strong, .ag-detail strong, .sky-t-detail strong { color: var(--ink); }
.read-body p {
  margin: 0 0 7px; font-size: 14px; line-height: 1.65; color: var(--ink-dim);
}
.read-ea p { color: var(--ink); }
.read-body p:last-child { margin-bottom: 0; }

.read-sublabel {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint); margin: 9px 0 3px;
}
.read-sublabel:first-child { margin-top: 0; }
.read-sublabel.is-sign { color: var(--accent-2); }
.read-sublabel.is-house { color: var(--accent); font-weight: 700; }
.read-sublabel.is-house + p {
  border-left: 2px solid var(--accent); padding-left: 8px; color: var(--ink);
}
.read-sabian-text {
  font-family: var(--serif); font-style: italic; color: var(--ink-dim) !important;
}
.read-more { margin: 2px 0 6px; }
.read-more > summary {
  list-style: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
}
.read-more > summary::-webkit-details-marker { display: none; }
.read-more > summary::after { content: " ↓"; }
.read-more[open] > summary::after { content: " ↑"; }
.read-more[open] > summary { color: var(--ink-faint); }
.read-more > p { margin-top: 6px; }

.read-ref {
  display: inline-block; margin-top: 4px;
  font-size: 11px; color: var(--ink-faint); text-decoration: none;
}
.read-ref:hover { color: var(--accent); }

/* aspect grid */
.aspect-grid {
  border-collapse: separate; border-spacing: 3px;
  margin: 6px 0 10px; font-family: var(--sans);
}
.aspect-grid td, .aspect-grid th {
  width: 32px; height: 32px; text-align: center;
  border: none; border-radius: var(--r-sm);
  font-size: 11px; padding: 0;
}
.aspect-grid .ag-row-head, .aspect-grid .ag-col-head, .aspect-grid .ag-diag {
  font-family: var(--serif); font-size: 15px; color: var(--ink-faint);
}
.aspect-grid .ag-diag { color: var(--ink); background: var(--bg-3); border-radius: var(--r-sm); }
.ag-cell {
  position: relative; color: var(--ink); cursor: pointer;
  background: var(--bg-2);
  transition: transform .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.ag-cell.role-flowing  { background: color-mix(in srgb, var(--flowing) 22%, var(--bg-2)); }
.ag-cell.role-dynamic  { background: color-mix(in srgb, var(--dynamic) 20%, var(--bg-2)); }
.ag-cell.role-neutral  { background: color-mix(in srgb, var(--neutral) 20%, var(--bg-2)); }
.ag-cell.role-friction { background: color-mix(in srgb, var(--friction) 18%, var(--bg-2)); }
.ag-cell.kind-minor .ag-sym { opacity: .7; }
.ag-cell:hover, .ag-cell:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 14%, transparent);
  outline: none;
}
.ag-cell.is-selected {
  box-shadow: 0 0 0 2px var(--accent);
}
.ag-cell.hot { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); }
.ag-cell.dim { opacity: .35; }
.ag-row-head, .ag-col-head, .aspect-grid .ag-diag {
  cursor: default; transition: color .15s, background .15s;
}
.ag-row-head.hot, .ag-col-head.hot, .aspect-grid .ag-diag.hot {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
}
.ag-sym { font-family: var(--serif); font-size: 13px; display: block; line-height: 1; }
.ag-orb {
  font-size: 8px; color: var(--ink-dim); display: block; line-height: 1;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.ag-app, .ag-sep { position: absolute; top: 2px; right: 3px; font-size: 7px; color: var(--ink-faint); }

.aspect-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-dim);
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-item .ls {
  font-family: var(--serif); font-size: 13px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.legend-item.role-flowing .ls  { color: #fff; background: var(--flowing); }
.legend-item.role-dynamic .ls  { color: #fff; background: var(--dynamic); }
.legend-item.role-neutral .ls  { color: #fff; background: var(--neutral); }
.legend-item.role-friction .ls { color: #fff; background: var(--friction); }
.legend-item b { color: var(--ink); font-weight: 600; }

.ag-hint { margin: 10px 0 0; font-size: 10.5px; color: var(--ink-faint); }
.ag-detail {
  display: none; margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ag-detail.is-open { display: block; }
.ag-detail-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ag-detail-glyphs { font-family: var(--serif); font-size: 16px; color: var(--accent); }
.ag-detail-names { font-size: 12.5px; color: var(--ink); }
.ag-detail-meta { font-size: 10.5px; color: var(--ink-faint); margin-left: auto; }

/* ── responsive ─────────────────────────────────────────────────────── */

/* mobile-only chrome (the sheet toggle + its backdrop) — hidden until the
   ≤900px block below turns the sidebar into a drop-down sheet. */
.panel-toggle, .sheet-backdrop { display: none; }

/* tablet / small laptop — the sidebar stops being a fixed column and
   becomes a normal block at the top of the page. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; display: block; }

  /* the pointer-tracking marker and the ·/• separators are desktop
     structure — on a wrapping row they leave orphan marks at line ends. */
  .site-nav .site-nav-marker { display: none; }
  .site-nav .site-nav-dot,
  .site-nav .site-nav-div { display: none; }
  .panel .site-nav {
    display: none;
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 10px 18px; margin: 14px 0 2px; padding: 0;
  }
  body.sheet-open .panel .site-nav { display: flex; }
  .panel .site-nav a, .panel .site-nav .site-nav-here { padding: 2px 0; }
  .panel .site-nav .site-nav-here { box-shadow: none; }
  .wheel-wrap { position: static; }

  /* ── the sidebar becomes a slim sticky bar; its body (nav, birth
     form, config, saved charts) drops down as a sheet on "Setup". ── */
  .panel {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 53px; overflow: hidden;
    border-right: none; border-bottom: 1px solid var(--line);
    background: var(--bg); gap: 12px;
    padding: 0 16px;
    transition: height .32s var(--ease);
    -webkit-overflow-scrolling: touch;
  }
  body.sheet-open .panel {
    height: 100vh; height: 100dvh; overflow-y: auto;
    padding-bottom: 24px;
  }

  .panel .brand {
    flex: none; height: 53px; align-items: center;
    margin: 0 -16px; padding: 0 16px;
  }
  body.sheet-open .panel .brand {
    border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; height: auto; align-items: baseline;
  }
  .panel .brand-tag { display: none; }

  .panel-toggle {
    display: inline-block;
    margin-left: auto; align-self: center; flex: none;
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line));
    border-radius: 999px; padding: 6px 15px;
    transition: background .15s, color .15s, border-color .15s;
  }
  body.sheet-open .panel-toggle {
    color: var(--ink-dim); background: none; border-color: var(--line);
  }

  .sheet-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 39;
    background: color-mix(in srgb, var(--ink) 32%, transparent);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }

  /* content clears the fixed 53px bar */
  .stage { padding: 67px 20px 60px; }
}

/* phone — tighten everything, stack the paired inputs, ease off the
   background so scrolling stays smooth. */
@media (max-width: 560px) {
  body { background-attachment: scroll; font-size: 14px; }
  .stage { padding: 65px 14px 48px; }
  .sky-page, .voc-page, .syn-page { padding: 20px 14px 56px; }
  .row { grid-template-columns: 1fr; }
  .chart-head h2 { font-size: 22px; }
  .grid-2 { gap: 16px; }
  .wheel-wrap { padding: 6px; border-radius: 10px; }
  .table-card { padding: 12px 12px; }
  .syn-pickers { padding: 12px; }
  .syn-legs { grid-template-columns: minmax(0, 1fr); }
  .planet-panel { padding: 12px 12px 16px; }
  #ask-input { font-size: 16px; }   /* iOS won't zoom on focus at ≥16px */

  /* the disclaimer paragraph is reference chrome — drop it on phones so
     the sidebar block is just the controls. */
  .panel-foot { display: none; }
  .brand { gap: 9px; }

  /* all tabs visible in two short rows instead of a scroll strip that
     hides "Aspects" / "Reading" off the right edge. app.js positions the
     marker by row, so a wrapped bar tracks correctly. */
  .tab-bar { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .tab-btn { flex: 0 0 auto; padding: 7px 10px 8px; font-size: 12.5px; }
}

/* ── planet disclosure panel ──────────────────────────────────────────
   sits directly under the wheel, in the wheel-wrap — proportional to
   the chart itself rather than the full-width tables section below */
.planet-panel {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 18px;
  margin-top: 14px;
  animation: pp-rise .22s cubic-bezier(.4, 0, .2, 1);
}
.planet-panel[hidden] { display: none; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(8px); } }

.pp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 9px;
}
.pp-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 5px; }
.pp-glyph-link {
  font-family: var(--serif); font-size: 13px; color: var(--accent-2);
  text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--accent-2) 45%, transparent);
  transition: color .15s, border-color .15s;
}
.pp-glyph-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.pp-crumb {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-dim);
  transition: color .15s;
}
.pp-crumb:hover { color: var(--accent); }
.pp-crumb.is-here { color: var(--ink); font-weight: 600; cursor: default; }
.pp-crumb-sep { color: var(--line); font-size: 11px; }
.pp-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink-faint);
  padding: 0 2px;
}
.pp-close:hover { color: var(--dynamic); }

.pp-page { opacity: 0; transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, .2, 1); }
.pp-page.dir-deeper { transform: translateX(22px); }
.pp-page.dir-back { transform: translateX(-22px); }
.pp-page.dir-none { transform: translateY(6px); }
.pp-page.in { opacity: 1; transform: none; }

.pp-kicker {
  margin: 0 0 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
}
.pp-keynote {
  margin: 0 0 12px; font-family: var(--serif); font-size: 21px;
  line-height: 1.35; color: var(--ink);
}
.pp-lenses { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.pp-lens { font-size: 13px; color: var(--ink-dim); }
.pp-lens-prep { color: var(--ink-faint); }
.pp-lens-term { color: var(--accent-2); font-weight: 600; }
.pp-lens-tail { color: var(--ink-dim); }
.pp-rx {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim);
}
.pp-rx-mark { color: var(--dynamic); font-weight: 600; }
.pp-synth-line {
  margin: 2px 0 10px; padding-left: 9px; border-left: 2px solid var(--accent-2);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-dim);
}
.pp-lib-link { display: inline-block; margin-top: 4px; font-size: 12px; }

.pp-deeper {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 7px 12px 7px 0;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent);
  border-top: 1px solid var(--line-soft);
  width: 100%; justify-content: space-between;
}
.pp-deeper:hover .pp-deeper-arrow { transform: translateX(3px); }
.pp-deeper-arrow { transition: transform .15s; }

.pp-synth-line {
  margin: 0 0 12px; font-family: var(--serif); font-size: 15px;
  line-height: 1.55; color: var(--ink);
  padding: 10px 12px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 3px;
}
.pp-block { margin-top: 14px; }
.pp-block-label {
  display: block; margin-bottom: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint);
}
.pp-block p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.pp-block p:last-child { margin-bottom: 0; }
.pp-ea .pp-block-label { color: var(--accent); }
.pp-ea p { color: var(--ink); }
.pp-sub { color: var(--ink-dim); }
.pp-italic { font-family: var(--serif); font-style: italic; }
.pp-note { font-size: 11px !important; font-style: italic; color: var(--ink-faint) !important; }
.pp-elab { padding: 12px 14px; background: var(--bg-3); border-radius: 9px; }
.pp-empty { color: var(--ink-faint); font-size: 12px; }

.pp-trinity p { margin: 0 0 4px; }
.pp-trinity b { color: var(--ink); font-weight: 600; }
.pp-tri-note { color: var(--ink-faint); font-size: 11px; }
.pp-tri-flag {
  margin-top: 6px !important; font-size: 11.5px;
  color: var(--accent-2); font-style: italic;
}
.pp-arch { margin-top: 8px; }
.pp-arch > summary {
  list-style: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent-2);
}
.pp-arch > summary::-webkit-details-marker { display: none; }
.pp-arch > summary::after { content: " ↓"; }
.pp-arch[open] > summary::after { content: " ↑"; }
.pp-arch p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.pp-arch-pol { color: var(--ink-faint) !important; }

.pp-ref {
  display: inline-block; margin-top: 8px;
  font-size: 11px; color: var(--ink-faint); text-decoration: none;
}
.pp-ref:hover { color: var(--accent); }

.pp-asps { display: flex; flex-direction: column; gap: 2px; }
.pp-asp {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  align-items: baseline; font-size: 12px; padding: 3px 6px;
  border-radius: 5px; margin: 0 -6px;
}
.pp-asp.is-nav { cursor: pointer; transition: background .12s; }
.pp-asp.is-nav:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pp-asp.is-nav:hover .pp-asp-name { color: var(--ink); }
.pp-asp-glyphs { font-family: var(--serif); color: var(--ink); }
.pp-asp-name { color: var(--ink-dim); }
.pp-asp-orb { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.pp-asp-phase {
  margin-left: 7px; font-size: 10.5px; color: var(--accent-2);
  border-bottom: 1px dotted color-mix(in srgb, var(--accent-2) 45%, transparent);
  cursor: help;
}
.pp-phase-note {
  margin: 0 0 8px !important; font-size: 11px !important;
  color: var(--ink-faint) !important; line-height: 1.5;
}
.pp-phase-note a { color: var(--accent); text-decoration: none; }

.pp-legend {
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.pp-legend summary {
  cursor: pointer; list-style: none;
  font-size: 11px; color: var(--ink-faint);
  transition: color .15s;
}
.pp-legend summary::-webkit-details-marker { display: none; }
.pp-legend summary::before { content: "⌄ "; display: inline-block; transition: transform .15s; }
.pp-legend[open] summary::before { transform: rotate(180deg); }
.pp-legend summary:hover { color: var(--accent); }
.pp-legend-row {
  margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-faint);
}
.pp-legend-row b { color: var(--ink-dim); font-weight: 600; }

/* wheel "you are here": dim everything but the focused planet + its aspects.
   .28 reads fine dark-ink-on-light, but the same opacity on light glyphs
   against Night sky's dark background drops below legible — bumped higher
   there rather than using one value that only works in one theme. */
.wheel.has-focus .w-planet { opacity: .28; transition: opacity .2s; }
body.theme-night .wheel.has-focus .w-planet { opacity: .5; }
.wheel.has-focus .w-planet.is-focused { opacity: 1; }
.wheel.has-focus .w-planet.is-focused .w-planet-disc {
  stroke: var(--accent); stroke-width: 2.4;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}
.wheel.has-focus .w-asp { opacity: .06; transition: opacity .2s; }
.wheel.has-focus .w-asp.is-lit { opacity: .95; }
.wheel.has-focus .w-lead,
.wheel.has-focus .w-planet-deg { opacity: .2; }
body.theme-night .wheel.has-focus .w-lead,
body.theme-night .wheel.has-focus .w-planet-deg { opacity: .4; }

/* ── print / save-as-PDF: reflow the dashboard into a document ────────── */
@media print {
  .panel, #site-nav, .ask-wrap, .tab-bar, .chart-sub, #print-btn,
  .warnings, .planet-panel, .pp-legend { display: none !important; }
  .app { display: block; }
  .stage { padding: 0; }
  .grid-2 { display: block; }
  .wheel-wrap {
    position: static; break-inside: avoid; page-break-inside: avoid;
    border: none; background: none; padding: 0; max-width: 460px; margin: 0 auto 18px;
  }
  .wheel { filter: none; transform: none !important; }
  .tables.printing .table-card[data-panel] {
    display: block !important;
    break-inside: avoid; page-break-inside: avoid;
    border: none; background: none; padding: 0; margin: 0 0 20px;
  }
  .tables.printing .table-card[data-panel="reading"] { page-break-before: always; }
  .chart-head { margin-bottom: 10px; }
  .chart-head h2 { font-size: 20px; }
  body { background: #fff; font-size: 11.5px; }
  .house-synth, .pp-elab, .read-ea { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ── motion — a sense of moving through the chart, not clicking panels ── */
.brand-name a { color: inherit; text-decoration: none; transition: color .15s; }
.brand-name a:hover { color: var(--accent); }

/* the result arrives */
#result:not([hidden]) { animation: rise-in .6s var(--ease-soft) both; }
.wheel { animation: wheel-in .7s var(--ease-soft) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes wheel-in { from { opacity: 0; transform: scale(.955); } }

/* every page eases in — a sense of arriving somewhere, not loading a screen */
@media (prefers-reduced-motion: no-preference) {
  .stage, .sky-page > *, .voc-page > *, .syn-page > *, .lp > *, .contact-page > * {
    animation: page-in .5s var(--ease-soft) both;
  }
}
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* anything that opens does so gently, and reads as openable */
summary { cursor: pointer; }
details > summary { transition: color .18s var(--ease-soft); }
.voc-term, .chapter-card, .sky-t-row, .syn-leg, .voc-group {
  transition: background .28s var(--ease-soft), border-color .28s var(--ease-soft);
}

/* switching a data tab: the incoming panel eases in */
.table-card[data-panel]:not([hidden]) {
  animation: panel-in var(--dur) var(--ease) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }

/* tab bar — a marker glides between tabs (positioned by app.js) */
.tab-bar { position: relative; }
.tab-marker {
  position: absolute; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 1px; pointer-events: none;
  transition: left .24s var(--ease), width .24s var(--ease), background .18s;
}
.tab-bar .tab-btn.is-active { border-bottom-color: transparent; }
.tab-marker.on-primary { background: var(--accent-2); }

/* micro-lifts — anything you can act on answers the pointer */
.saved-item, .presets button, .lp-card, .chapter-card { transition: transform .14s var(--ease), border-color .15s, background .14s, box-shadow .15s; }
.saved-item:hover { transform: translateX(2px); }
.presets button:hover { transform: translateY(-1px); }
.side-block > summary,
.chart-sub summary,
.config summary { transition: color .15s; }

/* people who ask for less motion get it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
  .wheel { transform: none !important; }
}