/* Natal accessibility text sizing. Geometry-sensitive SVG/wheel labels are intentionally excluded. */
.natal-text-size-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line, #5b4e3c);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
.natal-text-size-controls button {
  min-width: 31px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid var(--line, #5b4e3c);
  background: transparent;
  color: var(--text, #e8dfcf);
  font:
    700 12px/1 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  cursor: pointer;
}
.natal-text-size-controls button:last-child {
  border-right: 0;
}
.natal-text-size-controls button[aria-pressed="true"] {
  background: var(--accent, #d5ad5c);
  color: #17120a;
}
@media (max-width: 700px) {
  .natal-text-size-controls button {
    min-width: 29px;
    height: 29px;
    padding: 0 5px;
  }
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Increase/decrease readable Natal content without scaling wheel/timeline geometry. */
body[data-natal-text-size="small"] #natalWorkspace,
body[data-natal-text-size="small"] .natal-workspace {
  --natal-text-delta: -1px;
}
body[data-natal-text-size="default"] #natalWorkspace,
body[data-natal-text-size="default"] .natal-workspace {
  --natal-text-delta: 0px;
}
body[data-natal-text-size="large"] #natalWorkspace,
body[data-natal-text-size="large"] .natal-workspace {
  --natal-text-delta: 2px;
}
#natalWorkspace p,
#natalWorkspace label,
#natalWorkspace input,
#natalWorkspace select,
#natalWorkspace textarea,
#natalWorkspace button,
#natalWorkspace td,
#natalWorkspace th,
#natalWorkspace small,
#natalWorkspace .status,
#natalWorkspace .card-note,
#natalWorkspace .explorer-note,
#natalWorkspace .birth-day-scan-note,
#natalWorkspace .birth-score-filter-note {
  font-size: calc(13px + var(--natal-text-delta, 0px));
}
#natalWorkspace h2,
#natalWorkspace h3,
#natalWorkspace h4,
#natalWorkspace summary {
  font-size: calc(16px + var(--natal-text-delta, 0px));
}
#natalWorkspace .explorer-scale,
#natalWorkspace .explorer-half-scale,
#natalWorkspace .explorer-markers {
  font-size: inherit;
}

/* Birth Time Explorer date: compact and iOS-safe. */
#natalWorkspace .birth-day-scan-date-field {
  width: min(230px, 100%);
  max-width: 230px;
  justify-self: start;
  overflow: visible;
}
#natalWorkspace input.birth-day-scan-date {
  display: block;
  width: 230px;
  max-width: 100%;
  min-width: 0;
  inline-size: 230px;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  font-size: calc(16px + var(--natal-text-delta, 0px));
  line-height: normal;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
#natalWorkspace input.birth-day-scan-date::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: inherit;
  line-height: normal;
}
#natalWorkspace input.birth-day-scan-date::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  line-height: normal;
}
@media (max-width: 700px) {
  #natalWorkspace .birth-day-scan-date-field {
    width: min(220px, 100%);
    max-width: 220px;
  }
  #natalWorkspace input.birth-day-scan-date {
    width: 220px;
    inline-size: 220px;
  }
}

/* 2026-09-16 follow-up: Live Positions + mobile Classical Bodies.
   Keep the Live Positions panel itself, but remove the per-value dark tiles. */

/* A-/A/A+ must also affect the dynamically generated Live Positions text. */

/* Do not let A+ inflate six table headings until they collide. The body still
   grows, but by a controlled amount on narrow screens. */
