[hidden] {
  display: none;
}
.intro {
  max-width: 100%;
}
.natal-interpretations {
  margin-top: 24px;
}
.interpretation-heading h3 {
  margin-bottom: 4px;
}
.interpretation-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.interpretation-disclaimer {
  margin: 11px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(17, 24, 39, 0.45);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.interpretation-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 11px;
}
.interpretation-overview > div,
.interpretation-factors > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.interpretation-overview b,
.interpretation-factors b {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8c77f;
}
.interpretation-overview span,
.interpretation-factors span {
  font-size: 12px;
  line-height: 1.45;
}
.interpretation-list {
  display: grid;
  gap: 7px;
}
.interpretation-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 29, 45, 0.65);
  overflow: hidden;
}
.interpretation-card summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}
.interpretation-card summary::-webkit-details-marker {
  display: none;
}
.interpretation-card summary b {
  font-size: 13px;
}
.interpretation-card summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.interpretation-symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #37445b;
  color: #fff;
  font-size: 20px;
}
.interpretation-chevron {
  color: var(--muted);
  font-size: 18px;
  transition: transform 0.15s;
}
.interpretation-card[open] .interpretation-chevron {
  transform: rotate(180deg);
}
.interpretation-body {
  padding: 0 12px 13px;
  border-top: 1px solid var(--line);
}
.interpretation-factors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 11px;
}
.combined-reading,
.interpretation-note {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 12px;
  line-height: 1.5;
}
.interpretation-note {
  border-left: 3px solid var(--accent);
}
.interpretation-body h4 {
  margin: 12px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.interpretation-aspects {
  margin: 0;
  padding-left: 19px;
  font-size: 11px;
  line-height: 1.55;
}
.interpretation-aspects span,
.interpretation-muted {
  color: var(--muted);
}
.interpretation-source {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.interpretation-source a {
  color: #e8c77f;
}
.interpretation-muted {
  font-size: 11px;
}
@media (max-width: 600px) {
  .interpretation-overview,
  .interpretation-factors {
    grid-template-columns: 1fr;
  }
  .interpretation-card summary {
    padding: 9px 10px;
  }
  .interpretation-body {
    padding: 0 10px 11px;
  }
}
.birth-time-explorer {
  margin-top: 24px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 29, 45, 0.58);
}
.explorer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.explorer-heading h3 {
  margin-bottom: 4px;
}
.explorer-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.explorer-scan-status {
  flex: none;
  color: var(--muted);
  font-size: 10px;
}
.explorer-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.explorer-controls button,
.explorer-controls select,
.explorer-start-time-input {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0 9px;
  font:
    700 10px/1 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  cursor: pointer;
}
.explorer-start-time-input {
  width: 102px;
  color-scheme: dark;
}
.explorer-controls button[data-explorer-action="play"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #17120a;
}
.explorer-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}
.explorer-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.explorer-time-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 11px;
}
.explorer-time-row span {
  color: var(--muted);
  text-align: right;
}
.explorer-timeline {
  position: relative;
  margin: 14px 5px 4px;
}
.explorer-range {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  padding: 0;
  accent-color: var(--accent);
}
/*
 * .explorer-markers is the 24-hour-timeline marker strip. Its "top" (and, in a couple
 * of places below, "left"/"right") is re-declared at several breakpoints/modes further
 * down this file (portrait split timeline, landscape fullscreen, desktop single
 * timeline, etc.) because each of those layouts renders the
 * range-thumb track at a different height, so the strip needs a different vertical
 * offset to stay centred on the thumb in each one. That per-mode retuning is
 * intentional, source-tuned configuration (see VALIDATION.md), not leftover cruft —
 * please don't delete an override here without checking that specific mode.
 *
 * The horizontal position (left offset) and exact top of each individual
 * .explorer-marker dot, by contrast, ARE computed once at runtime — see
 * syncMarkerGeometry() in js/natal-explorer.js, which measures the actual
 * range-thumb geometry via getBoundingClientRect() and sets each marker's own
 * left/top as inline styles. Those inline styles always win over anything declared
 * here, so this file only needs to get the *container's* baseline top/left/right
 * right for each mode — it is not trying to hand-place individual markers.
 */
.explorer-markers {
  position: absolute;
  z-index: 3;
  left: 9px;
  right: 9px;
  top: 17px;
  height: 10px;
  pointer-events: none;
}
.explorer-marker {
  position: absolute;
  top: 0;
  width: 5px;
  height: 9px;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}
.marker-angle {
  background: #e8c77f;
}
.marker-house {
  background: #6ca8df;
}
.marker-moon {
  background: #d9d5ff;
}
.marker-aspect {
  background: #ef7777;
}
.explorer-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
}
.explorer-event-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 9px;
}
.explorer-event-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.explorer-event-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.explorer-angles {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 11px;
}
.explorer-angles b {
  color: #e8c77f;
}
.explorer-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.explorer-shared-chart {
  max-width: 680px;
  margin: 12px auto 4px;
}
.explorer-shared-chart .natal-chart-wrap {
  max-width: none;
  margin: 0;
}
.explorer-chart-stage {
  position: relative;
}
.explorer-centre-button {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid #d5ad5c;
  border-radius: 50%;
  background: rgba(20, 29, 45, 0.88);
  color: #e8c77f;
  padding: 0;
  font:
    800 26px/1 Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.explorer-centre-button:hover,
.explorer-centre-button:focus-visible,
.explorer-centre-button.is-playing {
  background: rgba(77, 61, 31, 0.94);
}
.explorer-centre-button span {
  transform: translateX(2px);
  pointer-events: none;
}
.explorer-centre-button.is-playing span {
  transform: none;
}
.explorer-bootstrap {
  margin-top: 24px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 29, 45, 0.58);
}
.explorer-bootstrap h3 {
  margin: 0 0 6px;
}
.explorer-bootstrap-status {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.explorer-bootstrap-error,
.explorer-error {
  border-color: #a65b5b;
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}
.explorer-bootstrap-error .explorer-bootstrap-status {
  color: #fecaca;
}
.explorer-error {
  margin-top: 18px;
  padding: 11px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 600px) {
  .birth-time-explorer {
    padding: 11px;
  }
  .explorer-heading,
  .explorer-time-row {
    display: grid;
  }
  .explorer-time-row span {
    text-align: left;
  }
  .explorer-controls button,
  .explorer-controls select {
    padding: 0 7px;
  }
  .explorer-scan-status {
    margin-top: 3px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .explorer-controls select,
  .explorer-start-time-input {
    font-size: 16px;
  }
}
.explorer-control-dock {
  position: sticky;
  z-index: 12;
  top: 8px;
  margin: 0 -7px 8px;
  padding: 1px 7px 9px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  background: rgba(20, 29, 45, 0.97);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(6px);
}
.explorer-control-dock .explorer-controls {
  margin: 10px 0 8px;
}
.explorer-control-dock .explorer-timeline {
  margin: 10px 5px 2px;
}
.explorer-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.78fr);
  gap: 14px;
  align-items: start;
}
.explorer-shared-chart {
  max-width: none;
  margin: 0;
}
@media (max-width: 700px) {
  .explorer-control-dock {
    position: static;
    margin: 0;
    padding: 1px 0 8px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .explorer-visual-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .explorer-shared-chart {
    order: 2;
  }
}
@media (max-width: 360px) {
}
@media (min-width: 701px) {
  .intro p,
  .card-note,
  .explorer-heading p,
  .interpretation-disclaimer,
  .combined-reading,
  .interpretation-note,
  .interpretation-source,
  .phase-note,
  .explorer-note {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
.explorer-controls button[data-explorer-action="play24"] {
  border-color: var(--accent);
  color: #e8c77f;
}
.explorer-scale {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  align-items: start;
  margin-top: 2px;
  font-size: 8px;
}
.explorer-scale > span {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  white-space: nowrap;
}
.explorer-scale > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--line);
  transform: translateX(-50%);
}
.explorer-scale > span:first-child {
  align-items: flex-start;
}
.explorer-scale > span:first-child::before {
  left: 0;
  transform: none;
}
.explorer-scale > span:last-child {
  align-items: flex-end;
}
.explorer-scale > span:last-child::before {
  right: 0;
  left: auto;
  transform: none;
}
.explorer-scale b {
  font: inherit;
}
.explorer-scale-centre b {
  color: #e8c77f;
  font-weight: 800;
}
.explorer-input-time {
  margin-top: 2px;
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 430px) {
  .explorer-scale {
    font-size: 7px;
  }
  .explorer-scale-centre b {
    font-size: 7px;
  }
  .explorer-input-time {
    font-size: 8px;
  }
}
.natal-workspace-controls {
  display: flex;
  justify-content: flex-end;
  margin: -10px 0 10px;
}
.workspace.form-hidden {
  grid-template-columns: 1fr;
}
.workspace.form-hidden #resultsCard {
  grid-column: 1/-1;
}
.natal-workspace-controls .secondary-button {
  min-width: 126px;
}
@media (max-width: 800px) {
  .natal-workspace-controls {
    margin: -8px 0 10px;
  }
}
.explorer-controls button[data-explorer-action="fullscreen"] {
  margin-left: auto;
  border-color: var(--accent);
  color: #e8c77f;
}
.natal-viewer-fullscreen {
  overflow: hidden;
}
.birth-time-explorer.explorer-fullscreen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.birth-time-explorer.explorer-fullscreen:fullscreen,
.birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
  background: var(--bg);
}
.explorer-fullscreen .explorer-heading,
.explorer-fullscreen .explorer-note {
  display: none;
}
.explorer-fullscreen .explorer-event-legend {
  display: flex;
  margin: 4px 4px 6px;
}
.explorer-fullscreen .explorer-control-dock {
  position: static;
  z-index: 2;
  margin: 0 0 8px;
  padding: 0 4px 8px;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}
.explorer-fullscreen .explorer-control-dock .explorer-controls {
  margin: 0 0 7px;
}
.explorer-fullscreen .explorer-control-dock .explorer-timeline {
  margin: 8px 5px 1px;
}
.explorer-fullscreen .explorer-visual-grid {
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
  gap: 10px;
  align-items: stretch;
  overflow: hidden;
}
.explorer-fullscreen .explorer-shared-chart,
.explorer-fullscreen .natal-chart-wrap,
.explorer-fullscreen .explorer-chart-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.explorer-fullscreen .natal-chart-wrap {
  display: block;
}
.explorer-fullscreen .explorer-chart-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.explorer-fullscreen .natal-chart {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.explorer-fullscreen .aspect-legend {
  display: none;
}
.explorer-fullscreen .explorer-centre-button {
  width: 58px;
  height: 58px;
  font-size: 23px;
}
@media (max-width: 700px) {
  .explorer-controls button[data-explorer-action="fullscreen"] {
    margin-left: 0;
  }
  .birth-time-explorer.explorer-fullscreen {
    padding: 6px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .explorer-fullscreen .explorer-control-dock {
    padding-bottom: 5px;
  }
  .explorer-fullscreen .explorer-control-dock .explorer-controls {
    gap: 4px;
    margin-bottom: 5px;
  }
  .explorer-fullscreen .explorer-controls button,
  .explorer-fullscreen .explorer-controls select,
  .explorer-fullscreen .explorer-start-time-input {
    height: 30px;
  }
  .explorer-fullscreen .explorer-time-row {
    display: flex;
    padding: 5px 7px;
  }
  .explorer-fullscreen .explorer-time-row span {
    text-align: right;
  }
  .explorer-fullscreen .explorer-control-dock .explorer-timeline {
    margin-top: 6px;
  }
  .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px;
  }
  .explorer-fullscreen .explorer-shared-chart {
    min-height: 0;
    height: 100%;
    order: 2;
  }
}
@media (max-height: 620px) and (min-width: 701px) {
  .explorer-fullscreen .explorer-control-dock .explorer-controls {
    margin-bottom: 4px;
  }
  .explorer-fullscreen .explorer-time-row {
    padding: 5px 8px;
  }
  .explorer-fullscreen .explorer-control-dock .explorer-timeline {
    margin-top: 5px;
  }
}
.explorer-centre-button span {
  transform: translate(2px, -2px);
}
.explorer-centre-button.is-playing span {
  transform: translateY(-2px);
}
@media (hover: none) and (pointer: coarse) {
  .explorer-centre-button span {
    transform: translate(1px, -1px);
  }
  .explorer-centre-button.is-playing span {
    transform: translateY(-1px);
  }
}
@media (max-width: 700px) {
}

/* Personal forecast */
.forecast-panel {
  margin-top: 18px;
}
.forecast-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.forecast-heading h3 {
  margin-bottom: 4px;
}
.forecast-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.forecast-status {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
.forecast-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 12px 0;
}
.forecast-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.forecast-controls input,
.forecast-controls select {
  height: 34px;
  box-sizing: border-box;
}
.forecast-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.forecast-summary > div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.forecast-summary b {
  color: #e8c77f;
}
.forecast-summary span {
  color: var(--muted);
  font-size: 9px;
}
.forecast-timeline {
  margin: 14px 3px;
}
.forecast-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--panel-2);
}
.forecast-markers {
  position: absolute;
  inset: 0 6px;
}
.forecast-marker {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 14px;
  margin: -7px 0 0 -3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}
.forecast-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.forecast-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.supportive-strong {
  background: #66c28a;
}
.supportive {
  background: #8fcda5;
}
.mixed {
  background: #aeb8c8;
}
.challenging {
  background: #e38a68;
}
.challenging-strong {
  background: #ef7777;
}
.forecast-detail {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(17, 24, 39, 0.55);
}
.forecast-detail h4 {
  margin: 0 0 8px;
  color: #e8c77f;
}
.forecast-detail p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 9px;
}
.forecast-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.forecast-detail-grid span {
  display: grid;
  gap: 2px;
  font-size: 10px;
}
.forecast-detail-grid b {
  color: var(--muted);
  font-size: 9px;
}
.forecast-events {
  display: grid;
  gap: 6px;
  max-height: 440px;
  overflow: auto;
}
.forecast-event {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #aeb8c8;
  border-radius: 8px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forecast-event.supportive-strong {
  border-left-color: #66c28a;
}
.forecast-event.supportive {
  border-left-color: #8fcda5;
}
.forecast-event.challenging {
  border-left-color: #e38a68;
}
.forecast-event.challenging-strong {
  border-left-color: #ef7777;
}
.forecast-event.is-selected {
  border-color: #e8c77f;
}
.forecast-event-glyph {
  align-self: center;
  color: #e8c77f;
  font-size: 19px;
}
.forecast-event b,
.forecast-event small {
  display: block;
}
.forecast-event small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
@media (max-width: 700px) {
  .forecast-heading {
    display: grid;
  }
  .forecast-status {
    text-align: left;
  }
  .forecast-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .forecast-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
  .forecast-event {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}

/* Natal live wheel line legend */
.explorer-shared-chart > .aspect-legend {
  display: none;
}
.explorer-wheel-legend {
  margin: 6px 4px 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.48);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.explorer-wheel-legend-title {
  margin-bottom: 6px;
  color: #e8c77f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.explorer-wheel-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.explorer-wheel-legend-items span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.explorer-wheel-legend-items b {
  color: var(--text);
  font-size: 9px;
}
.wheel-line {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 2px solid;
  flex: none;
}
.wheel-line.conjunction {
  border-color: #d5ad5c;
}
.wheel-line.opposition {
  border-color: #ef7777;
}
.wheel-line.trine {
  border-color: #66c28a;
}
.wheel-line.square {
  border-color: #e38a68;
  border-top-style: dashed;
}
.wheel-line.sextile {
  border-color: #6ca8df;
  border-top-style: dotted;
}
.wheel-line.ac-axis {
  border-color: #f3f4f6;
  border-top-width: 3px;
}
.wheel-line.mc-axis {
  border-color: #d5ad5c;
  border-top-width: 3px;
}
.wheel-line.house-line {
  border-color: #8290a8;
}
.explorer-wheel-legend-note {
  margin-top: 6px;
  color: var(--muted);
}
.explorer-fullscreen .explorer-shared-chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.explorer-fullscreen .explorer-shared-chart > .natal-chart-wrap {
  min-height: 0;
  height: auto;
}
.explorer-fullscreen .explorer-shared-chart .explorer-chart-stage {
  height: 100%;
}
.explorer-fullscreen .explorer-wheel-legend {
  margin: 3px 4px 0;
  padding: 6px 8px;
}
.explorer-fullscreen .explorer-wheel-legend-title {
  margin-bottom: 4px;
}
.explorer-fullscreen .explorer-wheel-legend-note {
  margin-top: 4px;
}
@media (max-width: 700px) {
  .explorer-wheel-legend-items {
    gap: 5px 9px;
  }
  .explorer-wheel-legend {
    padding: 7px 8px;
  }
  .explorer-fullscreen .explorer-wheel-legend-note {
    display: none;
  }
}

/* Forecast / historic analysis */
.forecast-mode-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0 2px;
}
.forecast-mode-tabs .is-active {
  border-color: var(--accent);
  color: #e8c77f;
  background: rgba(232, 199, 127, 0.08);
}
.forecast-history-tools {
  margin: 8px 0 12px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.35);
}
.forecast-life-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.forecast-life-entry label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.forecast-life-entry input {
  height: 34px;
  box-sizing: border-box;
}
.forecast-life-label {
  min-width: 250px;
}
.forecast-life-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.forecast-life-list > span:not(.phase-note) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
}
.forecast-life-list button {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.forecast-marker.life,
.forecast-legend i.life {
  background: #e8c77f;
}
.forecast-life-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 18px;
  margin: -9px 0 0 -5px;
  padding: 0;
  border: 2px solid #111827;
  border-radius: 50%;
  background: #e8c77f;
  cursor: pointer;
  z-index: 3;
}
.forecast-section-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
  margin: 12px 0 6px;
}
.forecast-section-title h4 {
  margin: 0;
  color: #e8c77f;
  font-size: 11px;
}
.forecast-section-title span {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}
.forecast-window-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.forecast-window {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #aeb8c8;
  border-radius: 8px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forecast-window.supportive-strong {
  border-left-color: #66c28a;
}
.forecast-window.supportive {
  border-left-color: #8fcda5;
}
.forecast-window.challenging {
  border-left-color: #e38a68;
}
.forecast-window.challenging-strong {
  border-left-color: #ef7777;
}
.forecast-window b {
  font-size: 10px;
}
.forecast-window span {
  color: var(--muted);
  font-size: 9px;
}
.forecast-syncrota-context {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 9px;
}
.forecast-syncrota-context > b {
  color: #e8c77f;
}
.forecast-syncrota-context span {
  color: var(--muted);
}
@media (max-width: 700px) {
  .forecast-window-list {
    grid-template-columns: 1fr;
  }
  .forecast-section-title {
    display: grid;
  }
  .forecast-section-title span {
    text-align: left;
  }
  .forecast-life-entry {
    display: grid;
  }
  .forecast-life-label {
    min-width: 0;
    width: 100%;
  }
}

.forecast-priority-list {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}
.forecast-priority {
  display: grid;
  grid-template-columns: auto 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid #aeb8c8;
  border-radius: 9px;
  background: rgba(232, 199, 127, 0.045);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forecast-priority.supportive-strong {
  border-left-color: #66c28a;
}
.forecast-priority.supportive {
  border-left-color: #8fcda5;
}
.forecast-priority.challenging {
  border-left-color: #e38a68;
}
.forecast-priority.challenging-strong {
  border-left-color: #ef7777;
}
.forecast-priority-rank {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #e8c77f;
  font-size: 8px;
  white-space: nowrap;
}
.forecast-priority b,
.forecast-priority small {
  display: block;
}
.forecast-priority small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.forecast-all-events {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(17, 24, 39, 0.28);
}
.forecast-all-events > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  color: #e8c77f;
  font-size: 10px;
}
.forecast-all-events > summary small {
  color: var(--muted);
  font-size: 9px;
}
.forecast-all-events .forecast-section-title,
.forecast-all-events .forecast-events {
  margin-left: 10px;
  margin-right: 10px;
}
.forecast-all-events .forecast-events {
  margin-bottom: 10px;
}
.forecast-month-group {
  display: grid;
  gap: 6px;
}
.forecast-month-group h5 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 6px 0 0;
  padding: 5px 2px;
  background: var(--panel);
  color: #e8c77f;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 700px) {
  .forecast-priority {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .forecast-priority-rank {
    grid-column: 1/-1;
    justify-self: start;
  }
}

/* Top-level Natal sections */
.natal-analysis-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
  padding: 8px 0;
  background: var(--panel);
}
.natal-analysis-tabs .is-active {
  border-color: var(--accent);
  color: #e8c77f;
  background: rgba(232, 199, 127, 0.08);
}
#forecastMount[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .natal-analysis-tabs {
    top: 0;
    overflow-x: auto;
  }
  .natal-analysis-tabs button {
    flex: 0 0 auto;
  }
}

