/* Orbit :: feature panels (My Chart + Local Intelligence).
 *
 * Carried over from the pre-redesign app during the branch-integration merge so
 * both features keep working alongside the Orbit design system. Self-contained:
 * the legacy variables these rules rely on are scoped to the two feature panels
 * only, so the design-system tokens are left completely untouched. This is a
 * carry-over, not a redesign. */
/* The chart form is also rendered outside those two panels — in the auth /
 * onboarding gates and the chart modal — so the legacy variables must resolve
 * there too. Without this, `.chart-form button` computes to a transparent
 * background with near-black text, which made the onboarding "Save My Chart"
 * CTA effectively invisible. */
#panel-me, #panel-more, #panel-tools, .auth-gate, .o-modal {
  --bg: #0a0c18; --surface: #12152a; --surface-2: #1a1e3a; --border: #262b52;
  --text: #e6e9ff; --muted: #9aa3d0; --dim: #626b9e; --accent: #7c9aff;
  --gold: #f0c674; --violet: #a78bfa;
}

/* These legacy variables are hardcoded dark, which was correct while dark was
   the only theme. Light mode needs its own values or every carried-over surface
   — the chart form, the auth gate, every modal — stays a dark box on a light
   page. Same variables, light values; no rule below has to change. */
:root[data-theme="light"] #panel-me,
:root[data-theme="light"] #panel-more,
:root[data-theme="light"] #panel-tools,
:root[data-theme="light"] .auth-gate,
:root[data-theme="light"] .o-modal {
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef0f6; --border: #d3d8e8;
  --text: #12161c; --muted: #4d566b; --dim: #6b7488; --accent: #2f6bff;
  --gold: #9a6b12; --violet: #6b46d6;
}

/* ── My Chart ─────────────────────────────────────────────────────────────── */
.mychart-card { position: relative; z-index: 1; }
.mychart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mychart-name { color: var(--gold); font-weight: 500; }
.me-page-head {
  align-items: end;
}
.me-active-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--color-secondary);
  font-size: 15px;
}
.me-active-line #mychart-name {
  color: var(--color-primary);
  font-weight: 700;
}
.me-status {
  min-height: 24px;
  margin: 0 0 12px;
  color: var(--color-secondary);
  font-size: 14px;
}
.me-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: var(--density-gap);
}
.me-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.me-panel--overview,
.me-panel--wide {
  grid-column: 1 / -1;
}
.me-panel--placements {
  grid-column: 1 / -1;
  padding: 16px;
  background: color-mix(in oklab, var(--color-surface-elevated) 82%, transparent);
}
.me-section-head {
  display: grid;
  gap: 4px;
}
.me-section-head--actions {
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
}
.me-section-head h2,
.me-overview__top h2 {
  color: var(--color-primary);
}
.me-section-head p,
.me-muted {
  color: var(--color-secondary);
  line-height: 1.5;
}
.me-overview__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.me-overview__big {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.me-overview__big span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-sunken);
  color: var(--color-primary);
  font-weight: 700;
}
.me-overview__big strong {
  color: var(--color-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.me-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.me-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.me-facts dt {
  color: var(--color-secondary);
  font-size: 12px;
}
.me-facts dd {
  margin: 0;
  color: var(--color-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.me-overview__note {
  color: var(--color-secondary);
  line-height: 1.5;
}
.me-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.me-empty h2 {
  color: var(--color-primary);
}
.me-empty p {
  color: var(--color-secondary);
  line-height: 1.5;
}
.me-empty--compact {
  padding: 12px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}
/* ── The chart form ───────────────────────────────────────────────────────
   One column. A chart form is a sequence of decisions where each answer can
   change what the next question means — the certainty answer decides whether
   the time field is even shown — and a two-column grid puts unrelated fields
   side by side and breaks that reading order on exactly the screens where it
   matters most. */
.chart-form {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.chart-form__intro {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
}

.chart-field { display: grid; gap: 6px; }

.chart-field__label {
  color: var(--color-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.chart-field__optional {
  color: var(--color-muted);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
}

.chart-field__help {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-caption);
  line-height: 1.45;
}

/* Errors are stated in words next to the field, with an icon-free marker, so
   they do not depend on the red alone. */
.chart-field__error,
.chart-form-error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-caption);
  line-height: 1.45;
  font-weight: var(--weight-medium);
}
.chart-field__error::before,
.chart-form-error::before { content: "! "; font-weight: var(--weight-bold); }

.chart-field--names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.chart-form input[type="text"],
.chart-form input[type="date"],
.chart-form input[type="time"],
.chart-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--color-primary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;   /* iOS zooms the page for anything smaller on focus */
  font-family: inherit;
}

.chart-form input[aria-invalid="true"] { border-color: var(--color-error); }

/* ── Birth-time certainty ─────────────────────────────────────────────── */
.chart-fieldset { border: 0; padding: 0; margin: 0; }
.chart-fieldset legend { padding: 0; margin-bottom: 6px; }

.chart-choice { display: grid; gap: 8px; }

.chart-choice__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--text-body);
}
.chart-choice__option input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.chart-choice__option span { display: grid; gap: 2px; }
.chart-choice__note { color: var(--color-muted); font-size: var(--text-caption); line-height: 1.4; }
.chart-choice__option:has(input:checked) {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}
.chart-choice__option:focus-within { box-shadow: var(--focus-ring); }

.chart-form__notice {
  margin: 0;
  padding: 12px 14px;
  color: var(--color-secondary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  line-height: 1.5;
}

/* ── Birthplace combobox ──────────────────────────────────────────────── */
.place-field { position: relative; }

.place-clear {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
}
.place-clear svg { width: 16px; height: 16px; }
.place-clear:hover { color: var(--color-primary); }

.place-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-e2);
}