body[data-natal-text-size="small"] {
  --natal-table-body: 12px;
  --natal-table-head: 9px;
}
body[data-natal-text-size="default"] {
  --natal-table-body: 13px;
  --natal-table-head: 10px;
}
body[data-natal-text-size="large"] {
  --natal-table-body: 14px;
  --natal-table-head: 10px;
}
#natalWorkspace .planet-table td {
  font-size: var(--natal-table-body, 13px);
}
#natalWorkspace .planet-table th {
  font-size: var(--natal-table-head, 10px);
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: normal;
}
@media (max-width: 700px) {
  #natalWorkspace .planet-table {
    table-layout: fixed;
    width: 100%;
  }
  #natalWorkspace .planet-table th,
  #natalWorkspace .planet-table td {
    padding-left: 3px;
    padding-right: 3px;
  }
  #natalWorkspace .planet-table th:nth-child(1) {
    width: 23%;
  }
  #natalWorkspace .planet-table th:nth-child(2) {
    width: 18%;
  }
  #natalWorkspace .planet-table th:nth-child(3) {
    width: 16%;
  }
  #natalWorkspace .planet-table th:nth-child(4) {
    width: 22%;
  }
  #natalWorkspace .planet-table th:nth-child(5) {
    width: 11%;
  }
  #natalWorkspace .planet-table th:nth-child(6) {
    width: 10%;
  }
  #natalWorkspace .planet-table td {
    overflow-wrap: anywhere;
  }
  #natalWorkspace .planet-table td:nth-child(2) {
    white-space: normal;
  }
  #natalWorkspace .planet-table .natal-body-cell {
    white-space: normal;
    gap: 4px;
  }
}

/* 2026-09-16 iPhone corrective pass: typography, Live Positions and result tables. */
/* The A controls are a Natal-wide readability setting. Include generated result
   copy that uses div/span elements rather than only p/td/small. */
body[data-natal-text-size="small"] #natalWorkspace {
  --natal-readable: 12px;
  --natal-readable-small: 11px;
}
body[data-natal-text-size="default"] #natalWorkspace {
  --natal-readable: 13px;
  --natal-readable-small: 12px;
}
body[data-natal-text-size="large"] #natalWorkspace {
  --natal-readable: 15px;
  --natal-readable-small: 14px;
}
#natalWorkspace .result-summary,
#natalWorkspace .phase-note,
#natalWorkspace .forecast-card,
#natalWorkspace .forecast-card div,
#natalWorkspace .forecast-card span,
#natalWorkspace .forecast-summary,
#natalWorkspace .forecast-summary div,
#natalWorkspace .forecast-summary span,
#natalWorkspace .combined-window-card,
#natalWorkspace .combined-window-card span,
#natalWorkspace .birth-score-guide,
#natalWorkspace .birth-score-guide div,
#natalWorkspace .explorer-note,
#natalWorkspace .explorer-event-legend button,
#natalWorkspace .card-note {
  font-size: var(--natal-readable, 13px);
}
#natalWorkspace .priority-badge,
#natalWorkspace .forecast-meta,
#natalWorkspace .forecast-pill,
#natalWorkspace .forecast-period-activity,
#natalWorkspace .forecast-influence {
  font-size: var(--natal-readable-small, 12px);
}

/* Live Positions: no black/dark tiles around either the planet heading or the
   zodiac/position value. Keep only the coloured glyph badges and the panel. */

/* Classical Bodies: never break a planet name character-by-character. */
#natalWorkspace .classical-bodies-table .natal-body-cell {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
#natalWorkspace .classical-bodies-table .natal-body-cell > span {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 700px) {
  /* Allocate enough room to Body while keeping all six columns visible. */
  #natalWorkspace .classical-bodies-table th:nth-child(1),
  #natalWorkspace .classical-bodies-table td:nth-child(1) {
    width: 22%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(2),
  #natalWorkspace .classical-bodies-table td:nth-child(2) {
    width: 18%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(3),
  #natalWorkspace .classical-bodies-table td:nth-child(3) {
    width: 16%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(4),
  #natalWorkspace .classical-bodies-table td:nth-child(4) {
    width: 23%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(5),
  #natalWorkspace .classical-bodies-table td:nth-child(5) {
    width: 10%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(6),
  #natalWorkspace .classical-bodies-table td:nth-child(6) {
    width: 11%;
  }
  #natalWorkspace .classical-bodies-table td {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Major aspects: Body columns only need enough for the body names; Aspect
    gets the extra room so Conjunction does not split awkwardly. */
  #natalWorkspace .major-aspects-table {
    table-layout: fixed;
    width: 100%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(1),
  #natalWorkspace .major-aspects-table td:nth-child(1) {
    width: 27%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(2),
  #natalWorkspace .major-aspects-table td:nth-child(2) {
    width: 28%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(3),
  #natalWorkspace .major-aspects-table td:nth-child(3) {
    width: 29%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(4),
  #natalWorkspace .major-aspects-table td:nth-child(4) {
    width: 16%;
    white-space: nowrap;
  }
  #natalWorkspace .major-aspects-table td {
    word-break: normal;
    overflow-wrap: normal;
  }

  /* Equal House cusps: House is a short number, so give the space to cusp and
    occupants rather than leaving a large empty first column. */
  #natalWorkspace .equal-house-table {
    table-layout: fixed;
    width: 100%;
  }
  #natalWorkspace .equal-house-table th:nth-child(1),
  #natalWorkspace .equal-house-table td:nth-child(1) {
    width: 12%;
  }
  #natalWorkspace .equal-house-table th:nth-child(2),
  #natalWorkspace .equal-house-table td:nth-child(2) {
    width: 42%;
  }
  #natalWorkspace .equal-house-table th:nth-child(3),
  #natalWorkspace .equal-house-table td:nth-child(3) {
    width: 46%;
  }
}