/* Calculation audit + ephemeris validation */
.calculation-audit,
.ephemeris-validation {
  margin-top: 18px;
}
.audit-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.audit-heading h3 {
  margin-bottom: 4px;
}
.audit-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.audit-badge {
  flex: none;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #e8c77f;
  font-size: 9px;
  font-weight: 800;
}
.audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 11px 0;
}
.audit-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.audit-grid b {
  color: var(--muted);
  font-size: 9px;
}
.audit-grid span {
  font-size: 10px;
  line-height: 1.4;
}
.ephemeris-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 12px 0;
}
.ephemeris-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.ephemeris-controls input,
.ephemeris-controls select {
  height: 34px;
  box-sizing: border-box;
}
.ephemeris-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 9px;
}
.ephemeris-meta b {
  color: var(--text);
}
.ephemeris-table-wrap {
  overflow-x: auto;
}
.ephemeris-reference {
  width: 110px;
  max-width: 100%;
  height: 30px;
  box-sizing: border-box;
}
.ephemeris-diff {
  font-weight: 800;
}
.ephemeris-diff.is-good {
  color: #66c28a;
}
.ephemeris-diff.is-close {
  color: #e8c77f;
}
.ephemeris-diff.is-wide {
  color: #ef7777;
}
@media (max-width: 800px) {
  .audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .audit-heading {
    display: grid;
  }
  .audit-grid {
    grid-template-columns: 1fr;
  }
  .ephemeris-controls {
    display: grid;
  }
  .ephemeris-controls > * {
    width: 100%;
  }
  .ephemeris-reference {
    width: 96px;
  }
}

/* Automatic historical time-zone resolution */
.timezone-resolution {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(20, 29, 45, 0.45);
  line-height: 1.45;
}
.timezone-advanced {
  margin-top: 8px;
}
.timezone-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.timezone-override-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.timezone-override-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  flex: 1;
}
.timezone-override-toggle input {
  width: auto;
}
.timezone-override-row select {
  min-width: 145px;
}
.field-help {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .timezone-override-row {
    align-items: stretch;
    flex-direction: column;
  }
  .timezone-override-row select {
    width: 100%;
  }
}

/* Unified Syncrota/Natal application chrome */
:root {
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
  --bg: #f5f6f8;
  --panel: #fff;
  --panel-2: #f8fafc;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #d1d5db;
  --accent: #c6a86b;
  --field: #fff;
  --error: #b91c1c;
}
html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}
body {
  background: var(--bg);
  min-height: 100vh;
}
header {
  min-height: 0;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  box-shadow: none;
}
.site-brand-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.site-brand-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-transform: none;
  letter-spacing: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.page-link,
.secondary-button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 10px;
}
.page-link {
  border-color: #d1d5db;
}
.primary-button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 10px;
}
main {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 42px;
}
.intro {
  max-width: 900px;
  margin-bottom: 16px;
}
.intro h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
}
.intro p {
  line-height: 1.5;
}
.workspace {
  gap: 16px;
}
.card {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 10px;
  padding: 16px;
  box-shadow: none;
}
.card h2 {
  font-size: 16px;
}
.birth-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.birth-card-heading h2 {
  margin: 0;
}
.birth-form-toggle-inline {
  flex: none;
}
.birth-form-toggle-floating {
  grid-column: 1/-1;
  justify-self: end;
  margin: 0 0 -4px;
}
.workspace.form-hidden #resultsCard {
  grid-column: 1;
}
input:not([type="range"]),
select {
  background: var(--field);
  color: var(--text);
  border-color: var(--line);
}
label {
  color: var(--text);
}
.empty-state {
  min-height: 260px;
}
.timezone-resolution {
  background: var(--panel-2);
}
.result-section,
.birth-time-explorer,
.forecast-panel {
  border-color: var(--line);
}
.combined-reading,
.interpretation-note {
  background: var(--panel-2);
}

html[data-theme="dark"] {
  --bg: #0b0a09;
  --panel: #17140f;
  --panel-2: #211d16;
  --text: #eee8db;
  --muted: #a99f8f;
  --line: #3d3528;
  --accent: #c6a86b;
  --field: #11100e;
  --error: #fecaca;
  background: #0b0a09;
  color: #eee8db;
}
html[data-theme="dark"] body {
  background: #0b0a09;
  color: #eee8db;
}
html[data-theme="dark"] header {
  background: #0d0c0a;
  border-bottom-color: #3d3528;
  box-shadow: 0 1px 0 rgba(210, 176, 105, 0.09);
}
html[data-theme="dark"] .site-brand-title {
  color: #f1eadc;
}
html[data-theme="dark"] .site-brand-subtitle {
  color: #a99f8f;
}
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .secondary-button {
  background: #171411;
  border-color: #6e5f48;
  color: #e8dfcf;
}
html[data-theme="dark"] .primary-button {
  background: #c6a86b;
  border-color: #c6a86b;
  color: #17130d;
}
html[data-theme="dark"] .card {
  background: #17140f;
  border-color: #3d3528;
  color: #e9e2d5;
}
html[data-theme="dark"] label {
  color: #ddd4c5;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select {
  background: #11100e;
  color: #eee8db;
  border-color: #4d4232;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
  outline-color: rgba(198, 168, 107, 0.35);
  border-color: #c6a86b;
}
html[data-theme="dark"] .timezone-resolution,
html[data-theme="dark"] .combined-reading,
html[data-theme="dark"] .interpretation-note {
  background: #211d16;
}
html[data-theme="dark"] .result-section,
html[data-theme="dark"] .birth-time-explorer,
html[data-theme="dark"] .forecast-panel {
  border-color: #3d3528;
  background: #11100e;
}
html[data-theme="dark"] .audit-badge {
  border-color: #6e5f48;
  color: #c6a86b;
}
html[data-theme="dark"] .natal-analysis-tabs {
  background: #17140f;
}
html[data-theme="dark"] .natal-analysis-tabs .is-active {
  border-color: #c6a86b;
  color: #e8c77f;
  background: rgba(198, 168, 107, 0.08);
}
html[data-theme="dark"]
  .explorer-controls
  button[data-explorer-action="play24"] {
  border-color: #c6a86b;
  color: #e8c77f;
}

@media (max-width: 900px) {
  header {
    padding: 12px 14px;
  }
  .site-brand-subtitle {
    display: none;
  }
  main {
    width: min(100% - 20px, 1180px);
    margin-top: 16px;
  }
}

/* Natal layout isolation.
   syncrota.css is shared for application chrome/theme only; its wheel-page
   viewport/grid rules must never control the natal-chart document. */
