/* Sidereal — Daybreak: a pale dawn sky, gold for the sacred, and the four
   elements as candy. Vanilla CSS, no framework. */

/* Four voices: Cormorant, the star atlas, for titles; Literata, the book,
   for everything the Seer says and the seeker reads; Nunito Sans for the
   friendly chrome; Astro Glyphs — our own subset of Noto's symbols — so
   every planet and sign renders identically on Linux, iOS, and anywhere
   else. Self-hosted; nothing fetched at runtime. */
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/cormorant-latin-de73e43b.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/cormorant-latin-italic-4f94f7c9.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/literata-latin-f7659a86.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/literata-latin-italic-ecb45e75.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/nunito-sans-latin-6a8605fb.woff2") format("woff2");
}
@font-face {
  font-family: "Astro Glyphs";
  font-display: swap;
  src: url("/assets/astro-symbols-a-55ec7032.woff2") format("woff2");
  unicode-range: U+260A-260D, U+263D-2647, U+2648-2653, U+26B7, U+26B9;
}
@font-face {
  font-family: "Astro Glyphs";
  font-display: swap;
  src: url("/assets/astro-symbols-b-25176350.woff2") format("woff2");
  unicode-range: U+2609, U+25A1, U+25B3, U+2726, U+2727, U+2736;
}

:root {
  --paper: #f3f2fc;
  --paper-high: #ffffff;
  --ink: #2c2747;
  --ink-dim: #6b6590;
  --gold: #9a7519;
  --gold-bright: #d4b46a;
  --gold-dim: #b99a4e;
  --line: #dfdcf0;
  --line-strong: #c7c3e0;
  --alert: #b54a4a;
  --fire: #e05a3a;
  --earth: #5c9a4e;
  --air: #3f8fd1;
  --water: #7a5fc7;
  --shadow: 0 2px 14px rgba(62, 50, 120, 0.09);
  --dawn: #fdf1da;
  --wash: #ffffff;
  --halo: rgba(255, 255, 255, 0.9);
  --frost: rgba(255, 255, 255, 0.82);
  --veil: rgba(44, 39, 71, 0.35);
  --sheet-glow: #fffdf7;
  --sun-core: #f6e7ba;
  --halo-glow: 0 1px 4px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.9), 0 0 18px rgba(243, 242, 252, 0.85);
  --font-display: "Cormorant", Georgia, serif;
  --font-body: "Literata", Georgia, serif;
  --font-ui: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --font-glyph: "Astro Glyphs", "Literata", serif;
  color-scheme: light dark;
  font-size: 16px;
}

/* Twilight: the same meanings after dark. Paper deepens to the night sky
   and ink pales to moonlight; gold keeps its seat as the Seer's voice, and
   the elements hold their hues, lifted just enough to read against the
   dark. The dawn at the top of the page sets into a violet dusk, and the
   sun stays the sun. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1832;
    --paper-high: #272144;
    --ink: #e8e5f6;
    --ink-dim: #a59fce;
    --gold: #d4b46a;
    --gold-bright: #e6cd8e;
    --gold-dim: #c3a45c;
    --line: #37305a;
    --line-strong: #4d4580;
    --alert: #e08585;
    --fire: #ef7c5c;
    --earth: #7fbc70;
    --air: #6fb3e8;
    --water: #a68ce4;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    --dawn: #322a52;
    --wash: #211c3b;
    --halo: rgba(28, 24, 50, 0.9);
    --frost: rgba(28, 24, 50, 0.78);
    --veil: rgba(10, 8, 22, 0.55);
    --sheet-glow: #2e2750;
    --sun-core: #f6e7ba;
    --halo-glow: 0 1px 4px rgba(28, 24, 50, 0.95), 0 0 10px rgba(28, 24, 50, 0.9), 0 0 18px rgba(31, 26, 54, 0.85);
  }

  /* After dark the wanderers' glyphs step forward a shade, so the signs
     read against the night instead of blending into it. */
  .utterance__body .glyph { color: var(--gold-bright); }
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A dawn sky: gold warming the horizon above, a sprinkle of pastel stars
   still hanging on. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  background-color: var(--paper);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(224, 90, 58, 0.35) 0, transparent 100%),
    radial-gradient(1px 1px at 28% 64%, rgba(122, 95, 199, 0.35) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(212, 180, 106, 0.5) 0, transparent 100%),
    radial-gradient(1px 1px at 55% 44%, rgba(63, 143, 209, 0.3) 0, transparent 100%),
    radial-gradient(1px 1px at 63% 81%, rgba(122, 95, 199, 0.25) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 74% 27%, rgba(212, 180, 106, 0.45) 0, transparent 100%),
    radial-gradient(1px 1px at 86% 58%, rgba(224, 90, 58, 0.25) 0, transparent 100%),
    radial-gradient(1px 1px at 93% 9%, rgba(63, 143, 209, 0.35) 0, transparent 100%),
    radial-gradient(1px 1px at 7% 88%, rgba(92, 154, 78, 0.3) 0, transparent 100%),
    radial-gradient(ellipse at 50% -20%, var(--dawn) 0, var(--paper) 60%);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }
h1 { font-size: 2.2rem; color: var(--ink); margin: 0 0 0.25rem; line-height: 1.15; }
h2 { font-size: 1.5rem; color: var(--ink); }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

a, button { transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a, button, .tile { transition: none; }
}

/* Glyphs speak in their own face, everywhere, identically. */
.glyph { font-family: var(--font-glyph); font-style: normal; }

/* A glossed term wears a dotted hem; one tap opens its teaching — a
   sheet on the web, the Learn page itself in the native app. */
.glossed {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: inherit;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold) 45%, transparent);
}
.glossed:hover { color: inherit; text-decoration: none; border-bottom-color: var(--gold); }

/* Masthead */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: calc(0.85rem + env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 0.85rem max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--frost);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.masthead__links { display: flex; gap: 0.35rem; align-items: center; }
.masthead__link,
.masthead__signout {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.65rem;
}
.masthead__links a { color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.02em; }
.masthead__links a:hover { color: var(--ink); text-decoration: none; }
.masthead__signout {
  background: none;
  border: none;
  color: var(--ink-dim);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
}
.masthead__signout:hover { color: var(--ink); }
.masthead__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper-high);
  color: var(--ink);
}
.masthead__toggle-line {
  display: block;
  width: 1.05rem;
  height: 1px;
  background: currentColor;
}
body.hotwire-native .masthead { display: none; }

/* Page scaffold */
.page { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem calc(5rem + env(safe-area-inset-bottom)); }
.page--wide { max-width: 64rem; }
.page__header { margin-bottom: 2rem; }
.page__header p { color: var(--ink-dim); margin: 0; }

.flash {
  max-width: 46rem; margin: 1rem auto 0; padding: 0.5rem 1.5rem;
  color: var(--gold); font-style: italic; text-align: center;
}
.flash--alert { color: var(--alert); }

/* Sign in / sign up veil */
.veil { max-width: 22rem; margin: 14vh auto 0; text-align: center; }
.veil__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2rem; letter-spacing: 0.45em; text-transform: uppercase;
  margin-bottom: 0; color: var(--gold);
}
.veil__tagline { color: var(--ink-dim); font-style: italic; margin-top: 0.25rem; }
.veil__alt { color: var(--ink-dim); font-size: 0.9rem; margin-top: 1.5rem; }
.veil .card { text-align: left; margin-top: 2rem; }
.veil .form input[type="submit"] { width: 100%; margin-top: 1.25rem; }
.veil__dev-code code { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); }

/* The one-time code: six characters, monospaced, spread like a constellation */
.form input.form__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.6em; text-align: center; text-transform: uppercase;
}

.shake { animation: shake 400ms both; }

@keyframes shake {
  0%  { transform: translateX(-1.5rem); }
  25% { transform: translateX(1.5rem); }
  50% { transform: translateX(-0.75rem); }
  75% { transform: translateX(0.75rem); }
}

