/* ============================================================================
   Orbit Axis — Today, and the pieces only Today uses
   ----------------------------------------------------------------------------
   The daily return point. Extends the design system; adds nothing that competes
   with it.

   WHAT CHANGED IN THE REDESIGN, and why. This surface used to open with a
   gradient-filled wordmark over a purple atmospheric wash and a CSS starfield,
   with a lavender glow around the Moon. Four accent colours, three gradients,
   and a decorative layer between the reader and the reading.

   The system allows one accent and no decorative gradients: atmosphere comes
   from the content, not from a background. So the wash, the starfield, the
   glow, and the gradient text are gone. What replaced them is hierarchy — the
   date is small, the headline is large and tight, the reading is the widest
   thing on the page, and everything else is quieter than it.
   ========================================================================== */

/* ── The header ──────────────────────────────────────────────────────────── */
.axis-today-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.axis-today-head__main { display: grid; gap: var(--space-xxs); min-width: 0; }
.axis-today-date {
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.axis-wordmark {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-semibold);
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  color: var(--color-primary);
}
.axis-subtitle {
  font-size: var(--type-body);
  letter-spacing: var(--track-body);
  color: var(--color-muted);
  max-width: 46ch;
}
.axis-timezone { font-size: var(--type-fine); color: var(--color-faint); }

/* ── The chart chip ──────────────────────────────────────────────────────────
   Which chart this reading belongs to, as ONE control. It replaces a label, a
   select, a "+" and a "Manage" button competing for the same row — the picture
   and the name say whose reading this is, and the two actions sit at the end
   where they cannot be mistaken for the answer. */
.chart-chip { display: none; }
.chart-chip:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* 52px so the select inside can stretch to a real target. */
  min-height: 52px;
  padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-sm);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  max-width: 100%;
  width: fit-content;
}
.chart-chip__text { display: grid; align-content: center; min-width: 0; flex: 1 1 auto; }
.chart-chip__eyebrow {
  font-size: var(--type-fine);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
/* The select carries the name, so it is styled as text rather than as a field:
   a chip that looks like a form control invites people to fill it in.

   It still has to be TAPPABLE. Styled as bare text it measured 20px tall — half
   a thumb — so the row it sits in supplies the height instead, and the select
   stretches to fill it. The control reads as text and targets as a control. */
.chart-chip__select {
  appearance: none;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 0 var(--space-lg) 0 0;
  background-color: transparent;
  background-position: right 0 center;
  background-size: 12px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-body);
  text-overflow: ellipsis;
}

.chart-chip__select:focus-visible { box-shadow: var(--focus-ring); }
.chart-chip__select:disabled { color: var(--color-primary); opacity: 1; background-image: none; padding-right: 0; }
.axis-chart-add { width: 36px; height: 36px; }
.axis-chart-add svg { width: 18px; height: 18px; }
.axis-chart-manage { flex: 0 0 auto; }

/* Recoverable saved-chart error — offers a retry rather than wrongly implying
   the reader has no chart. */
.axis-chart-error { display: none; }
.axis-chart-error:not([hidden]) {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-primary);
  background: var(--color-error-soft);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--radius-lg);
  font-size: var(--type-caption);
}

/* ── The week strip ──────────────────────────────────────────────────────────
   Seven days ending today. Three states, each stated by shape as well as by
   colour, because the difference between "you have a reading" and "you don't"
   is the whole point of the row:

     today  — filled disc, the accent
     read   — a dot under the number, and the cell is a button
     empty  — nothing under the number, and the cell is not focusable

   Not a date picker. Orbit Axis calculates today's sky, so there is no tomorrow
   to offer and the strip does not pretend otherwise. */
.day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xxs);
  /* Capped, and not full-bleed. Seven 44px cells stretched across a 1100px
     desktop column is a row of postage stamps in a field — the strip is a
     compact control and should keep looking like one at every width. */
  max-width: 560px;
  padding: var(--space-xs);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.day-strip__day {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 62px;
  padding: var(--space-xs) 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}
.day-strip__letter {
  font-size: var(--type-fine);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-faint);
}
.day-strip__num {
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-body);
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.day-strip__dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }

.day-strip__day[data-state="read"] { cursor: pointer; color: var(--color-primary); }
.day-strip__day[data-state="read"] .day-strip__dot { background: var(--color-accent); }
.day-strip__day[data-state="read"]:hover { background: var(--color-surface-ghost); }
.day-strip__day[data-state="read"]:active { transform: scale(var(--press-scale)); }
.day-strip__day[data-state="read"]:focus-visible { box-shadow: var(--focus-ring); }

.day-strip__day[data-state="today"] { background: var(--color-accent); color: var(--color-on-accent); }
.day-strip__day[data-state="today"] .day-strip__letter { color: var(--color-on-accent); opacity: 0.75; }
.day-strip__day[data-state="today"] .day-strip__dot { background: var(--color-on-accent); }