.place-result {
  padding: 11px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-body);
  cursor: pointer;
}
.place-result:hover,
.place-result[aria-selected="true"] {
  background: var(--color-accent-soft);
  /* Not colour alone: the active option also gains a visible edge. */
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.place-status, .place-empty {
  margin: 0;
  min-height: 16px;
  font-size: var(--text-caption);
  color: var(--color-muted);
  line-height: 1.45;
}

.chart-form__privacy {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.chart-form__privacy a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

.chart-form-hint { margin: 0; font-size: var(--text-caption); color: var(--color-muted); }

@media (max-width: 480px) {
  /* Two name fields side by side leaves each about 130px on a small phone. */
  .chart-field--names { grid-template-columns: 1fr; }
}

.chart-profile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; color: var(--dim); font-size: 12px; }
.chart-profile-meta span { border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; background: var(--surface-2); }
.chart-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.warn-chip { background: #3a2a12; border: 1px solid #6a4d1e; color: var(--gold);
  font-size: 12px; padding: 3px 9px; border-radius: 999px; }

.balance-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.balance-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; }
.bar-track { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-fill.fire { background: #ff7a59; } .bar-fill.earth { background: #7bbf6a; }
.bar-fill.air { background: #6fd0e0; } .bar-fill.water { background: #7c9aff; }
.bar-pct { text-align: right; color: var(--muted); }
.moon-tonight { font-size: 14px; }
.moon-phase { font-size: 16px; color: var(--gold); }
.moon-illum { color: var(--muted); margin-top: 4px; }
.moon-sign { color: var(--dim); font-size: 12px; margin-top: 2px; }

.chart-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.chart-details summary { cursor: pointer; color: var(--accent); }
.placements { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.placements th, .placements td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.placements th { color: var(--muted); font-weight: 500; }
.chart-meta { color: var(--dim); font-size: 12px; margin: 8px 0; }
.aspect-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; font-size: 13px; }
.aspect-list .orb { color: var(--dim); }
@media (max-width: 640px) {
  .me-page-head { align-items: start; }
  .me-grid,
  .balance-row,
  .me-overview__big,
  .me-facts,
  .me-section-head--actions { grid-template-columns: 1fr; }
  .me-panel { padding: 14px; }
  .saved-chart-card__actions button { flex: 1 1 120px; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .me-grid { grid-template-columns: 1fr; }
  .me-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-grid--keys,
  .reading-grid--planets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
  .reading-grid--keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Home actions into Transits and Symbol Atlas (Update 5.2b) ─────────────
   Secondary to Today's Fortune by placement rather than by being small: they
   sit inside Technical Sky, below its summary. Text labels, never icons —
   an unexplained glyph is the thing the Symbol Atlas exists to fix. */
.sky-actions {
  display: grid;
  gap: var(--space-2, 0.6rem);
  margin: var(--space-3, 1rem) 0 0;
  grid-template-columns: 1fr;          /* 375px: stacked, full width */
}
.sky-action {
  min-height: 44px;                    /* comfortable touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@media (min-width: 560px) { .sky-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sky-actions { grid-template-columns: max-content max-content; } }

/* ── Transits ───────────────────────────────────────────────────────────────
   The Update 5.2b block that lived here is gone. It styled the filter row,
   the two-column grid, and applying/separating badge variants — all of which
   the Dev Update 1.8 renderer stopped emitting. Its .tr-card, .tr-badge and
   .tr-orb rules were also silently overridden by the 1.8 block further down,
   so the file defined the same component twice. The live rules are together
   under "Today's Transits workspace". */

/* The back actions on both secondary pages are primary navigation on a phone:
   they need the same 44px target as the filters beside them. */
#panel-transits [data-goto], #panel-symbol-atlas [data-goto] { min-height: 44px; }

/* ── Symbol Atlas ─────────────────────────────────────────────────────────── */
.atlas-controls { margin-bottom: var(--space-4, 1.25rem); }
.atlas-search-label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; }
#sa-search { width: 100%; min-height: 44px; }
.atlas-kinds { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--space-2, 0.6rem) 0; }
.atlas-kinds .o-tab { min-height: 44px; }
.atlas-kinds .o-tab[aria-selected="true"] {
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
}

.sa-results { display: grid; gap: var(--space-3, 1rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .sa-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sa-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sa-card {
  padding: var(--space-3, 1rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface-elevated);
}
.sa-card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
/* Large enough to read, and always beside its name — never alone. */
.sa-card__glyph {
  font-size: 1.9rem;
  line-height: 1;
  min-width: 2.2rem;
  text-align: center;
  color: var(--color-accent);
}
.sa-card__name { margin: 0; font-size: 1rem; }
.sa-card__kind { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.sa-card__meaning { margin: 0 0 0.6rem; line-height: 1.55; color: var(--color-secondary); }
.sa-card__seen { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.sa-card__seen-label { color: var(--color-secondary); }
.sa-empty, .sa-error { padding: var(--space-4, 1.25rem); text-align: center; color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .tr-card, .sa-card { transition: none; }
}

/* ══ My Chart reading (Dev Update 1.5) ═══════════════════════════════════════
   The reading is long-form text, so the constraints here are readability
   first: a measure that does not run past ~70 characters, disclosure controls
   big enough to hit on a phone, and tables that scroll inside themselves
   instead of pushing the page sideways. */

/* Three controls in one row is fine on a desktop and impossible on a phone.
   The row wraps, and the switcher takes the full width once it does — a
   half-width select next to a stranded button reads as a layout bug. */
.me-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  min-width: 0;
  max-width: 100%;
}
/* Primary controls on this page are thumb-sized, matching the disclosures. */
.me-head-actions .o-btn,
#me-saved-chart-add { min-height: 44px; }
.chart-switcher { display: grid; gap: 4px; min-width: 0; }
.chart-switcher__label { font-size: 12px; color: var(--color-secondary); }
.chart-switcher__select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* background-COLOR, not the shorthand: the shorthand resets
     background-repeat/-size/-position, and the caret this select inherits from
     the component library then tiles across it. */
  background-color: var(--color-surface-elevated);
  color: inherit;
  font: inherit;
  max-width: 260px;
}

/* Sections are hidden while loading so the page keeps its shape rather than
   collapsing and rebuilding under the reader. */
#me-reading[data-state="loading"] .me-panel--overview { opacity: 0.75; }

.me-loading { padding: 8px 0; color: var(--color-secondary); }

.me-facts__help { display: block; font-size: 12px; color: var(--color-secondary); margin-top: 2px; }
.me-facts--compact { margin-top: 12px; }

/* ── One page-level limitation notice ─────────────────────────────────────── */
.chart-limitation {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--gold, #c9a227) 45%, var(--color-border));
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--gold, #c9a227) 8%, var(--color-surface-elevated));
}
.chart-limitation__title { margin: 0 0 6px; font-size: 16px; }
.chart-limitation p { margin: 0 0 8px; max-width: 68ch; }
.chart-limitation__list { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; max-width: 68ch; }
.chart-limitation__action { font-weight: 600; margin-bottom: 0; }

/* ── Reading cards ────────────────────────────────────────────────────────── */
.reading-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.reading-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-elevated);
  min-width: 0;
}
.reading-card--unavailable { border-style: dashed; opacity: 0.9; }
.reading-card__head { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.reading-card__glyph {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: var(--color-accent);
  font-variant-emoji: text;
}
.reading-card__ident { min-width: 0; }
.reading-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
.reading-card__meta,
.reading-card__role { margin: 2px 0 0; font-size: 13px; color: var(--color-secondary); }
.reading-card__summary { margin: 0; max-width: 68ch; line-height: 1.55; }
.reading-card__body { display: grid; gap: 10px; padding-top: 10px; }
.reading-card__body p { margin: 0; max-width: 68ch; line-height: 1.55; }
.reading-card__aside {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--color-surface-sunken);
}
.reading-card__aside h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
.reading-card__aside p { margin: 0; }
.reading-card__note { margin: 0; font-size: 13px; color: var(--color-secondary); max-width: 68ch; }

/* Native disclosure, sized for a thumb. */
.reading-card__more > summary,
.chart-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  list-style: none;
}
.reading-card__more > summary::-webkit-details-marker,
.chart-details > summary::-webkit-details-marker { display: none; }
.reading-card__more > summary::before,
.chart-details > summary::before {
  content: "+";
  font-weight: var(--weight-semibold);
  transition: transform 120ms ease;
}
.reading-card__more[open] > summary::before,
.chart-details[open] > summary::before { content: "\2212"; }
.reading-card__more > summary:focus-visible,
.chart-details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* ── Patterns ─────────────────────────────────────────────────────────────── */
.pattern-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pattern-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pattern-block h3 { margin: 0; font-size: 15px; }
.pattern-block__summary { margin: 0; max-width: 68ch; line-height: 1.55; }
.pattern-block__counts { font-variant-numeric: tabular-nums; }
.pattern-note { margin: 12px 0 0; font-size: 13px; color: var(--color-secondary); max-width: 68ch; }

/* ── Aspects ──────────────────────────────────────────────────────────────── */
.aspect-list { display: grid; gap: 12px; }
.aspect-card {
  display: grid; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-elevated); min-width: 0;
}
.aspect-card__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.aspect-card__title { margin: 0; font-size: 16px; }
.aspect-card__orb { font-size: 13px; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.aspect-card__summary { margin: 0; max-width: 68ch; line-height: 1.55; }
.aspect-plain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.aspect-plain li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }

/* Wide content scrolls inside itself; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 460px; }

@media (min-width: 700px) {
  .reading-grid--keys { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .reading-grid--planets { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .pattern-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .reading-grid--planets { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* Short viewports and heavy zoom: one column, nothing clipped. */
@media (max-height: 460px), (max-width: 420px) {
  .reading-grid, .pattern-row { grid-template-columns: 1fr; }
  .chart-switcher__select { max-width: 100%; }
}

/* Phones: the switcher owns its own row, the two buttons share the next one. */
@media (max-width: 640px) {
  .me-head-actions { width: 100%; }
  .chart-switcher { flex: 1 1 100%; }
  .chart-switcher__select { width: 100%; max-width: 100%; }
  .me-head-actions .o-btn { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-card__more > summary::before,
  .chart-details > summary::before { transition: none; }
}

@media (forced-colors: active) {
  .reading-card, .aspect-card, .chart-limitation { border: 1px solid CanvasText; }
  .reading-card__aside { border: 1px solid CanvasText; background: Canvas; }
  .reading-card__more > summary,
  .chart-details > summary { color: LinkText; }
}

/* ══ Current Positions (Dev Update 1.7) ══════════════════════════════════════
   Rows, not a table. A ten-row table is the fastest way to make a phone scroll
   sideways, and the exact degree is the one value a reader came for — it has to
   survive at 375px without being the thing that breaks the layout. */

.positions-status:empty { display: none; }
.positions-status { margin: 0 0 4px; color: var(--color-secondary); font-size: 14px; }
.positions-general__text { margin: 0 0 12px; max-width: 62ch; line-height: 1.55; }
.positions-general .o-btn { min-height: 44px; }

.positions-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.positions-summary li { display: grid; gap: 2px; }
.positions-summary__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.positions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.positions-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-elevated);
  min-width: 0;
}
.positions-row__glyph {
  grid-row: 1 / span 2;
  font-size: 22px; line-height: 1;
  color: var(--color-accent);
}
.positions-row__main { display: grid; gap: 3px; min-width: 0; }
.positions-row__name { font-weight: 600; font-size: 16px; }
.positions-row__position {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 17px; font-variant-numeric: tabular-nums;
}
.positions-row__role { font-size: 13px; color: var(--color-secondary); max-width: 52ch; }
.positions-row__note { font-size: 13px; color: var(--color-secondary); }
.positions-row__state {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: center; margin-top: 4px;
}
.positions-row__direction {
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}
/* Retrograde is carried by the word, never by the colour alone. */
.positions-row__direction.is-retrograde {
  border-color: color-mix(in oklab, var(--gold, #c9a227) 45%, var(--color-border));
  background: color-mix(in oklab, var(--gold, #c9a227) 12%, transparent);
}
.positions-row__movement { font-size: 13px; color: var(--color-secondary); }

@media (min-width: 700px) {
  .positions-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
  .positions-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  .positions-row__glyph { grid-row: auto; }
  .positions-row__state { grid-column: auto; margin-top: 0; justify-content: flex-end; }
}
@media (max-width: 420px), (max-height: 460px) {
  .positions-summary { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .positions-row { border: 1px solid CanvasText; }
  .positions-row__direction { border: 1px solid CanvasText; background: Canvas; }
}

/* ══ Today's Transits (Dev Update 1.8) ═══════════════════════════════════════
   Immediate influences lead and read at full weight; background influences sit
   below at a deliberately quieter weight — quieter, not smaller, because a
   tight outer-planet contact still deserves to be readable. */

/* No margin-bottom. The panel around this is a grid with its own gap, and a
   margin does not collapse into a grid gap — it ADDS to it, so this was
   producing 36px where every neighbouring gap was 24px. The container owns the
   rhythm; children that also set one create spacing nobody chose. */
.tr-switcher { display: grid; gap: 4px; max-width: 280px; margin: 0; }
.tr-switcher__label { font-size: 12px; color: var(--color-secondary); }
.tr-switcher__select {
  min-height: 44px; padding: 8px 12px; font: inherit; color: inherit;
  border: 1px solid var(--color-border); border-radius: 8px;
  background-color: var(--color-surface-elevated); max-width: 100%;
}
.tr-status:empty { display: none; }
.tr-status { margin: 0; font-size: 14px; color: var(--color-secondary); }  /* see .tr-switcher above */

.tr-summary__text { margin: 0; max-width: 66ch; line-height: 1.55; font-size: 16px; }

.tr-list { display: grid; gap: 12px; }
.tr-card {
  display: grid; gap: 8px; padding: 16px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-elevated); min-width: 0;
}
.tr-card--background { background: color-mix(in oklab, var(--color-surface-elevated) 88%, transparent); }
.tr-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
.tr-card__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0; }
.tr-card__lead { margin: 0; max-width: 66ch; line-height: 1.55; }
.tr-badge {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}
.tr-badge--soft { font-weight: 500; color: var(--color-secondary); }
.tr-orb { font-size: 13px; color: var(--color-secondary); font-variant-numeric: tabular-nums; }

/* The same reading in the vocabulary, for anyone learning it. Quiet, and
   below the plain sentence rather than in front of it — the card leads with
   what is happening to the reader, and this is available if they want the
   terms for it. */
.tr-technical-line {
  margin: 4px 0 0;
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--type-caption);
  letter-spacing: var(--track-caption);
  color: var(--color-muted);
}

.tr-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 4px 0 0; }
.tr-evidence dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.tr-evidence dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }

.tr-empty { display: grid; gap: 10px; justify-items: start; padding: 20px 18px; }
.tr-empty h2 { margin: 0; font-size: 18px; }
.tr-empty p { margin: 0; max-width: 62ch; line-height: 1.55; }
.tr-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tr-empty__actions .o-btn { min-height: 44px; }

#panel-transits button, #panel-transits .o-btn,
#panel-transits .axis-explore__link { min-height: 44px; }

@media (min-width: 700px) {
  .tr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-list--background { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px), (max-height: 460px) {
  .tr-list, .tr-list--background { grid-template-columns: 1fr; }
  .tr-switcher { max-width: 100%; }
}
@media (forced-colors: active) {
  .tr-card { border: 1px solid CanvasText; }
  .tr-badge { border: 1px solid CanvasText; background: Canvas; }
}

/* ── Chart views nav (Reading · Saved charts · Compare) ─────────────────────
   Links styled as a segmented row. The current view is marked by weight and an
   underline as well as tone — state is never colour alone — and by
   aria-current="page" for anything that reads rather than looks. */
.chart-subnav {
  display: flex; gap: var(--space-xs);
  border-bottom: var(--border-width) solid var(--color-border);
}
.chart-subnav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  color: var(--color-secondary);
  text-decoration: none;
  font-size: var(--type-body);
  border-bottom: 2px solid transparent;
  margin-bottom: calc(var(--border-width) * -1);
}
.chart-subnav a:hover { color: var(--color-primary); }
.chart-subnav a:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.chart-subnav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--color-accent);
}
@media (max-width: 640px) {
  .chart-subnav { position: sticky; top: var(--topbar-height); z-index: 20;
    background: var(--color-bg); }
  .chart-subnav a { flex: 1 1 0; padding: 0 var(--space-xs); }
}