/* Cards & forms */
.card {
  background: var(--paper-high);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.form label { display: block; margin: 1rem 0 0.2rem; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.88rem; }
.form label:first-child { margin-top: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="number"], .form input[type="datetime-local"],
.form input[type="date"], .form input[type="time"],
.form select, .form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--paper-high);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.form input[type="submit"], .button {
  margin-top: 1.5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.4rem;
  background: var(--paper-high);
  border: 1.5px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--gold);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.form input[type="submit"]:hover, .button:hover,
.button--filled { background: var(--gold-bright); border-color: var(--gold-bright); color: #443307; }
.button--filled:hover { background: var(--paper-high); color: var(--gold); }
.button--small { margin-top: 0.5rem; min-height: 2.25rem; padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.form__row { display: flex; gap: 1rem; }
.form__row > div { flex: 1; }
.form__hint { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; margin: 0.3rem 0 0; }
.form__errors { color: var(--alert); font-size: 0.9rem; margin-bottom: 1rem; }
.form__errors p { margin: 0.2rem 0; }

.account p:first-child { margin-top: 0; }
.account__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.account__actions form { margin: 0; }
.account__actions .button { margin-top: 0; }
.account__staff { display: none; }
.account__signout { width: 100%; }
body.hotwire-native .account__staff { display: inline-flex; }

/* Public screens */
.public-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.public-page:has(.veil), .public-page:has(.landing) {
  align-items: start;
}
.landing {
  width: min(100%, 28rem);
  margin-top: 14vh;
  text-align: center;
}
.landing__eyebrow {
  margin: 0 0 0.8rem;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.landing__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 12vw, 4.8rem);
  line-height: 0.95;
  color: var(--ink);
}
.landing__intro {
  margin: 1rem auto 0;
  max-width: 22rem;
  color: var(--ink-dim);
}
.landing__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.landing__actions > :only-child { grid-column: 1 / -1; }
.landing__button {
  width: 100%;
}
.landing__learn { margin-top: 1.5rem; color: var(--ink-dim); font-size: 0.9rem; }
.landing__footer { margin-top: 2.5rem; font-size: 0.85rem; color: var(--ink-dim); }
.landing__footer a { color: var(--ink-dim); }
.landing__footer a:hover { color: var(--gold); }

/* The front page: the whole case for Sidereal, told top to bottom, in the
   same dawn the app is built from. Nothing new is invented here — the
   type, the gold, and the element colours are the ones the seeker will
   meet again inside. Only the rhythm is different: long, with air.

   The public screens are a centring grid, which is right for a sign-in
   card and wrong for a page that scrolls. This one takes the width back. */
.public-page:has(.front) {
  display: block;
  padding: 0;
  place-items: initial;
}

.front { text-align: left; }

.front section {
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: 5.5rem max(1.25rem, env(safe-area-inset-left)) 5.5rem max(1.25rem, env(safe-area-inset-right));
}

/* A band that steps forward a shade, so the eye has somewhere to rest
   between movements. It bleeds the full width while its words don't. */
.front__movement--tinted, .front__stance, .front__tills {
  position: relative;
}
.front__movement--tinted::before, .front__stance::before, .front__tills::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--wash);
  border-block: 1px solid var(--line);
  z-index: -1;
}

/* The hero. The title takes the whole width it can get, and the wheel
   turns beneath it like the sky it's drawn from. */
