@import url("/assets/tokens.css");

* { box-sizing: border-box; }
html { background: var(--c-marketing-ground); color: var(--c-ink-body); }
body { margin: 0; background: var(--c-marketing-ground); font: var(--t-body-ui); }
a { color: var(--c-primary-ink); }
a:hover { color: var(--c-primary-hover); }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: var(--s-xxs); }
[hidden] { display: none !important; }

.skip {
  position: fixed;
  inset-block-start: var(--s-xs);
  inset-inline-start: var(--s-xs);
  z-index: 10;
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: var(--c-on-primary);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.reading-header { border-bottom: 1px solid var(--c-hairline); background: var(--c-canvas); }
.site-nav {
  max-width: 1280px;
  min-height: 44px;
  margin: 0 auto;
  padding: var(--s-md) var(--s-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}
.brand { color: var(--c-ink); font: var(--t-button); letter-spacing: var(--ls-button); text-decoration: none; text-transform: uppercase; }
.brand span { color: var(--c-primary-ink); }
.nav-links { display: flex; gap: var(--s-lg); }
.nav-links a { font: var(--t-caption); }

.reading-layout {
  width: min(calc(100% - (2 * var(--s-lg))), 1280px);
  margin: 0 auto;
  padding-block: var(--s-xl) var(--s-section);
}
.reading-page-tools {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding-bottom: var(--s-lg);
  border-bottom: 1px solid var(--c-hairline);
}
.reading-page-tools .reading-neighbours { flex: 1; }
.reading-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(300px, 360px);
  justify-content: center;
  align-items: start;
  gap: var(--s-xxl);
  padding-top: var(--s-lg);
}
/* The rail holds state, not navigation: the shape of today, Lilly, then the date picker.
   data-lilly-dock makes it her dock host, so /reading gets the same panel as /calendar. */
.reading-companion { display: grid; gap: var(--s-md); align-content: start; position: sticky; inset-block-start: var(--s-lg); }
.calendar-shell,
.rail-card {
  padding: var(--s-md);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-canvas);
}
.calendar-shell summary { min-height: 44px; cursor: pointer; color: var(--c-ink); font: var(--t-heading-3); }
.month-calendar-placeholder { padding-block: var(--s-lg); color: var(--c-ink-muted); font: var(--t-caption); }
.reading-calendar-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--s-xs); text-align: center; }
.reading-calendar-weekdays,
.reading-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-xxs); }
.reading-calendar-weekdays { margin-block: var(--s-sm) var(--s-xs); color: var(--c-ink-muted); font: var(--t-caption); text-align: center; }
.reading-calendar-day { position: relative; min-width: 0; min-height: 44px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; color: var(--c-ink); cursor: pointer; font: var(--t-data); }
.reading-calendar-day.empty { color: var(--c-ink-faint); cursor: default; }
.reading-calendar-day.beyond { color: var(--c-ink-faint); text-decoration: underline dotted var(--c-hairline-strong); cursor: default; }
.reading-calendar-day.today { border-color: var(--c-primary); }
.reading-calendar-day.viewed { background: var(--c-primary-wash); color: var(--c-on-primary); }
.reading-leaf-mark { position: absolute; inset-inline: 0; inset-block-end: var(--s-xxs); color: var(--c-primary-ink); font-style: normal; line-height: 1; }
.reading-calendar-legend,
.reading-horizon-copy { color: var(--c-ink-muted); font: var(--t-caption); }
.reading-horizon-copy { font-style: italic; }
.reading-neighbours { display: flex; justify-content: space-between; gap: var(--s-sm); }
.reading-neighbours button { min-height: 44px; border: 0; background: transparent; color: var(--c-primary-ink); cursor: pointer; font: var(--t-button); }
.reading-neighbours button:disabled { color: var(--c-ink-faint); cursor: default; }