/* ================================================================
   2026-09-16 final typography/layout polish after A-/A/A+ testing
   ================================================================ */
/* Birth Time Explorer date: keep A- genuinely smaller. A+ gets the same
   field width as its neighbours on the wide two-column Explorer form. */
body[data-natal-text-size="small"] #natalWorkspace input.birth-day-scan-date {
  font-size: 13px;
}
body[data-natal-text-size="default"] #natalWorkspace input.birth-day-scan-date {
  font-size: 16px;
}
body[data-natal-text-size="large"] #natalWorkspace input.birth-day-scan-date {
  font-size: 18px;
}
@media (min-width: 701px) {
  body[data-natal-text-size="large"] #natalWorkspace .birth-day-scan-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-natal-text-size="large"]
    #natalWorkspace
    .birth-day-scan-date-field {
    width: 100%;
    max-width: none;
  }
  body[data-natal-text-size="large"] #natalWorkspace input.birth-day-scan-date {
    width: 100%;
    inline-size: 100%;
    max-width: none;
  }
}

/* Live Positions: use a stable two-row mini-card in normal portrait and
   fullscreen portrait. This keeps the two columns aligned and, importantly,
   gives the complete zodiac/degree/house value its own full-width line. */
@media (max-width: 700px) and (orientation: portrait) {
}

/* Classical Bodies: stack the planet name under its coloured symbol on phones.
   That removes the need for an oversized Body column while keeping names intact. */
@media (max-width: 700px) {
  #natalWorkspace .classical-bodies-table th:nth-child(1),
  #natalWorkspace .classical-bodies-table td:nth-child(1) {
    width: 15%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(2),
  #natalWorkspace .classical-bodies-table td:nth-child(2) {
    width: 20%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(3),
  #natalWorkspace .classical-bodies-table td:nth-child(3) {
    width: 17%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(4),
  #natalWorkspace .classical-bodies-table td:nth-child(4) {
    width: 25%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(5),
  #natalWorkspace .classical-bodies-table td:nth-child(5) {
    width: 11%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(6),
  #natalWorkspace .classical-bodies-table td:nth-child(6) {
    width: 12%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table .natal-body-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: normal;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table .natal-body-cell > span:last-child {
    display: block;
    max-width: 100%;
    font-size: calc(var(--natal-table-body, 13px) - 1px);
    line-height: 1.05;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* Major Aspects: Body columns are compact; Aspect gets the useful space. */
  #natalWorkspace .major-aspects-table th:nth-child(1),
  #natalWorkspace .major-aspects-table td:nth-child(1) {
    width: 25%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(2),
  #natalWorkspace .major-aspects-table td:nth-child(2) {
    width: 32%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(3),
  #natalWorkspace .major-aspects-table td:nth-child(3) {
    width: 27%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(4),
  #natalWorkspace .major-aspects-table td:nth-child(4) {
    width: 16%;
  }
  #natalWorkspace .major-aspects-table .aspect-key {
    white-space: normal;
  }

  /* Equal House cusps: House only contains 1–12, so keep it deliberately narrow. */
  #natalWorkspace .equal-house-table th:nth-child(1),
  #natalWorkspace .equal-house-table td:nth-child(1) {
    width: 10%;
  }
  #natalWorkspace .equal-house-table th:nth-child(2),
  #natalWorkspace .equal-house-table td:nth-child(2) {
    width: 44%;
  }
  #natalWorkspace .equal-house-table th:nth-child(3),
  #natalWorkspace .equal-house-table td:nth-child(3) {
    width: 46%;
  }
}