/* ── Reading rows (placements as expandable flat rows) ──────────────────────
   The Placements section alone was ~3,600px of the mobile Chart document as
   always-open cards. As rows: eleven collapsed lines a thumb can scan, each
   opening into everything the card used to show. Desktop renders the same
   markup with every row open (data-desktop-open), so nothing was taken from
   the large screen to pay for the small one. */
.reading-row > summary .o-flat-row__lead { font-size: 1.25rem; width: 32px; justify-content: center; }
.reading-row .o-disclosure-row__body { padding-left: calc(32px + var(--space-md)); }
.reading-row--unavailable { opacity: 0.75; }
@media (max-width: 640px) {
  .reading-row .o-disclosure-row__body { padding-left: 0; }
}

/* ── Mobile: one containment level for the Chart reading ────────────────────
   Below 640px the me-panel boxes give up their chrome: border, fill, and the
   padding that existed to hold the border away from the text. Sections divide
   with a hairline and breathe with rhythm instead. This is the structural
   change, not a disguise — the paddings genuinely go, and with them roughly a
   third of the document's height. Desktop keeps its panels untouched. */
@media (max-width: 640px) {
  #panel-me .me-panel,
  #panel-me .me-panel--overview {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0 0 var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  #panel-me .me-grid { gap: var(--space-lg); }
  /* Big Three: a reading stack divided by hairlines, not three cards in a box. */
  #panel-me .reading-grid--keys { display: block; }
  #panel-me .reading-grid--keys .reading-card {
    border: 0; background: none; border-radius: 0;
    padding: var(--space-sm) 0;
  }
  #panel-me .reading-grid--keys .reading-card + .reading-card {
    border-top: var(--border-width) solid var(--color-border);
  }
  /* Patterns: the bars stand on the page, not in a second box. */
  #panel-me .pattern-block { border: 0; background: none; border-radius: 0; padding: 0; }
  /* Aspects and houses: divided rows, same rule as everything else here. */
  #panel-me .aspect-card {
    border: 0; background: none; border-radius: 0;
    padding: var(--space-sm) 0;
  }
  #panel-me .aspect-card + .aspect-card { border-top: var(--border-width) solid var(--color-border); }
  #panel-me .houses-table article,
  #panel-me .house-card {
    border: 0; background: none; border-radius: 0; padding: var(--space-sm) 0;
  }
}