html body {
  display: block;
  width: auto;
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
html body > main {
  display: block;
  width: min(1180px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  margin: 22px auto 42px;
  overflow: visible;
  transition: none;
}
html body > main .workspace {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  width: 100%;
  height: auto;
  min-height: 0;
  gap: 16px;
  align-items: start;
  overflow: visible;
}
html body > main .workspace > .card {
  width: auto;
  min-width: 0;
  height: auto;
  overflow: visible;
}
html body > main .workspace.form-hidden {
  grid-template-columns: 1fr;
}

@media (min-width: 901px) and (max-width: 1366px) {
  html body {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  html body > main {
    display: block;
    flex: none;
    width: min(1180px, calc(100% - 32px));
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

@media (max-width: 900px) {
  html body {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html body > main {
    display: block;
    width: min(100% - 20px, 1180px);
    height: auto;
    min-height: 0;
    margin: 16px auto 30px;
    overflow: visible;
  }
  html body > main .workspace {
    grid-template-columns: 1fr;
  }
}

/* Light-theme treatment for the Natal 24-hour explorer.
   The wheel itself deliberately remains a dark astronomy canvas for contrast;
   the surrounding explorer chrome follows the Syncrota light theme. */
html[data-theme="light"] .birth-time-explorer,
html:not([data-theme="dark"]) .birth-time-explorer {
  background: #fff;
  border-color: #d1d5db;
  color: #1f2937;
}
html[data-theme="light"] .explorer-heading h3,
html:not([data-theme="dark"]) .explorer-heading h3 {
  color: #1f2937;
}
html[data-theme="light"] .explorer-heading p,
html[data-theme="light"] .explorer-scan-status,
html[data-theme="light"] .explorer-event-legend,
html[data-theme="light"] .explorer-scale,
html[data-theme="light"] .explorer-note,
html:not([data-theme="dark"]) .explorer-heading p,
html:not([data-theme="dark"]) .explorer-scan-status,
html:not([data-theme="dark"]) .explorer-event-legend,
html:not([data-theme="dark"]) .explorer-scale,
html:not([data-theme="dark"]) .explorer-note {
  color: #6b7280;
}
html[data-theme="light"] .explorer-control-dock,
html:not([data-theme="dark"]) .explorer-control-dock {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: #d1d5db;
  box-shadow: 0 7px 14px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .explorer-controls button,
html[data-theme="light"] .explorer-controls select,
html[data-theme="light"] .explorer-start-time-input,
html:not([data-theme="dark"]) .explorer-controls button,
html:not([data-theme="dark"]) .explorer-controls select,
html:not([data-theme="dark"]) .explorer-start-time-input {
  background: #f8fafc;
  border-color: #cfd4dc;
  color: #1f2937;
}
html[data-theme="light"] .explorer-start-time-input,
html:not([data-theme="dark"]) .explorer-start-time-input {
  color-scheme: light;
}
html[data-theme="light"] .explorer-time-row,
html:not([data-theme="dark"]) .explorer-time-row {
  background: #f8fafc;
  color: #1f2937;
}
html[data-theme="light"] .explorer-time-row span,
html:not([data-theme="dark"]) .explorer-time-row span {
  color: #6b7280;
}

html[data-theme="light"] .explorer-bootstrap,
html:not([data-theme="dark"]) .explorer-bootstrap {
  background: #fff;
  border-color: #d1d5db;
  color: #1f2937;
}

/* Keep the actual wheel as a deliberate dark canvas in both themes. */
html[data-theme="light"] .explorer-chart-stage,
html:not([data-theme="dark"]) .explorer-chart-stage {
  border-radius: 12px;
}

/* Light-mode natal wheel and wheel-line legend */
html[data-theme="light"] .chart-bg,
html:not([data-theme="dark"]) .chart-bg {
  fill: #fbfaf6;
  stroke: #b9aa8d;
}
html[data-theme="light"] .chart-ring,
html:not([data-theme="dark"]) .chart-ring {
  stroke: #a9b0bb;
}
html[data-theme="light"] .chart-radial,
html:not([data-theme="dark"]) .chart-radial {
  stroke: #b8bec7;
}
html[data-theme="light"] .house-radial,
html:not([data-theme="dark"]) .house-radial {
  stroke: #8d97a5;
}
html[data-theme="light"] .sign-fire,
html:not([data-theme="dark"]) .sign-fire {
  fill: #ead6d3;
}
html[data-theme="light"] .sign-earth,
html:not([data-theme="dark"]) .sign-earth {
  fill: #d8e4d8;
}
html[data-theme="light"] .sign-air,
html:not([data-theme="dark"]) .sign-air {
  fill: #dbe3ee;
}
html[data-theme="light"] .sign-water,
html:not([data-theme="dark"]) .sign-water {
  fill: #d6e3ec;
}
html[data-theme="light"] .zodiac-sector,
html:not([data-theme="dark"]) .zodiac-sector {
  stroke: #aab2bd;
}
html[data-theme="light"] .chart-sign,
html:not([data-theme="dark"]) .chart-sign {
  fill: #253244;
}
html[data-theme="light"] .chart-house,
html:not([data-theme="dark"]) .chart-house {
  fill: #334155;
}
html[data-theme="light"] .chart-planet,
html:not([data-theme="dark"]) .chart-planet {
  fill: #172033;
}
html[data-theme="light"] .chart-angle,
html:not([data-theme="dark"]) .chart-angle {
  fill: #334155;
}
html[data-theme="light"] .chart-angle-mc,
html:not([data-theme="dark"]) .chart-angle-mc {
  fill: #a77921;
}
html[data-theme="light"] .axis-ac,
html:not([data-theme="dark"]) .axis-ac {
  stroke: #334155;
}
html[data-theme="light"] .axis-mc,
html:not([data-theme="dark"]) .axis-mc {
  stroke: #c59434;
}
html[data-theme="light"] .chart-planet-dot,
html:not([data-theme="dark"]) .chart-planet-dot {
  fill: #c59434;
}

/* Make the central play control belong to the light chart rather than a dark overlay. */
html[data-theme="light"] .explorer-centre-button,
html:not([data-theme="dark"]) .explorer-centre-button {
  background: #fffdf8;
  color: #a77921;
  border-color: #c59434;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .explorer-centre-button:hover,
html[data-theme="light"] .explorer-centre-button:focus-visible,
html[data-theme="light"] .explorer-centre-button.is-playing,
html:not([data-theme="dark"]) .explorer-centre-button:hover,
html:not([data-theme="dark"]) .explorer-centre-button:focus-visible,
html:not([data-theme="dark"]) .explorer-centre-button.is-playing {
  background: #f4ead3;
}

/* Wheel line legend should read as a normal light card, not a grey strip. */
html[data-theme="light"] .explorer-wheel-legend,
html:not([data-theme="dark"]) .explorer-wheel-legend {
  background: #fff;
  border-color: #d1d5db;
  color: #6b7280;
}
html[data-theme="light"] .explorer-wheel-legend-title,
html:not([data-theme="dark"]) .explorer-wheel-legend-title {
  color: #9a762f;
}
html[data-theme="light"] .explorer-wheel-legend-items b,
html:not([data-theme="dark"]) .explorer-wheel-legend-items b {
  color: #1f2937;
}
html[data-theme="light"] .wheel-line.ac-axis,
html:not([data-theme="dark"]) .wheel-line.ac-axis {
  border-color: #334155;
}
html[data-theme="light"] .wheel-line.house-line,
html:not([data-theme="dark"]) .wheel-line.house-line {
  border-color: #8d97a5;
}
html[data-theme="light"] .explorer-wheel-legend-note,
html:not([data-theme="dark"]) .explorer-wheel-legend-note {
  color: #6b7280;
}

/* Light-mode planet/body badges */
html[data-theme="light"] .planet-symbol,
html:not([data-theme="dark"]) .planet-symbol {
  background: #eef1f5;
  color: #1f2937;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}
html[data-theme="light"] .interpretation-symbol,
html:not([data-theme="dark"]) .interpretation-symbol {
  background: #eef1f5;
  color: #1f2937;
  border: 1px solid #cbd5e1;
}

/* Light-mode interpretation section */
html[data-theme="light"] .interpretation-disclaimer,
html:not([data-theme="dark"]) .interpretation-disclaimer {
  background: #f8fafc;
  border-color: #d1d5db;
  color: #6b7280;
}

html[data-theme="light"] .interpretation-card,
html:not([data-theme="dark"]) .interpretation-card {
  background: #fff;
  border-color: #d1d5db;
  color: #1f2937;
}

html[data-theme="light"] .interpretation-card summary,
html:not([data-theme="dark"]) .interpretation-card summary {
  background: #fff;
  color: #1f2937;
}

html[data-theme="light"] .interpretation-card summary small,
html:not([data-theme="dark"]) .interpretation-card summary small {
  color: #6b7280;
}

html[data-theme="light"] .interpretation-chevron,
html:not([data-theme="dark"]) .interpretation-chevron {
  color: #6b7280;
}

html[data-theme="light"] .interpretation-body,
html:not([data-theme="dark"]) .interpretation-body {
  background: #fff;
  border-top-color: #e5e7eb;
  color: #1f2937;
}

html[data-theme="light"] .interpretation-overview > div,
html[data-theme="light"] .interpretation-factors > div,
html:not([data-theme="dark"]) .interpretation-overview > div,
html:not([data-theme="dark"]) .interpretation-factors > div {
  background: #f8fafc;
  border-color: #d1d5db;
}

html[data-theme="light"] .interpretation-overview b,
html[data-theme="light"] .interpretation-factors b,
html:not([data-theme="dark"]) .interpretation-overview b,
html:not([data-theme="dark"]) .interpretation-factors b {
  color: #9a762f;
}

html[data-theme="light"] .combined-reading,
html[data-theme="light"] .interpretation-note,
html:not([data-theme="dark"]) .combined-reading,
html:not([data-theme="dark"]) .interpretation-note {
  background: #f8fafc;
  color: #1f2937;
}

/* High-contrast Light mode.
   Keep the light visual language, but use stronger text and line contrast for readability. */
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --text: #172033;
  --muted: #4b5563;
  --line: #b8c0ca;
}

/* General Natal copy */
html[data-theme="light"] body,
html:not([data-theme="dark"]) body {
  color: #172033;
}
html[data-theme="light"] .intro p,
html[data-theme="light"] .card-note,
html[data-theme="light"] .result-summary,
html[data-theme="light"] .phase-note,
html[data-theme="light"] .field-help,
html[data-theme="light"] .interpretation-heading p,
html[data-theme="light"] .interpretation-disclaimer,
html[data-theme="light"] .interpretation-source,
html[data-theme="light"] .interpretation-muted,
html[data-theme="light"] .explorer-heading p,
html[data-theme="light"] .explorer-scan-status,
html[data-theme="light"] .explorer-note,
html[data-theme="light"] .explorer-event-legend,
html[data-theme="light"] .explorer-scale,
html[data-theme="light"] .explorer-wheel-legend,
html[data-theme="light"] .explorer-wheel-legend-note,
html:not([data-theme="dark"]) .intro p,
html:not([data-theme="dark"]) .card-note,
html:not([data-theme="dark"]) .result-summary,
html:not([data-theme="dark"]) .phase-note,
html:not([data-theme="dark"]) .field-help,
html:not([data-theme="dark"]) .interpretation-heading p,
html:not([data-theme="dark"]) .interpretation-disclaimer,
html:not([data-theme="dark"]) .interpretation-source,
html:not([data-theme="dark"]) .interpretation-muted,
html:not([data-theme="dark"]) .explorer-heading p,
html:not([data-theme="dark"]) .explorer-scan-status,
html:not([data-theme="dark"]) .explorer-note,
html:not([data-theme="dark"]) .explorer-event-legend,
html:not([data-theme="dark"]) .explorer-scale,
html:not([data-theme="dark"]) .explorer-wheel-legend,
html:not([data-theme="dark"]) .explorer-wheel-legend-note {
  color: #4b5563;
}

/* Table and compact labels */
html[data-theme="light"] .planet-table th,
html[data-theme="light"] .angle-label,
html[data-theme="light"] .explorer-time-row span,
html[data-theme="light"] .interpretation-card summary small,
html:not([data-theme="dark"]) .planet-table th,
html:not([data-theme="dark"]) .angle-label,
html:not([data-theme="dark"]) .explorer-time-row span,
html:not([data-theme="dark"]) .interpretation-card summary small {
  color: #475569;
}

/* Wheel geometry: darker and a touch heavier on a light canvas */
html[data-theme="light"] .chart-bg,
html:not([data-theme="dark"]) .chart-bg {
  stroke: #8f99a7;
  stroke-width: 2.2;
}
html[data-theme="light"] .chart-ring,
html:not([data-theme="dark"]) .chart-ring {
  stroke: #8793a3;
  stroke-width: 1.35;
}
html[data-theme="light"] .chart-radial,
html:not([data-theme="dark"]) .chart-radial {
  stroke: #8e99a8;
  stroke-width: 1.15;
}
html[data-theme="light"] .house-radial,
html:not([data-theme="dark"]) .house-radial {
  stroke: #64748b;
  stroke-width: 1.45;
}
html[data-theme="light"] .zodiac-sector,
html:not([data-theme="dark"]) .zodiac-sector {
  stroke: #8f99a7;
  stroke-width: 1.15;
}
html[data-theme="light"] .chart-sign,
html:not([data-theme="dark"]) .chart-sign {
  fill: #172033;
}
html[data-theme="light"] .chart-house,
html:not([data-theme="dark"]) .chart-house {
  fill: #1f2937;
}
html[data-theme="light"] .chart-angle,
html:not([data-theme="dark"]) .chart-angle {
  fill: #1f2937;
}

/* Axes */
html[data-theme="light"] .axis-ac,
html:not([data-theme="dark"]) .axis-ac {
  stroke: #26364a;
  stroke-width: 3.2;
}
html[data-theme="light"] .axis-mc,
html:not([data-theme="dark"]) .axis-mc {
  stroke: #b7791f;
  stroke-width: 2.8;
}

/* Aspect lines: retain semantic colours but increase visibility on white */
html[data-theme="light"] .aspect-line,
html:not([data-theme="dark"]) .aspect-line {
  stroke-width: 2.1;
  opacity: 1;
}
html[data-theme="light"] .aspect-conjunction,
html:not([data-theme="dark"]) .aspect-conjunction {
  stroke: #b7791f;
}
html[data-theme="light"] .aspect-opposition,
html:not([data-theme="dark"]) .aspect-opposition {
  stroke: #dc2626;
}
html[data-theme="light"] .aspect-trine,
html:not([data-theme="dark"]) .aspect-trine {
  stroke: #16a34a;
}
html[data-theme="light"] .aspect-square,
html:not([data-theme="dark"]) .aspect-square {
  stroke: #ea580c;
}
html[data-theme="light"] .aspect-sextile,
html:not([data-theme="dark"]) .aspect-sextile {
  stroke: #2563eb;
}

/* Aspect legend beneath the wheel */
html[data-theme="light"] .aspect-legend,
html:not([data-theme="dark"]) .aspect-legend {
  color: #374151;
}
html[data-theme="light"] .aspect-swatch,
html:not([data-theme="dark"]) .aspect-swatch {
  border-top-width: 2.5px;
}
html[data-theme="light"] .aspect-swatch.conjunction,
html:not([data-theme="dark"]) .aspect-swatch.conjunction {
  border-color: #b7791f;
}
html[data-theme="light"] .aspect-swatch.opposition,
html:not([data-theme="dark"]) .aspect-swatch.opposition {
  border-color: #dc2626;
}
html[data-theme="light"] .aspect-swatch.trine,
html:not([data-theme="dark"]) .aspect-swatch.trine {
  border-color: #16a34a;
}
html[data-theme="light"] .aspect-swatch.square,
html:not([data-theme="dark"]) .aspect-swatch.square {
  border-color: #ea580c;
}
html[data-theme="light"] .aspect-swatch.sextile,
html:not([data-theme="dark"]) .aspect-swatch.sextile {
  border-color: #2563eb;
}

/* Wheel-lines legend */
html[data-theme="light"] .explorer-wheel-legend-items span,
html:not([data-theme="dark"]) .explorer-wheel-legend-items span {
  color: #374151;
}
html[data-theme="light"] .explorer-wheel-legend-items b,
html:not([data-theme="dark"]) .explorer-wheel-legend-items b {
  color: #172033;
}
html[data-theme="light"] .wheel-line,
html:not([data-theme="dark"]) .wheel-line {
  border-top-width: 2.5px;
}
html[data-theme="light"] .wheel-line.conjunction,
html:not([data-theme="dark"]) .wheel-line.conjunction {
  border-color: #b7791f;
}
html[data-theme="light"] .wheel-line.opposition,
html:not([data-theme="dark"]) .wheel-line.opposition {
  border-color: #dc2626;
}
html[data-theme="light"] .wheel-line.trine,
html:not([data-theme="dark"]) .wheel-line.trine {
  border-color: #16a34a;
}
html[data-theme="light"] .wheel-line.square,
html:not([data-theme="dark"]) .wheel-line.square {
  border-color: #ea580c;
}
html[data-theme="light"] .wheel-line.sextile,
html:not([data-theme="dark"]) .wheel-line.sextile {
  border-color: #2563eb;
}
html[data-theme="light"] .wheel-line.ac-axis,
html:not([data-theme="dark"]) .wheel-line.ac-axis {
  border-color: #26364a;
  border-top-width: 3px;
}
html[data-theme="light"] .wheel-line.mc-axis,
html:not([data-theme="dark"]) .wheel-line.mc-axis {
  border-color: #b7791f;
  border-top-width: 3px;
}
html[data-theme="light"] .wheel-line.house-line,
html:not([data-theme="dark"]) .wheel-line.house-line {
  border-color: #64748b;
  border-top-width: 2px;
}

/* Timeline itself also benefits from stronger neutral guides */
html[data-theme="light"] .explorer-scale > span::before,
html:not([data-theme="dark"]) .explorer-scale > span::before {
  background: #94a3b8;
}

/* -------------------------------------------------------------------------
   Portrait-phone refinement
   Keep tablet/landscape/desktop layouts unchanged.
   ------------------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* The workspace tabs should remain part of the document flow on a narrow
    phone. Sticky tabs obscure tables/cards while the user scrolls. */
  .natal-analysis-tabs {
    position: static;
    top: auto;
    z-index: auto;
    gap: 6px;
    margin: 0 0 16px;
    padding: 4px 0;
    overflow-x: auto;
    background: transparent;
  }
  .natal-analysis-tabs button {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 11px;
  }

  /* 24-hour viewer controls: deliberate rows rather than browser-dependent
    flex wrapping. */
  .explorer-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }
  .explorer-controls .explorer-start-time {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .explorer-start-time-input {
    width: 100%;
    min-width: 0;
    height: 38px;
  }
  .explorer-controls button,
  .explorer-controls select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 6px;
    white-space: nowrap;
  }
  .explorer-controls button[data-explorer-action="back"] {
    grid-column: 1;
  }
  .explorer-controls button[data-explorer-action="play"] {
    grid-column: 2;
  }
  .explorer-controls button[data-explorer-action="pause"] {
    grid-column: 3;
  }
  .explorer-controls button[data-explorer-action="forward"] {
    grid-column: 4;
  }
  .explorer-controls button[data-explorer-action="centre"] {
    grid-column: 1/3;
  }
  .explorer-controls button[data-explorer-action="play24"] {
    grid-column: 3/5;
  }
  .explorer-controls label:not(.explorer-start-time) {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
  }
  .explorer-controls button[data-explorer-action="fullscreen"] {
    grid-column: 3/5;
    margin-left: 0;
  }
  .explorer-time-row {
    gap: 4px;
    padding: 8px 9px;
  }
  .explorer-time-row span {
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  /* Give the timeline a little more breathing room at the phone edge. */
  .explorer-timeline {
    margin-left: 2px;
    margin-right: 2px;
  }
  .explorer-scale {
    font-size: 7px;
  }
  .explorer-event-legend {
    gap: 5px 10px;
  }

  /* Live positions remain two columns but each planet becomes a clean
    two-line card so long position strings never fight the planet name. */

  /* Forecast/Historic date controls: two date columns, action full-width.
    This removes the iPhone overlap between the To field and Analyse button. */
  .forecast-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
  }
  .forecast-controls label {
    min-width: 0;
  }
  .forecast-controls input,
  .forecast-controls select {
    width: 100%;
    min-width: 0;
    height: 38px;
  }
  .forecast-controls .forecast-run {
    grid-column: 1/-1;
    width: 100%;
    min-height: 38px;
  }
  .forecast-forward-controls label:first-child {
    grid-column: 1;
  }
  .forecast-forward-controls label:nth-child(2) {
    grid-column: 2;
  }

  /* Known-event form is a straightforward vertical form on portrait. */
  .forecast-history-tools {
    padding: 10px;
  }
  .forecast-life-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .forecast-life-entry label,
  .forecast-life-entry input,
  .forecast-life-entry button {
    width: 100%;
    min-width: 0;
  }
  .forecast-life-entry input {
    height: 38px;
  }
  .forecast-life-label {
    min-width: 0;
  }
  .forecast-life-add {
    min-height: 38px;
  }

  /* Priority cards use the available width more efficiently. */
  .forecast-priority {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px 9px;
    align-items: start;
    padding: 10px 9px;
  }
  .forecast-priority-rank {
    grid-column: 1/-1;
    justify-self: start;
  }
  .forecast-priority .forecast-event-glyph {
    align-self: start;
    padding-top: 4px;
  }
  .forecast-priority small {
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  /* Long section text should wrap naturally instead of forcing width. */
  .forecast-heading p,
  .forecast-section-title span,
  .forecast-detail p,
  .forecast-window span,
  .forecast-all-events > summary,
  .phase-note {
    overflow-wrap: anywhere;
  }
  .forecast-all-events > summary {
    align-items: center;
  }
  .forecast-all-events > summary small {
    flex: none;
    white-space: nowrap;
  }

  /* Ephemeris controls stay comfortably within the viewport. */
  .ephemeris-controls {
    grid-template-columns: 1fr;
  }
  .ephemeris-controls label,
  .ephemeris-controls button,
  .ephemeris-controls input,
  .ephemeris-controls select {
    width: 100%;
    min-width: 0;
  }
  .ephemeris-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ephemeris-table-wrap .planet-table {
    min-width: 660px;
  }
}

/* Finish the Light-mode pass for forecast/historic elements that still used
   dark translucent fills. */
html[data-theme="light"] .forecast-history-tools,
html:not([data-theme="dark"]) .forecast-history-tools {
  background: #f8fafc;
  border-color: #b8c0ca;
}
html[data-theme="light"] .forecast-detail,
html:not([data-theme="dark"]) .forecast-detail {
  background: #f8fafc;
  border-color: #b8c0ca;
  color: #172033;
}
html[data-theme="light"] .forecast-all-events,
html:not([data-theme="dark"]) .forecast-all-events {
  background: #f8fafc;
  border-color: #b8c0ca;
}
html[data-theme="light"] .forecast-all-events > summary,
html:not([data-theme="dark"]) .forecast-all-events > summary {
  background: #f8fafc;
  color: #9a762f;
}
html[data-theme="light"] .forecast-all-events > summary small,
html:not([data-theme="dark"]) .forecast-all-events > summary small {
  color: #4b5563;
}
html[data-theme="light"] .forecast-detail p,
html:not([data-theme="dark"]) .forecast-detail p {
  color: #4b5563;
}
html[data-theme="light"] .forecast-history-tools input,
html:not([data-theme="dark"]) .forecast-history-tools input {
  background: #fff;
  color: #172033;
}

/* Portrait phone: constrain native time inputs and align live planet rows. */
@media (max-width: 600px) and (orientation: portrait) {
  /* Native date/time controls can carry an intrinsic minimum width in iOS.
    Force the controls and their grid cells to shrink within the form. */
  .form-grid,
  .form-grid > .field,
  .form-grid > .field-wide {
    min-width: 0;
  }
  #birthTime,
  .explorer-start-time-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .form-grid > .field-wide {
    grid-column: 1/-1;
  }

  /* In Live Positions, keep both the Seven glyph and the planet name inside
    the same bordered top row. */
}

/* Portrait phone corrective pass v2 */
@media (max-width: 600px) and (orientation: portrait) {
  /* iOS native time controls keep a large intrinsic inline size.
    Give the birth-form pair fixed fractional tracks and explicitly cap
    the time control to its own grid cell. */
  .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
  }
  .form-grid > .field {
    min-width: 0;
    width: auto;
  }
  #birthDate,
  #birthTime {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
  }

  /* Viewer Centre time: reserve a fixed label column and force the native
    control into the remaining width. */
  .explorer-controls .explorer-start-time {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    width: auto;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    align-items: center;
    box-sizing: border-box;
  }
  .explorer-controls .explorer-start-time-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Live Positions: the outer item is only a two-row container. */

  /* The top row must contain BOTH Seven glyph + planet name. */

  /* Remove any nested name-box styling that separates the glyph. */

  /* Bottom row remains the bordered zodiac/position row. */
}

/* Portrait phone: compact birth Local time field and align Date/Time text. */
@media (max-width: 600px) and (orientation: portrait) {
  /* Give Date more room; Local time only needs space for HH:MM. */
  .form-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(118px, 0.75fr);
    column-gap: 8px;
  }

  #birthDate,
  #birthTime {
    height: 40px;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
    box-sizing: border-box;
  }

  /* Native iOS date/time controls can vertically position their inner text
    differently. Force both editable areas onto the same visual centre. */
  #birthDate::-webkit-date-and-time-value,
  #birthTime::-webkit-date-and-time-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 40px;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  #birthDate::-webkit-datetime-edit,
  #birthTime::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  /* Viewer Centre time also only needs a compact HH:MM box. */
  .explorer-controls .explorer-start-time {
    grid-template-columns: auto 132px;
    justify-content: start;
    width: 100%;
  }
  .explorer-controls .explorer-start-time-input {
    width: 132px;
    max-width: 132px;
    min-width: 132px;
    inline-size: 132px;
    height: 38px;
    line-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .explorer-controls .explorer-start-time-input::-webkit-date-and-time-value,
  .explorer-controls .explorer-start-time-input::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
  }
}

/* Phone + tablet birth-form time sizing.
   Keep the grid intact, but make Local time compact inside its own cell. */
@media (max-width: 1024px) {
  .birth-time-field {
    justify-self: end;
    width: 132px;
    max-width: 132px;
  }
  .birth-time-field #birthTime {
    display: block;
    width: 132px;
    max-width: 132px;
    min-width: 132px;
    inline-size: 132px;
    box-sizing: border-box;
  }
  .birth-date-field #birthDate {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Slightly tighter on phone portrait. */
@media (max-width: 600px) and (orientation: portrait) {
  .birth-time-field {
    width: 118px;
    max-width: 118px;
  }
  .birth-time-field #birthTime {
    width: 118px;
    max-width: 118px;
    min-width: 118px;
    inline-size: 118px;
  }
}

/* Use the same Live Positions two-row treatment on tablets as phones. */
@media (max-width: 1024px) {
}

/* -------------------------------------------------------------------------
   Form field + Live Positions authoritative cleanup
   ------------------------------------------------------------------------- */

/* Date/Time should match Latitude/Longitude: equal-width columns. */
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid > .field {
  min-width: 0;
  width: auto;
}
.form-grid > .field-wide {
  grid-column: 1/-1;
}

/* All native form controls must respect their grid cell. */
#birthDate,
#birthTime,
#latitude,
#longitude {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

/* iOS Safari gives type=time a stubborn intrinsic width. Removing its
   visual intrinsic appearance lets it size exactly like the other inputs,
   while it remains a native type=time control and opens the time picker. */
@supports (-webkit-touch-callout: none) {
  #birthTime {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Undo earlier compact birth-time overrides on phone/tablet. */
@media (max-width: 1024px) {
  .birth-date-field,
  .birth-time-field {
    justify-self: stretch;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .birth-time-field #birthTime {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  .birth-time-field {
    width: auto;
    max-width: none;
  }
  .birth-time-field #birthTime {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
  }
}

/* Live Positions: one consistent two-row card on every device/mode.
   Row 1 = Seven symbol + planet name, Row 2 = zodiac position + house. */

/* Light theme rows */

/* Dark theme rows */

/* Keep the two-column Live Positions layout where the existing responsive
   layout asks for it; only the internals of each planet card are normalized. */

/* ================================================================
   Coordinated UX / responsive layout
   ================================================================ */

/* Syncrota Seven badges throughout Natal */
.natal-planet-badge {
  vertical-align: middle;
  flex: 0 0 24px;
}
.natal-planet-badge.is-compact {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  font-size: 17px;
}
.natal-body-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.natal-body-cell > span:last-child {
  min-width: 0;
}
.interpretation-symbol {
  background: transparent;
  border-radius: 0;
}
.interpretation-symbol .celestial-badge {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  font-size: 21px;
}
.forecast-event-glyph .celestial-badge,
.forecast-modal-title .celestial-badge {
  vertical-align: middle;
}

/* Major Live Viewer regions */
.natal-region {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  overflow: hidden;
}
.natal-region-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 0;
  background: var(--panel-2);
  color: var(--text);
  font: 800 12px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.natal-region-toggle:hover {
  filter: brightness(0.99);
}
.natal-region-chevron {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.natal-region-toggle[aria-expanded="true"] .natal-region-chevron {
  transform: rotate(180deg);
}
.natal-region-body {
  padding: 12px;
}
.natal-region-body > .result-section:first-child,
.natal-region-body > .birth-time-explorer:first-child {
  margin-top: 0;
}
.natal-region-body > h2:first-child {
  margin-top: 0;
}
html[data-theme="dark"] .natal-region {
  background: #11100e;
  border-color: #3d3528;
}
html[data-theme="dark"] .natal-region-toggle {
  background: #211d16;
}
@media (max-width: 600px) {
  .natal-region-body {
    padding: 8px;
  }
  .natal-region-toggle {
    padding: 9px 11px;
  }
}

/* True contained 50/50 date/time controls. Native iOS controls must be
   allowed to shrink inside the grid rather than imposing their intrinsic width. */
.form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.form-grid > .field {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.birth-date-field,
.birth-time-field {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}
.birth-date-field input,
.birth-time-field input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
@supports (-webkit-touch-callout: none) {
  .birth-date-field input[type="date"],
  .birth-time-field input[type="time"],
  .forecast-controls input[type="date"],
  .forecast-life-entry input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 8px;
  }
  .birth-date-field input::-webkit-date-and-time-value,
  .birth-time-field input::-webkit-date-and-time-value,
  .forecast-controls input[type="date"]::-webkit-date-and-time-value,
  .forecast-life-entry input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
  }
}
@media (max-width: 430px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .form-grid > .field-wide {
    grid-column: 1/-1;
  }
}

/* Forecast/Historic native controls */
.forecast-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.forecast-controls label,
.forecast-controls input,
.forecast-controls select {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.forecast-controls .forecast-run {
  width: auto;
  white-space: nowrap;
}
.forecast-life-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  gap: 8px;
  align-items: end;
}
.forecast-life-entry > * {
  min-width: 0;
  max-width: 100%;
}
.forecast-life-entry input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.forecast-known-event-note {
  margin: 7px 0 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .forecast-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .forecast-controls .forecast-run {
    grid-column: 1/-1;
    width: 100%;
  }
  .forecast-life-entry {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .forecast-life-add {
    grid-column: 1/-1;
    width: 100%;
  }
}
@media (max-width: 390px) {
  .forecast-controls,
  .forecast-life-entry {
    grid-template-columns: 1fr;
  }
  .forecast-controls .forecast-run,
  .forecast-life-add {
    grid-column: auto;
  }
}

/* Mobile/touch two-row 24-hour timeline */
.explorer-mobile-timeline {
  display: none;
}
.explorer-timeline-half {
  position: relative;
  margin: 5px 3px 8px;
}
.explorer-timeline-half input {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0;
  accent-color: var(--accent);
}
.explorer-timeline-half .explorer-markers {
  top: 17px;
}
.explorer-half-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}
@media (max-width: 700px),
  (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  .explorer-timeline-desktop {
    display: none;
  }
  .explorer-mobile-timeline {
    display: block;
  }
}

/* Timeline legend is an actual filter */
.explorer-event-legend button,
.forecast-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 9px/1.2 var(--font-ui);
  cursor: pointer;
}
.explorer-event-legend button:hover,
.forecast-legend-toggle:hover {
  border-color: var(--line);
  background: var(--panel-2);
}
.explorer-event-legend button.is-disabled,
.forecast-legend-toggle.is-disabled {
  opacity: 0.35;
  text-decoration: line-through;
}
.explorer-event-legend i,
.forecast-legend-toggle i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.forecast-marker.is-filtered {
  display: none;
}

/* Forecast cards + explicit player action */
.forecast-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #aeb8c8;
  border-radius: 9px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forecast-result-card.supportive-strong {
  border-left-color: #66c28a;
}
.forecast-result-card.supportive {
  border-left-color: #8fcda5;
}
.forecast-result-card.challenging {
  border-left-color: #e38a68;
}
.forecast-result-card.challenging-strong {
  border-left-color: #ef7777;
}
.forecast-result-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.forecast-result-copy {
  min-width: 0;
}
.forecast-result-copy b,
.forecast-result-copy small {
  display: block;
}
.forecast-result-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.forecast-player-button {
  min-height: 30px;
  white-space: nowrap;
}
.forecast-priority {
  position: relative;
}
.forecast-priority-rank {
  align-self: start;
}
.forecast-priority-list,
.forecast-events {
  display: grid;
  gap: 6px;
}
.forecast-summary-action {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.forecast-summary-action b {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
}
.forecast-summary-action span {
  color: var(--muted);
  font-size: 9px;
}
.forecast-summary-action small {
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
}
@media (max-width: 700px) {
  .forecast-result-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .forecast-player-button {
    grid-column: 1/-1;
    width: 100%;
  }
  .forecast-event-glyph {
    align-self: start;
  }
}

/* Result detail modal / full-screen sheet on phones */
html.forecast-modal-open {
  overflow: hidden;
}
.forecast-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
}
.forecast-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.forecast-modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - 28px));
  max-height: min(88vh, 850px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}