/* ================================================================
   2026-09-16 A/A+ screenshot corrective pass
   ================================================================ */
/* Explorer form: Date participates in exactly the same responsive column as
   the other inputs. iOS must not impose its intrinsic date-control width. */
#natalWorkspace .birth-day-scan-date-field {
  width: 100%;
  max-width: none;
  min-width: 0;
}
#natalWorkspace input.birth-day-scan-date {
  box-sizing: border-box;
  width: 100%;
  inline-size: 100%;
  max-width: none;
  min-width: 0;
}
body[data-natal-text-size="small"] #natalWorkspace input.birth-day-scan-date {
  font-size: 13px;
}
@media (max-width: 560px) {
  #natalWorkspace .birth-day-scan-date-field,
  #natalWorkspace input.birth-day-scan-date {
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
  }
}

/* Live Positions: equal left/right allocation and a common internal rhythm.
   Values keep their own line on portrait phones so nothing is ellipsised. */
@media (max-width: 700px) and (orientation: portrait) {
}

/* Classical Bodies: the stacked body label earns a narrower first column.
   Give House and Motion enough independent width for their headings. */
@media (max-width: 700px) {
  #natalWorkspace .classical-bodies-table th,
  #natalWorkspace .classical-bodies-table td {
    padding-left: 2px;
    padding-right: 2px;
  }
  #natalWorkspace .classical-bodies-table th {
    font-size: 9px;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(1),
  #natalWorkspace .classical-bodies-table td:nth-child(1) {
    width: 15%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(2),
  #natalWorkspace .classical-bodies-table td:nth-child(2) {
    width: 20%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(3),
  #natalWorkspace .classical-bodies-table td:nth-child(3) {
    width: 17%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(4),
  #natalWorkspace .classical-bodies-table td:nth-child(4) {
    width: 24%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(5),
  #natalWorkspace .classical-bodies-table td:nth-child(5) {
    width: 12%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(6),
  #natalWorkspace .classical-bodies-table td:nth-child(6) {
    width: 12%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table .natal-body-cell > span:last-child {
    font-size: calc(var(--natal-table-body, 13px) - 1px);
  }

  /* Major Aspects remains text-led: the classical body glyphs are clearer here
    than adding another set of coloured badges. Balance columns around Aspect. */
  #natalWorkspace .major-aspects-table th:nth-child(1),
  #natalWorkspace .major-aspects-table td:nth-child(1) {
    width: 25%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(2),
  #natalWorkspace .major-aspects-table td:nth-child(2) {
    width: 31%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(3),
  #natalWorkspace .major-aspects-table td:nth-child(3) {
    width: 28%;
  }
  #natalWorkspace .major-aspects-table th:nth-child(4),
  #natalWorkspace .major-aspects-table td:nth-child(4) {
    width: 16%;
  }

  /* Equal House: short House numbers do not consume useful Cusp/body space. */
  #natalWorkspace .equal-house-table th:nth-child(1),
  #natalWorkspace .equal-house-table td:nth-child(1) {
    width: 11%;
  }
  #natalWorkspace .equal-house-table th:nth-child(2),
  #natalWorkspace .equal-house-table td:nth-child(2) {
    width: 43%;
  }
  #natalWorkspace .equal-house-table th:nth-child(3),
  #natalWorkspace .equal-house-table td:nth-child(3) {
    width: 46%;
  }
}

/* ================================================================
   2026-09-16 final mobile alignment follow-up
   ================================================================ */