.front__hero {
  text-align: center;
  padding-top: max(6rem, 12vh);
  padding-bottom: 3rem;
}
.front__eyebrow {
  margin: 0 0 0.8rem;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.front__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 5rem);
  line-height: 0.95;
  color: var(--ink);
  text-wrap: balance;
}
.front__intro {
  margin: 1.2rem auto 0;
  max-width: 30rem;
  font-size: 1.1rem;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.front__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.front__button { margin-top: 0; min-width: 11rem; }
.front__learn { margin-top: 1.5rem; color: var(--ink-dim); font-size: 0.9rem; }

/* The zodiac, drawn by the same hand that draws it inside. It turns once
   very slowly — enough to be alive, not enough to be a distraction. */
.front__wheel {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}
.front__wheel .zodiac-ring {
  animation: front-turn 240s linear infinite;
}
@keyframes front-turn {
  to { transform: rotate(-360deg); }
}

/* Each movement: a gold kicker, a display heading, and prose set at
   reading width. */
.front__kicker {
  margin: 0 0 0.6rem;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.front__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.front__prose {
  margin: 1.1rem 0 0;
  max-width: 36rem;
  font-size: 1.05rem;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.front__link { font-family: var(--font-ui); font-weight: 600; }

/* What it costs. Two plans, the paid one wearing the gold hem — the same
   signal the till uses inside. */
.front__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.front__plan {
  background: var(--paper-high);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.front__plan--paid { border-color: var(--gold-dim); }
.front__plan-name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.front__plan-price {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.front__plan-interval {
  margin-left: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-dim);
}
.front__plan-aside { margin: 0.4rem 0 0; color: var(--ink-dim); font-size: 0.9rem; }
.front__plan-points {
  margin: 1.2rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
}
.front__plan-points li { margin-top: 0.5rem; }
.front__plan-points li::marker { color: var(--gold-dim); }
.front__fine {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.front__tills .front__actions { justify-content: flex-start; }

/* The questions, closed until asked. */
.front__question {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.front__question summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.front__question summary::-webkit-details-marker { display: none; }
.front__question summary::before {
  content: "✦";
  margin-right: 0.6rem;
  color: var(--gold-dim);
}
.front__question[open] summary::before { color: var(--gold); }
.front__question p { margin: 0.8rem 0 0 1.5rem; color: var(--ink-dim); }
.front__questions .front__heading { margin-bottom: 1rem; }

/* The colophon: the same four links at the foot of every Eadiefleet app. */
.colophon {
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: 3rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.colophon a { color: var(--ink-dim); }
.colophon a:hover { color: var(--gold); }
.colophon__house { margin: 0.8rem 0 0; }

/* In the app, the seeker has already arrived — the sales pitch would be a
   wall between them and the two doors in. Only the hero is kept. */
body.hotwire-native .front > :not(.front__hero) { display: none; }
body.hotwire-native .front__wheel { margin-top: 2.5rem; }

/* Papers — privacy, terms, support */
.public-page:has(.paper) { align-items: start; }
.paper { width: min(100%, 42rem); margin: 6vh auto; text-align: left; }
.paper__header { position: relative; margin-bottom: 2rem; padding-right: 3.5rem; }
.paper__eyebrow {
  margin: 0 0 0.6rem; color: var(--gold); font-family: var(--font-ui);
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.paper h1 { font-family: var(--font-display); font-weight: 600; margin: 0; }
.paper h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 2.2rem 0 0.6rem; }
.paper p, .paper li { line-height: 1.7; }
.paper ul { padding-left: 1.2rem; }
.paper li { margin-bottom: 0.4rem; }
.paper__standing { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.4rem; }
.paper__lede { color: var(--ink-dim); font-size: 1.08rem; }
.paper__contact { margin: 1.5rem 0; }
.paper__footer {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-dim);
}
.paper__footer a { color: var(--ink-dim); }
.paper__footer a:hover { color: var(--gold); }

/* What a chart is still waiting on. Quiet — nothing here is wrong, the
   planets are all placed; this is only the part that has yet to arrive. */
.awaiting {
  margin: 0 0 1.75rem; padding: 0.9rem 1.1rem;
  border: 1px dashed var(--line-strong); border-radius: 10px;
}
.awaiting__line { margin: 0; color: var(--ink-dim); font-size: 0.92rem; }
.awaiting .button { margin-top: 0.75rem; }

/* What iOS says about push, and the silence nobody asked for. */
.standing { margin-top: 1.1rem; display: grid; gap: 0.9rem; }
.standing__row { margin: 0; color: var(--ink-dim); font-size: 0.9rem; line-height: 1.55; }
.standing__row strong { display: block; color: var(--ink); font-weight: 600; }
.standing__row .button { margin-top: 0.5rem; }
.standing__nothing {
  margin: 1.1rem 0 0; padding: 0.8rem 1rem;
  border-left: 3px solid var(--gold-dim); border-radius: 4px;
  color: var(--ink-dim); font-size: 0.9rem; line-height: 1.55;
}
.morning-call__label strong { display: block; color: var(--ink); font-weight: 600; }
.morning-call__label span { color: var(--ink-dim); font-size: 0.9rem; }

/* How the Seer may reach you: one channel a line, the box in its own
   column, the same shape the settings panel uses for the same question. */
.reachable__channel {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  align-items: start; margin: 0 0 1.1rem; cursor: pointer; line-height: 1.5;
}
.reachable__channel:last-of-type { margin-bottom: 0; }
.form .reachable__channel input[type="checkbox"] {
  margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; min-height: 0;
  accent-color: var(--gold);
}
.reachable__channel strong { display: block; color: var(--ink); font-weight: 600; }
.reachable__channel span { color: var(--ink-dim); font-size: 0.9rem; }
.reachable__aside { margin-top: 1.1rem; }

/* Asking about someone: the door sits under their bond, and what has
   already been asked sits under the door. */
.person-asks { margin-top: 2.5rem; }
.person-asks__past { margin-top: 1.75rem; font-size: 1rem; }

/* The second room: why the circle is worth the trouble, then the naming of
   it — the list growing under the argument as the seeker works. */
.gathering__why p { margin: 0 0 0.9rem; }
.gathering__why p:last-child { margin-bottom: 0; }
.gathering__ask { color: var(--ink-dim); font-size: 0.92rem; }
.gathering__form { margin-top: 1.25rem; }

.gathered { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.gathered__person {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; align-items: baseline;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
}
.gathered__name { font-weight: 600; }
.gathered__relation {
  grid-row: 1; grid-column: 2; color: var(--ink-dim);
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.04em;
}
.gathered__born { grid-column: 1 / -1; color: var(--ink-dim); font-size: 0.85rem; }
.gathered__remove {
  grid-column: 1 / -1; justify-self: start; margin-top: 0.35rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.8rem;
  text-decoration: underline;
}
.gathered__remove:hover { color: var(--ink); }

.onward { margin-top: 1.75rem; }
.onward .form__hint { margin-top: 0.6rem; }

/* The astrologer's plumbing, folded away. Nobody knows their own degrees;
   the place answers for them. Open only when the maps come up empty. */
.by-hand { margin-top: 1.25rem; }
.by-hand summary {
  color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.85rem;
  cursor: pointer;
}
.by-hand summary:hover { color: var(--ink); }
.by-hand[open] summary { margin-bottom: 0.25rem; }

/* Saying you don't know the hour — a plain box under the field it empties,
   sitting closer to it than a label of its own would. */
.form .hour-unknown {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.55rem 0 0; cursor: pointer;
}
.form .hour-unknown input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--gold);
}

/* The morning call's switches: each on its own line, the box in its own
   column, the prose given room to breathe */
.morning-call { display: grid; gap: 1.1rem; max-width: 34rem; }
.morning-call__label {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  align-items: start; line-height: 1.55; cursor: pointer;
}
.morning-call__label input[type="checkbox"] {
  margin-top: 0.28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gold);
}

/* The till speaks up when money is about to change hands, or stop: a
   free week running out, a subscription told not to renew. Quiet enough
   for a settings page, loud enough that nobody is surprised by a
   charge. */
.subscription__notice {
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  background: var(--dawn);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  line-height: 1.55;
}
.subscription__notice strong { color: var(--gold); white-space: nowrap; }
.subscription__trial {
  margin: 1.2rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--dawn);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}
.subscription__trial strong { color: var(--gold); }
.subscription__choices { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
.subscription__choices form { margin: 0; }
.subscription__choices .button { margin-top: 0; }
.subscription__fine { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }

/* Which rail the till offers. Both are rendered — the Seer broadcasts
   the till from a job, where there is no request to read a user agent
   from and one payload goes to every device at once — so the page the
   seeker is actually holding makes the choice. Apple sells through
   StoreKit or not at all (3.1.1), and the app must never so much as
   show the web checkout (3.1.3(b)); on the web the reverse, since a
   bridge button there would post into a bridge that isn't listening. */
body.hotwire-native .till__rail--web { display: none; }
body:not(.hotwire-native) .till__rail--apple { display: none; }

/* The till, standing where the sky closes: at the end of a reading that
   has run out of free follow-ups, or in the door a seeking would have
   opened. An offer, not a wall — so it wears the paper, not an alarm. */
.upgrade {
  border-top: 3px solid var(--gold-bright);
  background: var(--paper-high);
}
.upgrade--inline {
  margin: 1.5rem 0 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-bright);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.upgrade p:first-child { margin-top: 0; }
.upgrade__aside { margin-top: 1.5rem; text-align: center; }

/* Settings, and the door out */
.page__header--home { position: relative; padding-right: 2.75rem; }
.page__settings {
  position: absolute; top: 0.2rem; right: 0;
  color: var(--ink-dim); text-decoration: none;
}
.page__settings svg { display: block; width: 1.7rem; height: 1.7rem; }
.page__settings:hover { color: var(--gold); }
/* The way out of a sheet is the native title bar's, not the page's — this
   element is only the bridge's script for it. */
.page__done { display: none; }
.account-link { margin-top: 2.5rem; text-align: center; }
.button--danger, .form input[type="submit"].button--danger {
  border-color: var(--alert); color: var(--alert); background: transparent;
}
.button--danger:hover, .form input[type="submit"].button--danger:hover {
  background: var(--alert); border-color: var(--alert); color: var(--paper-high);
}

/* Consultations */
.page__back { margin: 0 0 1.25rem; font-size: 0.92rem; }
.page__back a { color: var(--ink-dim); }
.page__back a:hover { color: var(--gold); }

.utterance { margin: 1.25rem 0; }
.utterance__speaker {
  font-family: var(--font-ui);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-dim); margin-bottom: 0.2rem;
}
.utterance--seer .utterance__speaker { color: var(--gold); }
.utterance--seeker .utterance__body { color: var(--ink-dim); }
.utterance--seer .utterance__body { color: var(--ink); }
.utterance__body p { margin: 0 0 0.75rem; }
.utterance__body strong { color: var(--gold); font-weight: 600; }
.utterance__body em { color: var(--ink); }
.utterance__body h1, .utterance__body h2, .utterance__body h3 {
  font-size: 1.05rem; color: var(--gold); margin: 1.25rem 0 0.4rem;
}
.utterance__body ul, .utterance__body ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.utterance__body li { margin: 0.25rem 0; }
.utterance__body hr { border: none; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.utterance__body blockquote {
  margin: 0 0 0.75rem; padding-left: 1rem;
  border-left: 2px solid var(--gold-dim); color: var(--ink-dim);
}
.utterance__body code { font-size: 0.9em; color: var(--gold); }
.utterance__body .glyph { color: var(--gold); margin-right: 0.18em; }
.utterance--noted { color: var(--gold-dim); font-style: italic; font-size: 0.9rem; }

/* Phrases in a reading that live on the seeker's own wheel are links to
   their focus page — a dashed gold thread under the words — and readings
   can carry ✦ chips the Seer attached deliberately. Both raise the chart
   sheet on the web and a native sheet in the app. */
.utterance__focus {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; text-decoration: none;
  border-bottom: 1px dashed var(--gold-dim);
  transition: color 0.25s, border-color 0.25s;
}
.utterance__focus:hover { color: var(--gold); border-bottom-color: var(--gold); text-decoration: none; }
.utterance__foci { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.utterance__focus--chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.3rem 0.85rem; background: var(--paper-high);
  color: var(--ink-dim); font-size: 0.85rem;
}
.utterance__focus--chip:hover { color: var(--gold); border-color: var(--gold-dim); }
.utterance__focus-star { color: var(--gold-bright); margin-right: 0.35em; font-family: var(--font-glyph); font-style: normal; }

/* A doorway the teach hand laid: the lesson's own figure, drawn small,
   carried into the reading. */
.lesson-card {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 0.6rem; padding: 0.6rem 0.9rem;
  max-width: 24rem;
  border: 1px solid var(--gold-dim); border-radius: 12px;
  background: var(--paper-high);
  color: var(--ink); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lesson-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.lesson-card__figure { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.5rem; }
.lesson-card__figure svg { width: 4.5rem; height: 4.5rem; }
.lesson-card__glyph { font-size: 2.2rem; color: var(--gold); }
.lesson-card__words { display: flex; flex-direction: column; gap: 0.15rem; }
.lesson-card__label { font-family: var(--font-display); font-size: 1.05rem; }
.lesson-card__star { color: var(--gold-bright); font-family: var(--font-glyph); }
.lesson-card__come { font-size: 0.82rem; color: var(--ink-dim); }

/* The chart sheet rises like morning to show what's being spoken of. */
.sheet {
  margin: auto auto 0; border: 1px solid var(--line); border-bottom: none;
  border-radius: 16px 16px 0 0; padding: 0.6rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  width: min(100%, 30rem); max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(var(--sheet-glow), var(--paper-high) 55%);
  color: var(--ink);
  box-shadow: 0 -18px 60px rgba(62, 50, 120, 0.28);
}
.sheet[open] { animation: sheet-rise 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.sheet--setting { animation: sheet-set 0.3s ease-in forwards; }
.sheet::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet[open]::backdrop { animation: backdrop-appear 0.4s ease-out; }
@keyframes sheet-rise { from { transform: translateY(100%); opacity: 0.5; } }
@keyframes sheet-set { to { transform: translateY(105%); opacity: 0.4; } }
@keyframes backdrop-appear { from { opacity: 0; } }
.sheet__grip { width: 2.6rem; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 0 auto 0.5rem; }
.sheet__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sheet__title { margin: 0; font-size: 1.05rem; }
.sheet__close {
  background: none; border: 0; padding: 0.15rem 0.55rem;
  color: var(--ink-dim); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.sheet__close:hover { color: var(--ink); }
.sheet .wheel { margin: 0.25rem 0 0.5rem; }
.sheet turbo-frame { display: block; min-height: min(88vw, 24rem); }
.sheet__turning {
  margin: 0; min-height: inherit;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dim); font-style: italic;
}
.sheet turbo-frame[busy] .sheet__turning { animation: gazing-twinkle 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet--setting, .sheet[open]::backdrop,
  .wheel__transit, .wheel__transit-tick, .wheel__sky-star, .wheel__sky-stroke { animation: none; transition: none; }
}

.gazing {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.5rem 0; color: var(--gold-dim); font-style: italic;
}
.gazing__stars { display: inline-flex; gap: 0.35rem; }
.gazing__star {
  color: var(--gold-bright); font-family: var(--font-glyph); font-style: normal;
  animation: gazing-twinkle 1.8s ease-in-out infinite;
}
.gazing__star:nth-child(2) { animation-delay: 0.4s; }
.gazing__star:nth-child(3) { animation-delay: 0.8s; }
@keyframes gazing-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .gazing__star { animation: none; opacity: 0.8; }
}

.consult__ask { margin-top: 2rem; }
.consult__ask textarea { width: 100%; }

/* The wheel: bigger than before, wearing the elements as tinted wedges. */
.wheel { margin: 0 0 2.5rem; position: relative; }
.wheel svg { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; }

/* Selections read out in the heart of the wheel — a soft daylight halo so
   the chart and its lit chords stay visible straight through the reading. */
.wheel__reading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(52vw, 13rem);
  display: flex; flex-direction: column; gap: 0.25rem; align-items: center;
  text-align: center; pointer-events: none;
  font-size: 0.82rem; color: var(--ink-dim);
  text-shadow: var(--halo-glow);
  animation: reading-appear 0.35s ease-out;
}
.wheel__reading[hidden] { display: none; }
.wheel__reading strong { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.wheel__reading-glyph { font-size: 1.5rem; color: var(--ink); font-family: var(--font-glyph); font-style: normal; }
.wheel__reading-glyph button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-shadow: inherit; pointer-events: auto; cursor: pointer;
}
.wheel__reading-glyph button:hover { color: var(--gold); }
.wheel__reading-retro { color: var(--gold-dim); font-style: italic; font-size: 0.78rem; }
.wheel__reading-aspects { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; justify-content: center; margin-top: 0.25rem; }
.wheel__reading-aspect {
  white-space: nowrap; font-size: 0.75rem;
  background: none; border: 0; padding: 0; font-family: inherit;
  text-shadow: inherit; pointer-events: auto; cursor: pointer;
}
.wheel__reading-aspect:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wheel__reading-aspect--conjunction { color: var(--gold); }
.wheel__reading-aspect--trine, .wheel__reading-aspect--sextile { color: var(--air); }
.wheel__reading-aspect--square, .wheel__reading-aspect--opposition { color: var(--fire); }
@keyframes reading-appear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel__reading { animation: none; }
}

/* The zodiac band wears the four elements as pale candy. */
.wheel__wedge { stroke: none; }
.wheel__wedge--fire { fill: color-mix(in srgb, var(--fire) 14%, var(--wash)); }
.wheel__wedge--earth { fill: color-mix(in srgb, var(--earth) 14%, var(--wash)); }
.wheel__wedge--air { fill: color-mix(in srgb, var(--air) 14%, var(--wash)); }
.wheel__wedge--water { fill: color-mix(in srgb, var(--water) 14%, var(--wash)); }

.wheel__rim { fill: none; stroke: var(--line-strong); }
.wheel__rim--inner { stroke: var(--line-strong); opacity: 0.7; }
.wheel__boundary { stroke: var(--halo); }
.wheel__cusp { stroke: var(--line-strong); opacity: 0.8; }
.wheel__cusp--angle { stroke: var(--gold-dim); }
.wheel__sign { font-size: 15px; font-family: var(--font-glyph); }
.wheel__sign--fire { fill: var(--fire); }
.wheel__sign--earth { fill: var(--earth); }
.wheel__sign--air { fill: var(--air); }
.wheel__sign--water { fill: var(--water); }
.wheel__house { fill: var(--ink-dim); font-size: 8px; opacity: 0.8; font-family: var(--font-ui); }
.wheel__angle { fill: var(--gold); font-size: 9px; letter-spacing: 0.08em; cursor: pointer; pointer-events: all; font-family: var(--font-ui); }
.wheel__angle.lit { fill: var(--ink); }
.wheel__tick { stroke: var(--ink-dim); }
.wheel__anchor { fill: var(--ink-dim); }
.wheel__body { fill: var(--ink); font-size: 16px; font-family: var(--font-glyph); }
.wheel__retro { fill: var(--gold-dim); font-size: 8px; }
.wheel__degree { fill: var(--gold); font-size: 8.5px; opacity: 0; transition: opacity 0.3s; font-family: var(--font-ui); }
.wheel__sign, .wheel__house, .wheel__angle, .wheel__body, .wheel__degree { text-anchor: middle; dominant-baseline: central; font-style: normal; }
.wheel__hit { fill: transparent; }
.wheel__aspect { stroke-width: 0.9; opacity: 0.7; transition: opacity 0.3s, stroke-width 0.3s; }
.wheel__aspect--conjunction { stroke: var(--gold-bright); }
.wheel__aspect--trine, .wheel__aspect--sextile { stroke: var(--air); }
.wheel__aspect--square, .wheel__aspect--opposition { stroke: var(--fire); }

/* Planets sit at their true degrees; a tapped cluster fans open along its
   spokes with a little spring. Selection dims the rest of the wheel. */
.wheel__planet {
  cursor: pointer;
  transform: var(--rest);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.wheel__planet.fanned { transform: var(--fan); }
.wheel__planet.fanned .wheel__degree, .wheel__planet.lit .wheel__degree { opacity: 1; }
.wheel__spoke { stroke: var(--gold-dim); stroke-width: 0.6; opacity: 0; transition: opacity 0.4s; }
.wheel__spoke.lit { opacity: 0.7; }

.wheel-focus .wheel__planet:not(.lit):not(.fanned) { opacity: 0.25; }
.wheel-focus .wheel__aspect { opacity: 0.08; }
.wheel-focus .wheel__aspect.lit { opacity: 1; stroke-width: 1.6; }
.wheel-focus .wheel__sign, .wheel-focus .wheel__house { opacity: 0.35; }
.wheel-focus .wheel__wedge { opacity: 0.45; }
.wheel__planet.lit .wheel__body { fill: var(--gold); }

/* Another chart laid over this one: their bodies ride the outer ring in
   water-violet, the tightest crossings strung between the two skies. The
   natal chords fall quiet so the between-story leads. Tapping a crossing
   (chord or ledger row) lights its pair and dims the rest. */
.wheel--paired .wheel__aspect { opacity: 0.12; }
.wheel__inter { cursor: pointer; transition: opacity 0.3s, stroke-width 0.3s; }
.wheel--crossed .wheel__inter:not(.lit) { opacity: 0.12; }
.wheel__inter.lit { opacity: 1; stroke-width: 1.9; }
.wheel--crossed .wheel__other:not(.lit) { opacity: 0.25; }
.wheel__other.lit .wheel__body { fill: var(--gold); }
.wheel--crossed .wheel__planet:not(.lit) { opacity: 0.25; }
.wheel--crossed .wheel__wedge { opacity: 0.45; }
.wheel--crossed .wheel__sign { opacity: 0.4; }
.wheel__other-tick { stroke: var(--water); opacity: 0.6; }
.wheel__other .wheel__body { fill: var(--water); font-size: 14px; }
.wheel__inter { stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.75; }
.wheel__inter--conjunction { stroke: var(--gold-bright); }
.wheel__inter--trine, .wheel__inter--sextile { stroke: var(--air); }
.wheel__inter--square, .wheel__inter--opposition { stroke: var(--fire); }

/* The sky: transiting bodies ride an outer ring in wandering gold, drifting
   into place when revealed. Their chords to the natal chart are dashed —
   the sky passing over, not woven in. */
.wheel__face { position: relative; }
.wheel__sky-layer { pointer-events: none; visibility: hidden; transition: visibility 0s 0.55s; }
.wheel--sky .wheel__sky-layer { pointer-events: auto; visibility: visible; transition: visibility 0s; }
.wheel__transit {
  cursor: pointer;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.wheel--sky .wheel__transit { opacity: 1; }
.wheel--scrubbing .wheel__transit { transition: none; }
.wheel__transit .wheel__body { fill: var(--gold); font-size: 14px; }
.wheel__transit.lit .wheel__body { fill: var(--ink); }
.wheel__transit.lit .wheel__degree { opacity: 1; }
.wheel__transit-tick { stroke: var(--gold-dim); opacity: 0; transition: opacity 0.5s; }
.wheel--sky .wheel__transit-tick { opacity: 0.65; }
.wheel-focus .wheel--sky .wheel__transit:not(.lit) { opacity: 0.25; }

.wheel__sky-stroke { stroke-width: 1; stroke-dasharray: 5 4; transition: opacity 0.35s; pointer-events: none; }
.wheel__sky-grab { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.wheel__sky-chord--conjunction .wheel__sky-stroke { stroke: var(--gold-bright); }
.wheel__sky-chord--trine .wheel__sky-stroke, .wheel__sky-chord--sextile .wheel__sky-stroke { stroke: var(--air); }
.wheel__sky-chord--square .wheel__sky-stroke, .wheel__sky-chord--opposition .wheel__sky-stroke { stroke: var(--fire); }
.wheel__sky-chord.lit .wheel__sky-stroke { stroke-width: 1.7; }

.wheel__sky-bar { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-top: 0.85rem; }
.wheel__sky-toggle {
  display: inline-flex; align-items: center; min-height: 2.4rem;
  background: var(--paper-high); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.4rem 1.1rem; color: var(--gold); font: inherit; font-family: var(--font-ui); font-size: 0.88rem;
  letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.wheel__sky-toggle:hover, .wheel__sky-toggle--open { color: var(--ink); border-color: var(--gold-dim); }
.wheel__sky-star { display: inline-block; margin-right: 0.4rem; font-family: var(--font-glyph); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wheel__sky-toggle--open .wheel__sky-star { transform: rotate(180deg) scale(1.2); }

/* The scrubber: a thread of gold with today marked at its heart. */
.wheel__scrub { width: min(100%, 26rem); }
.wheel__scrubber {
  width: 100%; height: 1.5rem; margin: 0; appearance: none; -webkit-appearance: none;
  background:
    radial-gradient(circle, var(--gold) 1.5px, transparent 2.5px) center / 8px 8px no-repeat,
    linear-gradient(to right, transparent, var(--gold-dim) 18%, var(--gold-dim) 82%, transparent) center / 100% 1.5px no-repeat;
  cursor: grab;
}
.wheel__scrubber:active { cursor: grabbing; }
.wheel__scrubber::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sun-core), var(--gold-bright) 60%, var(--gold-dim));
  box-shadow: 0 0 12px rgba(212, 180, 106, 0.55);
}
.wheel__scrubber::-moz-range-thumb {
  width: 1.35rem; height: 1.35rem; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sun-core), var(--gold-bright) 60%, var(--gold-dim));
  box-shadow: 0 0 12px rgba(212, 180, 106, 0.55);
}
.wheel__scrub-day {
  display: flex; justify-content: center; align-items: baseline; gap: 0.9rem;
  margin: 0.35rem 0 0; min-height: 1.4rem;
  color: var(--ink-dim); font-size: 0.85rem; font-style: italic; text-align: center;
}
.wheel__scrub-today {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem;
  color: var(--gold); cursor: pointer;
}
.wheel__scrub-today:hover { color: var(--ink); }
.wheel__reading-quiet { color: var(--ink-dim); font-style: italic; font-size: 0.78rem; }

.ledger--linked tbody tr { cursor: pointer; }
.ledger--linked tbody tr:hover td { color: var(--gold); }
.ledger--linked tbody tr.lit td { color: var(--gold); border-color: var(--gold-dim); }
.ledger--linked .glyph { color: var(--gold-dim); margin-right: 0.45em; }
.ledger--linked tr.lit .glyph { color: var(--gold); }

.form__tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.3rem; }
.form__tag { display: flex; gap: 0.4rem; align-items: center; font-size: 0.95rem; }

/* The dashboard: tiles that drive the day, each with its own dawn color. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin: 0 0 2rem;
}
.tile {
  --accent: var(--gold-bright);
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 14px;
  text-decoration: none; background: var(--paper-high);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tile:nth-child(2) { --accent: var(--air); }
.tile:nth-child(3) { --accent: var(--water); }
.tile:nth-child(4) { --accent: var(--earth); }
.tile:hover, .tile:hover * { text-decoration: none; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(62, 50, 120, 0.16); }
.tile__kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent);
}
.tile__title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--ink); }
.tile__teaser { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }

/* A tile whose door opens onto the till. Still shown and still worth
   wanting — the lock is a price tag, not a closed sign. */
.tile--locked { position: relative; }
.tile--locked .tile__title { color: var(--ink-dim); }
.tile__lock { position: absolute; top: 1rem; right: 1.1rem; color: var(--accent); }
.tile__lock svg { display: block; width: 1.05rem; height: 1.05rem; }
.tile--locked:hover .tile__lock { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
}

/* Learn: the Seer's vocabulary, laid out for the curious */
.learn__contents { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; font-size: 0.85rem; }
.learn__contents a { color: var(--gold); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-ui); font-weight: 700; }
.learn__contents a:hover { color: var(--ink); }
.learn { max-width: 42rem; margin-bottom: 2.5rem; }
.learn h3 { margin-top: 1.5rem; }
.learn__list { margin: 0.8rem 0 0; }
.learn__list dt { color: var(--ink); font-weight: 600; margin-top: 0.7rem; }
.learn__list dt .glyph { color: var(--gold); margin-right: 0.4em; }
.learn__list dd { margin: 0.1rem 0 0; color: var(--ink-dim); font-size: 0.92rem; }
.learn__list--houses dt { display: inline-block; min-width: 2.6rem; margin-right: 0.4rem; }
.learn__list--houses dd { display: inline; }
.learn__list--houses dd::after { content: ""; display: block; }

/* Each element's family wears its color — you learn the elements by eye. */
.learn__group { border-left: 3px solid var(--line); padding-left: 1rem; margin-top: 1.25rem; }
.learn__group--fire { border-color: var(--fire); }
.learn__group--earth { border-color: var(--earth); }
.learn__group--air { border-color: var(--air); }
.learn__group--water { border-color: var(--water); }
.learn__group--fire h3, .learn__group--fire dt .glyph { color: var(--fire); }
.learn__group--earth h3, .learn__group--earth dt .glyph { color: var(--earth); }
.learn__group--air h3, .learn__group--air dt .glyph { color: var(--air); }
.learn__group--water h3, .learn__group--water dt .glyph { color: var(--water); }
.learn__group h3 { margin-top: 0; }

/* The aspects, drawn at their true angles. */
.aspect-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.aspect-card {
  padding: 1rem; text-align: center;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.aspect-card__name { font-size: 1.05rem; margin: 0.5rem 0 0.2rem; }
.aspect-card__name .glyph { color: var(--gold); margin-right: 0.25em; }
.aspect-card__gloss { margin: 0; color: var(--ink-dim); font-size: 0.82rem; line-height: 1.45; }
.aspect-figure { width: 5.5rem; height: 5.5rem; }
.aspect-figure__ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.aspect-figure__chord { stroke-width: 2.5; stroke-linecap: round; }
.aspect-figure__body { fill: var(--ink); }
.aspect-figure__body--other { fill: var(--gold-bright); }
.aspect-figure--conjunction .aspect-figure__body--other { fill: var(--gold-bright); }
.aspect-figure--trine .aspect-figure__chord, .aspect-figure--sextile .aspect-figure__chord { stroke: var(--air); }
.aspect-figure--square .aspect-figure__chord { stroke: var(--fire); }
.aspect-figure--opposition .aspect-figure__chord { stroke: var(--water); }

/* The dashboard's bands announce themselves quietly. */
.dashboard__band {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 2.2rem 0 0.8rem;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-dim);
}
.dashboard__band:first-of-type { margin-top: 0; }
.dashboard__band-link {
  font-weight: 600; font-size: 0.8rem;
  text-transform: none; letter-spacing: 0.02em;
}

/* The almanac: the day's small sky facts in a quiet row between the
   readings and the questions. */
.almanac {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.6rem; margin: 0 0 2rem;
}
.almanac__fact {
  --accent: var(--line-strong);
  display: flex; flex-direction: column; gap: 0.05rem;
  padding: 0.6rem 0.9rem 0.65rem;
  background: var(--paper-high); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  text-decoration: none;
}
.almanac__fact--fire { --accent: var(--fire); }
.almanac__fact--earth { --accent: var(--earth); }
.almanac__fact--air { --accent: var(--air); }
.almanac__fact--water { --accent: var(--water); }
.almanac__fact--gold { --accent: var(--gold-bright); }
.almanac__glyph { color: var(--accent); font-size: 1.1rem; }
.almanac__fact--fire .almanac__glyph { color: var(--fire); }
.almanac__label { color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.almanac__line { color: var(--ink-dim); font-size: 0.8rem; font-style: italic; }
.almanac__fact--door { position: relative; padding-right: 2.2rem; }
.almanac__fact--door:hover { border-color: var(--gold-dim); text-decoration: none; }
.almanac__go {
  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-family: var(--font-ui);
}

/* Learn's constellation: topic tiles with little drawn figures, and the
   rings and cards inside each lesson. */
.tiles--teachings .tile { align-items: flex-start; }
.tile.tile--fire { --accent: var(--fire); }
.tile.tile--earth { --accent: var(--earth); }
.tile.tile--air { --accent: var(--air); }
.tile.tile--water { --accent: var(--water); }
.tile.tile--gold { --accent: var(--gold-bright); }
.tile__figure { display: block; margin: 0.2rem auto 0.3rem; }
.tile__figure svg { display: block; }
.tile__figure--glyphs {
  display: flex; gap: 0.6rem; align-items: center; justify-content: center;
  min-height: 5rem; font-size: 1.9rem; color: var(--gold-bright);
}

.lesson-ring { margin: 0 0 2rem; text-align: center; }
.lesson-ring svg { display: inline-block; }

.zodiac-ring__wedge { stroke: var(--halo); stroke-width: 0.75; }
.zodiac-ring__wedge--fire { fill: color-mix(in srgb, var(--fire) 22%, var(--wash)); }
.zodiac-ring__wedge--earth { fill: color-mix(in srgb, var(--earth) 22%, var(--wash)); }
.zodiac-ring__wedge--air { fill: color-mix(in srgb, var(--air) 22%, var(--wash)); }
.zodiac-ring__wedge--water { fill: color-mix(in srgb, var(--water) 22%, var(--wash)); }
.zodiac-ring__wedge--dim { fill: var(--paper); }
.zodiac-ring__glyph {
  font-family: var(--font-glyph); font-size: 10px;
  text-anchor: middle; dominant-baseline: central;
}
.zodiac-ring__glyph--fire { fill: var(--fire); }
.zodiac-ring__glyph--earth { fill: var(--earth); }
.zodiac-ring__glyph--air { fill: var(--air); }
.zodiac-ring__glyph--water { fill: var(--water); }
.zodiac-ring__glyph--dim { fill: var(--line-strong); }

.house-ring__room { fill: var(--paper-high); stroke: var(--line-strong); stroke-width: 0.75; }
.house-ring__room--angular { fill: color-mix(in srgb, var(--gold-bright) 20%, var(--wash)); }
.house-ring__number {
  font-family: var(--font-ui); font-size: 9px; fill: var(--ink-dim);
  text-anchor: middle; dominant-baseline: central;
}

/* Lit: the chart's own contents glow on the lesson rings. */
.zodiac-ring__wedge--lit { stroke: var(--gold-bright); }
.zodiac-ring__wedge--fire.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--fire) 40%, var(--wash)); }
.zodiac-ring__wedge--earth.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--earth) 40%, var(--wash)); }
.zodiac-ring__wedge--air.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--air) 40%, var(--wash)); }
.zodiac-ring__wedge--water.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--water) 40%, var(--wash)); }
.zodiac-ring__mark {
  font-family: var(--font-glyph); font-size: 8px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}
