/* ============================================================================
   Orbit Axis — Today's Fortune card + Tonight's Moon + Current Sky.
   One clear primary card; progressive disclosure for detail.
   ========================================================================== */

/* The reading itself. It used to carry an indigo gradient wash and a coloured
   glow, which made the most important card on the surface the one that looked
   least like the rest of the app. It is now the same card as everything else —
   it leads because it is FIRST and WIDEST, not because it is tinted. */
.fortune-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--density-card-pad);
}
.fortune-card h2 {
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-display);
  margin-bottom: 2px;
}
.fortune-card__sub {
  color: var(--color-muted);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  margin-bottom: var(--space-md);
}

/* Why this reading — progressive disclosure */
.why-reading { margin-top: 16px; }
.why-reading > summary {
  cursor: pointer; color: var(--color-accent); font-size: var(--type-body); font-weight: var(--weight-semibold);
  list-style: none; padding: 10px 0; display: flex; align-items: center; gap: 8px;
}
.why-reading > summary::-webkit-details-marker { display: none; }
.why-reading > summary::before { content: "+"; color: var(--color-accent); font-weight: var(--weight-semibold); }
.why-reading[open] > summary::before { content: "−"; }
.why-list { list-style: none; display: grid; gap: 8px; padding: 8px 0 4px; }
.why-list li {
  display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--color-primary);
  padding: 8px 12px; background: var(--color-surface-sunken, #12152a); border-radius: 10px;
}
.why-list li::before { content: "•"; color: var(--color-accent); }