@media (max-width: 700px) {
  /* Classical Bodies: align the name directly with the left edge of its badge.
    The stacked label lets Body give two points back to Position, which keeps
    degree/minute/second values on one line at A and A+ where space permits. */
  #natalWorkspace .classical-bodies-table th:nth-child(1),
  #natalWorkspace .classical-bodies-table td:nth-child(1) {
    width: 13%;
    text-align: left;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(2),
  #natalWorkspace .classical-bodies-table td:nth-child(2) {
    width: 20%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(3),
  #natalWorkspace .classical-bodies-table td:nth-child(3) {
    width: 19%;
    white-space: nowrap;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(4),
  #natalWorkspace .classical-bodies-table td:nth-child(4) {
    width: 24%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(5),
  #natalWorkspace .classical-bodies-table td:nth-child(5) {
    width: 12%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(6),
  #natalWorkspace .classical-bodies-table td:nth-child(6) {
    width: 12%;
    text-align: center;
  }
  #natalWorkspace .classical-bodies-table .natal-body-cell {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  #natalWorkspace .classical-bodies-table .natal-body-cell > span:last-child {
    width: auto;
    text-align: left;
    margin-left: 0;
    padding-left: 0;
  }
}

/* Live Positions: the value line begins beneath the planet NAME rather than
   beneath the badge. This creates one clean text column in each half while
   retaining the two-line mobile layout and full, non-ellipsised values. */
@media (max-width: 700px) and (orientation: portrait) {
}

/* 2026-09-16 Live Positions final text-column alignment.
   Planet and zodiac rows use the same 20px symbol column + 7px gap so the
   planet name and zodiac text begin on exactly the same x-coordinate. */
@media (max-width: 700px) and (orientation: portrait) {
}

/* ================================================================
   2026-09-16 Live Positions definitive two-column alignment
   Planet and zodiac lines use the identical 20px symbol + 7px text grid.
   This applies consistently to desktop, mobile and fullscreen.
   ================================================================ */

@media (max-width: 700px) {
}

/* ================================================================
   2026-09-16 Live Positions / fullscreen compact dashboard follow-up
   ================================================================ */
/* The value text itself must never inherit a dark tile/capsule. */

/* Phone Classical Bodies: mirror Body by stacking zodiac name under its badge.
   The narrower Sign column gives Position enough room to remain on one line. */
@media (max-width: 700px) {
  #natalWorkspace .classical-bodies-table th:nth-child(1),
  #natalWorkspace .classical-bodies-table td:nth-child(1) {
    width: 13%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(2),
  #natalWorkspace .classical-bodies-table td:nth-child(2) {
    width: 14%;
    text-align: left;
    white-space: normal;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(3),
  #natalWorkspace .classical-bodies-table td:nth-child(3) {
    width: 25%;
    white-space: nowrap;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(4),
  #natalWorkspace .classical-bodies-table td:nth-child(4) {
    width: 24%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(5),
  #natalWorkspace .classical-bodies-table td:nth-child(5) {
    width: 12%;
  }
  #natalWorkspace .classical-bodies-table th:nth-child(6),
  #natalWorkspace .classical-bodies-table td:nth-child(6) {
    width: 12%;
  }
  #natalWorkspace .classical-bodies-table .natal-sign-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
  }
  #natalWorkspace .classical-bodies-table .natal-sign-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #9b36c5;
    color: #fff;
    font:
      700 14px/20px "Segoe UI Symbol",
      "Noto Sans Symbols 2",
      sans-serif;
  }
  #natalWorkspace .classical-bodies-table .natal-sign-name {
    display: block;
    font-size: calc(var(--natal-table-body, 13px) - 1px);
    line-height: 1.05;
    white-space: nowrap;
  }
}

/* Fullscreen portrait is a wheel-first workspace. Live Positions becomes a
   compact two-column dashboard: one line per planet, with AC/MC above it. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #natalWorkspace .explorer-fullscreen .explorer-angles {
    margin: 0 0 4px;
    gap: 8px;
    font-size: 10px;
    line-height: 1.15;
  }

  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    gap: 5px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    min-height: 0;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    width: min(92vw, 560px);
  }
}