.house-ring__room--lit { fill: color-mix(in srgb, var(--gold-bright) 34%, var(--wash)); stroke: var(--gold-dim); }
.house-ring__number--lit { fill: var(--ink); font-weight: 700; }

/* The worked example's voice: ✦-led captions and the ring's byline. */
.lesson-ring__caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-dim); font-style: italic; }
.learn__example { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }
.learn__example-star, .sign-card__tenants .glyph, .planet-card__example .glyph { color: var(--gold-bright); }
.sign-card__tenants, .planet-card__example, .house-list__tenants, .aspect-card__example {
  font-size: 0.8rem; color: var(--ink-dim); text-wrap: pretty;
}
.aspect-card__example { margin: 0.4rem 0 0; }

.learn__list .planet-card__example { display: block; margin-top: 0.3rem; }

/* Every tile is a hand raised: tap one and it takes the spotlight. */
a.sign-card, a.planet-card, a.aspect-card { color: inherit; }
.sign-card, .planet-card, .aspect-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.sign-card:hover, a.planet-card:hover, a.aspect-card:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(62, 50, 120, 0.16);
}
.house-list__link {
  display: flex; gap: 0.7rem; align-items: baseline; flex: 1;
  color: inherit; text-decoration: none;
}
.house-list__link:hover { text-decoration: none; }
.house-list__link:hover .house-list__meaning { color: var(--ink); }