/* ── Current Sky: unified panel, procedural Moon clipping the top-left ────── */
.current-sky {
  display: flex; align-items: flex-start; gap: 24px;
  position: relative; overflow: visible;
}
.current-sky__moon {
  flex: 0 0 auto; width: 132px; height: 132px;
  margin: -34px 0 -10px -34px; /* pulls the disc into the panel's top-left corner */
  filter: drop-shadow(var(--shadow-object));
}
.current-sky-moon__svg { width: 100%; height: 100%; display: block; }
.current-sky__body { flex: 1 1 auto; min-width: 0; }
.current-sky__body h2 { font-size: 20px; margin-bottom: 4px; }
.current-sky__local { color: var(--color-secondary); font-size: 14px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.sky-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sky-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-surface-sunken, #12152a); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 7px 13px; font-size: 14px; color: var(--color-primary);
}
.sky-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.sky-chip.retro .dot { background: var(--color-warning, #f0c674); }
.sky-next-events {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 12px; color: var(--color-secondary); font-size: 14px;
}
.sky-next-events strong { color: var(--color-primary); font-weight: 650; }
.sky-theme { margin-top: 12px; font-size: 15px; color: var(--color-primary); line-height: 1.5; }
.sky-advanced { margin-top: 10px; }
.sky-advanced summary { cursor: pointer; color: var(--color-accent); font-size: var(--type-caption); }

.current-sky__personal {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
.current-sky__transit-list { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.current-sky__transit-list li {
  font-size: 14px; color: var(--color-primary); padding: 6px 10px;
  background: var(--color-surface-sunken, #12152a); border-radius: 8px;
}
.current-sky__location {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
.current-sky__location .u-caption { flex: 1 1 220px; }

@media (max-width: 640px) {
  .current-sky { flex-direction: column; align-items: center; text-align: center; }
  .current-sky__moon { margin: 0 0 6px; width: 96px; height: 96px; }
  .sky-next-events { justify-content: center; }
  .current-sky__location { justify-content: center; text-align: center; }
}

/* First-run / setup state */
.fortune-setup { display: grid; gap: 12px; max-width: 520px; }
.fortune-setup p { color: var(--color-secondary); font-size: 15px; line-height: 1.5; }

/* ── Today's Fortune: cards (Update 5.2) ───────────────────────────────────
   Replaces the carousel. Everything the fortune says is visible by scrolling,
   which is the one interaction every user already knows — the old version hid
   four of five readings behind a swipe with only a row of dots to suggest it. */

.fortune-head { margin-bottom: var(--space-4, 1.25rem); }

.fortune-head__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted, #9aa3b2);
}

.fortune-head__date { margin: 0.15rem 0 0.5rem; font-size: 0.85rem; color: var(--text-muted, #9aa3b2); }

/* The title names the day before any detail appears. */
.fortune-head__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  line-height: 1.25;
  max-width: 22ch;                 /* a title, not a paragraph */
}

.fortune-head__note { margin: 0; font-size: 0.78rem; color: var(--text-muted, #9aa3b2); }

/* ── The reading deck ───────────────────────────────────────────────────────
   A horizontal scroll-snap track. The previous carousel here was removed for
   hiding four of five readings behind a swipe nobody discovers, so the PEEK
   below is load-bearing rather than decorative: at every width the next card
   is partly visible, which is what tells a reader there is more. Remove the
   peek and that objection comes straight back. */
.fortune-deck { display: grid; gap: var(--space-2, 0.75rem); }

.fortune-deck__track {
  display: grid;
  grid-auto-flow: column;
  /* 82% leaves ~18% of the next card showing. */
  grid-auto-columns: 82%;
  gap: var(--space-3, 1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* a swipe past the end must not navigate back */
  scroll-snap-type: x mandatory;
  /* Room for the focus ring, which a plain overflow container clips away. */
  padding: 3px;
  margin: -3px;
  scrollbar-width: none;
}
.fortune-deck__track::-webkit-scrollbar { display: none; }

.fortune-deck__track > * { scroll-snap-align: center; }

.fortune-deck__dots {
  display: flex;
  gap: var(--space-2, 0.75rem);
  justify-content: center;
  align-items: center;
}

.fortune-dot {
  /* 8px of ink inside a 44px target: visually a dot, physically a button. */
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.fortune-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--text-muted, #9aa3b2);
  opacity: 0.4;
  transition: opacity 120ms ease, scale 120ms ease;
}
.fortune-dot.is-current::after {
  background: var(--accent, #8b9cf5);
  opacity: 1;
  scale: 1.25;
}
@media (prefers-reduced-motion: reduce) {
  .fortune-deck__track { scroll-behavior: auto; }
  .fortune-dot::after { transition: none; }
}

/* Reserved for artwork. Zero height until there is art, so the deck does not
   sit on a band of empty space in the meantime. */
.fortune-card2__art:empty { display: none; }

.fortune-card2 {
  /* Fills its snap cell, so cards in the deck are the same height whatever
     length the engine's sentence happened to be. */
  display: flex;
  flex-direction: column;
  gap: 0;
  block-size: 100%;
  padding: var(--space-3, 1rem);
  border: 1px solid var(--border, #262b38);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-2, #171b26);
}

/* The overall reading is the one people came for, so it leads and spans. */
.fortune-card2--primary { border-color: var(--accent, #8b9cf5); }
.fortune-card2--caution { border-left: 3px solid var(--warn-border, #7a5c22); }

.fortune-card2__label { margin: 0 0 0.1rem; font-size: 1rem; }
.fortune-card2__lede {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #9aa3b2);
}
.fortune-card2__body {
  margin: 0;
  line-height: 1.6;
  color: var(--text-soft, #c7cddb);
  max-width: 62ch;                 /* readable line length on wide screens */
}

.fortune-closing {
  margin: var(--space-3, 1rem) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #9aa3b2);
}

/* Above phone widths the deck stops being a deck. There is room to show every
   reading at once, and swiping to reach content that would already fit is
   hiding it for no reason — which is exactly what got the last carousel
   removed. The dots go with it. */
@media (min-width: 640px) {
  .fortune-deck__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .fortune-deck__dots { display: none; }
  .fortune-card2--primary { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .fortune-deck__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fortune-card2--primary { grid-column: 1 / -1; }
}

/* ── Section-level failure (Dev Update 1.6) ──────────────────────────────────
   Home is several independent requests. When one fails the others keep their
   content, so the failure state is scoped to its own section rather than
   replacing the page. */
.axis-section-error {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-elevated);
}
.axis-section-error p { margin: 0; max-width: 60ch; color: var(--color-secondary); }
.axis-section-error .o-btn { min-height: 44px; }

/* ── Home celestial hierarchy (Dev Update 1.6) ───────────────────────────── */
.axis-timezone { font-size: 13px; color: var(--color-secondary); margin-top: 4px; }
.axis-section-title { margin: 0 0 4px; font-size: 17px; }
.axis-section-help { margin: 0 0 12px; font-size: 13px; color: var(--color-secondary); max-width: 60ch; }

/* Moon — one visual, its facts beside it, and a note that keeps the current
   Moon from being mistaken for the natal one. */
.moon-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.moon-state__visual { width: 76px; flex: 0 0 auto; }
.moon-state__visual svg { width: 100%; height: auto; display: block; }
.moon-state__text { display: grid; gap: 6px; min-width: 0; }
.moon-state__phase { margin: 0; font-size: 18px; font-weight: 600; }
.moon-state__facts { margin: 0; font-size: 13px; color: var(--color-secondary); }
.moon-state__meaning, .moon-state__next { margin: 0; max-width: 60ch; line-height: 1.5; }
.moon-state__note { margin: 2px 0 6px; font-size: 13px; color: var(--color-secondary); max-width: 60ch; }
.moon-state__position { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.moon-state__orientation { margin: 0 0 6px; font-size: 12px; color: var(--color-secondary); max-width: 60ch; }
.moon-state__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.moon-state .o-btn { min-height: 44px; }

.moon-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.moon-head .o-btn { min-height: 44px; }
.moon-status:empty { display: none; }
.moon-status { margin: 8px 0 0; font-size: 13px; color: var(--color-secondary); }

/* ── The Moon scene ───────────────────────────────────────────────────────
   Decorative and aria-hidden. Every fact it depicts is written as text in the
   panel beside it, so the scene can be removed entirely — by reduced motion,
   forced colors, or a missing payload — without removing information. */
.moon-scene {
  position: relative;
  width: 100%;
  min-width: 132px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}
.moon-scene__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(120, 132, 220, 0.30), transparent 62%),
    linear-gradient(180deg, var(--moon-sky-top, #0b1030) 0%, var(--moon-sky-bottom, #161c46) 100%);
}
.moon-scene__stars { position: absolute; inset: 0; animation: moon-star-drift 180s linear infinite; }
.moon-scene__star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: moon-twinkle 6s ease-in-out infinite;
}
.moon-scene__moon {
  position: absolute;
  top: 20%; left: 50%;
  width: 46%;
  transform: translateX(-50%);
  animation: moon-drift 90s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(180, 196, 255, 0.34));
}
.moon-scene__moon svg { width: 100%; height: auto; display: block; }
/* The Earth arc is framing, not a scale model: a soft limb rising into the
   lower edge, well clear of the text column beside it. */
.moon-scene__earth {
  position: absolute;
  /* Geometry, because it is easy to get wrong and was: the box is square, so a
     circle of diameter D sitting `b` below the bottom has its top edge at
     H + b - D. To leave the Earth occupying only the lowest ~22% the offset
     must satisfy D - b = 0.22H. At 240% width that is a 218% drop. The first
     two attempts used 172%/46% and 190%/58%, both of which put the top edge
     ABOVE the scene — the "sky gradient" was the Earth covering everything. */
  left: 50%; bottom: -218%;
  width: 240%; aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  /* Opaque, with a lit upper limb. The first attempt used a translucent blue
     that sat on a blue sky and read as more gradient — an Earth that frames
     nothing is just a darker corner. */
  background:
    radial-gradient(120% 42% at 50% 6%, rgba(150, 214, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #2e6f9e 0%, #17395c 42%, #0d2138 100%);
  border-top: 1px solid rgba(190, 232, 255, 0.55);
  box-shadow: 0 -6px 30px rgba(120, 190, 255, 0.30);
}
.moon-scene__earth.is-turning { animation: moon-earth-turn 900ms ease-in-out; }
.moon-scene__shoot {
  position: absolute; top: 8%; left: 12%;
  width: 2px; height: 2px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.moon-scene__shoot.is-flying { animation: moon-shoot 1400ms ease-in 2600ms 1 both; }
.moon-scene--empty .moon-scene__sky { opacity: 0.75; }

/* Hidden tabs get no animation at all. Browsers throttle rAF but keep CSS
   animations ticking, so a backgrounded tab would burn compositor work on a
   sky nobody is looking at. One class toggled by a visibilitychange listener
   is the whole mechanism — no loop, no timer. */
.moon-paused .moon-scene__stars,
.moon-paused .moon-scene__star,
.moon-paused .moon-scene__moon,
.moon-paused .moon-scene__shoot,
.moon-paused .moon-scene__earth { animation-play-state: paused; }

@keyframes moon-twinkle { 0%, 100% { opacity: inherit } 50% { opacity: 0.25 } }
@keyframes moon-star-drift { from { transform: translateX(0) } to { transform: translateX(-3%) } }
@keyframes moon-drift {
  0%, 100% { transform: translate(-50%, 0) }
  50% { transform: translate(-50%, -6px) }
}
/* A partial turn that ends. Not a spinner: it runs once per refresh and the
   class is removed in a finally block, so a failure cannot leave it running. */
@keyframes moon-earth-turn {
  from { transform: translateX(-50%) rotate(0deg) }
  to { transform: translateX(-50%) rotate(14deg) }
}
@keyframes moon-shoot {
  from { opacity: 0; transform: translate(0, 0) }
  12% { opacity: 1 }
  to { opacity: 0; transform: translate(128px, 98px) }
}

@media (min-width: 720px) {
  .moon-state { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 719px) {
  /* One column on phones: the scene sits above its facts rather than squeezing
     both into 375px. */
  .moon-state { grid-template-columns: 1fr; }
  .moon-scene { max-width: 260px; margin-inline: auto; }
}

:root[data-theme="light"] .moon-scene__sky,
:root[data-theme="light"] .moon-scene {
  --moon-sky-top: #2b3566;
  --moon-sky-bottom: #55639e;
}
/* Light theme keeps a deliberately framed night panel rather than an
   unreadable dark rectangle: the card around it stays light, the scene is
   clearly a picture, and every fact is in the text beside it either way. */
:root[data-theme="light"] .moon-scene { box-shadow: inset 0 0 0 1px rgba(20, 26, 60, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .moon-scene__stars,
  .moon-scene__star,
  .moon-scene__moon,
  .moon-scene__earth.is-turning,
  .moon-scene__shoot.is-flying { animation: none; }
  /* The shooting star is removed outright rather than left static, where it
     would read as a stray dot with no explanation. */
  .moon-scene__shoot { display: none; }
}

/* Orbit's own Motion setting, which is the one a user actually clicks. The
   global data-motion rule already collapses every animation duration to
   effectively zero, so the ambient layers stop — but a zeroed shooting star is
   still a revealed element, so it is removed here the same way. */
:root[data-motion="reduced"] .moon-scene__shoot { display: none; }

@media (forced-colors: active) {
  /* Gradients disappear in forced colors, so the disc would lose its edge and
     the phase with it. An explicit boundary keeps lit and unlit readable. */
  .moon-scene { border: 1px solid CanvasText; }
  .moon-scene__sky, .moon-scene__stars, .moon-scene__shoot { display: none; }
  .moon-scene__earth { background: Canvas; border-top: 1px solid CanvasText; box-shadow: none; }
  .moon-scene__moon { filter: none; }
  .moon-scene__moon svg circle { stroke: CanvasText; stroke-width: 1px; }
  .moon-scene__moon svg path { fill: Highlight; }
}

/* Highlights — a short ranked list, never a wall. */
.sky-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sky-highlight {
  display: grid; gap: 4px; padding: 12px 14px;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-elevated); min-width: 0;
}
.sky-highlight__label { font-weight: 600; }
.sky-highlight__detail { font-size: 14px; color: var(--color-secondary); line-height: 1.5; max-width: 60ch; }
.sky-highlight__link { font-size: 13px; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }

/* Technical Sky — a summary line and a fold. Never a table. */
.tech-sky__summary { margin: 0 0 4px; font-size: 15px; }
.tech-sky__more > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--color-accent); list-style: none;
}
.tech-sky__more > summary::-webkit-details-marker { display: none; }
.tech-sky__more > summary::before { content: "+"; font-weight: var(--weight-semibold); }
.tech-sky__more[open] > summary::before { content: "\2212"; }
.tech-sky__more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.tech-sky__body { display: grid; gap: 12px; padding-top: 8px; }
.tech-sky__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; }
.tech-sky__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.tech-sky__facts dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.tech-sky__help { margin: 0; font-size: 13px; color: var(--color-secondary); max-width: 62ch; }
.tech-sky__body .o-btn { justify-self: start; min-height: 44px; }

/* Continue exploring — text destinations, no icon-only controls. */
.axis-explore { display: grid; grid-template-columns: 1fr; gap: 10px; }
.axis-explore__link {
  display: grid; gap: 2px; padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-elevated); text-decoration: none; color: inherit;
}
.axis-explore__link:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.axis-explore__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.axis-explore__label { font-weight: 600; }
.axis-explore__help { font-size: 13px; color: var(--color-secondary); }
.axis-secondary-note { margin: 4px 0 0; font-size: 14px; }

@media (min-width: 700px) {
  .axis-explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px), (max-height: 460px) {
  .moon-state { grid-template-columns: 1fr; }
  .sky-highlights, .axis-explore { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-sky__more > summary::before { transition: none; }
}
@media (forced-colors: active) {
  .sky-highlight, .axis-explore__link { border: 1px solid CanvasText; }
  .tech-sky__more > summary { color: LinkText; }
}