.reading-leaf { min-width: 0; }
.reading-fold { padding-block: var(--s-xl) var(--s-xxl); border-bottom: 1px solid var(--c-hairline); }
.eyebrow,
.section-label { margin: 0 0 var(--s-sm); color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.reading-date { margin: 0; color: var(--c-ink); font: var(--t-heading-1); letter-spacing: var(--ls-heading-1); }
/* glance held the largest type on the page because nothing else could take the h1. It is a
   ~60-character impression written to sit under a heading, not to be one. title is the heading;
   glance sets beneath it as the standfirst, and the verdict follows in the reading face. */
.reading-title { margin: var(--s-sm) 0 0; color: var(--c-ink); font: var(--t-display-lg); letter-spacing: var(--ls-display-lg); text-wrap: balance; }
.reading-glance { margin: var(--s-xs) 0 var(--s-md); color: var(--c-primary-ink); font: var(--t-reading-lg); font-style: italic; text-wrap: pretty; }
.reading-verdict { margin: 0; color: var(--c-ink-body); font: var(--t-reading-lg); text-wrap: pretty; }

.section-heading { margin: var(--s-section) 0 var(--s-xl); display: flex; align-items: center; gap: var(--s-sm); }
.section-heading span { color: var(--c-primary-ink); }
.section-heading h2 { margin: 0; color: var(--c-ink); font: var(--t-heading-1); letter-spacing: var(--ls-heading-1); }
.section-heading.compact { margin-block: 0 var(--s-lg); }
.section-heading.compact h2 { font: var(--t-heading-2); letter-spacing: var(--ls-heading-2); }
.reading-prose { max-width: 66ch; color: var(--c-ink-body); font: var(--t-reading); hanging-punctuation: first; text-wrap: pretty; }
.reading-prose p { margin: 0 0 var(--s-lg); }
#full p:first-child::first-letter {
  float: left;
  margin-inline-end: var(--s-xs);
  color: var(--c-primary-ink);
  font-family: var(--font-display);
  font-size: 3.2em;
  line-height: .8;
}
/* Everything about today sits inside one group, in the order it is read: the practice, the
   reading, why it reads that way, and the chart it rests on. Nothing larger than the day is
   named until this group has closed. */
.reading-today { display: grid; gap: var(--s-xl); }
.reading-period { margin-block: var(--s-section) 0; padding-top: var(--s-xl); border-top: 1px solid var(--c-hairline); }
.reading-more { max-width: 66ch; margin: 0; border: 1px solid var(--c-hairline); border-radius: var(--r-md); background: var(--c-canvas); padding: var(--s-sm) var(--s-md); }
.reading-more summary { min-height: 44px; display: flex; align-items: center; gap: var(--s-sm); cursor: pointer; color: var(--c-ink); font: var(--t-heading-3); }
.reading-more[open] { padding-bottom: var(--s-lg); }
.reading-more[open] summary { margin-bottom: var(--s-md); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--c-hairline); }
.reading-more-hint { color: var(--c-ink-muted); font: var(--t-caption); font-weight: 400; }
.month-disclosure { max-width: none; }
.chart-disclosure { max-width: none; }
.reading-note { max-width: 66ch; margin: 0; padding: var(--s-lg); border-left: 3px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-surface-tint); }
.reading-note > h2 { margin: 0 0 var(--s-lg); color: var(--c-ink); font: var(--t-heading-2); letter-spacing: var(--ls-heading-2); }
.reading-guidance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xl); }
.reading-guidance-grid h3 { margin: 0 0 var(--s-xs); color: var(--c-ink); font: var(--t-heading-3); }
.reading-guidance-grid p { margin: 0; color: var(--c-ink-body); font: var(--t-reading); }
.context-section { max-width: 66ch; margin-block: var(--s-section); }
.context-section > article { padding-block: var(--s-md); border-top: 1px solid var(--c-hairline); }
.context-section > article h2,
.rail-card h2 { margin: 0 0 var(--s-xs); color: var(--c-ink); font: var(--t-heading-3); }
.context-section > article p { margin: 0; color: var(--c-ink-body); font: var(--t-reading); }
.period-nav { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-bottom: var(--s-lg); }
.period-nav a { font: var(--t-button); letter-spacing: var(--ls-button); text-transform: uppercase; }

/* The chart is evidence for the day, so it sits with the day rather than at the foot of the
   page: same group, directly under the sentence that names the astrology. */