/* The spotlight's mini chart: the concept at lesson fidelity — the one
   wanderer under the lamp steps forward, the rest recede; the big chart
   is a button away. */
.zodiac-ring__mark--lit { font-size: 12px; fill: var(--gold); }
.zodiac-ring__mark--dim { opacity: 0.35; }
.aspect-figure__glyph {
  font-family: var(--font-glyph); font-size: 11px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}

/* A taught concept wears a gold halo and scrolls into reach. */
.sign-card--taught, .planet-card--taught, .aspect-card--taught, .house-list__house--taught {
  border: 1px solid var(--gold-bright);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-bright) 30%, transparent);
}
.sign-card--taught, .planet-card--taught, .aspect-card--taught,
.house-list__house--taught, .learn__group { scroll-margin-top: 5rem; }

/* The spotlight: a doorway from a reading lands on the one concept it
   promised — its figure drawn large beside the glossary's telling and the
   sky it applies to, with the whole lesson flowing below. */
.spotlight {
  display: flex; align-items: center; gap: 1.6rem;
  margin: 0 0 2.4rem; padding: 1.5rem 1.7rem;
  border: 1px solid var(--gold-dim); border-radius: 16px;
  background: linear-gradient(color-mix(in srgb, var(--gold-bright) 9%, var(--paper-high)), var(--paper-high));
  box-shadow: var(--shadow);
}
.spotlight__figure { flex-shrink: 0; margin: 0; display: flex; align-items: center; justify-content: center; width: 10rem; }
.spotlight__figure svg { width: 10rem; height: 10rem; display: block; }
.spotlight__glyph { font-size: 4.5rem; line-height: 1; color: var(--gold); }
.spotlight__kicker {
  margin: 0; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold);
}
.spotlight__title { margin: 0.1rem 0 0.35rem; }
.spotlight__text { margin: 0 0 0.4rem; color: var(--ink-dim); }
.spotlight__chip { margin-top: 0.5rem; }
.spotlight__more { margin: 0.9rem 0 0; font-family: var(--font-ui); font-size: 0.88rem; }
@media (max-width: 540px) {
  .spotlight { flex-direction: column; text-align: center; }
  .spotlight__words { display: flex; flex-direction: column; align-items: center; }
}