.forecast-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.forecast-modal-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.forecast-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 16px;
}
.forecast-modal-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.forecast-modal-body {
  overflow: auto;
  padding: 15px 16px;
}
.forecast-modal-body section {
  margin: 0 0 15px;
}
.forecast-modal-body h4 {
  margin: 0 0 7px;
  font-size: 12px;
}
.forecast-modal-body p,
.forecast-why-list {
  font-size: 11px;
  line-height: 1.6;
}
.forecast-why-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}
.forecast-at-a-glance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--panel-2);
  border-left: 4px solid #aeb8c8;
}
.forecast-at-a-glance.supportive-strong {
  border-left-color: #66c28a;
}
.forecast-at-a-glance.supportive {
  border-left-color: #8fcda5;
}
.forecast-at-a-glance.challenging {
  border-left-color: #e38a68;
}
.forecast-at-a-glance.challenging-strong {
  border-left-color: #ef7777;
}
.forecast-at-a-glance span {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
.forecast-explanation {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.forecast-explanation p {
  margin: 0;
}
.forecast-syncrota-context {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  font-size: 10px;
}
.forecast-syncrota-context h4 {
  margin-bottom: 2px;
}
.forecast-modal-disclaimer {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}
.forecast-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
@media (max-width: 600px) {
  .forecast-modal-dialog {
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .forecast-modal-header {
    padding: 11px 12px;
  }
  .forecast-modal-body {
    padding: 12px;
  }
  .forecast-modal-actions {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .forecast-modal-actions > * {
    flex: 1;
  }
  .forecast-at-a-glance {
    display: grid;
  }
  .forecast-at-a-glance span {
    text-align: left;
  }
  .forecast-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fullscreen player: wheel-first layout, no pointless Live Positions scrolling. */
.explorer-control-compact,
.explorer-fullscreen-compact {
  display: none;
}
.explorer-fullscreen .explorer-wheel-legend {
  margin-top: 4px;
}
.explorer-fullscreen
  .explorer-wheel-legend:not([open])
  .explorer-wheel-legend-items,
.explorer-fullscreen
  .explorer-wheel-legend:not([open])
  .explorer-wheel-legend-note {
  display: none;
}
.explorer-wheel-legend-title {
  cursor: pointer;
  list-style: none;
}
.explorer-wheel-legend-title::-webkit-details-marker {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .explorer-fullscreen {
    padding: 8px;
    overflow: auto;
  }
  .explorer-fullscreen .explorer-heading {
    display: none;
  }
  .explorer-fullscreen .explorer-control-dock {
    position: static;
    margin: 0;
    padding: 0 0 5px;
  }
  .explorer-fullscreen .explorer-controls {
    gap: 4px;
    margin: 0 0 5px;
  }
  .explorer-fullscreen .explorer-control-full,
  .explorer-fullscreen .explorer-fullscreen-label {
    display: none;
  }
  .explorer-fullscreen .explorer-control-compact,
  .explorer-fullscreen .explorer-fullscreen-compact {
    display: inline;
  }
  .explorer-fullscreen .explorer-controls button {
    min-width: 34px;
    padding: 0 7px;
  }
  .explorer-fullscreen .explorer-event-legend {
    margin: 3px 0 5px;
    gap: 3px;
  }
  .explorer-fullscreen .explorer-event-legend button {
    padding: 3px 5px;
    font-size: 8px;
  }
  .explorer-fullscreen .explorer-visual-grid {
    align-items: start;
    gap: 8px;
  }

  .explorer-fullscreen .explorer-angles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 4px;
  }
  .explorer-fullscreen .explorer-wheel-legend-items {
    font-size: 8px;
  }
  .explorer-fullscreen .explorer-note {
    display: none;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: 1fr;
  }
  .explorer-fullscreen .explorer-shared-chart {
    order: 1;
  }

  .explorer-fullscreen .natal-chart {
    width: min(94vw, 560px);
    height: auto;
    margin: auto;
    display: block;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
  }
  .explorer-fullscreen .explorer-shared-chart {
    order: 1;
    min-width: 0;
  }

  .explorer-fullscreen .natal-chart {
    display: block;
    width: auto;
    height: min(62vh, 520px);
    max-width: 100%;
    margin: 0 auto;
  }
  .explorer-fullscreen .explorer-wheel-legend {
    margin-top: 0;
  }
}

/* Light theme: use darker bronze/gold for fine text and symbols. */
html[data-theme="light"] {
  --natal-gold-text: #80611f;
}

html:not([data-theme="dark"]) {
  --natal-gold-text: #80611f;
}

/* Ensure Syncrota Light-theme Natal Chart link/button remains visibly bordered. */
html[data-theme="light"] .page-link,
html:not([data-theme="dark"]) .page-link {
  border: 1px solid #b9c0ca;
  background: #fff;
  color: #374151;
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .explorer-fullscreen .natal-chart {
    height: min(72vh, 560px);
  }
}

/* ================================================================
   Viewer and forecast corrections
   ================================================================ */
/* Hidden forecast/historic controls must remain genuinely hidden even
   when their component classes define flex/grid display. */
#forecastMount [hidden] {
  display: none;
}

/* Live Positions: keep each Seven badge contained in the planet heading. */

/* ================================================================
   Desktop viewer corrections
   ================================================================ */
/* Live Positions uses the same classical glyphs as the wheel without
   inheriting the large generic celestial badge geometry. */

/* Keep fullscreen filter controls above the visual layer and explicitly tappable. */
.explorer-fullscreen .explorer-event-legend {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.explorer-fullscreen .explorer-event-legend .explorer-event-toggle {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

/* ================================================================
   Live Positions badge + calculation scroll correction
   ================================================================ */
/* Reuse the Interpretation badge component verbatim in Live Positions.
   These rules deliberately neutralise the older explorer-only badge sizing. */

/* Avoid browser scroll anchoring on the asynchronously rebuilt result regions. */
#results {
  overflow-anchor: none;
}

/* ================================================================
   Live Positions badge + stable result reveal
   ================================================================ */
/* Live Positions uses the standard 24px Syncrota Seven badge. The older
   .explorer-planets span rule styles every nested span, so reset the actual
   badge/glyph explicitly and restore the shared planet colours. */

/* In fullscreen keep the same real badge, just slightly compact. */

/* Results are assembled asynchronously; suppress scroll anchoring while that
   happens so submitting the birth form produces one final deliberate jump. */
html.natal-building-results,
html.natal-building-results body,
html.natal-building-results #resultsCard,
html.natal-building-results #results {
  overflow-anchor: none;
}

/* ================================================================
   Mobile / tablet polish
   ================================================================ */
/* Seven glyph vertical calibration. Change ONLY these values when a device
   needs the black classical glyph nudged inside its coloured badge. */
:root {
  --natal-seven-y: 0px;
}
@media (max-width: 1100px) {
  :root {
    --natal-seven-y: 0px;
  }
}
@media (max-width: 700px) {
  :root {
    --natal-seven-y: 0px;
  }
}
@media (max-width: 700px) and (orientation: landscape) {
  :root {
    --natal-seven-y: 0px;
  }
}

/* Normalise the Seven badge visual weight with the zodiac badges on Natal. */

/* Mobile Classical Bodies: keep sign + name together and let the row own one
   continuous divider instead of individual wrapped-cell borders. */
@media (max-width: 700px) {
  .planet-table tbody tr {
    border-bottom: 1px solid var(--line);
  }
  .planet-table tbody td {
    border-bottom: 0;
    vertical-align: middle;
  }
  .planet-table tbody td:nth-child(2) {
    white-space: nowrap;
  }
  .planet-table .natal-body-cell {
    white-space: nowrap;
  }
}

/* Fullscreen portrait: put the compact Live Positions dashboard before the
   wheel so all Seven are immediately available instead of being hidden below
   a full-height chart. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .explorer-fullscreen .explorer-visual-grid {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .explorer-fullscreen .explorer-shared-chart {
    order: 2;
    flex: none;
    width: 100%;
    height: auto;
  }
}

/* Fullscreen landscape has enough width: keep the whole player control strip
   on one line rather than inheriting the portrait four-column grid. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .explorer-fullscreen .explorer-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .explorer-fullscreen .explorer-controls .explorer-start-time {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    grid-column: auto;
    gap: 5px;
  }
  .explorer-fullscreen .explorer-controls .explorer-start-time-input {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }
  .explorer-fullscreen .explorer-controls button {
    flex: 0 0 auto;
    width: auto;
    grid-column: auto;
    margin-left: 0;
  }
  .explorer-fullscreen .explorer-controls label:not(.explorer-start-time) {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    grid-column: auto;
    gap: 4px;
  }
  .explorer-fullscreen .explorer-controls select {
    flex: 0 0 auto;
    width: auto;
    min-width: 112px;
  }
  .explorer-fullscreen
    .explorer-controls
    button[data-explorer-action="fullscreen"] {
    margin-left: auto;
  }
}

/* ================================================================
   Responsive player + table polish
   ================================================================ */
/* The coloured Seven badge should carry no more visual weight than the
   compact zodiac badge beside it. The glyph calibration variable remains
   available per breakpoint above. */

/* Classical Bodies is the one six-column table that must remain complete on
   phones. Keep all columns visible and spend width where the values need it. */
@media (max-width: 700px) {
  .classical-bodies-table {
    table-layout: fixed;
    width: 100%;
  }
  .classical-bodies-table th,
  .classical-bodies-table td {
    padding: 8px 3px;
    font-size: 10px;
    overflow: visible;
  }
  .classical-bodies-table th {
    font-size: 7px;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }
  .classical-bodies-table th:nth-child(1),
  .classical-bodies-table td:nth-child(1) {
    width: 23%;
  }
  .classical-bodies-table th:nth-child(2),
  .classical-bodies-table td:nth-child(2) {
    width: 19%;
    white-space: nowrap;
  }
  .classical-bodies-table th:nth-child(3),
  .classical-bodies-table td:nth-child(3) {
    display: table-cell;
    width: 17%;
  }
  .classical-bodies-table th:nth-child(4),
  .classical-bodies-table td:nth-child(4) {
    width: 22%;
    white-space: nowrap;
  }
  .classical-bodies-table th:nth-child(5),
  .classical-bodies-table td:nth-child(5) {
    width: 10%;
    text-align: center;
  }
  .classical-bodies-table th:nth-child(6),
  .classical-bodies-table td:nth-child(6) {
    width: 9%;
    text-align: center;
  }
  .classical-bodies-table .natal-body-cell {
    gap: 4px;
  }
}
@media (max-width: 430px) {
  .classical-bodies-table th:nth-child(3),
  .classical-bodies-table td:nth-child(3) {
    display: table-cell;
  }
}

/* Portrait fullscreen: two readable 12-hour rows, but without wasting a large
   vertical band between them. The filter legend owns a separate row and can
   never be covered by Live Positions. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .explorer-fullscreen .explorer-mobile-timeline {
    display: block;
    margin: 0;
  }
  .explorer-fullscreen .explorer-timeline-desktop {
    display: none;
  }
  .explorer-fullscreen .explorer-timeline-half {
    margin: 1px 3px 2px;
  }
  .explorer-fullscreen .explorer-timeline-half .explorer-markers {
    top: 13px;
  }
  .explorer-fullscreen .explorer-half-scale {
    margin-top: 0;
    line-height: 1;
  }
  .explorer-fullscreen .explorer-event-legend {
    display: flex;
    position: relative;
    z-index: 30;
    min-height: 27px;
    margin: 2px 0 5px;
    padding: 2px 3px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .explorer-fullscreen .explorer-visual-grid {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }
}

/* Landscape fullscreen has the width for the original continuous 24-hour
   timeline. The split two-row timeline is a portrait-only aid. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .explorer-fullscreen .explorer-timeline-desktop {
    display: block;
    margin-top: 4px;
    margin-bottom: 3px;
  }
  .explorer-fullscreen .explorer-mobile-timeline {
    display: none;
  }
}

/* ================================================================
   Fullscreen control drawer + portrait timeline spacing
   ================================================================ */
.explorer-controls-toggle {
  display: none;
}
.explorer-fullscreen .explorer-controls-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  margin: 0 0 4px auto;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Fullscreen opens in focused mode: retain only Exit full screen. The wheel's
   centre button remains the primary play/pause control. */
.explorer-fullscreen.explorer-controls-collapsed
  .explorer-controls
  > *:not([data-explorer-action="fullscreen"]) {
  display: none;
}
.explorer-fullscreen.explorer-controls-collapsed .explorer-controls {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin: 0;
  gap: 0;
}
.explorer-fullscreen.explorer-controls-collapsed
  .explorer-controls
  [data-explorer-action="fullscreen"] {
  display: inline-flex;
  margin-left: auto;
}

/* Keep the portrait halves close together. Their labels still identify the
   two halves, but no large empty band is reserved between them. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .explorer-fullscreen .explorer-control-dock {
    padding-bottom: 2px;
  }
  .explorer-fullscreen .explorer-mobile-timeline {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .explorer-fullscreen .explorer-timeline-half {
    margin: 0 3px;
    padding: 0;
    min-height: 54px;
  }
  .explorer-fullscreen .explorer-timeline-half + .explorer-timeline-half {
    margin-top: -5px;
  }
  .explorer-fullscreen .explorer-half-scale {
    margin-top: -2px;
    padding-bottom: 0;
    line-height: 1;
  }
  .explorer-fullscreen .explorer-event-legend {
    clear: both;
    margin-top: 1px;
  }
}

/* ================================================================
   Fullscreen finishing rules
   ================================================================ */
/* Keep the wheel's round Seven markers, but use the same Seven palette as
   the Syncrota badges instead of one generic gold marker. */
.chart-planet-dot.chart-planet-sun {
  fill: #ffd31a;
}
.chart-planet-dot.chart-planet-moon {
  fill: #22b5d4;
}
.chart-planet-dot.chart-planet-mercury {
  fill: #f47a55;
}
.chart-planet-dot.chart-planet-venus {
  fill: #3db84a;
}
.chart-planet-dot.chart-planet-mars {
  fill: #d92f55;
}
.chart-planet-dot.chart-planet-jupiter {
  fill: #3f69b1;
}
.chart-planet-dot.chart-planet-saturn {
  fill: #73508d;
}

/* In focused fullscreen mode Controls and Exit share one compact header row.
   The timeline starts below that row instead of losing a full row to Exit. */
.explorer-fullscreen .explorer-control-dock {
  position: relative;
  padding-top: 0;
}
.explorer-fullscreen .explorer-controls-toggle {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 45;
}
.explorer-fullscreen.explorer-controls-collapsed .explorer-controls {
  min-height: 38px;
  align-items: flex-start;
}
.explorer-fullscreen.explorer-controls-collapsed
  .explorer-controls
  [data-explorer-action="fullscreen"] {
  margin: 0 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  width: auto;
}

/* The event-filter legend owns real layout space. Live Positions always begins
   after it, even while playback changes the status/time row above. */
.explorer-fullscreen .explorer-event-legend {
  position: relative;
  z-index: 5;
  margin-bottom: 8px;
}
.explorer-fullscreen .explorer-visual-grid {
  position: relative;
  z-index: 1;
  clear: both;
  margin-top: 0;
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .explorer-fullscreen .explorer-controls-toggle {
    top: 0;
    left: 0;
  }
  .explorer-fullscreen.explorer-controls-collapsed .explorer-controls {
    min-height: 36px;
  }
  .explorer-fullscreen .explorer-event-legend {
    margin-top: 3px;
    margin-bottom: 8px;
    min-height: 31px;
  }
}

/* ================================================================
   Permanent fullscreen header
   ================================================================ */
/* Controls/Exit live in a dedicated header that never participates in the
   playback-control layout. Expanding the drawer therefore cannot collide
   with Centre time on phone, tablet or desktop. */
.explorer-fullscreen-bar {
  display: none;
}
.explorer-fullscreen .explorer-fullscreen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin: 0 0 6px;
}
.explorer-fullscreen .explorer-controls-toggle,
.explorer-fullscreen .explorer-fullscreen-bar-exit {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.explorer-fullscreen .explorer-fullscreen-bar-exit {
  margin-left: auto;
}
.explorer-fullscreen .explorer-fullscreen-bar-exit .explorer-fullscreen-label {
  display: inline;
  line-height: 1;
}
.explorer-fullscreen
  .explorer-fullscreen-bar-exit
  .explorer-fullscreen-compact {
  display: none;
}
/* The drawer is now only the actual playback controls. */
.explorer-fullscreen.explorer-controls-collapsed .explorer-controls {
  display: none;
}
.explorer-fullscreen:not(.explorer-controls-collapsed) .explorer-controls {
  position: static;
  margin: 0 0 6px;
}
/* Neutralise earlier rules which treated the Exit button as a
   child of the playback row. */
.explorer-fullscreen.explorer-controls-collapsed
  .explorer-controls
  [data-explorer-action="fullscreen"] {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .explorer-fullscreen .explorer-fullscreen-bar {
    min-height: 36px;
    margin-bottom: 5px;
  }
  .explorer-fullscreen .explorer-controls-toggle,
  .explorer-fullscreen .explorer-fullscreen-bar-exit {
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
  }
}

/* ================================================================
   View full screen in normal viewer mode
   ================================================================ */
.birth-time-explorer:not(.explorer-fullscreen) .explorer-fullscreen-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 6px;
}
.birth-time-explorer:not(.explorer-fullscreen)
  .explorer-fullscreen-bar
  .explorer-controls-toggle {
  display: none;
}
.birth-time-explorer:not(.explorer-fullscreen) .explorer-fullscreen-bar-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  width: auto;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.birth-time-explorer:not(.explorer-fullscreen)
  .explorer-fullscreen-bar-exit
  .explorer-fullscreen-label {
  display: inline;
}
.birth-time-explorer:not(.explorer-fullscreen)
  .explorer-fullscreen-bar-exit
  .explorer-fullscreen-compact {
  display: none;
}

/* Transparent significance scoring */
.forecast-scoring-guide {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  overflow: hidden;
}
.forecast-scoring-guide > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: #e8c77f;
  list-style-position: inside;
}
.forecast-scoring-body {
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.forecast-scoring-body p {
  margin: 0 0 10px;
}
.forecast-scoring-body p b {
  color: var(--text);
}
.forecast-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.forecast-score-grid span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.forecast-score-grid b {
  color: var(--text);
}
.forecast-score-breakdown {
  display: grid;
  gap: 4px;
}
.forecast-score-breakdown p,
.forecast-score-breakdown small {
  margin: 0;
}
html[data-theme="light"] .forecast-scoring-guide,
html:not([data-theme="dark"]) .forecast-scoring-guide {
  background: #f8fafc;
  border-color: #b8c0ca;
}
html[data-theme="light"] .forecast-scoring-guide > summary,
html:not([data-theme="dark"]) .forecast-scoring-guide > summary {
  color: #8a6420;
}
@media (max-width: 700px) {
  .forecast-score-grid {
    grid-template-columns: 1fr;
  }
}

/* Ephemeris Validation: compact mobile card table with no horizontal scrolling. */
@media (max-width: 700px) {
  .ephemeris-table-wrap {
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
  }
  .ephemeris-table-wrap .planet-table {
    min-width: 0;
    width: 100%;
    display: block;
  }
  .ephemeris-table thead {
    display: none;
  }
  .ephemeris-table tbody {
    display: grid;
    gap: 10px;
    width: 100%;
  }
  .ephemeris-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2);
  }
  .ephemeris-table td {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 3px;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ephemeris-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ephemeris-table .natal-body-cell {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .ephemeris-table .natal-body-cell::before {
    display: none;
  }
  .ephemeris-table td:nth-child(2) {
    grid-column: 1/-1;
  }
  .ephemeris-table .ephemeris-reference {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 34px;
  }
  .ephemeris-table .ephemeris-diff {
    align-self: end;
  }
}

/* ================================================================
   Key Periods / sequence presentation
   ================================================================ */
.forecast-key-period {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: var(--panel-2);
}
.forecast-key-period.supportive,
.forecast-key-period.supportive-strong {
  border-left-color: #5eaa78;
}
.forecast-key-period.challenging,
.forecast-key-period.challenging-strong {
  border-left-color: #cf6a65;
}
.forecast-key-period.mixed {
  border-left-color: #c8a45b;
}
.forecast-key-period-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.forecast-key-period-head > div {
  display: grid;
  gap: 3px;
}
.forecast-key-period-head small {
  color: var(--muted);
}
.forecast-significance-pill {
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.forecast-significance-pill b {
  font-size: 13px;
  color: var(--text);
}
.forecast-key-period-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.forecast-key-period-meta span {
  display: flex;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  color: var(--muted);
}
.forecast-key-period-meta b {
  color: var(--text);
}
.forecast-key-period-events {
  display: grid;
  gap: 6px;
}
.forecast-key-period-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.forecast-key-period-event > span:nth-child(2) {
  display: grid;
  gap: 2px;
}
.forecast-key-period-event small {
  color: var(--muted);
}
.forecast-key-period-event button {
  padding: 5px 8px;
  min-height: 30px;
}
.forecast-key-period-single {
  display: flex;
  gap: 8px;
  align-items: center;
}
.forecast-key-period-single small {
  margin-right: auto;
  color: var(--muted);
}
.forecast-key-period-why {
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .forecast-key-period-head {
    grid-template-columns: 1fr;
  }
  .forecast-key-period-head .forecast-priority-rank {
    justify-self: start;
  }
  .forecast-significance-pill {
    justify-items: start;
    justify-self: start;
  }
  .forecast-key-period-event {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .forecast-key-period-event button {
    grid-column: auto;
  }
  .forecast-key-period-single {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .forecast-key-period-single small {
    grid-column: 1/-1;
  }
  .forecast-key-period-single button {
    width: 100%;
  }
}

/* Intro heading — compact release presentation */
.intro h1 {
  font-size: clamp(24px, 2.4vw, 30px);
}

/* ================================================================
   Birth Time Explorer — whole-day comparison
   ================================================================ */
.birth-day-scan {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  overflow: hidden;
}
.birth-day-scan > summary {
  cursor: pointer;
  padding: 11px 13px;
  color: #e8c77f;
  font-weight: 800;
  list-style-position: inside;
}
.birth-day-scan-body {
  display: grid;
  gap: 10px;
  padding: 0 13px 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.birth-day-scan-body p {
  margin: 0;
}
.birth-day-scan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}
.birth-day-scan-controls label {
  display: grid;
  gap: 4px;
  color: var(--text);
  font-weight: 700;
}
.birth-day-scan-controls input {
  min-height: 34px;
}
.birth-day-scan-status {
  align-self: center;
  font-size: 10px;
}
.birth-day-scan-results {
  display: grid;
  gap: 7px;
  max-height: 440px;
  overflow: auto;
}
.birth-day-window {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.birth-day-window-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.birth-day-window-head > b {
  color: var(--accent);
  font-size: 12px;
}
.birth-day-window-head > span {
  color: var(--text);
  font-weight: 700;
}
.birth-day-window-head button {
  min-height: 29px;
  padding: 4px 8px;
}
.birth-day-window-change {
  color: #e8c77f;
}
.birth-day-window > small:last-child {
  color: var(--muted);
}
.birth-day-scan-note {
  padding-top: 2px;
  font-size: 10px;
}
.explorer-fullscreen .birth-day-scan {
  display: none;
}
html[data-theme="light"] .birth-day-scan > summary,
html:not([data-theme="dark"]) .birth-day-scan > summary {
  color: #8a6420;
}
@media (max-width: 700px) {
  .birth-day-window-head {
    grid-template-columns: 1fr auto;
  }
  .birth-day-window-head > span {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .birth-day-scan-results {
    max-height: 55vh;
  }
  .birth-day-scan-controls > * {
    flex: 1 1 auto;
  }
}

/* ================================================================
   Fullscreen mobile layout: stable portrait scrolling + landscape legend
   ================================================================ */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .birth-time-explorer.explorer-fullscreen {
    display: block;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .explorer-fullscreen .explorer-control-dock {
    position: relative;
    display: block;
  }
  .explorer-fullscreen .explorer-event-legend {
    position: relative;
  }
  .explorer-fullscreen .explorer-visual-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .explorer-fullscreen .explorer-shared-chart {
    order: 2;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .explorer-fullscreen .natal-chart-wrap,
  .explorer-fullscreen .explorer-chart-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .explorer-fullscreen .explorer-chart-stage {
    display: block;
  }
  .explorer-fullscreen .natal-chart {
    display: block;
    width: min(94vw, 560px);
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
  .explorer-fullscreen .explorer-wheel-legend {
    display: block;
    margin: 10px 4px max(24px, env(safe-area-inset-bottom));
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .birth-time-explorer.explorer-fullscreen {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 6px;
    overflow: hidden;
  }
  .explorer-fullscreen .explorer-control-dock {
    grid-column: 1/-1;
    grid-row: 1;
    min-width: 0;
  }
  .explorer-fullscreen .explorer-event-legend {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 4px 2px;
    z-index: 10;
  }
  .explorer-fullscreen .explorer-event-legend button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 27px;
    padding: 4px 5px;
    white-space: nowrap;
    text-align: left;
  }
  .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    min-height: 0;
    overflow: auto;
    margin: 0;
  }
  .explorer-fullscreen .explorer-shared-chart {
    min-width: 0;
    overflow: visible;
  }
}

/* Birth Time Explorer — influence scoring */
.birth-score-guide {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.birth-score-guide > summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--text);
  font-weight: 800;
}
.birth-score-guide > div {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}
.birth-score-guide p {
  margin: 0;
}
.birth-score-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.birth-score-legend span,
.birth-score-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
}
.birth-score-legend span {
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}
.birth-score-strip {
  display: flex;
  width: 100%;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
}
.birth-score-strip button {
  display: block;
  min-width: 1px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.birth-score-strip-scale {
  display: flex;
  justify-content: space-between;
  margin: -2px 2px 4px;
  color: var(--muted);
  font-size: 9px;
}
.birth-day-window {
  border-left-width: 5px;
}
.birth-day-window.supportive-strong {
  border-left-color: #42b983;
}
.birth-day-window.supportive {
  border-left-color: #74c69d;
}
.birth-day-window.mixed {
  border-left-color: #b8a8d8;
}
.birth-day-window.challenging {
  border-left-color: #e9a23b;
}
.birth-day-window.challenging-strong {
  border-left-color: #e76f73;
}
.birth-score-pill {
  display: grid;
  gap: 0;
  padding: 4px 7px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.birth-score-pill b {
  font-size: 9px;
}
.birth-score-pill small {
  font-size: 9px;
}
.birth-score-reasons {
  color: var(--text);
}
.birth-score-strip .supportive-strong,
.birth-score-legend .supportive-strong,
.birth-score-pill.supportive-strong {
  background: #42b98322;
}
.birth-score-strip .supportive,
.birth-score-legend .supportive,
.birth-score-pill.supportive {
  background: #74c69d22;
}
.birth-score-strip .mixed,
.birth-score-legend .mixed,
.birth-score-pill.mixed {
  background: #b8a8d833;
}
.birth-score-strip .challenging,
.birth-score-legend .challenging,
.birth-score-pill.challenging {
  background: #e9a23b2b;
}
.birth-score-strip .challenging-strong,
.birth-score-legend .challenging-strong,
.birth-score-pill.challenging-strong {
  background: #e76f7330;
}
@media (max-width: 700px) {
  .birth-day-window-head > span:not(.birth-score-pill) {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .birth-score-pill {
    grid-column: 1;
    justify-self: start;
  }
  .birth-day-window-head > button {
    grid-column: 2;
    grid-row: 3;
  }
  .birth-score-strip {
    height: 22px;
  }
}

/* Birth Time Explorer top-level workspace tab */
.birth-time-explorer.birth-explorer-tab-mode > .explorer-heading,
.birth-time-explorer.birth-explorer-tab-mode > .explorer-control-dock,
.birth-time-explorer.birth-explorer-tab-mode > .explorer-event-legend,
.birth-time-explorer.birth-explorer-tab-mode > .explorer-visual-grid,
.birth-time-explorer.birth-explorer-tab-mode > .explorer-note {
  display: none;
}
.birth-time-explorer.birth-explorer-tab-mode > .birth-day-scan {
  display: block;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.birth-time-explorer.birth-explorer-tab-mode > .birth-day-scan > summary {
  font-size: 18px;
  padding: 4px 0 12px;
}
.birth-time-explorer.birth-explorer-tab-mode
  > .birth-day-scan
  > .birth-day-scan-body {
  padding: 0;
}
@media (max-width: 700px) {
  .natal-analysis-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .natal-analysis-tabs button {
    width: 100%;
    min-width: 0;
  }
  .birth-time-explorer.birth-explorer-tab-mode > .birth-day-scan > summary {
    font-size: 16px;
  }
}

/* Birth Time Explorer tab separation fix */
.birth-time-explorer > .birth-day-scan {
  display: none;
}
.birth-time-explorer.birth-explorer-tab-mode > .birth-day-scan {
  display: block;
}
.natal-region.birth-explorer-region-mode > .natal-region-heading {
  display: none;
}
.natal-region.birth-explorer-region-mode > .natal-region-body {
  padding-top: 0;
}

/* Birth Time Explorer influence filtering */
.birth-score-guide-title {
  padding: 8px 10px;
  color: var(--text);
  font-weight: 800;
}
.birth-score-guide > div:last-child {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}
.birth-score-legend button {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.birth-score-legend button[aria-pressed="false"] {
  opacity: 0.35;
  text-decoration: line-through;
  filter: saturate(0.35);
}
.birth-score-filter-note {
  color: var(--muted);
  font-size: 9px;
}
.birth-score-strip [data-birth-score-tone].birth-score-filtered {
  visibility: hidden;
  pointer-events: none;
}
.birth-day-window.birth-score-filtered {
  display: none;
}
.birth-day-window-head > .birth-score-pill {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}
@media (max-width: 700px) {
  .birth-day-window-head > .birth-score-pill {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* Birth Time Explorer standalone location form. */
.birth-day-scan-form {
  margin: 12px 0 16px;
}
.birth-day-scan-fields {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.8fr) minmax(240px, 1.6fr) minmax(120px, 0.7fr)
    minmax(120px, 0.7fr);
  gap: 10px;
  align-items: end;
}
.birth-day-scan-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
}
.birth-day-scan-fields input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.birth-day-scan-location-note {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.82;
}
.birth-day-scan-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.birth-day-scan-status.error {
  color: #d95b5b;
  font-weight: 700;
}
@media (max-width: 900px) {
  .birth-day-scan-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .birth-day-scan-place-field {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .birth-day-scan-fields {
    grid-template-columns: 1fr;
  }
  .birth-day-scan-place-field {
    grid-column: auto;
  }
}

/* Expanded analysis regions use square corners; collapsed headers retain the compact rounded card. */
.natal-region.is-expanded {
  border-radius: 0;
}

/* Birth Time Explorer: show notable same-sign planetary concentrations without altering influence score. */
.birth-natal-patterns {
  display: grid;
  gap: 6px;
}
.birth-natal-pattern {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}
.birth-natal-pattern > b {
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.birth-natal-pattern > span {
  color: var(--text);
  font-size: 11px;
}
.birth-natal-pattern > small {
  color: var(--muted);
  line-height: 1.4;
}

/* Live Positions: align the Seven/name and zodiac-position columns consistently. */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
}

/* Mineral Support workspace. */
.forecast-panel.mineral-mode > .forecast-summary,
.forecast-panel.mineral-mode > .forecast-timeline,
.forecast-panel.mineral-mode > .forecast-priority-wrap,
.forecast-panel.mineral-mode > .forecast-scoring-guide,
.forecast-panel.mineral-mode > .forecast-section-title,
.forecast-panel.mineral-mode > .forecast-window-list,
.forecast-panel.mineral-mode > .forecast-detail,
.forecast-panel.mineral-mode > .forecast-all-events {
  display: none;
}
.mineral-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.mineral-summary > div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.mineral-summary b {
  font-size: 18px;
}
.mineral-summary span {
  font-size: 10px;
  color: var(--muted);
}
.mineral-timeline {
  margin: 12px 0;
}
.mineral-track {
  position: relative;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  overflow: hidden;
}
.mineral-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.mineral-marker.challenging {
  background: #e9a23b;
}
.mineral-marker.challenging-strong {
  background: #e76f73;
}
.mineral-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.mineral-explainer {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.mineral-explainer b {
  font-size: 12px;
}
.mineral-explainer span {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.mineral-groups {
  display: grid;
  gap: 10px;
}
.mineral-group {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.mineral-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
}
.mineral-group-head > div {
  display: grid;
  gap: 2px;
}
.mineral-group-head small {
  color: var(--muted);
}
.mineral-rank {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.mineral-periods {
  display: grid;
  border-top: 1px solid var(--line);
}
.mineral-period {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
}
.mineral-period:last-child {
  border-bottom: 0;
}
.mineral-period > span:nth-child(2) {
  display: grid;
  gap: 2px;
}
.mineral-period small {
  color: var(--muted);
  line-height: 1.35;
}
.mineral-disclaimer {
  margin: 12px 0 0;
  padding: 9px;
  border-left: 3px solid var(--accent);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .natal-analysis-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .natal-analysis-tabs [data-natal-tab="mineral"] {
    grid-column: 1/-1;
  }
  .mineral-summary {
    grid-template-columns: 1fr;
  }
  .mineral-group-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mineral-group-head > .forecast-significance-pill {
    grid-column: 1/-1;
    justify-self: start;
  }
  .mineral-period {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mineral-period > button {
    grid-column: auto;
  }
  .mineral-controls {
    align-items: end;
  }
  .mineral-custom-end {
    width: 100%;
  }
}

/* 2026-09-16 UI cleanup: Birth Time Explorer result priority + Live Positions alignment. */
.birth-time-explorer {
  border-radius: 0;
}

/* Birth Time Explorer results: influence badge first for rapid scanning; View time stays right. */
.birth-day-window-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.birth-day-window-head > .birth-score-pill {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.birth-day-window-summary {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.birth-day-window-summary > b {
  flex: none;
  color: var(--accent);
  font-size: 12px;
}
.birth-day-window-summary > span {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}
.birth-day-window-head > button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* Desktop Live Positions: planet badge/name and zodiac position share one compact row. */
@media (min-width: 701px) {
}
@media (max-width: 700px) {
  .birth-day-window-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .birth-day-window-head > .birth-score-pill {
    grid-column: 1;
    grid-row: 1;
  }
  .birth-day-window-summary {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 2px;
  }
  .birth-day-window-head > button {
    grid-column: 3;
    grid-row: 1;
  }
}

/* 2026-09-16 validation follow-up: the expanded 24-hour Live Viewer is an
   open workspace, not a bordered card. Keep the border only while collapsed. */
.natal-region[data-region="viewer"].is-expanded {
  border: 0;
}

/* ================================================================
   2026-09-16 validation polish batch
   ================================================================ */
/* iOS date controls must respect the Birth Time Explorer grid width. */
.birth-day-scan-date-field {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.birth-day-scan-date {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  -webkit-min-logical-width: 0;
}
@media (max-width: 900px) {
  .birth-day-scan-fields > * {
    min-width: 0;
  }
  .birth-day-scan-fields input {
    min-width: 0;
    max-width: 100%;
  }
}

/* Live Positions: cleaner text directly on the panel rather than uneven dark capsules. */

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
}

/* Lighter natal-wheel planet discs use dark glyphs; Sun optical centring is handled in chartMarkup. */
.chart-planet-text-sun,
.chart-planet-text-moon,
.chart-planet-text-mercury,
.chart-planet-text-venus {
  fill: #111827;
}
.chart-planet-text-mars,
.chart-planet-text-jupiter,
.chart-planet-text-saturn {
  fill: #f8fafc;
}

/* Compact the 24-hour timeline without changing marker positions or semantics. */
.explorer-control-dock .explorer-timeline {
  margin-top: 5px;
  margin-bottom: 0;
}
.explorer-scale > span {
  padding-top: 4px;
  line-height: 1.05;
}
.explorer-scale > span::before {
  height: 3px;
}
.explorer-input-time {
  margin-top: 1px;
}
.explorer-mobile-timeline {
  margin-top: 2px;
  margin-bottom: 0;
}
.explorer-timeline-half {
  margin-top: 1px;
  margin-bottom: 2px;
  min-height: 0;
}
.explorer-timeline-half + .explorer-timeline-half {
  margin-top: 0;
}
.explorer-half-scale {
  margin-top: 0;
  line-height: 1.05;
}
.explorer-event-legend {
  margin-top: 3px;
}

/* Mineral ranking sections: Primary open by default, others compact until requested. */
.mineral-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.mineral-group > summary::-webkit-details-marker {
  display: none;
}
.mineral-collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.18s ease;
}
.mineral-group[open] .mineral-collapse-chevron {
  transform: rotate(180deg);
}
.mineral-group-head {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
@media (max-width: 700px) {
  .mineral-group-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .mineral-group-head > .forecast-significance-pill {
    grid-column: 1/3;
  }
  .mineral-collapse-chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }
  .mineral-group-head > div {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Share Syncrota's adjustable typography with the Natal workspace. */
#results,
.birth-time-explorer,
.forecast-panel {
  font-size: var(--fs-info-value);
}
#results h2,
#results h3,
.explorer-heading h3,
.forecast-heading h3 {
  font-size: var(--fs-section-title);
}
#results .card-note,
.explorer-heading p,
.forecast-heading p,
.explorer-note,
.phase-note {
  font-size: var(--fs-section-subtitle);
}
#results label,
#results button,
#results select,
#results input {
  font-size: var(--fs-control);
}
.forecast-result-card small,
.mineral-period small,
.birth-day-window small {
  font-size: var(--fs-hint);
}

/* ================================================================
   2026-09-16 fullscreen portrait compact Live Positions + timeline
   ================================================================ */
/* On touch portrait screens, keep the two-column pairing but place each
   planet name and its zodiac position on the same row in fullscreen. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  /* The native range control reserves vertical space around its track. Reduce
    that box and pull the labels towards the visible player line. */
  .explorer-fullscreen .explorer-timeline-half {
    min-height: 36px;
    margin: 0 3px;
  }
  .explorer-fullscreen .explorer-timeline-half + .explorer-timeline-half {
    margin-top: -2px;
  }
  .explorer-fullscreen .explorer-timeline-half input {
    height: 20px;
    margin: 0;
  }
  .explorer-fullscreen .explorer-timeline-half .explorer-markers {
    top: 10px;
  }
  .explorer-fullscreen .explorer-half-scale {
    margin-top: -3px;
    line-height: 1;
  }
  .explorer-fullscreen .explorer-event-legend {
    margin-top: 0;
  }
}

/* Use the same tighter track-to-label relationship in normal portrait view. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .birth-time-explorer:not(.explorer-fullscreen) .explorer-timeline-half {
    margin: 0 3px 1px;
  }
  .birth-time-explorer:not(.explorer-fullscreen) .explorer-timeline-half input {
    height: 20px;
    margin: 0;
  }
  .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-half
    .explorer-markers {
    top: 10px;
  }
  .birth-time-explorer:not(.explorer-fullscreen) .explorer-half-scale {
    margin-top: -3px;
    line-height: 1;
  }
}

/* ================================================================
   2026-09-17 phone fullscreen compaction — iPhone 13 baseline
   Portrait target: 390x844. Landscape target: 844x390.
   ================================================================ */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 361px) and (max-width: 430px) {
  /* Tighten the visible track-to-label relationship. */
  .explorer-fullscreen .explorer-mobile-timeline {
    margin-bottom: 0;
  }
  .explorer-fullscreen .explorer-timeline-half {
    min-height: 31px;
    height: 31px;
    margin: 0 3px;
  }
  .explorer-fullscreen .explorer-timeline-half + .explorer-timeline-half {
    margin-top: -1px;
  }
  .explorer-fullscreen .explorer-timeline-half input {
    height: 17px;
    margin: 0;
  }
  .explorer-fullscreen .explorer-timeline-half .explorer-markers {
    top: 8px;
  }
  .explorer-fullscreen .explorer-half-scale {
    position: relative;
    top: -4px;
    margin: 0;
    line-height: 1;
    font-size: 8px;
  }
  .explorer-fullscreen .explorer-event-legend {
    margin-top: -1px;
    margin-bottom: 4px;
  }
}

/* iPhone 13-class landscape: preserve the wheel's scarce vertical space by
   keeping Live Positions beside the wheel rather than above it. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 430px) and (max-width: 900px) {
  .birth-time-explorer.explorer-fullscreen {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 5px;
    padding: 4px;
    overflow: hidden;
  }
  .explorer-fullscreen .explorer-control-dock {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
    padding: 0 2px 3px;
  }
  .explorer-fullscreen .explorer-fullscreen-bar {
    min-height: 28px;
    height: 28px;
    margin-bottom: 2px;
  }
  .explorer-fullscreen .explorer-controls-toggle,
  .explorer-fullscreen .explorer-fullscreen-bar-exit {
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    font-size: 9px;
  }
  .explorer-fullscreen .explorer-time-row {
    padding: 3px 6px;
    font-size: 8px;
    line-height: 1.1;
  }
  .explorer-fullscreen .explorer-control-dock .explorer-timeline {
    margin: 2px 4px 0;
  }
  .explorer-fullscreen .explorer-event-legend {
    grid-column: 1;
    grid-row: 2;
    gap: 2px;
    padding: 2px 1px;
  }
  .explorer-fullscreen .explorer-event-legend button {
    min-height: 22px;
    padding: 2px 3px;
    font-size: 8px;
  }
  .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    grid-template-rows: minmax(0, 1fr);
    gap: 5px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .explorer-fullscreen .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .explorer-fullscreen .natal-chart-wrap,
  .explorer-fullscreen .explorer-chart-stage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .explorer-fullscreen .natal-chart {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .explorer-fullscreen .explorer-wheel-legend {
    display: none;
  }
}

/* ================================================================
   2026-09-17 mobile edge alignment + narrow landscape Live Positions
   Remove the nested-card inset on phones and keep compact live rows
   collision-free beside the wheel in short landscape viewports.
   ================================================================ */
@media (max-width: 700px) {
  /* The collapsible region is the visual frame on phones. Do not add a
    second inset frame around its content. Content keeps the same 11px
    text inset as the collapsible heading, without losing another border. */
  .natal-region.is-expanded > .natal-region-body {
    padding: 10px 11px 11px;
  }
  .natal-region.is-expanded > .natal-region-body > .birth-time-explorer,
  .natal-region.is-expanded > .natal-region-body > .result-section,
  .natal-region.is-expanded > .natal-region-body > .natal-interpretations,
  .natal-region.is-expanded > .natal-region-body > .calculation-audit,
  .natal-region.is-expanded > .natal-region-body > .ephemeris-validation {
    max-width: none;
  }
  .natal-region.is-expanded > .natal-region-body > .birth-time-explorer {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  /* Viewer region already uses the region itself as the frame. Restore that
    single frame on mobile so its gold edge is level with its header. */
  .natal-region[data-region="viewer"].is-expanded {
    border: 1px solid var(--line);
  }
  html[data-theme="dark"] .natal-region[data-region="viewer"].is-expanded {
    border-color: #3d3528;
  }
}

/* Short phone landscape (iPhone 13 844x390 baseline and similar devices).
   One compact line per body: planet glyph + zodiac glyph + abbreviated
   sign/degree/house. Never allow a row to paint into the next row. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 430px) and (max-width: 900px) {
  .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 4px;
  }
}

/* ================================================================
   2026-09-17 fullscreen mobile follow-up
   - Fullscreen layers must be opaque: never show the underlying natal page.
   - Phone landscape always uses the compact symbol + zodiac-position rows,
     including wider iPhone Pro landscape viewports.
   ================================================================ */
@media (max-width: 700px) {
  .birth-time-explorer.explorer-fullscreen,
  .birth-time-explorer.explorer-fullscreen:fullscreen,
  .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
    background: #0b0a09;
    opacity: 1;
    isolation: isolate;
  }
}

/* iPhone 13/14/15/16-class landscape. Do not depend on hover/pointer media
   features: Safari can report these differently while entering fullscreen. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .birth-time-explorer.explorer-fullscreen {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 5px;
    padding: 4px;
    overflow: hidden;
    background: #0b0a09;
    isolation: isolate;
  }
  .explorer-fullscreen .explorer-control-dock {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
    padding: 0 2px 3px;
  }
  .explorer-fullscreen .explorer-event-legend {
    grid-column: 1;
    grid-row: 2;
  }
  .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    grid-template-rows: minmax(0, 1fr);
    gap: 5px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .explorer-fullscreen .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .explorer-fullscreen .explorer-wheel-legend {
    display: none;
  }
}

/* iPhone fullscreen landscape: keep the filter legend clear of the timeline
   and its active/inactive track immediately above it. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .explorer-fullscreen .explorer-event-legend {
    margin-top: 12px;
    align-self: start;
  }
}

/* Shared 24-hour player range styling.
   Keep range controls out of generic form-field styling and render every
   player track through the same explicit theme-aware path. */
.explorer-range,
.explorer-range-first,
.explorer-range-second {
  --explorer-range-progress: 50%;
  --explorer-range-track: #d9dee7;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--explorer-range-track);
  color: inherit;
  cursor: pointer;
}
html[data-theme="dark"] .explorer-range,
html[data-theme="dark"] .explorer-range-first,
html[data-theme="dark"] .explorer-range-second {
  --explorer-range-track: #4a4a48;
}
.explorer-range::-webkit-slider-runnable-track,
.explorer-range-first::-webkit-slider-runnable-track,
.explorer-range-second::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.explorer-range::-webkit-slider-thumb,
.explorer-range-first::-webkit-slider-thumb,
.explorer-range-second::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.explorer-range::-moz-range-track,
.explorer-range-first::-moz-range-track,
.explorer-range-second::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.explorer-range::-moz-range-progress,
.explorer-range-first::-moz-range-progress,
.explorer-range-second::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}
.explorer-range::-moz-range-thumb,
.explorer-range-first::-moz-range-thumb,
.explorer-range-second::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* 2026-09-18 QA batch: shared influence palette, readable glyphs and accents. */
:root {
  --tone-strong-support: #2fbf71;
  --tone-support: #78d39a;
  --tone-mixed: #aeb8c8;
  --tone-challenge: #f08a61;
  --tone-strong-challenge: #f05d67;
}
.birth-score-strip .supportive-strong,
.birth-score-legend .supportive-strong,
.birth-score-pill.supportive-strong {
  background: color-mix(in srgb, var(--tone-strong-support) 22%, transparent);
}
.birth-score-strip .supportive,
.birth-score-legend .supportive,
.birth-score-pill.supportive {
  background: color-mix(in srgb, var(--tone-support) 22%, transparent);
}
.birth-score-strip .mixed,
.birth-score-legend .mixed,
.birth-score-pill.mixed {
  background: color-mix(in srgb, var(--tone-mixed) 28%, transparent);
}
.birth-score-strip .challenging,
.birth-score-legend .challenging,
.birth-score-pill.challenging {
  background: color-mix(in srgb, var(--tone-challenge) 24%, transparent);
}
.birth-score-strip .challenging-strong,
.birth-score-legend .challenging-strong,
.birth-score-pill.challenging-strong {
  background: color-mix(in srgb, var(--tone-strong-challenge) 25%, transparent);
}
.forecast-marker.supportive-strong,
.forecast-legend i.supportive-strong {
  background: var(--tone-strong-support);
}
.forecast-marker.supportive,
.forecast-legend i.supportive {
  background: var(--tone-support);
}
.forecast-marker.mixed,
.forecast-legend i.mixed {
  background: var(--tone-mixed);
}
.forecast-marker.challenging,
.forecast-legend i.challenging {
  background: var(--tone-challenge);
}
.forecast-marker.challenging-strong,
.forecast-legend i.challenging-strong {
  background: var(--tone-strong-challenge);
}
.forecast-legend-toggle {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}
.forecast-legend-toggle[aria-pressed="false"],
.forecast-legend-toggle.is-disabled {
  opacity: 0.35;
  text-decoration: line-through;
  filter: saturate(0.35);
}
html[data-theme="light"] .forecast-section-title h4,
html[data-theme="light"] .forecast-player-button,
html[data-theme="light"] .forecast-priority-title,
html[data-theme="light"] .forecast-syncrota-context > b,
html[data-theme="light"] .forecast-detail h4,
html[data-theme="light"] .forecast-scoring-guide > summary,
html:not([data-theme="dark"]) .forecast-section-title h4,
html:not([data-theme="dark"]) .forecast-player-button,
html:not([data-theme="dark"]) .forecast-priority-title,
html:not([data-theme="dark"]) .forecast-syncrota-context > b,
html:not([data-theme="dark"]) .forecast-detail h4,
html:not([data-theme="dark"]) .forecast-scoring-guide > summary {
  color: #8a6420;
}

/* Mineral Support: calculated mineral filters control timeline markers + groups. */
.mineral-filter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
.mineral-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 800 10px/1.2 var(--font-ui);
  cursor: pointer;
}
.mineral-filter-toggle i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--mineral-colour);
  flex: none;
}
.mineral-filter-toggle[aria-pressed="false"] {
  opacity: 0.35;
  text-decoration: line-through;
  filter: saturate(0.35);
}
.mineral-filter-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}
.mineral-marker {
  background: var(--mineral-colour);
}
.mineral-marker.mineral-filtered {
  visibility: hidden;
  pointer-events: none;
}
.mineral-group {
  border-left-color: var(--mineral-colour, var(--accent));
}
.mineral-group.mineral-filtered {
  display: none;
}
/* Complete the shared support/challenge palette across result cards and windows. */
.forecast-event.supportive-strong,
.forecast-window.supportive-strong,
.forecast-priority.supportive-strong,
.forecast-result-card.supportive-strong,
.forecast-at-a-glance.supportive-strong,
.forecast-key-period.supportive-strong {
  border-left-color: var(--tone-strong-support);
}
.forecast-event.supportive,
.forecast-window.supportive,
.forecast-priority.supportive,
.forecast-result-card.supportive,
.forecast-at-a-glance.supportive,
.forecast-key-period.supportive {
  border-left-color: var(--tone-support);
}
.forecast-event.mixed,
.forecast-window.mixed,
.forecast-priority.mixed,
.forecast-result-card.mixed,
.forecast-at-a-glance.mixed,
.forecast-key-period.mixed {
  border-left-color: var(--tone-mixed);
}
.forecast-event.challenging,
.forecast-window.challenging,
.forecast-priority.challenging,
.forecast-result-card.challenging,
.forecast-at-a-glance.challenging,
.forecast-key-period.challenging {
  border-left-color: var(--tone-challenge);
}
.forecast-event.challenging-strong,
.forecast-window.challenging-strong,
.forecast-priority.challenging-strong,
.forecast-result-card.challenging-strong,
.forecast-at-a-glance.challenging-strong,
.forecast-key-period.challenging-strong {
  border-left-color: var(--tone-strong-challenge);
}
.birth-day-window.supportive-strong {
  border-left-color: var(--tone-strong-support);
}
.birth-day-window.supportive {
  border-left-color: var(--tone-support);
}
.birth-day-window.mixed {
  border-left-color: var(--tone-mixed);
}
.birth-day-window.challenging {
  border-left-color: var(--tone-challenge);
}
.birth-day-window.challenging-strong {
  border-left-color: var(--tone-strong-challenge);
}

/* Light theme uses the established darker bronze for readable accent text. */
html[data-theme="light"] .forecast-summary b,
html[data-theme="light"] .forecast-priority-rank,
html[data-theme="light"] .forecast-all-events > summary,
html[data-theme="light"] .forecast-month-group h5,
html[data-theme="light"] .forecast-mode-tabs .is-active,
html:not([data-theme="dark"]) .forecast-summary b,
html:not([data-theme="dark"]) .forecast-priority-rank,
html:not([data-theme="dark"]) .forecast-all-events > summary,
html:not([data-theme="dark"]) .forecast-month-group h5,
html:not([data-theme="dark"]) .forecast-mode-tabs .is-active {
  color: #8a6420;
}

/* 2026-09-18 post-QA: the light mobile flyout surface must not leak onto the
   desktop/tablet header action row. */
@media (min-width: 701px) {
  html[data-theme="light"] header .header-actions,
  html:not([data-theme="dark"]) header .header-actions {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* Forecast/Historic strongest-support/challenge summary cards use the same
   dark planet glyph treatment as the rest of the application. */

/* V0.01 2026-09-18 cosmetic polish. */
/* In Light mode the colour-filled planet/zodiac tiles provide enough edge
   definition on their own in Live Positions and Interpretation. */
html[data-theme="light"] #natalWorkspace .explorer-live-panel .celestial-badge,
html[data-theme="light"]
  #natalWorkspace
  .explorer-live-panel
  .live-zodiac-glyph,
html[data-theme="light"]
  #natalWorkspace
  .interpretation-symbol
  .celestial-badge,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .celestial-badge,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .live-zodiac-glyph,
html:not([data-theme="dark"])
  #natalWorkspace
  .interpretation-symbol
  .celestial-badge {
  border-color: transparent;
}
/* Wheel Lines is an interactive details summary, so centre its title. */
.explorer-wheel-legend-title {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* V0.01 2026-09-18 light-mode badge surround cleanup.
   The coloured celestial tile is the visual badge; remove the legacy pale
   square carried by its interpretation wrapper in Live Positions and Natal
   Interpretation. Dark mode remains unchanged. */
html[data-theme="light"]
  #natalWorkspace
  .explorer-live-panel
  .interpretation-symbol,
html[data-theme="light"]
  #natalWorkspace
  .interpretation-card
  .interpretation-symbol,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .interpretation-symbol,
html:not([data-theme="dark"])
  #natalWorkspace
  .interpretation-card
  .interpretation-symbol {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* V0.01 2026-09-18 celestial glyph weight cleanup.
   Planet symbols outside the SVG wheel use the natural glyph stroke rather
   than synthetic bold/text-shadow, keeping Moon/Mercury/etc legible. */
#natalWorkspace .celestial-badge,
#forecastModal .celestial-badge {
  font-weight: 400;
  text-shadow: none;
}
#natalWorkspace .celestial-badge .celestial-glyph,
#forecastModal .celestial-badge .celestial-glyph {
  font-weight: 500;
  text-shadow: none;
}

/* 24-hour wheel scrub: one full turn maps to the complete 24-hour timeline. */
.explorer-chart-stage .explorer-chart {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.explorer-chart-stage.is-wheel-scrubbing .explorer-chart {
  cursor: grabbing;
}

/* Natal-aware forecast interpretation layer */
.forecast-natal-context details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.forecast-natal-context summary {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}
.forecast-natal-context summary::-webkit-details-marker {
  display: none;
}
.forecast-natal-context summary:after {
  content: "⌄";
  float: right;
  color: var(--muted);
}
.forecast-natal-context details[open] summary:after {
  content: "⌃";
}
.forecast-natal-context-body {
  padding: 0 12px 11px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.6;
}
.forecast-natal-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.forecast-natal-context-grid > span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.forecast-natal-context-grid b {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.forecast-natal-context-chain,
.forecast-natal-value {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.forecast-natal-context-chain {
  font-weight: 800;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.forecast-natal-context .celestial-badge {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}
.forecast-natal-context .celestial-badge .celestial-glyph {
  font-size: 12px;
  line-height: 18px;
}
.forecast-natal-zodiac-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #9b36c5;
  color: #fff;
  font:
    700 12px/18px "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    sans-serif;
}
.forecast-natal-route-planet {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}
.forecast-natal-route-arrow,
.forecast-natal-separator,
.forecast-natal-orb {
  padding: 0;
  border: 0;
  background: transparent;
}
.forecast-natal-aspect-symbol {
  font-weight: 800;
}
@media (max-width: 600px) {
  .forecast-natal-context-grid {
    grid-template-columns: 1fr;
  }
}

/* v28: clearer natal Syncrota degree layout */
.forecast-natal-syncrota-value {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.forecast-natal-syncrota-sign {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
}
.forecast-natal-syncrota-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}
.forecast-natal-syncrota-row > strong {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}
.forecast-natal-syncrota-row > span {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.forecast-natal-final-text .celestial-badge {
  display: inline-flex;
  vertical-align: -4px;
  margin: 0 2px;
}
@media (max-width: 430px) {
  .forecast-natal-syncrota-row {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

/* v29: Forecast modal badge geometry correction.
   Keep title badges compact and context badges slightly smaller; scope only to forecast modal. */
#forecastModal .forecast-modal-title .celestial-badge {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  font-size: 12px;
  line-height: 18px;
  margin: 0 2px;
  border-radius: 4px;
}
#forecastModal .forecast-modal-title .celestial-badge .celestial-glyph {
  font-size: 12px;
  line-height: 18px;
}
#forecastModal .forecast-natal-context .celestial-badge {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  font-size: 11px;
  line-height: 16px;
  margin: 0;
  border-radius: 4px;
}
#forecastModal .forecast-natal-context .celestial-badge .celestial-glyph {
  font-size: 11px;
  line-height: 16px;
}
#forecastModal .forecast-natal-context .forecast-natal-zodiac-badge {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  font-size: 11px;
  line-height: 16px;
}

/* v31: readable evidence lists for house concentrations and dispositor routes. */
.interpretation-compact-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font-size: 12px;
  line-height: 1.45;
}
.interpretation-compact-list li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
.interpretation-compact-list li > b {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.interpretation-compact-list li > span {
  min-width: 0;
}
@media (max-width: 600px) {
  .interpretation-compact-list li {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

/* v32: keep compact evidence lists packed at the top of equal-height overview cards. */
.interpretation-compact-list {
  align-content: start;
}

/* v33: compact evidence alignment and consistent leading dispositor glyphs. */
.interpretation-overview > div {
  align-content: start;
}
.interpretation-route-glyph {
  display: inline-block;
  font-weight: normal;
  -webkit-text-stroke: 0.3px currentColor;
}

/* v34: iPad/WebKit birth date/time vertical alignment. Phone rules remain unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 601px) and (max-width: 1180px) and (pointer: coarse) {
    #birthDate,
    #birthTime {
      padding-top: 0;
      padding-bottom: 0;
    }
    #birthDate::-webkit-date-and-time-value,
    #birthTime::-webkit-date-and-time-value {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      margin: 0;
      padding: 0;
      line-height: normal;
    }
    #birthDate::-webkit-datetime-edit,
    #birthTime::-webkit-datetime-edit {
      display: flex;
      align-items: center;
      height: 100%;
      margin: 0;
      padding: 0;
      line-height: normal;
    }
  }
}

/* v34: align zodiac names and coordinates in Equal House cusps. */
.equal-house-table .house-cusp-value {
  display: grid;
  grid-template-columns: minmax(150px, auto) max-content;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  white-space: nowrap;
}
.equal-house-table .house-cusp-sign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.equal-house-table .house-cusp-coordinate {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .equal-house-table .house-cusp-value {
    grid-template-columns: minmax(125px, auto) max-content;
    column-gap: 6px;
  }
}

/* v34: align sign abbreviations and coordinates in Live positions. */
#natalWorkspace .live-body-value {
  display: grid;
  grid-template-columns: 32px max-content max-content;
  align-items: center;
  justify-content: start;
  column-gap: 4px;
}
#natalWorkspace .live-sign-name {
  display: inline-block;
  min-width: 0;
}
#natalWorkspace .live-coordinate {
  font-variant-numeric: tabular-nums;
}
#natalWorkspace .live-house {
  white-space: nowrap;
}
#natalWorkspace .explorer-fullscreen .live-body-value {
  display: grid;
}
@media (min-width: 1101px) {
  #natalWorkspace .explorer-fullscreen .live-body-value {
    grid-template-columns: 62px max-content max-content;
  }
}

/* v37: coordinate columns and consistent Live Positions layout. */
.coordinate-grid {
  display: grid;
  align-items: center;
  justify-content: start;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coordinate-grid-dms {
  grid-template-columns: 34px 34px 34px;
  column-gap: 2px;
}
.classical-bodies-table .coordinate-grid-dms {
  min-width: 104px;
}
.equal-house-table .house-cusp-coordinate.coordinate-grid-dms {
  grid-template-columns: 34px 34px 34px;
  column-gap: 2px;
}

/* Live Positions: use one readable structure in normal and full-screen views. */
#natalWorkspace .explorer-live-panel .explorer-angles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-bottom: 7px;
}
#natalWorkspace .explorer-live-panel .live-angle-row {
  display: grid;
  grid-template-columns: 24px 20px 64px 34px 34px;
  align-items: center;
  justify-content: start;
  column-gap: 3px;
  font-size: 12px;
  line-height: 1.25;
}
#natalWorkspace .explorer-live-panel .live-angle-row > b {
  font-size: 12px;
}
#natalWorkspace .explorer-live-panel .live-angle-sign {
  display: inline;
  min-width: 0;
}
#natalWorkspace .explorer-live-panel .explorer-planets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
#natalWorkspace .explorer-live-panel .live-body-row {
  display: grid;
  grid-template-columns: 24px 20px minmax(64px, 76px) 34px 34px 34px;
  align-items: center;
  justify-content: start;
  column-gap: 3px;
  min-width: 0;
}
#natalWorkspace .explorer-live-panel .live-body-value {
  display: contents;
}
#natalWorkspace .explorer-live-panel .live-sign-name {
  display: block;
  min-width: 0;
}
#natalWorkspace .explorer-live-panel .live-zodiac-full {
  display: inline;
}
#natalWorkspace .explorer-live-panel .live-zodiac-short {
  display: none;
}
#natalWorkspace .explorer-live-panel .live-degree,
#natalWorkspace .explorer-live-panel .live-minute,
#natalWorkspace .explorer-live-panel .live-house {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Full-screen must use the same readable single-column Live Positions grid. */
#natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
  grid-template-columns: 1fr;
}
#natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
  grid-template-columns: 1fr;
}
#natalWorkspace .explorer-fullscreen .explorer-live-panel .live-angle-row {
  grid-template-columns: 24px 20px 64px 34px 34px;
}
#natalWorkspace .explorer-fullscreen .explorer-live-panel .live-body-row {
  grid-template-columns: 24px 20px minmax(64px, 76px) 34px 34px 34px;
}