/* ── Saved chart rows ───────────────────────────────────────────────────────
   The dense list the Saved charts view is made of. Geometry from the flat-row
   grammar; the only chrome is the divider the .o-flat-list parent draws. */
.saved-chart-row {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 44px;
  padding: var(--space-sm) 0;
}
.saved-chart-row .o-flat-row__lead { align-self: flex-start; padding-top: 2px; }
.saved-chart-row__state { color: var(--color-secondary); font-weight: var(--weight-regular); }
.saved-chart-actions { flex: none; display: flex; align-items: center; gap: var(--space-xs); }
@media (max-width: 359px) {
  /* Only at the very narrowest widths does the visible Set active yield to the
     menu, which still contains it. At 390 and 375 — the widths phones actually
     are — the row keeps its one obvious action. */
  .saved-chart-actions > .o-btn { display: none; }
}
.saved-chart-row__menu span { font-size: 1.4rem; line-height: 1; letter-spacing: 1px; }

/* Sky's transit rows, flattened.
   Removing the "Most active today" parent card left a section full of bordered
   boxes — one containment level satisfied on a technicality. On a phone the
   rows become divided rows like every other collection; the card metaphor is
   kept for the things that earn it, which a transit in a vertical list is not.
   Above 640px the cards stand, because a multi-column grid needs its edges. */
@media (max-width: 640px) {
  .tr-list { gap: 0; }
  .tr-card {
    border: 0;
    border-radius: 0;
    background: none;
    padding: var(--space-md) 0;
  }
  .tr-card + .tr-card { border-top: var(--border-width) solid var(--color-border); }
}