.astrolabe-section { margin: 0; }
.astrolabe-presentation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: start; gap: var(--s-xl); }
.astrolabe-mount { width: 100%; aspect-ratio: 1; padding: var(--s-md); border: 1px solid var(--c-hairline); border-radius: var(--r-lg); background: var(--c-surface-tint); box-shadow: var(--e-soft); }
.astrolabe-mount svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(42, 30, 18, .12)); }
.astrolabe-guide { padding: var(--s-md); border-left: 3px solid var(--c-primary); background: var(--c-surface-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.astrolabe-guide h3 { margin: 0 0 var(--s-sm); color: var(--c-ink); font: var(--t-heading-3); }
.astrolabe-guide p:not(.section-label) { color: var(--c-ink-body); font: var(--t-reading); }
.astrolabe-guide .button { margin-top: var(--s-sm); }
.astrolabe-ring,
.astrolabe-tick,
.astrolabe-house,
.astrolabe-zodiac-wedge { fill: none; stroke: var(--c-primary-wash); }
.astrolabe-ring { opacity: .58; }
.astrolabe-ring-major { stroke: var(--c-primary); stroke-width: 3; opacity: .9; }
.astrolabe-tick { stroke-width: 1; opacity: .38; }
.astrolabe-tick-mid { stroke-width: 2; opacity: .62; }
.astrolabe-tick-major { stroke: var(--c-primary); stroke-width: 3; opacity: .9; }
.astrolabe-degree-label,
.astrolabe-house-number,
.astrolabe-angle-label,
.astrolabe-planet-degree,
.astrolabe-place { fill: var(--c-on-night); font: var(--t-data); text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.astrolabe-zodiac-wedge { fill: var(--c-night-soft); stroke: var(--c-primary-ink); opacity: .52; }
.astrolabe-zodiac-wedge-alt { fill: var(--c-primary-ink); opacity: .18; }
.astrolabe-sign-glyph,
.astrolabe-planet-glyph { fill: var(--c-primary); font: var(--t-heading-2); text-anchor: middle; dominant-baseline: central; }
.astrolabe-house { stroke: var(--c-on-night); stroke-width: 1; opacity: .44; }
.astrolabe-house-angle { stroke: var(--c-primary); stroke-width: 4; opacity: .92; }
.astrolabe-angle-label { fill: var(--c-primary); font: var(--t-button); }
.astrolabe-aspect { stroke-width: var(--aspect-tightness); opacity: .58; transition: opacity .15s ease, stroke-width .15s ease; }
.astrolabe-aspect-favourable { stroke: var(--c-favourable); }
.astrolabe-aspect-caution { stroke: var(--c-caution); }
.astrolabe-aspect-neutral { stroke: var(--c-primary); }
.astrolabe-aspect.is-separating { stroke-dasharray: 10 8; }
.astrolabe-aspect:hover,
.astrolabe-aspect:focus,
.astrolabe-aspect.is-active { opacity: 1; }
.astrolabe-trail { fill: none; stroke: var(--c-primary-wash); stroke-width: 3; opacity: .34; }
.astrolabe-planet { transition: opacity .15s ease; }
.astrolabe-planet.is-active .astrolabe-planet-glyph { fill: var(--c-on-night); }
.astrolabe-planet-natal .astrolabe-planet-glyph { fill: var(--c-primary); stroke: none; }
.astrolabe-planet-transit .astrolabe-planet-glyph { fill: transparent; stroke: var(--c-primary-wash); stroke-width: 1; paint-order: stroke; }
.astrolabe-centre-disc { fill: var(--c-night-soft); stroke: var(--c-primary-ink); stroke-width: 2; }
.astrolabe-time { fill: var(--c-on-night); font: var(--t-heading-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.astrolabe-centre-date { fill: var(--c-primary-wash); font: var(--t-heading-3); text-anchor: middle; }
.astrolabe-degraded text { fill: var(--c-on-night); font: var(--t-caption); text-anchor: middle; }
.astrolabe-degraded .astrolabe-account-link { fill: var(--c-primary-wash); text-decoration: underline; }
.astrolabe-controls { display: grid; grid-template-columns: repeat(2, auto) minmax(80px, 1fr) repeat(3, auto); gap: var(--s-xs); align-items: center; margin-top: var(--s-sm); }
.astrolabe-controls button { min-height: 44px; padding: var(--s-xs); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-primary-ink); font: var(--t-button); cursor: pointer; }
.astrolabe-controls input { accent-color: var(--c-primary); }
.reading-scroll-region { max-width: 100%; overflow-x: auto; margin-block: var(--s-lg); border: 1px solid var(--c-hairline); border-radius: var(--r-md); }
.reading-data-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--c-canvas); color: var(--c-ink-body); font: var(--t-data); font-variant-numeric: tabular-nums; }
.reading-data-table th,
.reading-data-table td { padding: var(--s-xs) var(--s-sm); border-bottom: 1px solid var(--c-hairline); text-align: left; white-space: nowrap; }
.reading-data-table th { color: var(--c-ink); background: var(--c-surface-tint); }
.reading-table-details { margin-block: var(--s-md); }
.reading-table-details summary { min-height: 44px; color: var(--c-primary-ink); cursor: pointer; font: var(--t-heading-3); }
.reading-hours-ribbon,
.reading-moon-facts,
.reading-day-events { margin-block: var(--s-xl); padding: var(--s-md); border: 1px solid var(--c-hairline); border-radius: var(--r-md); background: var(--c-surface-tint); }
.reading-hours-ribbon h3,
.reading-moon-facts h3,
.reading-day-events h3 { margin-top: 0; color: var(--c-ink); font: var(--t-heading-3); }
.reading-hour { display: inline-grid; gap: var(--s-xxs); padding: var(--s-sm); border: 1px solid var(--c-primary); border-radius: var(--r-sm); }
.reading-hour strong { color: var(--c-primary-ink); text-transform: capitalize; }
.reading-voc { border-inline-start: var(--s-xxs) solid var(--c-caution); padding-inline-start: var(--s-sm); }
.reading-caption { color: var(--c-ink-muted); font: var(--t-caption); }
.quiet-action { min-height: 44px; padding: var(--s-xs) var(--s-xxs); border: 0; background: transparent; color: var(--c-primary-ink); cursor: pointer; font: var(--t-button); letter-spacing: var(--ls-button); text-transform: uppercase; }

/* ── The day band: the diary drawn to the same scale as the sky ─────────────────────────────
   The bar and the track share one origin and one pixels-per-hour, so an appointment that runs
   into a harder stretch shows as an overlap. Nothing is asserted that the geometry does not
   already show. */
.day-band-card { display: grid; gap: var(--s-sm); }
.day-band { display: block; width: 100%; height: auto; overflow: visible; }
.day-band-track { fill: var(--c-sunken); }
.day-band-favourable { fill: var(--c-favourable); opacity: .34; }
.day-band-caution { fill: var(--c-caution); opacity: .28; }
.day-band-now { stroke: var(--c-primary); stroke-width: 2; }
.day-band-now-label { fill: var(--c-primary-ink); font: var(--t-eyebrow); }
.day-band-event { fill: var(--c-surface-tint); stroke: var(--c-hairline-strong); }
.day-band-event-clash { fill: var(--c-caution); opacity: .34; }
.day-band-tick { fill: var(--c-ink-faint); font: var(--t-caption); font-variant-numeric: tabular-nums; }
.day-band-legend { fill: var(--c-ink-body); font: var(--t-caption); }
.day-band-legend-clash { fill: var(--c-caution-deep); font-weight: 600; }
.day-band-note { margin: 0; color: var(--c-caution-deep); font: var(--t-caption); }

/* ── The chart's eight tables, reached by name ──────────────────────────────────────────── */
.reading-tables { margin-top: var(--s-lg); }
.reading-table-tabs { display: flex; flex-wrap: wrap; gap: var(--s-xxs); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--c-hairline); }
.reading-table-tab { min-height: 44px; padding: var(--s-xs) var(--s-sm); border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--c-ink-muted); cursor: pointer; font: var(--t-button); letter-spacing: var(--ls-button); white-space: nowrap; }
.reading-table-tab:hover { color: var(--c-ink); }
.reading-table-tab.is-selected { border-color: var(--c-hairline-strong); background: var(--c-surface-tint); color: var(--c-ink); }
.reading-table-panel { padding-top: var(--s-md); }