@media (max-width: 600px) {
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 22px 18px 34px 31px 31px;
    font-size: 11px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row > b {
    font-size: 11px;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 22px 18px 34px 31px 31px 31px;
    font-size: 11px;
  }
  #natalWorkspace .explorer-live-panel .live-zodiac-full {
    display: none;
  }
  #natalWorkspace .explorer-live-panel .live-zodiac-short {
    display: inline;
  }
}

/* v39: compact mobile Live Positions and Equal House cusp layout. */
@media (max-width: 700px) {
  /* Always leave a visible gap between the zodiac badge and sign text. */
  #natalWorkspace .explorer-live-panel .live-angle-row,
  #natalWorkspace .explorer-live-panel .live-body-row {
    column-gap: 4px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-sign,
  #natalWorkspace .explorer-live-panel .live-sign-name {
    padding-left: 2px;
  }

  /* Keep the mobile list compact while preserving aligned sign/degree/minute/house columns. */
  #natalWorkspace .explorer-live-panel {
    padding: 10px 12px;
  }
  #natalWorkspace .explorer-live-panel h4 {
    margin: 0 0 6px;
  }
  #natalWorkspace .explorer-live-panel .explorer-angles {
    gap: 1px !important;
    margin-bottom: 4px;
  }
  #natalWorkspace .explorer-live-panel .explorer-planets {
    gap: 1px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 22px 18px 31px 29px 29px;
    min-height: 18px;
    font-size: 11px;
    line-height: 1.1;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 22px 18px 31px 29px 29px 29px;
    min-height: 22px;
    font-size: 11px;
    line-height: 1.1;
  }
  #natalWorkspace .explorer-live-panel .live-body-glyph .celestial-badge,
  #natalWorkspace .explorer-live-panel .live-zodiac-glyph,
  #natalWorkspace .explorer-live-panel .live-angle-zodiac {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
  }

  /* Equal House: stack zodiac name under its badge and reclaim width for coordinates/bodies. */
  #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: 9%;
  }
  #natalWorkspace .equal-house-table th:nth-child(2),
  #natalWorkspace .equal-house-table td:nth-child(2) {
    width: 49%;
  }
  #natalWorkspace .equal-house-table th:nth-child(3),
  #natalWorkspace .equal-house-table td:nth-child(3) {
    width: 42%;
  }
  #natalWorkspace .equal-house-table .house-cusp-value {
    display: grid;
    grid-template-columns: 62px minmax(88px, 1fr);
    align-items: center;
    column-gap: 5px;
    white-space: normal;
  }
  #natalWorkspace .equal-house-table .house-cusp-sign {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.05;
  }
  #natalWorkspace .equal-house-table .house-cusp-sign .natal-sign-symbol {
    display: block;
  }
  #natalWorkspace
    .equal-house-table
    .house-cusp-coordinate.coordinate-grid-dms {
    grid-template-columns: 28px 28px 28px;
    column-gap: 1px;
    min-width: 86px;
  }
  #natalWorkspace .equal-house-table td:nth-child(3) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* v40: mobile portrait Live Positions — two items per row to reduce height. */