.day-strip__day[data-state="empty"] { color: var(--color-faint); }

@media (forced-colors: active) {
  .day-strip__day[data-state="today"] { border: 2px solid Highlight; }
  .day-strip__day[data-state="read"] { border: 1px solid CanvasText; }
}

/* ── Card scaffold shared by Today's modules ─────────────────────────────── */
.axis-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--density-card-pad);
}
.axis-section-title {
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-display);
  color: var(--color-primary);
}
.axis-section-help {
  margin-top: var(--space-xxs);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  color: var(--color-muted);
}
.axis-card-hint { color: var(--color-muted); font-size: var(--type-caption); }
.moon-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.moon-status { font-size: var(--type-caption); color: var(--color-muted); }
.axis-secondary-note { font-size: var(--type-caption); }

/* ── Related links ───────────────────────────────────────────────────────────
   What replaced the "Continue exploring" cards. Those were a five-item link
   farm at the bottom of three different pages — navigation pretending to be
   content, restating destinations that are one tap away in the tab bar.

   This is the honest remainder: the two or three places that are genuinely
   *next* from here, as plain links, taking one line. */
.related-row {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-xs);
}
.related-row__link {
  display: inline-flex; align-items: center; gap: var(--space-xxs);
  min-height: 44px;
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  color: var(--color-accent);
}
.related-row__link::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* ── The Moon ────────────────────────────────────────────────────────────────
   An object resting on a surface, so it takes the one shadow in the system —
   and no glow. It is a rock lit by the sun, and it reads as one. */
.axis-moon {
  --moon-size: 96px;
  position: relative; width: var(--moon-size); height: var(--moon-size);
  border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 32%, #ffffff 0%, #e8e8ea 38%, #b9b9be 72%, #8e8e93 100%);
  box-shadow: var(--shadow-object), inset -10px -8px 22px rgba(0, 0, 0, 0.45);
}
/* The halo and orbit ring were decorative depth the system does not allow.
   They stay in the markup (the moon scene builds them) and render as nothing. */
.axis-moon__halo, .axis-orbit-ring { display: none; }
/* The starfield was a white-dots-on-dark background image. Removed: atmosphere
   comes from the content, and on the light theme it was invisible anyway. */
.axis-starfield { display: none; }

/* ── Loading shimmer ─────────────────────────────────────────────────────── */
.axis-shimmer {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-surface-ghost) 25%, var(--color-surface-hover) 50%, var(--color-surface-ghost) 75%);
  background-size: 200% 100%;
  animation: o-shimmer 1.4s ease-in-out infinite;
}

/* ── Touch targets and focus ─────────────────────────────────────────────────
   44px is the floor for every control on these surfaces. Set once here rather
   than on the handful that happened to get measured. */
#panel-home button, #panel-history button, #panel-positions button,
#panel-positions .o-btn { min-height: 44px; }
.day-strip__day, .chart-chip .o-icon-btn { min-height: 0; }

@media (max-width: 640px) {
  .axis-today-head { flex-direction: column; }
  .axis-moon { --moon-size: 76px; }
  .day-strip__day { min-height: 56px; }
}

/* ── Detail level applied to Chart presentation (data-detail on <html>) ──────
   Simple hides exact degrees, the technical placements table, and technical
   chart metadata; Advanced reveals them. The engine and the calculations are
   untouched — this only controls what a beginner sees by default. Any unknown
   data-detail value falls through to the Simple-hiding rules, so a stale
   attribute degrades safely. */
:root[data-detail="Simple"] #panel-me .advanced-only,
:root[data-detail="Simple"] #panel-me .me-panel--advanced { display: none; }
:root:not([data-detail="Advanced"]) #panel-me .advanced-only,
:root:not([data-detail="Advanced"]) #panel-me .me-panel--advanced { display: none; }

/* The `hidden` attribute must win over the display rules above. */
.chart-chip[hidden], .axis-reading-for[hidden], .day-strip[hidden] { display: none !important; }

@media (forced-colors: active) {
  .axis-wordmark { color: CanvasText; }
}

/* ── Mobile: Today keeps its featured surfaces, sheds the incidental boxes ──
   The Moon scene and the swipeable reading deck stay carded: one is a featured
   visual object, the other uses the card boundary to say "swipe me". The
   highlights list, the technical sky block, and the seven-day strip were boxes
   out of habit, and on a phone each box is padding the reader pays for. */
@media (max-width: 640px) {
  #today-highlights.axis-card,
  #today-sky.axis-card {
    border: 0; background: none; border-radius: 0;
    padding: 0 0 var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  /* The strip loses its box; the selected day keeps its strong containment —
     that fill is the one piece of chrome doing real work here. */
  .day-strip { background: none; border: 0; padding: 0; }
}