/* The arrival: one orchestrated moment, spoken in the sky's own tongue.
   The ring turns to its station, the wanderers alight at their seats a
   breath later, and the words rise like dawn. Seekers who ask for less
   motion get a page that simply is. */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth scrolling is the web's manner; the native app has scroll
     physics of its own and the webview must not second-guess them. */
  html:not(:has(body.hotwire-native)) { scroll-behavior: smooth; }

  .lesson-ring svg, .spotlight__figure svg {
    animation: ring-settle 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .zodiac-ring__mark {
    transform-box: fill-box; transform-origin: center;
    animation: mark-alight 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s backwards;
  }
  .spotlight__words > * { animation: words-dawn 0.55s ease-out 0.2s backwards; }
  .spotlight__glyph { animation: wanderer-drift 6s ease-in-out 1s infinite alternate; }
  .lesson-card { animation: words-dawn 0.5s ease-out backwards; }
}
@keyframes ring-settle { from { opacity: 0; transform: rotate(-14deg) scale(0.96); } }
@keyframes mark-alight { from { opacity: 0; transform: scale(0.2); } }
@keyframes words-dawn { from { opacity: 0; transform: translateY(10px); } }
@keyframes wanderer-drift { to { transform: translateY(-5px); } }

.sign-cards, .planet-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem; margin-top: 0.8rem;
}
.sign-card, .planet-card {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.9rem 1rem; text-align: center;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.sign-card__glyph, .planet-card__glyph { font-size: 1.7rem; }
.sign-card--fire .sign-card__glyph { color: var(--fire); }
.sign-card--earth .sign-card__glyph { color: var(--earth); }
.sign-card--air .sign-card__glyph { color: var(--air); }
.sign-card--water .sign-card__glyph { color: var(--water); }
.planet-card__glyph { color: var(--gold); }
.sign-card__name, .planet-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.sign-card__dates { font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.sign-card__text, .planet-card__text { font-size: 0.82rem; color: var(--ink-dim); line-height: 1.45; }

.house-list { columns: 2; gap: 2rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.house-list__house { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.3rem 0; break-inside: avoid; }
.house-list__number {
  flex: none; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; color: var(--gold);
  background: var(--paper-high);
}
.house-list__meaning { color: var(--ink-dim); font-size: 0.92rem; }
@media (max-width: 600px) {
  .house-list { columns: 1; }
}

/* You: the big three worn as a row of charms, and the Seer's portrait */
.essences { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.essences__essence {
  padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper-high);
  font-family: var(--font-ui);
  font-size: 0.82rem; color: var(--ink-dim);
}
.essences__essence .glyph { color: var(--gold); margin-right: 0.35em; }
.portrait { max-width: 42rem; }
.portrait__brushdate { font-size: 0.8rem; font-style: italic; margin-bottom: 2rem; }

/* Tables (placements, aspects, synastry) */
.ledger { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.ledger th {
  text-align: left; font-weight: 700; color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--line-strong);
}
.ledger td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); }
.ledger td:first-child { color: var(--ink); }
.ledger .ledger__dim { color: var(--ink-dim); }

/* Aspect kinds wear their colors in every table, matching the wheel. */
.ledger__kind--conjunction { color: var(--gold); }
.ledger__kind--trine, .ledger__kind--sextile { color: var(--air); }
.ledger__kind--square, .ledger__kind--opposition { color: var(--fire); }

/* Placements and aspects worn as chips, not ledgers — rows of touchable
   things that read one per line on a phone. */
.placements, .aspects {
  display: grid; gap: 0.45rem 0.8rem;
  margin: 0.8rem 0 2rem; padding: 0; list-style: none;
}
.placements { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.aspects { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.placements__placement, .aspects__aspect {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: 0.95rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.placements__placement:hover, .aspects__aspect:hover { border-color: var(--gold-dim); }
.placements__placement.lit, .aspects__aspect.lit {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-bright) 14%, var(--wash));
}
.placements__placement > .glyph, .aspects__aspect > .glyph { color: var(--gold); }
.placements__body, .aspects__body { color: var(--ink); font-weight: 600; }
.placements__retro { color: var(--gold-dim); font-family: var(--font-glyph); }
.placements__position { margin-left: auto; color: var(--ink-dim); font-size: 0.88rem; text-align: right; }
.placements__house {
  flex: none; min-width: 1.5rem; text-align: center;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  color: var(--gold); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.05rem 0.3rem; background: var(--paper);
}
.placements__angle {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--gold);
}
.aspects__kind { flex: none; }
.aspects__aspect--conjunction .aspects__kind { color: var(--gold); }
.aspects__aspect--trine .aspects__kind, .aspects__aspect--sextile .aspects__kind { color: var(--air); }
.aspects__aspect--square .aspects__kind, .aspects__aspect--opposition .aspects__kind { color: var(--fire); }
.aspects__orb { margin-left: auto; color: var(--ink-dim); font-size: 0.8rem; }

/* Sign names wear their element wherever positions appear. */
.sign--fire { color: var(--fire); }
.sign--earth { color: var(--earth); }
.sign--air { color: var(--air); }
.sign--water { color: var(--water); }

/* The circle: each person a card, their sun sign worn as a medallion. */
.circle {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem; margin: 0 0 2rem;
}
.person-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 1.3rem 1.1rem 1.1rem; text-align: center; text-decoration: none;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.person-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(62, 50, 120, 0.16); }
.person-card__medallion {
  width: 3.2rem; height: 3.2rem; margin-bottom: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.5rem;
  background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-dim);
}
.person-card__medallion--fire { background: color-mix(in srgb, var(--fire) 16%, var(--wash)); color: var(--fire); border-color: color-mix(in srgb, var(--fire) 40%, var(--wash)); }
.person-card__medallion--earth { background: color-mix(in srgb, var(--earth) 16%, var(--wash)); color: var(--earth); border-color: color-mix(in srgb, var(--earth) 40%, var(--wash)); }
.person-card__medallion--air { background: color-mix(in srgb, var(--air) 16%, var(--wash)); color: var(--air); border-color: color-mix(in srgb, var(--air) 40%, var(--wash)); }
.person-card__medallion--water { background: color-mix(in srgb, var(--water) 16%, var(--wash)); color: var(--water); border-color: color-mix(in srgb, var(--water) 40%, var(--wash)); }
.person-card__unknown { color: var(--gold-bright); font-family: var(--font-glyph); }
.person-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink); }
.person-card__relation {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold);
}
.person-card__line { margin-top: 0.35rem; font-size: 0.82rem; color: var(--ink-dim); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .person-card:hover { transform: none; }
}