@media (max-width: 700px) and (orientation: portrait) {
  #natalWorkspace .explorer-live-panel .explorer-angles,
  #natalWorkspace .explorer-live-panel .explorer-planets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 2px;
  }
  #natalWorkspace .explorer-live-panel .explorer-angles {
    margin-bottom: 5px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 20px 18px minmax(44px, 1fr) 25px 25px;
    column-gap: 2px;
    min-width: 0;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 20px 18px minmax(25px, 1fr) 25px 25px 27px;
    column-gap: 2px;
    min-width: 0;
  }
  #natalWorkspace .explorer-live-panel .live-angle-sign,
  #natalWorkspace .explorer-live-panel .live-sign-name {
    padding-left: 2px;
  }
}

/* 2026-09-20: align full-width event markers to the actual range track.
   The range control is 16px high, so its visual centre is 8px from the top.
   Move the marker overlay itself to that centre line; marker translation then
   centres each coloured point inside the 18px gold playhead. */
.explorer-timeline-desktop > .explorer-markers {
  top: 8px;
}
.explorer-timeline-desktop > .explorer-markers .explorer-marker {
  top: 0;
  margin-top: 0;
  transform: translate(-50%, -50%);
}

/* 2026-09-20: final event-point visual tuning.
   Desktop/tablet full-width player: lower marker centre 2px within the track.
   Touch landscape: explicitly apply the same in-track marker positioning,
   overriding older landscape/full-screen rules that kept markers below it. */