/* ── Lilly, docked into the rail ─────────────────────────────────────────────────────────────
   lilly-presence.css places the docked panel in column 3 of the calendar's three-track main.
   The rail is a single column, so the panel is placed here instead. She has the whole of the
   rail's remaining height because she holds the full conversation, not a reply box. */
.reading-companion.lilly-docked { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.reading-companion > .lilly-presence-panel.is-docked {
  grid-column: 1;
  grid-row: auto;
  order: 2;
  /* Bounded rather than open-ended: the rail is sticky, so a panel taller than the viewport
     would put its own composer out of reach. She scrolls inside instead, as she does docked
     on the calendar. */
  height: min(56svh, 520px) !important;
  min-height: 0;
}
.reading-companion > .calendar-shell { order: 3; }

.reading-status { color: var(--c-ink-body); font: var(--t-reading); }
.reading-action-row { margin-block: var(--s-xl); }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: var(--s-sm) var(--s-lg); border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; font: var(--t-button); letter-spacing: var(--ls-button); text-decoration: none; text-transform: uppercase; }
.button-primary { border-color: var(--c-action-edge); background: var(--c-action); color: var(--c-on-action); }
.button-primary:hover { border-color: var(--c-action-edge); background: var(--c-action-hover); color: var(--c-on-action); }
.button-secondary { border-color: var(--c-hairline-strong); background: var(--c-canvas); color: var(--c-ink); }
.button-secondary:hover { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.share-reading-button { flex: 0 0 auto; }

.rail-card { color: var(--c-ink-body); }
#event-list article + article { border-top: 1px solid var(--c-hairline); margin-top: var(--s-md); padding-top: var(--s-md); }
#event-list p { font: var(--t-reading); }
.reading-footer { padding: var(--s-xxl); border-top: 1px solid var(--c-primary); background: var(--c-surface-tint); color: var(--c-ink-muted); font: var(--t-caption); text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1024px) {
  .reading-story-grid { grid-template-columns: minmax(0, 720px); }
  .reading-companion { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .astrolabe-presentation { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .site-nav { padding-inline: var(--s-md); }
  .nav-links { gap: var(--s-md); }
  .reading-layout { width: min(calc(100% - (2 * var(--s-md))), 1280px); padding-block-start: var(--s-md); }
  .reading-page-tools { flex-wrap: wrap; }
  .reading-page-tools .reading-neighbours,
  .share-reading-button { width: 100%; }
  .reading-story-grid { display: block; padding-top: 0; }
  .reading-companion { display: grid; grid-template-columns: minmax(0, 1fr); position: static; margin-top: var(--s-xl); }
  .reading-guidance-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .section-heading { margin-top: var(--s-xxl); }
  .astrolabe-presentation { display: block; }
  .astrolabe-mount { padding: var(--s-xs); }
  .astrolabe-guide { margin-top: var(--s-lg); }
  .astrolabe-controls { grid-template-columns: repeat(3, 1fr); }
  .astrolabe-controls input { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  #glance { font: var(--t-heading-1); letter-spacing: var(--ls-heading-1); }
  .reading-date { font: var(--t-heading-2); letter-spacing: var(--ls-heading-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  body { background: var(--c-marketing-ground); }
  .reading-header,
  .reading-page-tools,
  .reading-companion,
  .reading-action-row,
  .reading-neighbours,
  .astrolabe-controls,
  .quiet-action,
  .reading-footer,
  .lilly-light,
  .lilly-presence-panel { display: none !important; }
  .reading-layout,
  .reading-story-grid { display: block; width: 100%; padding: 0; }
  .astrolabe-guide { display: none; }
  .astrolabe-mount { width: 90mm; margin-inline: auto; padding: 0; border: 0; box-shadow: none; }
  .reading-data-table { min-width: 0; font: var(--t-caption); }
  .reading-table-tabs { display: none; }
  .reading-leaf::before { content: "Caluminate · Lilly's reading"; display: block; color: var(--c-primary-ink); font: var(--t-caption); }
}