/* The card is a link and its controls are forms, so the two are siblings
   in a seat rather than nested. The seat is the grid item; the card grows
   to fill it, so a row of cards stays level whatever their lines say. */
.person { display: flex; flex-direction: column; }
.person .person-card { flex: 1; }
.person__controls {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  margin-top: 0.4rem; min-height: 1.9rem;
}
.person__controls form { margin: 0; }
.person__move, .person__keep {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 0.25rem 0.55rem; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.person__move { font-size: 0.9rem; line-height: 1; }
.person__move:hover, .person__keep:hover { color: var(--gold); border-color: var(--line); }
.person__move[disabled] { opacity: 0.25; cursor: default; }
.person__move[disabled]:hover { color: var(--ink-dim); border-color: transparent; }
.person__keep--kept { color: var(--gold); }

/* Someone who has died keeps their card and loses its lift — the page
   should not appear to be waiting for news of them. */
.person-card--departed { opacity: 0.82; }
.person-card--departed:hover { transform: none; }
.page__departed {
  margin: 0.4rem 0 0; font-family: var(--font-ui); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim);
}

/* What the Seer remembers: a ✦ line apiece, the way a noted memory already
   appears mid-consultation, with the refusal kept quiet at the end. */
.memories { list-style: none; margin: 0 0 1rem; padding: 0; }
.memory {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.memory:last-child { border-bottom: 0; }
.memory__star { color: var(--gold); font-size: 0.85rem; line-height: 1.5; }
.memory__words { flex: 1; min-width: 0; }
.memory__body { margin: 0; line-height: 1.5; }
.memory__stamps {
  margin: 0.25rem 0 0; font-family: var(--font-ui); font-size: 0.72rem;
  color: var(--ink-dim); letter-spacing: 0.04em;
}
.memory__concerning, .memory__theme {
  display: inline-block; margin-right: 0.4rem; padding: 0.1rem 0.4rem;
  border: 1px solid var(--line); border-radius: 6px; text-transform: uppercase;
  font-size: 0.66rem; letter-spacing: 0.1em;
}
.memory__concerning { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.memory form { margin: 0; }
.memory__forget {
  background: none; border: 0; padding: 0.25rem 0.4rem; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.memory__forget:hover { color: var(--alert); }
.memories__more { margin: 0; font-family: var(--font-ui); font-size: 0.85rem; }

/* The bands that separate the kept from the rest of the circle. */
.circle__band {
  margin: 2rem 0 0.35rem; font-family: var(--font-ui); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold);
}
.circle__band + .ledger__dim { margin-top: 0; margin-bottom: 1rem; }

/* Leaving the circle is possible, not prominent: a quiet line at the
   foot of the page. */
.person-leave { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.person-leave__button {
  background: none; border: 0; padding: 0.5rem;
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-dim);
  cursor: pointer;
}
.person-leave__button:hover { color: var(--alert); }

/* Past readings as a quiet stack of doors. */
.readings { margin: 1rem 0 2rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.readings__reading {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  padding: 0.7rem 1rem; text-decoration: none;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 10px;
}
.readings__reading:hover { text-decoration: none; border-color: var(--gold-dim); }
.readings__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.readings__about { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; }
.readings__when { margin-left: auto; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.78rem; }

/* On narrow screens the ledgers tighten, keep each row on one line, and
   scroll sideways when the sky truly cannot fit the page. */
@media (max-width: 600px) {
  .ledger { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ledger th, .ledger td { padding: 0.4rem 0.5rem; font-size: 0.85rem; white-space: nowrap; }
}
/* Staff */
.staff-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.staff-total {
  padding: 1rem;
  background: var(--paper-high);
}
.staff-total span {
  display: block;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.staff-total strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--gold);
  font-size: 1.45rem;
  font-weight: normal;
}
.staff-users {
  min-width: 58rem;
}
.staff-badge {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .masthead {
    display: block;
    padding: calc(0.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  }
  .masthead__bar { width: 100%; }
  .masthead__wordmark {
    font-size: 1rem;
    letter-spacing: 0.28em;
  }
  .masthead__toggle { display: flex; }
  .masthead__links {
    display: none;
    gap: 0.4rem;
    padding-top: 0.85rem;
  }
  .masthead--open .masthead__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .masthead__links--public { display: flex; padding-top: 0; }
  .masthead__link,
  .masthead__signout {
    width: 100%;
    min-height: 2.9rem;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-high);
  }
  .masthead__links--public .masthead__link { border: none; background: none; width: auto; }
  .masthead__links form {
    display: contents;
  }
  .page {
    padding: 1.8rem 1rem calc(4rem + env(safe-area-inset-bottom));
  }
  .page__header { margin-bottom: 1.5rem; }
  h1 { font-size: 1.65rem; }
  .card { padding: 1.1rem; }
  .form input[type="submit"],
  .button {
    width: 100%;
  }
  .account__staff { display: inline-flex; }
  .landing__actions {
    grid-template-columns: 1fr;
  }
  .front section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .front__hero { padding-top: 4rem; }
  .front__plans { grid-template-columns: 1fr; }
  /* The buttons go full width on a phone, so a row of them wants to stack. */
  .front__actions { display: block; }
  .front__button + .front__button { margin-top: 0.75rem; }
  .form__row {
    display: block;
  }
  .staff-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ledger {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ledger th,
  .ledger td {
    white-space: nowrap;
  }

  /* The wheel goes full-bleed on small screens — the chart is the point. */
  .wheel { margin-left: -1rem; margin-right: -1rem; }
  .wheel svg { max-width: none; }
}

/* A concept drilled into: the walk to its neighbours, and the way back up
   to the lesson it belongs to. */
.concept-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.concept-nav__step {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-dim);
  text-decoration: none;
}
.concept-nav__step:hover { color: var(--gold); text-decoration: none; }
.concept-nav__step--on { margin-left: auto; text-align: right; }
.concept-nav__arrow { color: var(--gold); }
.concept-all { font-family: var(--font-ui); font-size: 0.85rem; text-align: center; }

/* The rest of an element's signs, offered at the foot of one of them. */
.concept-kin { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.concept-kin__sign {
  padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-dim); text-decoration: none;
}
.concept-kin__sign:hover { color: var(--gold); border-color: var(--gold); text-decoration: none; }
.concept-kin__sign--here { color: var(--gold); border-color: var(--gold); font-weight: 700; }