@media (min-width: 769px) {
  .explorer-timeline-desktop > .explorer-markers {
    top: 10px;
  }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .explorer-timeline-desktop > .explorer-markers {
    top: 10px;
  }
  .explorer-timeline-desktop > .explorer-markers .explorer-marker {
    top: 0;
    margin-top: 0;
    transform: translate(-50%, -50%);
  }
}

/* 2026-09-20: final non-full-screen mobile-landscape event-marker alignment.
   Full-screen landscape and portrait are already correct. Target only the
   normal mobile-landscape workspace and place the marker overlay on the same
   in-track centre used by the corrected full-screen layout. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-timeline-desktop
    > .explorer-markers {
    top: 10px;
  }
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-timeline-desktop
    > .explorer-markers
    .explorer-marker {
    top: 0;
    margin-top: 0;
    transform: translate(-50%, -50%);
  }
}

/* 2026-09-20: normal mobile landscape uses the TWO-ROW mobile timeline,
   not .explorer-timeline-desktop. Match the already-correct portrait
   in-track marker position on those two half timelines. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-mobile-timeline
    .explorer-timeline-half
    .explorer-markers {
    top: 10px;
  }
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-mobile-timeline
    .explorer-timeline-half
    .explorer-marker {
    top: 0;
    margin-top: 0;
    transform: translate(-50%, -50%);
  }
}

/* 2026-09-20: mobile-landscape final polish.
   1. Use the same 8px vertical marker centre as the working portrait player.
   2. Keep the wheel metadata rail compact in normal landscape.
   3. In fullscreen landscape, anchor the metadata rail at the visual area's
      top-left with a little clearance below the timeline. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  /* Single-line fullscreen timeline. */
  #natalWorkspace .explorer-timeline-desktop > .explorer-markers {
    top: 8px;
  }

  /* Two-line normal landscape timeline. */
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-mobile-timeline
    .explorer-timeline-half
    .explorer-markers {
    top: 8px;
    left: 9px;
    right: 9px;
  }

  #natalWorkspace
    .explorer-timeline-desktop
    > .explorer-markers
    .explorer-marker,
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-mobile-timeline
    .explorer-timeline-half
    .explorer-marker {
    top: 0;
    margin-top: 0;
    transform: translate(-50%, -50%);
  }

  /* Normal landscape: smaller legend so it stays clear of the wheel. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    max-width: 27%;
    gap: 3px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta
    .explorer-event-legend {
    gap: 1px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta
    .explorer-event-legend
    button {
    min-height: 15px;
    padding: 0 1px;
    font-size: 12px;
    line-height: 1;
  }

  /* Fullscreen landscape: keep point info first, legend immediately below,
     both at the top-left of the wheel section rather than up by the timeline. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta {
    left: 0;
    top: 6px;
    right: auto;
    bottom: auto;
    max-width: 27%;
    gap: 3px;
    align-items: flex-start;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend {
    gap: 2px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    button {
    min-height: 17px;
    padding: 1px 2px;
    font-size: 12px;
    line-height: 1;
  }
}

/* 2026-09-20: corrected landscape timeline + mobile-landscape visual layout.
   Horizontal marker positions now use the same thumb-centre geometry as the
   working portrait timeline: the marker rail is inset by half the 18px thumb.
   This prevents the increasing left/right error towards the ends of the range. */
#natalWorkspace .explorer-timeline-desktop > .explorer-markers {
  left: 9px;
  right: 9px;
}

/* Mobile landscape: make metadata, wheel and Live Positions real grid columns.
   Do not float the metadata over the wheel. This is deliberately shared by
   normal and fullscreen landscape so both views use one layout model. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    display: grid;
    grid-template-columns: minmax(118px, 26%) minmax(0, 42%) minmax(145px, 32%);
    align-items: start;
    column-gap: 6px;
    position: relative;
    padding-top: 0;
  }

  #natalWorkspace .birth-time-explorer .explorer-visual-meta {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 3px 0 0;
    padding: 0;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: auto;
  }

  #natalWorkspace .birth-time-explorer .explorer-shared-chart {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: start;
    justify-self: center;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    align-self: start;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    position: static;
    inset: auto;
    width: max-content;
    max-width: 100%;
    margin: 0;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend
    button {
    width: auto;
    min-height: 15px;
    padding: 0 1px;
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-paused-event {
    font-size: 8px;
    line-height: 1.1;
  }
}

/* Very short phone landscapes need an even tighter left rail. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 430px) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    grid-template-columns: minmax(105px, 24%) minmax(0, 43%) minmax(135px, 33%);
    column-gap: 4px;
  }
}

/* Shared player/event marker centring.
   The 18px range thumb centre travels from 9px to width-9px. */
#natalWorkspace .explorer-markers,
#natalWorkspace .explorer-markers-first,
#natalWorkspace .explorer-markers-second {
  --player-thumb-radius: 9px;
  left: 0;
  right: 0;
}
#natalWorkspace .explorer-marker {
  left: calc(
    var(--player-thumb-radius) + (100% - (2 * var(--player-thumb-radius))) *
      var(--marker-p)
  );
}

/* 2026-09-20: final event-marker alignment correction.
   The marker button is already centred on its left coordinate by the existing
   transform, so do not add half the player-thumb width again. */
#natalWorkspace .explorer-marker {
  left: calc(100% * var(--marker-p));
  top: 2px;
}

/* 2026-09-20: final timeline/mobile-landscape polish.
   Marker: nudge 1px right and ensure the requested vertical nudge wins over
   older mode-specific marker rules. */
#natalWorkspace .explorer-marker {
  transform: translate(calc(-50% + 1px), 3px);
  top: 0;
}

/* Mobile landscape: keep the paused-event pill readable rather than clipping
   its text inside a fixed/narrow box. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #natalWorkspace .explorer-paused-event {
    width: max-content;
    max-width: min(52vw, 460px);
    min-width: 0;
    height: auto;
    min-height: 24px;
    overflow: visible;
    white-space: nowrap;
  }
  #natalWorkspace .explorer-paused-event .explorer-paused-event-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Wheel-side information belongs in the left column in landscape full screen.
     Explicit grid placement prevents older absolute/centre positioning rules
     from pulling the legend alongside/over the wheel. */
  #natalWorkspace.explorer-fullscreen .explorer-wheel-stage {
    position: relative;
  }
  #natalWorkspace.explorer-fullscreen .explorer-wheel-side-info {
    grid-column: 1;
    justify-self: start;
    align-self: start;
    left: auto;
    right: auto;
    margin-left: 0;
    transform: none;
  }
}

/* 2026-09-20: timeline marker geometry reset.
   Portrait was already correct, so restore its established marker placement.
   Landscape gets its own horizontal correction instead of sharing a global nudge. */
#natalWorkspace .explorer-marker {
  transform: translate(-50%, 2px);
  top: 0;
}

/* Landscape uses a single-line 24h range. Its native range thumb travels
   between half-thumb insets, while marker percentages are measured across
   the full rail. Map the event fraction onto that same thumb-centre travel.
   Keep this completely separate from the proven two-line portrait timeline. */
@media (orientation: landscape) {
  #natalWorkspace .explorer-timeline-desktop > .explorer-markers {
    --timeline-thumb-radius: 9px;
    left: 0;
    right: 0;
  }
  #natalWorkspace
    .explorer-timeline-desktop
    > .explorer-markers
    .explorer-marker {
    left: calc(
      var(--timeline-thumb-radius) +
        (100% - (2 * var(--timeline-thumb-radius))) * var(--marker-p)
    );
    transform: translate(-50%, 2px);
  }
}

/* Portrait keeps the simple percentage model that was already visually correct. */
@media (orientation: portrait) {
  #natalWorkspace .explorer-marker {
    left: calc(100% * var(--marker-p));
    transform: translate(-50%, 2px);
  }
}

/* RESTORE: exact previously-working mobile portrait marker rules. */
/* 2026-09-20: restore the proven mobile-portrait marker layout.
   Portrait markers sit vertically centred in the bar and use the original
   percentage coordinate that previously centred correctly in the player ball. */
@media (orientation: portrait) and (max-width: 600px) {
  #natalWorkspace .explorer-markers-first .explorer-marker,
  #natalWorkspace .explorer-markers-second .explorer-marker {
    left: calc(100% * var(--marker-p));
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* 2026-09-20: marker placement is now measured from the actual rendered range
   input in JS. This replaces percentage/viewport-specific centring guesses.
   Keep the point inside the bar, 2px above its geometric vertical centre. */
#natalWorkspace .explorer-marker {
  top: 50%;
  margin: 0;
  transform: translate(-50%, calc(-50% - 2px));
}

/* 2026-09-20: final marker vertical-position polish.
   Horizontal centring remains entirely controlled by the shared DOM-geometry
   calculation in natal-explorer.js. These rules adjust Y position only. */

/* Desktop/tablet/default: lift markers into the centre of the timeline bar. */
#natalWorkspace .explorer-marker {
  transform: translate(-50%, calc(-50% - 5px));
}

/* Phone portrait, normal and full-screen: a little higher again. */
@media (max-width: 600px) and (orientation: portrait) {
  #natalWorkspace .explorer-marker {
    transform: translate(-50%, calc(-50% - 7px));
  }
}

/* Phone landscape, non-full-screen: slightly lower than the default. */
@media (max-height: 500px) and (orientation: landscape) {
  #natalWorkspace:not(.explorer-fullscreen) .explorer-marker {
    transform: translate(-50%, calc(-50% - 3px));
  }
}

/* 2026-09-20: marker Y-position follow-up.
   X positioning/DOM-geometry centring is deliberately untouched. */

/* Desktop (full + non-full): lift the points further into the bar. */
@media (min-width: 901px) {
  #natalWorkspace .explorer-marker {
    transform: translate(-50%, calc(-50% - 9px));
  }
}

/* Mobile landscape, non-full-screen: lower points by a further 2px. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #natalWorkspace:not(.explorer-fullscreen) .explorer-marker {
    transform: translate(-50%, calc(-50% - 1px));
  }
}

/* 2026-09-20: measure marker Y from the ACTUAL rendered range bar as well as X.
   This intentionally supersedes all older fixed .explorer-markers top offsets.
   Device-specific changes below are only tiny visual nudges from the true bar centre. */
#natalWorkspace .explorer-marker {
  margin: 0;
  transform: translate(-50%, calc(-50% + var(--marker-y-nudge, 0px)));
  --marker-y-nudge: 0px;
}

/* Phone portrait: requested slightly higher in the bar. */
@media (max-width: 600px) and (orientation: portrait) {
  #natalWorkspace .explorer-marker {
    --marker-y-nudge: -3px;
  }
}

/* Phone landscape, non-full-screen: requested slightly lower. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #natalWorkspace:not(.explorer-fullscreen) .explorer-marker {
    --marker-y-nudge: 2px;
  }
}

/* 2026-09-20: clean mobile landscape fullscreen override.
   Keep the explorer in its normal DOM location. The current JS already moves
   the paused-event + legend into .explorer-visual-grid in landscape, so the
   historic 92px fullscreen legend rail must not participate in layout. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen:fullscreen,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 4px;
    overflow: hidden;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-control-dock {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(105px, 24%) minmax(0, 43%) minmax(135px, 33%);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 4px;
    align-items: start;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 3px 0 0;
    padding: 0;
    transform: none;
    align-self: start;
    justify-self: stretch;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    align-self: start;
    justify-self: center;
    overflow: visible;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: visible;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    align-self: start;
  }

  /* Old fullscreen rules treated the legend as a direct child of the outer
     explorer grid. It now lives inside .explorer-visual-meta. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }
}

/* 2026-09-20: real iPhone Safari landscape fullscreen outer sizing.
   Safari can preserve the pre-fullscreen containing-block width even though
   the visual viewport is landscape. JS supplies visualViewport dimensions. */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) and (max-height: 500px) {
    #natalWorkspace {
      contain: none;
      transform: none;
      perspective: none;
      filter: none;
    }

    #natalWorkspace .birth-time-explorer.explorer-fullscreen,
    #natalWorkspace .birth-time-explorer.explorer-fullscreen:fullscreen,
    #natalWorkspace
      .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
      box-sizing: border-box;
      width: var(--explorer-vw, 100dvw);
      min-width: var(--explorer-vw, 100dvw);
      max-width: var(--explorer-vw, 100dvw);
      height: var(--explorer-vh, 100dvh);
      min-height: var(--explorer-vh, 100dvh);
      max-height: var(--explorer-vh, 100dvh);
      margin: 0;
      left: 0;
      right: auto;
    }
  }
}

/* Compact paused-event panel: allow the background to cover the whole text. */
@media (orientation: landscape) and (max-height: 500px) {
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    width: max-content;
    max-width: min(100%, 420px);
    box-sizing: border-box;
  }
}

/* 2026-09-20 real-iPhone landscape fullscreen reset.
   The normal mobile-landscape layout is known-good, so fullscreen deliberately
   reuses that exact visual-grid model instead of maintaining a second one. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 500px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen:fullscreen,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-control-dock {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(105px, 24%) minmax(0, 43%) minmax(135px, 33%);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 4px;
    align-items: start;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 3px 0 0;
    padding: 0;
    transform: none;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
}

/* 2026-09-20 real iPhone fix, revision 2.
   IMPORTANT: do not depend on orientation/max-height media queries here.
   iOS Safari can keep stale portrait media-query dimensions after entering
   native fullscreen. JS adds .explorer-ios-landscape-fullscreen BEFORE the
   fullscreen request while the known-good normal landscape dimensions exist. */
#natalWorkspace
  .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen,
#natalWorkspace
  .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen:fullscreen,
#natalWorkspace
  .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen:-webkit-full-screen {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 0;
  width: 100%;
  min-width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 4px;
  overflow: hidden;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-control-dock {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-visual-grid {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(105px, 24%) minmax(0, 43%) minmax(135px, 33%);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: start;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-visual-meta {
  position: static;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 3px 0 0;
  padding: 0;
  transform: none;
  align-self: start;
  justify-self: stretch;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-shared-chart {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: visible;
  align-self: start;
  justify-self: center;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-live-panel {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 2px;
  overflow: visible;
  align-self: start;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .natal-chart-wrap,
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-chart-stage {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

/* Ensure the pause message background grows with its text. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-paused-event {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* 2026-09-20: physical-iPhone landscape fullscreen polish only.
   The explicit class is added only for touch + landscape fullscreen, so these
   changes do not affect portrait, desktop or normal landscape mode. */

/* Give the whole lower visual area breathing room below the timeline. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-visual-grid {
  padding-top: 10px;
}

/* Larger/easier-to-read legend in the left column. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend {
  font-size: 13px;
  line-height: 1.45;
  gap: 6px;
}

#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend
  .legend-swatch,
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend
  i,
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend
  span[class*="swatch"] {
  width: 11px;
  height: 11px;
  min-width: 11px;
}

/* Let the paused-point/info pill background extend comfortably past its text. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-paused-event {
  width: max-content;
  min-width: 230px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 14px;
}

/* 2026-09-20: iPhone landscape fullscreen space rebalance.
   Keep this isolated to the explicit real-device landscape-fullscreen class. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-control-dock {
  margin-bottom: 0;
  padding-bottom: 2px;
}

/* The long local/UTC stamp is not useful in this compact landscape view.
   Removing it gives the wheel area a little more vertical room. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-time-row {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 9px;
  line-height: 1;
}
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-time-row
  .explorer-time {
  display: none;
}
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-control-dock
  .explorer-timeline {
  margin-top: 2px;
  margin-bottom: 0;
}

/* Reallocate width toward the chart: compact meta column, larger wheel,
   while retaining enough width for the existing Live Positions layout. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-visual-grid {
  grid-template-columns: minmax(175px, 21%) minmax(0, 49%) minmax(230px, 30%);
  column-gap: 5px;
  padding-top: 6px;
}

/* Make the event legend genuinely larger. Earlier generic landscape rules
   set the buttons themselves to 8px, so override the buttons directly. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend {
  gap: 5px;
  padding-top: 2px;
}
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend
  button {
  min-height: 25px;
  padding: 3px 4px;
  font-size: 11px;
  line-height: 1.2;
  gap: 5px;
}
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-event-legend
  i {
  width: 10px;
  height: 10px;
  min-width: 10px;
}

/* Use all of the enlarged middle column for the wheel. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-shared-chart,
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .natal-chart-wrap,
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-chart-stage {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .natal-chart {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Preserve Live Positions readability in its slightly narrower column. */
#natalWorkspace
  .explorer-fullscreen.explorer-ios-landscape-fullscreen
  .explorer-live-panel {
  padding: 1px 0 0 4px;
}

/* 2026-09-20: phone-only natal wheel readability.
   Applies to real touch phones in portrait + landscape, normal + fullscreen.
   Deliberately affects only labels/glyphs drawn ON the wheel; Live Positions,
   timeline, desktop and tablet layouts are unchanged. */
@media (hover: none) and (pointer: coarse) and (max-width: 950px) {
  /* Zodiac glyphs around the outer ring. */
  #natalWorkspace .birth-time-explorer .explorer-chart .chart-sign {
    font-size: 34px;
    font-weight: 700;
  }

  /* House numbers inside the wheel. */
  #natalWorkspace .birth-time-explorer .explorer-chart .chart-house {
    font-size: 17px;
    font-weight: 800;
  }

  /* AC / DC / MC / IC labels around the wheel. */
  #natalWorkspace .birth-time-explorer .explorer-chart .chart-angle {
    font-size: 16px;
    font-weight: 900;
  }

  /* Planet badges/glyphs on the wheel.  Enlarge the coloured disc and glyph
     together so the symbol remains centred and visually balanced. */
  #natalWorkspace .birth-time-explorer .explorer-chart .chart-planet-dot {
    r: 20px;
  }

  #natalWorkspace .birth-time-explorer .explorer-chart .chart-planet {
    font-size: 31px;
    font-weight: 700;
  }
}

/* 2026-09-20 v2: stronger phone wheel readability.
   The first pass was too subtle on the rendered SVG.  These selectors target
   the actual SVG children directly and deliberately apply only to touch phones. */
@media (hover: none) and (pointer: coarse) and (max-width: 950px) {
  #natalWorkspace .explorer-chart text.chart-sign {
    font-size: 44px;
    font-weight: 800;
  }

  #natalWorkspace .explorer-chart text.chart-house {
    font-size: 23px;
    font-weight: 900;
  }

  #natalWorkspace .explorer-chart text.chart-angle {
    font-size: 22px;
    font-weight: 900;
  }

  #natalWorkspace .explorer-chart circle.chart-planet-dot {
    r: 23px;
  }

  #natalWorkspace .explorer-chart text.chart-planet {
    font-size: 38px;
    font-weight: 800;
  }

  /* Give the top MC label breathing room below the timeline/divider. */
  #natalWorkspace .explorer-chart-stage {
    padding-top: 14px;
    box-sizing: border-box;
  }
}

/* 2026-09-20: fullscreen orientation-change repair for iPhone Safari.
   JS refreshes the explicit landscape class and live visual-viewport dimensions
   after rotation so portrait and landscape never retain one another's geometry. */
#natalWorkspace .birth-time-explorer.explorer-fullscreen {
  max-width: var(--explorer-live-vw, 100%);
}
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    width: 100%;
    max-width: 100%;
  }
}

/* 2026-09-21: tablet/iPad 24h viewer layout foundation.
   The wheel owns the true horizontal centre of the viewer.  Metadata and Live
   Positions occupy independent side rails and therefore cannot push the wheel
   away from centre.  Phone rules are deliberately excluded by min-height. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 56%) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 0;
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
  }

  #natalWorkspace .birth-time-explorer .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    z-index: 1;
  }

  #natalWorkspace .birth-time-explorer .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    grid-column: 1;
    grid-row: 1;
    position: static;
    inset: auto;
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
    z-index: 2;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    grid-column: 3;
    grid-row: 1;
    position: static;
    inset: auto;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    transform: none;
    z-index: 2;
  }

  /* Fullscreen has enough width to make the centred wheel the dominant item,
     while its height still constrains the SVG through object-fit:contain. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 60%) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage {
    height: 100%;
    min-height: 0;
  }
}

/* Tablet portrait has less side-rail width.  Keep the wheel exactly centred,
   but use a slightly narrower centre lane so neither side rail can cover it. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 54%) minmax(0, 1fr);
  }
}

/* 2026-09-21: iPad/tablet fullscreen centre-axis correction.
   Normal tablet layout is intentionally left alone. In fullscreen the chart
   is taken out of the side-rail sizing equation and centred on the exact
   viewer/timeline midpoint; metadata and Live Positions float independently. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-grid {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    position: absolute;
    left: 50%;
    right: auto;
    top: 0;
    width: min(60vw, 100%);
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    transform: translateX(-50%);
    z-index: 1;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    width: 20%;
    max-width: 20%;
    margin: 0;
    transform: none;
    z-index: 3;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    width: 20%;
    max-width: 20%;
    margin: 0;
    transform: none;
    z-index: 3;
  }
}

/* Portrait iPad has less useful side width. The wheel remains on the same
   50% axis; side content may be refined independently in the next pass. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    width: min(68vw, 100%);
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    width: 16%;
    max-width: 16%;
  }
}

/* 2026-09-21: tablet timeline centre-axis.
   Do not rely on space-between for the centre labels: pin the middle label of
   each 12h row to the exact 50% axis. The one-line timeline's Input time is
   pinned to that same axis. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-half-scale {
    position: relative;
    display: block;
    min-height: 1em;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span {
    position: absolute;
    top: 0;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:first-child {
    left: 0;
    transform: none;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-half-scale
    > span:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:last-child {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
  }

  #natalWorkspace .birth-time-explorer .explorer-scale {
    position: relative;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-scale
    > .explorer-scale-centre {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* 2026-09-21: tablet timeline label geometry correction.
   Each half-scale uses three equal columns. This makes the centre label's
   centre exactly 50% of the player regardless of the text widths of
   "Input time", "-6h" or "+6h". */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-half-scale {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    width: 100%;
    min-height: 1em;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    transform: none;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:first-child {
    justify-self: start;
    text-align: left;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-half-scale
    > span:nth-child(2) {
    justify-self: center;
    text-align: center;
  }
  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:last-child {
    justify-self: end;
    text-align: right;
  }
}

/* 2026-09-21: tablet/iPad visual-layout pass 2.
   Keep the now-correct timeline/wheel centre axis. On tablets the event legend
   is always a horizontal strip, and Live Positions is positioned independently
   so it cannot participate in or disturb wheel centring. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  /* Event legend: one horizontal tablet row in normal and fullscreen modes. */
  #natalWorkspace .birth-time-explorer .explorer-event-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-event-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 3px 0 5px;
    white-space: nowrap;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-event-legend
    .explorer-event-toggle {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  /* In normal tablet mode the metadata wrapper must span the visual area.
     This removes the old narrow left rail and lets the wheel rise naturally. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    max-width: none;
    column-gap: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    transform: none;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 0;
  }

  /* Fullscreen metadata becomes a strip directly below the player rather than
     occupying a left side rail. The chart remains absolutely centred at 50%. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    transform: none;
    z-index: 4;
  }

  /* Reserve a compact top strip for the horizontal legend before the wheel. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    top: 24px;
    height: calc(100% - 24px);
  }

  /* Live Positions is an independent right overlay. It may use the free side
     space, but never changes the chart's 50% centre-axis calculation. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    position: absolute;
    left: auto;
    right: 8px;
    top: 28px;
    width: clamp(150px, 22%, 210px);
    max-width: calc(50% - 235px);
    min-width: 145px;
    margin: 0;
    transform: none;
    z-index: 5;
    overflow: visible;
  }
}

/* Tablet portrait: Live Positions has less useful side width. Keep it compact
   for this pass; wheel centring remains untouched. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    right: 6px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
}

/* Tablet landscape has enough side room for the complete Live Positions rows. */
@media (hover: none) and (pointer: coarse) and (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    right: 10px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }
}

/* 2026-09-21: tablet legend parent-width correction.
   The legend itself was already flex-row; the remaining problem was that its
   .explorer-visual-meta parent was still constrained by older side-rail rules.
   Give that parent a genuine full-width strip in every tablet mode. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend
    > * {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  /* Normal tablet mode: metadata is a real first grid row spanning the complete
     visual grid; chart follows beneath it. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    inset: auto;
    justify-self: stretch;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    grid-row: 2;
  }

  /* Fullscreen: same full-width strip, absolutely anchored above the visual
     area while leaving the established 50% chart centre untouched. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    inset-inline: 0;
    z-index: 6;
  }
}

/* 2026-09-21: fullscreen tablet portrait Live Positions horizontal compaction.
   The portrait overlay is intentionally only 150px wide, so use tighter sign
   and coordinate columns here. Landscape and non-fullscreen layouts are left
   unchanged. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 20px 18px 32px 22px 22px;
    column-gap: 1px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 20px 18px 32px 22px 22px 22px;
    column-gap: 1px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-sign,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-sign-name {
    padding-left: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-full {
    display: none;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-short {
    display: inline;
  }
}

/* 2026-09-21: fullscreen tablet portrait Live Positions — show full zodiac names.
   Give the overlay enough width for the full sign name while keeping the
   compact coordinate columns that prevent the house value being clipped. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 20px 18px 48px 22px 22px;
    column-gap: 2px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 20px 18px 48px 22px 22px 22px;
    column-gap: 2px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-full {
    display: inline;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-short {
    display: none;
  }
}

/* 2026-09-21: fullscreen tablet portrait — visible breathing room between
   the zodiac badge and the full zodiac name. Scoped to this layout only. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-sign,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-sign-name {
    padding-left: 3px;
    box-sizing: border-box;
  }
}

/* 2026-09-21: all tablet Live Positions use full zodiac names.
   This intentionally overrides the older 701-850px compact-name rule in
   natal-layout.css for portrait/landscape and normal/fullscreen tablet modes. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-full {
    display: inline;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-short {
    display: none;
  }

  /* Keep a small, consistent gap between the zodiac badge and sign name. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-angle-sign,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-sign-name {
    padding-left: 3px;
    box-sizing: border-box;
  }
}

/* 2026-09-21: fullscreen tablet portrait — add a little more breathing room
   between the zodiac badge and full zodiac name. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-sign,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-sign-name {
    padding-left: 5px;
  }
}

/* 2026-09-21: final tablet fullscreen landscape polish.
   - Legend is a full-width strip at the top of the wheel area.
   - Live Positions grows with the spare right-hand space, without moving the wheel.
   - The wheel remains pinned to the exact 50% axis in both tablet orientations. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  /* The JS moves this metadata wrapper into .explorer-visual-grid in landscape
     fullscreen. Keeping it full width makes the legend span the wheel area. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    z-index: 6;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-event-legend {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 2px 4px 5px;
    box-sizing: border-box;
    gap: 10px;
    white-space: nowrap;
  }

  /* Reserve the legend strip above the chart without changing its horizontal centre. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    top: 24px;
    height: calc(100% - 24px);
  }

  /* Adaptive overlay: Mini stays compact; Pro can use more of its otherwise
     empty right rail. Because this is absolute, its width never pushes the wheel. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    right: 8px;
    top: 28px;
    width: clamp(190px, 20vw, 270px);
    min-width: 190px;
    max-width: 270px;
    box-sizing: border-box;
    overflow: visible;
  }

  /* Give full sign names a useful column while coordinates keep compact,
     predictable widths. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 20px 18px minmax(58px, 1fr) 28px 28px;
    column-gap: 3px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 20px 18px minmax(58px, 1fr) 28px 28px 28px;
    column-gap: 3px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-full {
    display: inline;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-short {
    display: none;
  }
}

/* 2026-09-21: tablet fullscreen landscape final vertical spacing.
   Drop the top legend slightly below the timeline and move the chart down
   enough that the wheel's MC label cannot sit behind the centre Input time. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta {
    top: 6px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    top: 34px;
    height: calc(100% - 34px);
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    top: 38px;
  }
}

/* 2026-09-21: tablet fullscreen landscape legend typography.
   Match the readable portrait-fullscreen legend without changing its position. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-event-legend {
    font-size: 9px;
    line-height: 1.25;
    margin-top: 10px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    .explorer-event-toggle,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    .explorer-event-toggle {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    gap: 4px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    i,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    i {
    width: 8px;
    height: 8px;
    min-width: 8px;
  }
}

/* 2026-09-21: tablet fullscreen paused/event info bar polish.
   Add breathing room above the info bar and match its text size to the
   13px fullscreen event legend. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-info,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-info {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.25;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-info
    *,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-info
    * {
    font-size: 13px;
    line-height: 1.25;
  }
}

/* 2026-09-21: tablet event info bar — actual rendered DOM.
   The visible bar is .explorer-paused-event, not .explorer-paused-info. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  #natalWorkspace .birth-time-explorer .explorer-paused-event,
  #natalWorkspace .birth-time-explorer .explorer-paused-event-items,
  #natalWorkspace .birth-time-explorer .explorer-paused-event-item,
  #natalWorkspace .birth-time-explorer .explorer-paused-event-item span,
  #natalWorkspace .birth-time-explorer .explorer-paused-event-item b {
    font-size: 13px;
    line-height: 1.25;
  }
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    margin-top: -3px;
  }
}

/* Normal tablet landscape: keep the info bar in flow below the timeline and
   above the AC/House/Moon/Aspect legend, never over the Natal Chart heading. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-paused-event {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    margin: 6px 0 3px;
    align-self: stretch;
    z-index: auto;
  }
}

/* 2026-09-21: tablet paused-event final placement/spacing.
   Fullscreen placement is already correct: only add clearance above.
   Normal landscape has a reserved visual-meta slot below the timeline; place
   the paused event there rather than in normal document flow above controls. */

/* Fullscreen portrait + landscape: retain current position/font, add top gap. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event {
    margin-top: 13px;
  }
}

/* Normal tablet landscape: use the same visual-meta region as the legend.
   This is the reserved gap immediately below the timeline. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    position: relative;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-paused-event {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: auto;
    max-width: calc(100% - 8px);
    margin: 5px 0 0;
    transform: none;
    z-index: 31;
  }

  /* Reserve the info-bar row before the horizontal event legend. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    padding-top: 31px;
  }
}

/* 2026-09-21: unified tablet timeline event legend.
   Use the same horizontal presentation as the known-good fullscreen landscape
   legend in every tablet mode. Actual DOM:
   .explorer-event-legend > button.explorer-event-toggle > i.marker-* */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  #natalWorkspace .birth-time-explorer .explorer-event-legend {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 10px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-event-legend
    .explorer-event-toggle {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    gap: 4px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-event-legend
    .explorer-event-toggle
    > i {
    flex: 0 0 auto;
    margin: 0;
  }
}

/* 2026-09-21: tablet landscape normal-view timeline metadata.
   JS now places the paused-event bar and event legend in this container at the
   END of .explorer-control-dock, i.e. physically after the timeline. This
   removes dependence on absolute coordinates and guarantees:
   timeline -> info bar -> legend -> wheel. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-meta {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 5px;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-meta
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-meta
    .explorer-event-legend {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    z-index: auto;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-meta
    .explorer-paused-event {
    width: max-content;
    max-width: 100%;
    margin: 6px 0 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-timeline-meta
    .explorer-event-legend {
    width: 100%;
    max-width: none;
    margin: 0 0 5px;
  }
}

/* 2026-09-21: phone portrait fullscreen AC/MC use two coordinates only.
   AC/MC render: label | zodiac | degree | minute (sign text is hidden on phone).
   Do not let these rows inherit/stretch like the planet rows, which also have
   a third coordinate (house). */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row {
    display: grid;
    grid-template-columns: 20px 18px 24px 26px;
    grid-auto-columns: 0;
    justify-content: start;
    justify-items: start;
    align-items: center;
    column-gap: 2px;
    width: max-content;
    max-width: 100%;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-sign {
    display: none;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-degree,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-minute {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    justify-self: start;
    text-align: left;
    white-space: nowrap;
  }
}

/* 2026-09-22 final playback layout tweaks */

/* Desktop, non-fullscreen: give the wheel 30px more clearance below the
   persistent Pause-at-Events/legend area.  Move the visual only so the
   info bar and legend retain their established positions. */
@media (min-width: 1025px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual {
    transform: translateY(30px);
  }
}

/* Phone landscape: the Pause-at-Events info bar is a single horizontal row
   above the event legend.  Give the wheel extra vertical clearance beneath
   that two-row metadata area in both normal and fullscreen modes. */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    width: max-content;
    max-width: none;
    min-width: 0;
  }

  #natalWorkspace .birth-time-explorer .explorer-paused-event-items,
  #natalWorkspace .birth-time-explorer .explorer-paused-event-item {
    width: max-content;
    max-width: none;
    min-width: 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual {
    transform: translateY(18px);
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-visual {
    transform: translateY(18px);
  }
}

/* 2026-09-22 layout consistency + phone landscape clearance */

/* Phone landscape, normal + fullscreen:
   - allow the Pause-at-Events bar to size to its full single-line message
   - keep it above the legend
   - move only the chart/wheel down so AC/MC cannot sit beneath the message */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event {
    width: max-content;
    min-width: max-content;
    max-width: none;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-paused-event-items,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event-items,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event-items,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event-item {
    width: max-content;
    min-width: max-content;
    max-width: none;
  }

  #natalWorkspace .birth-time-explorer .explorer-paused-event-item > span {
    width: auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    transform: translateY(34px);
  }
}

/* Desktop non-fullscreen: apply the previously requested 30px movement to the
   actual chart container (the old .explorer-visual selector is not the wheel). */
@media (min-width: 1025px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    transform: translateY(30px);
  }
}

/* 2026-09-22: reserve extra wheel clearance only while Pause at Events is ON.
   These overrides supersede the earlier unconditional testing offsets. */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-pause-events-enabled)
    .explorer-visual,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-pause-events-enabled)
    .explorer-shared-chart {
    transform: none;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-pause-events-enabled:not(.explorer-fullscreen)
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-pause-events-enabled.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-pause-events-enabled.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    transform: translateY(34px);
  }
}

/* Desktop normal view: the requested +30px wheel clearance is likewise only
   required when the persistent Pause-at-Events bar is present. */
@media (min-width: 1025px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-pause-events-enabled):not(
      .explorer-fullscreen
    )
    .explorer-visual,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-pause-events-enabled):not(
      .explorer-fullscreen
    )
    .explorer-shared-chart {
    transform: none;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-pause-events-enabled:not(.explorer-fullscreen)
    .explorer-shared-chart {
    transform: translateY(30px);
  }
}

/* Tablet landscape normal view: info bar and legend are direct children below
   the player/timeline.  This is deliberately outside .explorer-control-dock
   and outside .explorer-visual-grid. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (min-height: 500px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend {
    position: static;
    inset: auto;
    transform: none;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-paused-event {
    margin: 6px 0 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend {
    margin: 0 0 5px;
  }
}

/* 2026-09-22 final mobile two-row timeline / landscape fullscreen polish.
   The two timeline rows use identical three-column geometry so -6h and +6h
   share the exact 50% axis in every phone view. */
@media (hover: none) and (pointer: coarse) and (max-width: 699px) {
  #natalWorkspace .birth-time-explorer .explorer-half-scale {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  #natalWorkspace .birth-time-explorer .explorer-half-scale > span {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    transform: none;
  }

  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:first-child {
    justify-self: start;
    text-align: left;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-half-scale
    > span:nth-child(2) {
    justify-self: center;
    text-align: center;
  }

  #natalWorkspace .birth-time-explorer .explorer-half-scale > span:last-child {
    justify-self: end;
    text-align: right;
  }

  /* Keep the wheel itself on that same player/timeline centre axis. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Phone landscape fullscreen:
   - let the info message wrap instead of forcing a very wide single line
   - remove the old +34px wheel drop now that the message is compact
   - keep the chart centred on the same 50% axis as the two timeline rows. */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event {
    width: min(190px, 46vw);
    min-width: 0;
    max-width: min(190px, 46vw);
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event-items,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event-items,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event-item
    > span,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-paused-event-item
    > span {
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
  }
}