/* Syncrota Natal viewer — canonical responsive layout (2026-09-17)
   Presentation only. Astronomy, houses, aspects and scoring are untouched.
   Live Positions uses dedicated live-* classes so legacy rules cannot collide. */

/* ---------- Live Positions: shared ---------- */
#natalWorkspace .explorer-live-panel {
  box-sizing: border-box;
  background: #11151f;
  background-color: #11151f;
  background-image: none;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}
#natalWorkspace .explorer-live-panel h4 {
  margin: 0 0 6px;
}
#natalWorkspace .explorer-live-panel .explorer-angles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 0 0 7px;
}
#natalWorkspace .explorer-live-panel .explorer-angles > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#natalWorkspace .explorer-live-panel .explorer-planets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
}
#natalWorkspace .live-body-row {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 5px;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#natalWorkspace .live-body-glyph,
#natalWorkspace .live-zodiac-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
}
#natalWorkspace .live-body-glyph .explorer-interpretation-symbol,
#natalWorkspace .live-body-glyph .natal-planet-badge {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}
#natalWorkspace .live-zodiac-glyph {
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  background: #9b36c5;
  color: #fff;
  font:
    700 16px/24px "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    sans-serif;
  box-sizing: border-box;
}
#natalWorkspace .live-body-value {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.1;
}

/* ---------- Timeline: reclaim vertical space ---------- */
#natalWorkspace .explorer-half-scale,
#natalWorkspace .explorer-scale {
  margin-top: -2px;
  line-height: 1.05;
}
#natalWorkspace .explorer-mobile-timeline {
  row-gap: 1px;
}
#natalWorkspace .explorer-timeline-half + .explorer-timeline-half {
  margin-top: -2px;
}
#natalWorkspace .explorer-event-legend {
  margin-top: 3px;
}

/* ---------- Mobile section framing ---------- */
@media (max-width: 700px) {
  #natalWorkspace .natal-region.is-expanded > .natal-region-body {
    padding: 8px 10px 10px;
  }
  #natalWorkspace
    .natal-region.is-expanded
    > .natal-region-body
    > .birth-time-explorer {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
  }
  #natalWorkspace .natal-region[data-region="viewer"].is-expanded {
    border: 1px solid var(--line);
  }
  #natalWorkspace .explorer-live-panel {
    padding: 9px;
  }
  #natalWorkspace .explorer-live-panel h4 {
    margin-bottom: 5px;
  }
  #natalWorkspace .explorer-live-panel .explorer-angles {
    gap: 3px 12px;
    margin-bottom: 5px;
  }
  #natalWorkspace .explorer-live-panel .explorer-planets {
    gap: 4px 12px;
  }
  #natalWorkspace .live-body-row {
    grid-template-columns: 22px 22px minmax(0, 1fr);
    column-gap: 4px;
    height: 23px;
  }
  #natalWorkspace .live-body-glyph,
  #natalWorkspace .live-zodiac-glyph {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
  }
  #natalWorkspace .live-body-glyph .explorer-interpretation-symbol,
  #natalWorkspace .live-body-glyph .natal-planet-badge {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    font-size: 15px;
    line-height: 22px;
  }
  #natalWorkspace .live-zodiac-glyph {
    font-size: 15px;
    line-height: 22px;
  }
  #natalWorkspace .live-body-value {
    font-size: 11px;
  }
}

/* ---------- Fullscreen base: always opaque ---------- */
#natalWorkspace .birth-time-explorer.explorer-fullscreen,
#natalWorkspace .birth-time-explorer.explorer-fullscreen:fullscreen,
#natalWorkspace .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
  background: #0b0a09;
  background-color: #0b0a09;
  background-image: none;
  opacity: 1;
  isolation: isolate;
}
#natalWorkspace .explorer-fullscreen .explorer-live-panel {
  background: #11151f;
  background-color: #11151f;
  opacity: 1;
  z-index: 4;
}

/* ---------- iPhone 13 portrait baseline: 390 x 844 ---------- */
@media (orientation: portrait) and (max-width: 430px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-control-dock {
    flex: 0 0 auto;
    margin: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend {
    flex: 0 0 auto;
    margin: 1px 0 4px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 8px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    order: 2;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel h4 {
    font-size: 14px;
    line-height: 1;
    margin: 0 0 3px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    font-size: 10px;
    line-height: 1;
    gap: 2px 10px;
    margin-bottom: 3px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 18px 18px minmax(0, 1fr);
    column-gap: 3px;
    height: 19px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-glyph,
  #natalWorkspace .explorer-fullscreen .live-zodiac-glyph {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
  #natalWorkspace
    .explorer-fullscreen
    .live-body-glyph
    .explorer-interpretation-symbol,
  #natalWorkspace .explorer-fullscreen .live-body-glyph .natal-planet-badge {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    font-size: 12px;
    line-height: 18px;
  }
  #natalWorkspace .explorer-fullscreen .live-zodiac-glyph {
    font-size: 12px;
    line-height: 18px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    font-size: 9px;
    line-height: 1;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    display: block;
    width: min(94vw, 560px);
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
}

/* ---------- iPhone 13 landscape baseline: 844 x 390 ---------- */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 4px;
    height: 100dvh;
    padding: 3px;
    overflow: hidden;
    background: #0b0a09;
  }
  #natalWorkspace .explorer-fullscreen .explorer-control-dock {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
    padding: 0 2px 2px;
    min-width: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 2px 1px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend button {
    min-height: 21px;
    padding: 2px 3px;
    font-size: 8px;
    white-space: nowrap;
  }
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    grid-template-rows: minmax(0, 1fr);
    gap: 4px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace .explorer-fullscreen .explorer-chart-stage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel h4 {
    font-size: 12px;
    line-height: 1;
    margin: 0 0 2px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0 0 2px;
    font-size: 8px;
    line-height: 1;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 17px 17px minmax(0, 1fr);
    column-gap: 3px;
    height: 18px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-glyph,
  #natalWorkspace .explorer-fullscreen .live-zodiac-glyph {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
  }
  #natalWorkspace
    .explorer-fullscreen
    .live-body-glyph
    .explorer-interpretation-symbol,
  #natalWorkspace .explorer-fullscreen .live-body-glyph .natal-planet-badge {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    max-width: 17px;
    max-height: 17px;
    font-size: 11px;
    line-height: 17px;
  }
  #natalWorkspace .explorer-fullscreen .live-zodiac-glyph {
    font-size: 11px;
    line-height: 17px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    display: block;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #natalWorkspace .explorer-fullscreen .explorer-wheel-legend {
    display: none;
  }
}

/* ---------- Fullscreen corrective ownership ----------
   Keep this after mobile section framing: the normal mobile viewer shell is
   intentionally transparent, but the focused fullscreen viewer must be an
   opaque surface above the underlying natal page. */
#natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen,
#natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen:fullscreen,
#natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
  background: #0b0a09;
  background-color: #0b0a09;
  background-image: none;
  opacity: 1;
  box-shadow: none;
}
body.natal-viewer-fullscreen {
  background: #0b0a09;
}

/* Give the landscape Live Positions rail enough room for symbol + zodiac +
   degree/house without crowding, while retaining the wheel as the main view. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    /* 220px at the iPhone 13 landscape baseline (844px), then use the
       extra width on wider phones for Live Positions, capped for tablets. */
    grid-template-columns: minmax(0, 1fr) clamp(
        220px,
        calc(220px + (100vw - 844px) * 1.25),
        300px
      );
    gap: 6px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    padding: 6px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    font-size: 9px;
  }
}

/* ---------- Light-mode ownership: Live Positions + fullscreen canvas ----------
   Keep the classical glyph colours, but let the dashboard and fullscreen
   workspace follow the selected page theme. */
html[data-theme="light"] #natalWorkspace .explorer-live-panel,
html:not([data-theme="dark"]) #natalWorkspace .explorer-live-panel {
  background: #fff;
  background-color: #fff;
  color: #1f2937;
  border-color: #aeb7c4;
}
html[data-theme="light"] #natalWorkspace .explorer-live-panel h4,
html:not([data-theme="dark"]) #natalWorkspace .explorer-live-panel h4 {
  color: #1f2937;
}
html[data-theme="light"] #natalWorkspace .explorer-live-panel .explorer-angles,
html[data-theme="light"]
  #natalWorkspace
  .explorer-live-panel
  .explorer-angles
  span,
html[data-theme="light"] #natalWorkspace .explorer-live-panel .live-body-value,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .explorer-angles,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .explorer-angles
  span,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .live-body-value {
  color: #4b5563;
}
html[data-theme="light"]
  #natalWorkspace
  .explorer-live-panel
  .explorer-angles
  b,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-live-panel
  .explorer-angles
  b {
  color: #8a641d;
}
html[data-theme="light"]
  #natalWorkspace
  .birth-time-explorer.explorer-fullscreen,
html[data-theme="light"]
  #natalWorkspace
  .birth-time-explorer.explorer-fullscreen:fullscreen,
html[data-theme="light"]
  #natalWorkspace
  .birth-time-explorer.explorer-fullscreen:-webkit-full-screen,
html[data-theme="light"]
  #natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen,
html[data-theme="light"]
  #natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen:fullscreen,
html[data-theme="light"]
  #natalWorkspace
  .natal-region.is-expanded
  > .natal-region-body
  > .birth-time-explorer.explorer-fullscreen:-webkit-full-screen {
  background: #fff;
  background-color: #fff;
  background-image: none;
}
html[data-theme="light"] body.natal-viewer-fullscreen {
  background: #fff;
}

/* Short landscape fullscreen: leave a definite gutter below the timeline.
   Moving the whole filter legend preserves the spacing between all buttons. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-event-legend {
    margin-top: 22px;
  }
}

/* 2026-09-18 fullscreen QA: Live Positions belongs to the fullscreen canvas,
   not a separate boxed card. This also prevents zero-padding edge clipping. */
#natalWorkspace .explorer-fullscreen .explorer-live-panel {
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px;
}
html[data-theme="light"]
  #natalWorkspace
  .explorer-fullscreen
  .explorer-live-panel,
html:not([data-theme="dark"])
  #natalWorkspace
  .explorer-fullscreen
  .explorer-live-panel {
  background: transparent;
  background-color: transparent;
  border: 0;
}

/* iPad / tablet landscape fullscreen. Own every grid placement explicitly so
   Live Positions cannot displace the wheel or Wheel Lines to the right. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-height: 501px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 10px;
    padding: 8px;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .explorer-control-dock {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 8px 0 0;
    padding: 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 340px);
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: auto;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 6px;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    display: block;
    width: min(100%, 720px);
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
  #natalWorkspace .explorer-fullscreen .explorer-wheel-legend {
    display: block;
    width: 100%;
    margin: 10px 0 18px;
  }
}

/* ---------- Desktop / tablet Live Positions: canonical responsive rules ----------
   These rules replace the iterative QA overrides. Keep three deliberate modes:
   normal desktop/tablet, compact narrow-tablet portrait, and fullscreen landscape. */
@media (min-width: 701px) {
  /* Normal viewer: Live Positions is information beside the wheel, not a card. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 12px;
    overflow: visible;
  }
  html[data-theme="light"]
    #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel,
  html:not([data-theme="dark"])
    #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    background: transparent;
    background-color: transparent;
    border: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-value {
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-angles {
    font-size: 11px;
    line-height: 1.1;
    gap: 4px 10px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-planets {
    gap: 5px 10px;
  }
}

/* iPad Mini/Air portrait: reduce the complete component, not just the text.
   iPad Pro portrait is wide enough to retain the normal tablet presentation. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    padding: 7px 8px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    h4 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-angles {
    font-size: 9px;
    gap: 3px 7px;
    margin-bottom: 4px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-planets {
    gap: 3px 7px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-row {
    grid-template-columns: 20px 20px minmax(0, 1fr);
    column-gap: 3px;
    height: 21px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-glyph {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph
    .explorer-interpretation-symbol,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph
    .natal-planet-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    font-size: 13px;
    line-height: 20px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-glyph {
    font-size: 13px;
    line-height: 20px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-value {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
  }
}

/* Fullscreen desktop/tablet landscape: use the available horizontal space
   instead of shrinking data typography. 12px is the canonical value size. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 501px) {
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) clamp(430px, 36vw, 620px);
    gap: 16px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 8px 0 0;
    padding: 0 4px;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel h4 {
    font-size: 16px;
    line-height: 1.1;
    margin: 0 0 6px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 11px;
    line-height: 1.1;
    gap: 4px 14px;
    margin-bottom: 6px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
  }
  #natalWorkspace
    .explorer-fullscreen
    .explorer-live-panel
    .explorer-angles
    > span,
  #natalWorkspace .explorer-fullscreen .live-body-value {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
  }
}

/* Touch tablets in landscape: keep Wheel Lines visible on shorter iPads while
   retaining the same 12px Live Positions typography. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-height: 501px) {
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace .explorer-fullscreen .explorer-chart-stage {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    display: block;
    width: min(100%, 720px, calc(100dvh - 235px));
    height: auto;
    max-height: calc(100dvh - 235px);
    aspect-ratio: 1/1;
    margin: 0 auto;
  }
  #natalWorkspace .explorer-fullscreen .explorer-wheel-legend {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 8px 0 14px;
  }
}

/* 2026-09-18 Live Positions layout consolidation.
   Use vertical space on tablets/fullscreen rather than shrinking or truncating
   values. This supersedes the earlier narrow-tablet/fullscreen two-column
   workarounds above without changing the phone layout. */
#natalWorkspace .live-zodiac-full {
  display: none;
}

/* iPad Mini/Air/Pro, normal viewer: one readable column. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1366px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    padding: 8px 10px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    h4 {
    font-size: 14px;
    margin: 0 0 5px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-angles {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.15;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel
    .explorer-planets {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-row {
    grid-template-columns: 24px 24px minmax(0, 1fr);
    column-gap: 4px;
    height: 25px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-glyph {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-value {
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Desktop/tablet fullscreen landscape: one compact reading column beside the
   wheel. Desktop gets full zodiac names; tablets retain abbreviations. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 501px) {
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 340px);
    gap: 14px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    width: 100%;
    max-width: 340px;
    padding: 0;
    margin: 8px 0 0;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.15;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 24px 24px minmax(0, 1fr);
    column-gap: 4px;
    height: 25px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Mouse/desktop fullscreen has ample room: spell the zodiac name out. */
@media (hover: hover) and (pointer: fine) and (orientation: landscape) and (min-width: 1000px) {
  #natalWorkspace .explorer-fullscreen .live-zodiac-short {
    display: none;
  }
  #natalWorkspace .explorer-fullscreen .live-zodiac-full {
    display: inline;
  }
}

/* 2026-09-18 fullscreen centre-axis alignment.
   On tablet/desktop landscape the wheel is centred against the full player
   width, so its MC/centre/IC axis sits directly below the timeline midpoint.
   The legend and Live Positions are side rails and no longer participate in
   the wheel's horizontal centring calculation. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 501px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    position: relative;
  }
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-column: 1/-1;
    grid-row: 2;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  #natalWorkspace .explorer-fullscreen .explorer-shared-chart {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace .explorer-fullscreen .explorer-chart-stage {
    width: 100%;
  }
  #natalWorkspace .explorer-fullscreen .natal-chart {
    margin-left: auto;
    margin-right: auto;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: clamp(250px, 22vw, 340px);
    max-width: calc(50% - 18px);
    margin: 0;
  }
}

/* V0.01 2026-09-18 fullscreen wheel top clearance.
   Preserve horizontal centre-axis alignment while giving MC breathing room
   below the timeline/control section. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 501px) {
  #natalWorkspace .explorer-fullscreen .explorer-chart-stage {
    box-sizing: border-box;
    padding-top: 12px;
  }
}

/* v35: Normal viewer Live Positions uses one vertical Seven list.
   The viewer panel can be narrow even on a wide desktop, so do not choose
   the planet layout from the browser viewport width. Fullscreen keeps its
   existing responsive layout. */
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .explorer-planets {
  grid-template-columns: 1fr;
  gap: 4px;
}
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-body-row {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-body-value {
  display: grid;
  grid-template-columns: 32px 64px max-content;
  align-items: center;
  justify-content: start;
  column-gap: 4px;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-sign-name {
  width: 32px;
  min-width: 32px;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-coordinate {
  width: 64px;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
/* v36: normal Live Positions — readable single-column coordinate grid. */
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .explorer-angles {
  grid-template-columns: 1fr;
  gap: 3px;
  margin-bottom: 8px;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .explorer-angles
  > span.live-angle-row {
  display: grid;
  grid-template-columns: 24px 24px 64px 34px 34px;
  align-items: center;
  justify-content: start;
  column-gap: 5px;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  font-size: 12px;
  line-height: 1.15;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-angle-row
  > b {
  font-size: 12px;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-angle-zodiac {
  display: flex;
  align-items: center;
  justify-content: center;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-angle-sign {
  font-weight: 600;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-angle-degree,
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-angle-minute {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  .live-body-value {
  grid-template-columns: 64px 34px 34px 36px;
  column-gap: 5px;
}
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-sign-name {
  width: 64px;
  min-width: 64px;
}
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-degree,
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-minute {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) .live-house {
  white-space: nowrap;
  text-align: left;
}
@media (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-short {
    display: none;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-full {
    display: inline;
  }
}
@media (max-width: 700px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-angles
    > span.live-angle-row {
    grid-template-columns: 22px 22px 50px 31px 31px;
    column-gap: 4px;
    font-size: 11px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-angle-row
    > b {
    font-size: 11px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-value {
    grid-template-columns: 32px 31px 31px 34px;
    column-gap: 4px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-sign-name {
    width: 32px;
    min-width: 32px;
  }
}

/* v37: final Live Positions layout override (normal + full screen). */
#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;
}
#natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles,
#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;
  }
}

/* v38: Live Positions final alignment refinement.
   Desktop/tablet AC/MC mirrors the planet grid; tighter coordinate columns. */
@media (min-width: 601px) {
  #natalWorkspace .explorer-live-panel .live-angle-row,
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 24px 24px 72px 30px 30px 34px;
    column-gap: 4px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    font-size: 12px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row > b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 12px;
    line-height: 1;
  }
  #natalWorkspace .explorer-live-panel .live-angle-zodiac,
  #natalWorkspace .explorer-live-panel .live-zodiac-glyph {
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #natalWorkspace .explorer-live-panel .live-angle-sign,
  #natalWorkspace .explorer-live-panel .live-sign-name {
    width: 72px;
    min-width: 72px;
    padding-left: 2px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-degree,
  #natalWorkspace .explorer-live-panel .live-angle-minute,
  #natalWorkspace .explorer-live-panel .live-degree,
  #natalWorkspace .explorer-live-panel .live-minute {
    width: 30px;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  #natalWorkspace .explorer-live-panel .live-house {
    width: 34px;
    min-width: 34px;
    text-align: left;
  }
  /* Angle rows have no house value, but share the exact first five columns. */
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 24px 24px 72px 30px 30px;
  }
}

/* v41: mobile portrait Live Positions - definitive two-column layout.
   Kept in natal-layout.css because this stylesheet loads after natal-fixes.css. */
@media (max-width: 700px) and (orientation: portrait) {
  #natalWorkspace .explorer-live-panel .explorer-planets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
    width: 100%;
  }
  #natalWorkspace .explorer-live-panel .explorer-angles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
    width: 100%;
    margin-bottom: 5px;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    display: grid;
    grid-template-columns: 20px 18px minmax(25px, 1fr) 25px 25px 28px;
    column-gap: 2px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    overflow: visible;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    display: grid;
    grid-template-columns: 20px 18px minmax(42px, 1fr) 25px 25px;
    column-gap: 2px;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  #natalWorkspace .explorer-live-panel .live-zodiac-full {
    display: none;
  }
  #natalWorkspace .explorer-live-panel .live-zodiac-short {
    display: inline;
  }
  #natalWorkspace .explorer-live-panel .live-angle-sign,
  #natalWorkspace .explorer-live-panel .live-sign-name {
    padding-left: 2px;
  }
}

/* v42: structural phone portrait pairing.
   Pair wrappers make the two-across layout independent of the older
   explorer-planets grid rules. */
#natalWorkspace .live-angle-pair,
#natalWorkspace .live-body-pair {
  display: contents;
}

@media (max-width: 480px) {
  #natalWorkspace .explorer-live-panel .explorer-angles,
  #natalWorkspace .explorer-live-panel .explorer-planets {
    display: block;
    width: 100%;
  }
  #natalWorkspace .explorer-live-panel .live-angle-pair,
  #natalWorkspace .explorer-live-panel .live-body-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 5px;
    width: 100%;
    margin-bottom: 2px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-pair {
    margin-bottom: 4px;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 18px 18px minmax(22px, 1fr) 23px 23px 25px;
    column-gap: 1px;
    min-width: 0;
    width: 100%;
    height: 21px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 20px 18px minmax(38px, 1fr) 24px 24px;
    column-gap: 1px;
    min-width: 0;
    width: 100%;
  }
}

/* v43: narrow-phone portrait refinement for the structural two-across
   Live Positions layout. Preserve font size; reclaim horizontal space
   from badges, sign and coordinate columns instead. */
@media (max-width: 390px) {
  #natalWorkspace .explorer-live-panel {
    padding-left: 8px;
    padding-right: 8px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-pair,
  #natalWorkspace .explorer-live-panel .live-body-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2px;
  }
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 17px 17px minmax(20px, 1fr) 20px 20px 22px;
    column-gap: 0;
    height: 20px;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 18px 16px minmax(30px, 1fr) 21px 21px;
    column-gap: 0;
  }
  #natalWorkspace .explorer-live-panel .live-body-glyph .celestial-badge,
  #natalWorkspace .explorer-live-panel .live-zodiac-glyph {
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    line-height: 16px;
  }
  #natalWorkspace .explorer-live-panel .live-zodiac-glyph {
    margin-right: 1px;
  }
  #natalWorkspace .explorer-live-panel .live-sign-name {
    padding-left: 1px;
  }
  #natalWorkspace .explorer-live-panel .live-degree,
  #natalWorkspace .explorer-live-panel .live-minute,
  #natalWorkspace .explorer-live-panel .live-house {
    min-width: 0;
    margin: 0;
    padding: 0;
  }
}

/* v44: phone portrait two-across Live Positions.
   The zodiac badge already identifies the sign, so hide the duplicated
   sign text and use the freed width for stable coordinate/house columns.
   Applies equally in normal and full-screen viewer modes. */
@media (max-width: 480px) {
  #natalWorkspace .explorer-live-panel .live-sign-name,
  #natalWorkspace .explorer-live-panel .live-angle-sign {
    display: none;
  }

  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 18px 18px minmax(23px, 1fr) 23px 27px;
    column-gap: 1px;
  }
  #natalWorkspace .explorer-live-panel .live-body-value {
    display: grid;
    grid-template-columns: minmax(23px, 1fr) 23px 27px;
    column-gap: 1px;
    min-width: 0;
  }
  #natalWorkspace .explorer-live-panel .live-degree,
  #natalWorkspace .explorer-live-panel .live-minute,
  #natalWorkspace .explorer-live-panel .live-house {
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 20px 18px 25px 25px;
    column-gap: 1px;
  }
}

/* Extra breathing room for the smallest portrait phones. */
@media (max-width: 390px) {
  #natalWorkspace .explorer-live-panel .live-body-row {
    grid-template-columns: 17px 17px minmax(21px, 1fr) 21px 24px;
    column-gap: 0;
  }
  #natalWorkspace .explorer-live-panel .live-body-value {
    grid-template-columns: minmax(21px, 1fr) 21px 24px;
    column-gap: 0;
  }
  #natalWorkspace .explorer-live-panel .live-angle-row {
    grid-template-columns: 18px 16px 23px 23px;
    column-gap: 0;
  }
}

/* v45: normal-view phone portrait only.
   Add a little breathing room between the planet and zodiac badges.
   Full-screen portrait is intentionally unchanged. */
@media (max-width: 480px) {
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-live-panel
    .live-body-row {
    column-gap: 5px;
  }
}
@media (max-width: 390px) {
  #natalWorkspace:not(.explorer-fullscreen)
    .explorer-live-panel
    .live-body-row {
    column-gap: 5px;
  }
}

/* 2026-09-20 mobile QA batch.
   Portrait: compact coordinate columns without losing the intentional
   planet-to-zodiac badge breathing room in normal view. */
@media (max-width: 480px) {
  #natalWorkspace .explorer-live-panel .live-body-value {
    grid-template-columns: 21px 20px 23px;
    column-gap: 0;
  }
  #natalWorkspace .explorer-live-panel .live-degree,
  #natalWorkspace .explorer-live-panel .live-minute,
  #natalWorkspace .explorer-live-panel .live-house {
    width: auto;
    min-width: 0;
    text-align: left;
  }

  /* Normal portrait: 5px is only between planet and zodiac badges.
     Do not spend the same gap again before/between coordinates. */
  #natalWorkspace.birth-time-explorer:not(.explorer-fullscreen) .live-body-row,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-row {
    grid-template-columns: 17px 17px minmax(0, 1fr);
    column-gap: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph {
    margin-right: 5px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-glyph {
    margin-right: 2px;
  }

  /* Fullscreen portrait: AC/MC coordinates use the same compact rhythm.
     Planet rows reserve enough room for H1/H10/H11 without clipping. */
  #natalWorkspace .explorer-fullscreen .live-angle-row {
    grid-template-columns: 18px 16px 22px 22px;
    column-gap: 1px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 17px 17px minmax(0, 1fr);
    column-gap: 1px;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    grid-template-columns: 21px 20px 25px;
    overflow: visible;
  }
}

/* Keep the new control compact alongside the existing playback controls. */
#natalWorkspace .explorer-pause-events {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Short mobile landscape fullscreen.
   Enlarge secondary text, reclaim the unused left rail, and use explicit
   compact Live Position columns so the house value cannot be truncated. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 3px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend {
    width: 100%;
    gap: 3px;
    padding: 2px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-event-legend button {
    min-height: 23px;
    padding: 3px 4px;
    font-size: 10px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 3px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    padding: 2px;
    margin: 0;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel h4 {
    font-size: 14px;
    line-height: 1.05;
    margin: 0 0 4px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-angles {
    font-size: 10px;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  #natalWorkspace .explorer-fullscreen .live-angle-row {
    grid-template-columns: 20px 18px 40px 25px 25px;
    column-gap: 1px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel .explorer-planets {
    gap: 2px;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 18px 18px 42px 25px 25px 28px;
    column-gap: 1px;
    height: 20px;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    display: contents;
    font-size: 10px;
    line-height: 1.05;
    overflow: visible;
    text-overflow: clip;
  }
  #natalWorkspace .explorer-fullscreen .live-degree,
  #natalWorkspace .explorer-fullscreen .live-minute,
  #natalWorkspace .explorer-fullscreen .live-house {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
  #natalWorkspace .explorer-fullscreen .explorer-time-row,
  #natalWorkspace .explorer-fullscreen .explorer-time {
    font-size: 12px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-scale,
  #natalWorkspace .explorer-fullscreen .explorer-half-scale {
    font-size: 10px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-scan-status {
    font-size: 10px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-wheel-legend {
    font-size: 10px;
    line-height: 1.25;
  }
  #natalWorkspace .explorer-fullscreen .explorer-pause-events {
    font-size: 10px;
  }
}

/* 2026-09-20 cosmetic polish from portrait/landscape device screenshots */
#natalWorkspace .explorer-pause-events {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: auto;
  white-space: nowrap;
}
#natalWorkspace .explorer-pause-events-input {
  -webkit-appearance: checkbox;
  appearance: auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  transform: none;
}

/* Phone portrait: deliberate small gaps: planet -> zodiac -> coordinates. */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-row {
    grid-template-columns: 18px 20px minmax(0, 1fr);
    column-gap: 3px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-glyph,
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-zodiac-glyph {
    margin: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-value {
    grid-template-columns: 24px 25px 30px;
    column-gap: 1px;
    margin-left: 2px;
  }

  /* Fullscreen portrait AC/MC degree/minute values stay compact. */
  #natalWorkspace .explorer-fullscreen .live-angle-row {
    grid-template-columns: 20px 18px 24px 26px;
    column-gap: 2px;
  }
}

/* Mobile landscape normal: shorter Pause Events label + single Play/Pause fit the controls. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-pause-events {
    gap: 4px;
    font-size: inherit;
  }
}

/* Mobile landscape fullscreen: preserve readable text but make Live Positions
   a compact explicit grid rather than stretching its internal columns. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-live-panel {
    padding: 7px 3px 2px;
    margin: 0;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .explorer-live-panel h4 {
    display: block;
    position: relative;
    top: 0;
    height: auto;
    min-height: 18px;
    line-height: 18px;
    margin: 0 0 6px;
    padding: 0;
    overflow: visible;
    white-space: nowrap;
  }
  #natalWorkspace .explorer-fullscreen .live-angle-row {
    grid-template-columns: 28px 22px 52px 27px 28px;
    column-gap: 3px;
    align-items: center;
  }
  #natalWorkspace .explorer-fullscreen .live-body-row {
    grid-template-columns: 21px 22px 53px 28px 28px 32px;
    column-gap: 3px;
    align-items: center;
    height: 20px;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .live-sign-name {
    margin-left: 3px;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }
  #natalWorkspace .explorer-fullscreen .live-body-value {
    display: contents;
  }
  #natalWorkspace .explorer-fullscreen .live-degree,
  #natalWorkspace .explorer-fullscreen .live-minute,
  #natalWorkspace .explorer-fullscreen .live-house {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 2026-09-20 portrait-normal controls polish.
   Scope deliberately excludes fullscreen and landscape. */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }

  /* Centre time label + deliberately narrower time input. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls
    > label:first-child {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: auto 126px;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }

  /* Transport row: three equal buttons, no vacant old Pause column. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="back"] {
    grid-column: 1 / span 2;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="play"] {
    grid-column: 3 / span 2;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="forward"] {
    grid-column: 5 / span 2;
  }

  /* Action row. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="apply"] {
    grid-column: 1 / span 3;
  }

  /* Final row: Speed on the left, Pause Events on the right. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls
    > label:has(.explorer-speed) {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: auto 132px;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-speed {
    width: 132px;
    min-width: 0;
  }
  /* Normal portrait Live Positions: visible separation between planet/zodiac
     badges while preserving the now-good coordinate spacing. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .live-body-row {
    grid-template-columns: 18px 20px minmax(0, 1fr);
    column-gap: 5px;
  }
}

/* 2026-09-20 portrait controls v2: iPhone SE through Pro Max.
   Correct the actual Centre/Speed selectors and keep each logical row balanced. */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-start-time {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: auto 100px;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-start-time-input {
    width: 100px;
    min-width: 0;
  }

  /* Equal half-width action buttons. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="centre"] {
    grid-column: 1 / span 3;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    [data-explorer-action="play24"] {
    grid-column: 4 / span 3;
    width: 100%;
    min-width: 0;
  }

  /* Speed + Pause Events share one row even on the narrow SE viewport. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls
    > label:has(.explorer-speed) {
    grid-column: 1 / span 3;
    grid-row: auto;
    display: grid;
    grid-template-columns: auto 100px;
    justify-content: start;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-speed {
    width: 100px;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-pause-events {
    grid-column: 4 / span 3;
    grid-row: auto;
    justify-self: end;
    align-self: center;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* 2026-09-20 portrait controls v3.
   Keep Speed and Pause Events physically on the same grid row. */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls
    > label:has(.explorer-speed) {
    grid-column: 1 / span 3;
    grid-row: 4;
    grid-template-columns: auto 92px;
    gap: 5px;
    align-self: center;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-speed {
    width: 92px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-pause-events {
    grid-column: 4 / span 3;
    grid-row: 4;
    justify-self: end;
    align-self: center;
  }
}

/* 2026-09-20 portrait controls v4.
   Use the same compact control geometry in normal + fullscreen portrait. */
@media (max-width: 480px) and (orientation: portrait) {
  /* Give Speed back enough width for "60 min/sec". */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-controls
    > label:has(.explorer-speed),
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-controls
    > label:has(.explorer-speed) {
    grid-template-columns: auto 108px;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-speed,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-speed {
    width: 108px;
  }

  /* Fullscreen portrait now follows the same 6-column control grid. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-controls {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-start-time {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: auto 100px;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-start-time-input {
    width: 100px;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    [data-explorer-action="back"] {
    grid-column: 1 / span 2;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    [data-explorer-action="play"] {
    grid-column: 3 / span 2;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    [data-explorer-action="forward"] {
    grid-column: 5 / span 2;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    [data-explorer-action="centre"] {
    grid-column: 1 / span 3;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    [data-explorer-action="play24"] {
    grid-column: 4 / span 3;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-controls
    > label:has(.explorer-speed) {
    grid-column: 1 / span 3;
    grid-row: 4;
    display: grid;
    justify-content: start;
    align-items: center;
    gap: 5px;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-pause-events {
    grid-column: 4 / span 3;
    grid-row: 4;
    justify-self: end;
    align-self: center;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* 2026-09-20 Pause Events detail strip */
#natalWorkspace .explorer-paused-event {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border, #51452e);
  border-radius: 10px;
  background: rgba(207, 171, 91, 0.08);
}
#natalWorkspace .explorer-paused-event[hidden] {
  display: none;
}
#natalWorkspace .explorer-paused-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
#natalWorkspace .explorer-paused-event-head b {
  color: var(--gold, #e2bf70);
}
#natalWorkspace .explorer-paused-event-head span {
  white-space: nowrap;
  opacity: 0.8;
}
#natalWorkspace .explorer-paused-event-items {
  display: grid;
  gap: 4px;
}
#natalWorkspace .explorer-paused-event-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
#natalWorkspace .explorer-paused-event-item i {
  flex: 0 0 auto;
  margin-top: 0.28em;
}
#natalWorkspace .explorer-paused-event-item span {
  min-width: 0;
}

@media (max-width: 480px) {
  #natalWorkspace .explorer-paused-event {
    padding: 7px 8px;
    margin-top: 6px;
  }
  #natalWorkspace .explorer-paused-event-head {
    font-size: 0.9em;
  }
  #natalWorkspace .explorer-paused-event-item {
    font-size: 0.9em;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    margin-top: 3px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 10px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-paused-event-head {
    margin-bottom: 2px;
  }
  #natalWorkspace .explorer-fullscreen .explorer-paused-event-items {
    gap: 1px;
  }
}

/* 2026-09-20 compact Pause Events readout */
#natalWorkspace .explorer-paused-event {
  padding: 6px 8px;
}
#natalWorkspace .explorer-paused-event-compact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
#natalWorkspace .explorer-paused-event-time {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--gold, #e2bf70);
}
#natalWorkspace .explorer-paused-event-compact .explorer-paused-event-items {
  min-width: 0;
  display: grid;
  gap: 3px;
}
#natalWorkspace .explorer-paused-event-compact .explorer-paused-event-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
#natalWorkspace .explorer-paused-event-compact .explorer-paused-event-item i {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  margin-top: 0.3em;
}
@media (max-width: 480px) {
  #natalWorkspace .explorer-paused-event {
    padding: 5px 6px;
  }
  #natalWorkspace .explorer-paused-event-compact {
    gap: 6px;
    font-size: 0.9em;
  }
}

/* 2026-09-20 Pause Events: portrait-only compact readout.
   Desktop and landscape retain the existing full timestamp presentation. */
#natalWorkspace .explorer-paused-event-wide {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
#natalWorkspace .explorer-paused-event-portrait {
  display: none;
}

@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace .explorer-paused-event-wide {
    display: none;
  }
  #natalWorkspace .explorer-paused-event-portrait {
    display: block;
  }
  #natalWorkspace .explorer-paused-event {
    padding: 5px 7px;
    margin-top: 6px;
  }
  #natalWorkspace .explorer-paused-event-portrait .explorer-paused-event-items {
    display: grid;
    gap: 3px;
  }
  #natalWorkspace .explorer-paused-event-portrait .explorer-paused-event-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    font-size: 0.9em;
  }
  #natalWorkspace
    .explorer-paused-event-portrait
    .explorer-paused-event-item
    i {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-top: 0.28em;
  }
  #natalWorkspace
    .explorer-paused-event-portrait
    .explorer-paused-event-item
    span {
    min-width: 0;
  }
}

/* 2026-09-20 fullscreen pause-event/wheel polish */

/* Portrait fullscreen: give the pause detail bar breathing room from timeline. */
@media (max-width: 480px) and (orientation: portrait) {
  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    margin-top: 9px;
  }
}

/* Landscape fullscreen:
   - keep wheel clear of the timeline divider so MC/upper labels remain visible
   - keep pause-event information as a normal horizontal strip rather than
     allowing it to inherit the left-side grid placement. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-visual-grid {
    padding-top: 12px;
  }

  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 5px 0 0;
    padding: 4px 8px;
    overflow: visible;
  }
  #natalWorkspace .explorer-fullscreen .explorer-paused-event-wide {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
  }
  #natalWorkspace
    .explorer-fullscreen
    .explorer-paused-event-wide
    .explorer-paused-event-time {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #natalWorkspace
    .explorer-fullscreen
    .explorer-paused-event-wide
    .explorer-paused-event-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
  }
  #natalWorkspace
    .explorer-fullscreen
    .explorer-paused-event-wide
    .explorer-paused-event-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }
  #natalWorkspace
    .explorer-fullscreen
    .explorer-paused-event-wide
    .explorer-paused-event-item
    i {
    margin-top: 0;
  }
}

/* 2026-09-20 landscape fullscreen: event strip should only occupy
   the width required by its content, so it cannot cover Live Positions. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    grid-column: auto;
    justify-self: start;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  #natalWorkspace .explorer-fullscreen .explorer-paused-event-wide {
    width: auto;
  }
}

/* 2026-09-20 mobile fullscreen landscape:
   the pause-event bar must overlay the view without reserving a full grid row.
   This removes the empty/black area that was masking Live Positions. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen {
    position: relative;
  }
  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    position: absolute;
    left: 6px;
    bottom: 4px;
    z-index: 30;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    width: max-content;
    max-width: calc(100% - 12px);
    margin: 0;
  }
}

/* 2026-09-20 real iOS Safari landscape fullscreen fix.
   iPhone Safari can fall back to the CSS fullscreen state rather than a true
   Fullscreen API surface. Make that state one viewport layer, not an in-flow
   grid sitting over the normal page. Allow vertical scrolling if Safari's
   dynamic browser chrome leaves less usable height than CSS predicts. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  body.natal-viewer-fullscreen {
    overflow: hidden;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #0b0a09;
  }

  /* The event readout belongs to this single fullscreen layer. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event {
    position: absolute;
    left: 6px;
    bottom: 4px;
    z-index: 40;
  }
}

/* Preserve the selected light theme when the CSS fullscreen fallback is used. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  html[data-theme="light"]
    #natalWorkspace
    .birth-time-explorer.explorer-fullscreen,
  html:not([data-theme="dark"])
    #natalWorkspace
    .birth-time-explorer.explorer-fullscreen {
    background: #fff;
  }
}

/* 2026-09-20 pause marker/detail consistency.
   Use the same compact event readout at every viewport size. */
#natalWorkspace .explorer-paused-event-wide,
#natalWorkspace .explorer-paused-event-portrait {
  display: none;
}
#natalWorkspace .explorer-paused-event > .explorer-paused-event-items {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#natalWorkspace
  .explorer-paused-event
  > .explorer-paused-event-items
  .explorer-paused-event-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
#natalWorkspace .explorer-paused-event-dot {
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  margin: 0;
}

/* Timeline pause cursor must be centred on the exact event marker.
   Both marker and cursor use their offset as the centre point. */
#natalWorkspace .explorer-timeline-marker {
  transform: translateX(-50%);
}
#natalWorkspace .explorer-timeline-cursor {
  transform: translateX(-50%);
}

/* Keep the compact event bar content-sized in mobile fullscreen landscape. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .explorer-fullscreen .explorer-paused-event {
    width: max-content;
    max-width: calc(100% - 12px);
  }
}

/* 2026-09-20 landscape layout:
   timeline -> compact pause-event info -> event legend -> wheel/live positions.
   Applies to all landscape views, fullscreen and normal. */
@media (orientation: landscape) {
  #natalWorkspace .birth-time-explorer {
    --landscape-event-gap: 6px;
  }

  /* Keep the event readout in normal document/grid flow directly after timeline. */
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    width: max-content;
    max-width: calc(100% - 12px);
    margin: var(--landscape-event-gap) 0 0;
    z-index: auto;
  }

  /* The legend belongs immediately below the event readout and therefore at
     the top of the wheel/live-position section rather than its base. */
  #natalWorkspace .birth-time-explorer .explorer-event-legend {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
    inset: auto;
    order: initial;
    margin-top: var(--landscape-event-gap);
    margin-bottom: 6px;
  }
}

/* Real-phone landscape fullscreen: override the previous bottom-left overlay.
   The bar now participates in flow above the legend, but remains content-width. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 12px);
    margin: 4px 0 0;
    z-index: auto;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-event-legend {
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

/* 2026-09-20 landscape correction.
   The pause readout and event legend belong in the LEFT column at the TOP of
   the wheel area. They must not create full-width rows above the wheel. */
@media (orientation: landscape) {
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    position: static;
    inset: auto;
    width: max-content;
    max-width: 100%;
    margin: 0 0 5px;
    z-index: auto;
  }

  #natalWorkspace .birth-time-explorer .explorer-event-legend {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    position: static;
    inset: auto;
    width: max-content;
    max-width: 100%;
    margin: 0 0 6px;
  }

  /* Keep the wheel section itself at the top rather than inheriting the
     previous extra top offset. */
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    padding-top: 0;
    align-items: start;
  }
}

/* Phone landscape/fullscreen: explicitly cancel the former bottom-left
   overlay/absolute positioning and keep both blocks in the top-left flow. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-event-legend {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    grid-column: 1;
    width: max-content;
    max-width: 100%;
    z-index: auto;
  }
}

/* 2026-09-20 landscape final positioning.
   Put pause info + event legend in a stable top-left overlay of the visual
   section. Showing/hiding the pause info must not reflow or resize the wheel.
   This applies to ALL landscape widths, including desktop fullscreen. */
@media (orientation: landscape) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    position: relative;
    padding-top: 0;
  }

  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    align-self: auto;
    width: max-content;
    max-width: calc(33.333% - 8px);
    margin: 0;
    z-index: 25;
  }

  #natalWorkspace .birth-time-explorer .explorer-event-legend {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    align-self: auto;
    width: max-content;
    max-width: calc(33.333% - 8px);
    margin: 0;
    z-index: 24;
  }

  /* When pause info is visible, move only the legend down. The wheel/grid
     itself remains completely unchanged. */
  #natalWorkspace
    .birth-time-explorer
    .explorer-paused-event:not([hidden])
    + .explorer-event-legend {
    top: 30px;
  }
}

/* Phone landscape uses the same stable overlay, with tighter spacing. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    max-width: 36%;
    z-index: 25;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-event-legend {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    max-width: 36%;
    z-index: 24;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event:not([hidden])
    + .explorer-event-legend {
    top: 24px;
  }
}

/* Landscape: anchor event info + legend to actual wheel-section top-left. */
@media (orientation: landscape) {
  #natalWorkspace .birth-time-explorer {
    position: relative;
  }
  #natalWorkspace .birth-time-explorer .explorer-paused-event {
    left: var(--explorer-visual-left, 0px);
    top: var(--explorer-visual-top, 0px);
  }
  #natalWorkspace .birth-time-explorer .explorer-event-legend {
    left: var(--explorer-visual-left, 0px);
    top: var(--explorer-visual-top, 0px);
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-paused-event:not([hidden])
    + .explorer-event-legend {
    top: calc(var(--explorer-visual-top, 0px) + 30px);
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event:not([hidden])
    + .explorer-event-legend {
    top: calc(var(--explorer-visual-top, 0px) + 24px);
  }
}

/* 2026-09-20 event/legend layout finalisation.
   Landscape: the JS physically places both items inside explorer-visual-grid,
   so they are anchored to the wheel section rather than the page/viewer. */
@media (orientation: landscape) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    position: relative;
  }
  #natalWorkspace .birth-time-explorer .explorer-visual-meta {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: max-content;
    max-width: 34%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    position: static;
    inset: auto;
    grid-column: auto;
    grid-row: auto;
    width: max-content;
    max-width: 100%;
    margin: 0;
    z-index: auto;
    pointer-events: auto;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 0;
  }
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend
    button {
    width: auto;
    white-space: nowrap;
  }
}

/* Phone landscape gets a deliberately narrow left metadata rail so it cannot
   overlap the wheel or Live Positions. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta {
    max-width: 30%;
    gap: 3px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-paused-event {
    font-size: 9px;
    line-height: 1.1;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-event-legend
    button {
    min-height: 18px;
    padding: 1px 2px;
    font-size: 12px;
  }
}

/* Portrait non-fullscreen desktop/narrow-window case: keep the legend out of
   the wheel and use a compact vertical list above the visual section. */
@media (orientation: portrait) and (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 5px 0 8px;
    padding: 0;
    z-index: auto;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend
    button {
    width: auto;
    white-space: nowrap;
  }
}

/* 2026-09-20 desktop-only landscape pause-event spacing.
   Normal view: reduce the excessive gap below the timeline.
   Fullscreen: add a small breathing gap below the timeline.
   Mobile/tablet are intentionally untouched. */
@media (orientation: landscape) and (min-width: 1025px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    top: -8px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta {
    top: 7px;
  }
}

/* Desktop non-fullscreen fine-tune: retain a small breathing gap below timeline. */
@media (orientation: landscape) and (min-width: 1025px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-meta {
    top: -3px;
  }
}

/* 2026-09-21 tablet legend correction.
   IMPORTANT: this lives in natal-layout.css because that stylesheet is loaded
   after natal-fixes.css and was overriding the previous tablet legend patch. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-visual-meta {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    margin: 3px 0 5px;
    padding: 0;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend
    button,
  #natalWorkspace
    .birth-time-explorer
    .explorer-visual-meta
    .explorer-event-legend
    .explorer-event-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 2px 3px;
    margin: 0;
  }

  #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.explorer-fullscreen
    .explorer-visual-meta {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    z-index: 6;
  }
}

/* 2026-09-21: tablet legend mirrors the known-good portrait fullscreen
   structure. The legend is a direct child of the explorer, not a side rail. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer > .explorer-event-legend {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 27px;
    margin: 2px 0 5px;
    padding: 2px 3px;
    gap: 8px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    z-index: 30;
    white-space: nowrap;
  }
  #natalWorkspace .birth-time-explorer > .explorer-event-legend button {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 3px 5px;
    margin: 0;
    white-space: nowrap;
  }
}

/* 2026-09-21: tablet legend exact layout fix.
   Older touch-landscape rules put the direct legend in grid column 1 (the
   narrow 108px rail). The previous flex-row rules were working, but 100% meant
   100% of that rail. Span the complete explorer grid first, then lay the four
   buttons out horizontally. */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer > .explorer-event-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-event-legend {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: stretch;
    justify-self: stretch;
    position: relative;
    inset: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 2px 0 5px;
    padding: 2px 3px;
    gap: 8px;
    white-space: nowrap;
    z-index: 30;
  }

  #natalWorkspace .birth-time-explorer > .explorer-event-legend > button,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-event-legend
    > button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 3px 5px;
    white-space: nowrap;
  }
}

/* 2026-09-21: direct tablet portrait legend fix confirmed from DevTools.
   Keep this selector aligned with the existing portrait tablet rule. */
@media (orientation: portrait) and (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend {
    flex-direction: row;
  }
}

/* Same direct-child correction for tablet landscape and fullscreen tablet.
   Phone landscape remains governed by its existing max-height/max-width rules. */
@media (orientation: landscape) and (min-width: 701px) and (min-height: 500px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-event-legend {
    flex-direction: row;
  }
}

/* 2026-09-21: tablet wheel vertical geometry + centre play correction.
   Preserve the horizontal legend/timeline work. Remove the old visual-area
   offsets that leave a large blank band above the chart, and make the play
   control centre against the actual square chart rather than the stretched
   fullscreen stage. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-visual-grid {
    margin-top: 0;
    padding-top: 0;
    row-gap: 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    margin-top: 0;
    padding-top: 0;
    align-self: start;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    margin-top: 0;
    padding-top: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    top: 0;
    padding-top: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: 0;
    overflow: visible;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart {
    display: block;
    position: relative;
    width: min(100%, 720px, calc(100dvh - 190px));
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
    margin: 0 auto;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-centre-button {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
  }
}

/* 2026-09-21: tablet normal-view visual grid correction.
   The horizontal event legend now lives outside .explorer-visual-grid.
   The previous tablet override still reserved two grid rows: Live Positions
   auto-placed into row 1 and the chart was explicitly placed in row 2,
   creating the large empty-looking block above the wheel. Put the chart and
   Live Positions in the SAME row instead. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 34%);
    grid-template-rows: auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-shared-chart {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    transform: none;
  }
}

/* 2026-09-21: tablet visual polish.
   1) Keep the already-working horizontal event legend immediately below the
      timeline in tablet landscape instead of allowing it to fall after the
      visual grid.
   2) Make Live Positions consume only its independent side column and adapt
      its internal columns to Mini/Air/Pro widths without moving the wheel. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  /* Tablet Live Positions: compact, predictable columns. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel h4 {
    margin: 0 0 6px;
    white-space: nowrap;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .explorer-angles {
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-angle-row {
    display: grid;
    grid-template-columns: 18px 16px minmax(34px, 1fr) 28px 24px;
    column-gap: 2px;
    align-items: center;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .explorer-planets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-pair {
    display: contents;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-row {
    display: grid;
    grid-template-columns: 20px 20px minmax(34px, 1fr) 28px 24px 27px;
    column-gap: 2px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-value {
    display: contents;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-sign-name,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-degree,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-minute,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-house {
    min-width: 0;
    white-space: nowrap;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-short {
    display: none;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-full {
    display: inline;
  }
}

/* Normal tablet landscape: direct-child legend must occupy the row before the
   visual grid. Explicit ordering prevents older landscape grid rules placing it
   after the chart. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer:not(.explorer-fullscreen) {
    display: flex;
    flex-direction: column;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-control-dock {
    order: 1;
    flex: 0 0 auto;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-paused-event {
    order: 2;
    flex: 0 0 auto;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-event-legend {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
  }
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-visual-grid {
    order: 4;
    flex: 0 0 auto;
  }

  /* Give the right column enough room for all Live Position values while the
     left chart column remains fluid. */
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-visual-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 30%);
    column-gap: 10px;
  }
}

/* Smaller tablet widths (Mini portrait / narrow tablet emulation): use compact
   sign names so degree, minute and house remain visible. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 850px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-full {
    display: none;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-short {
    display: inline;
  }
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-angle-sign {
    overflow: hidden;
    text-overflow: clip;
  }
}

/* Fullscreen tablet Live Positions: keep the established centred wheel and use
   the free right-hand region only. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    right: 8px;
    top: 8px;
    width: clamp(180px, 24vw, 250px);
    min-width: 180px;
    max-width: calc(50% - 12px);
    padding: 0;
    overflow: hidden;
  }
}

/* 2026-09-21: tablet fullscreen Wheel Lines natural flow.
   Keep chart + legends as a compact stack; scroll the visual area only when
   the stack is taller than the fullscreen viewport. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) 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 {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .aspect-legend {
    flex: 0 0 auto;
    margin-top: 5px;
    margin-bottom: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend {
    display: block;
    flex: 0 0 auto;
    width: min(100%, 720px);
    margin: 8px auto max(12px, env(safe-area-inset-bottom));
  }
}

/* 2026-09-21: iPad portrait fullscreen top-edge breathing room.
   Landscape fullscreen is already correct, so this is portrait-only.
   Give the lower timeline scale/legend a little clearance, then move the
   visual stack down enough for the MC label to remain fully visible. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-event-legend {
    margin-top: 6px;
    margin-bottom: 5px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    padding-top: 7px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    padding-top: 0;
  }
}

/* 2026-09-21: iPad portrait fullscreen MC-label clearance.
   Timeline + event legend are now correct. Move only the chart stack down a
   little more so the MC label clears the top edge; landscape is untouched. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    margin-top: 10px;
  }
}

/* 2026-09-21: iPad portrait fullscreen Live Positions split layout.
   AC/MC + Sun/Moon/Mercury use the upper-left free space; Venus/Mars/Jupiter/
   Saturn use the upper-right. The wheel remains on its established centre axis. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    width: auto;
    max-width: none;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(150px, 190px);
    grid-template-rows: auto repeat(5, auto);
    justify-content: space-between;
    align-content: start;
    column-gap: 16px;
    row-gap: 2px;
    padding: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin: 0 0 4px;
    padding: 0;
    white-space: nowrap;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-angles {
    grid-column: 1;
    grid-row: 2;
    display: block;
    width: 100%;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-angles
    .live-angle-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-planets,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-planets
    .live-body-pair {
    display: contents;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* Left block: AC, MC, Sun, Moon, Mercury. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-0 {
    grid-column: 1;
    grid-row: 3;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-1 {
    grid-column: 1;
    grid-row: 4;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-2 {
    grid-column: 1;
    grid-row: 5;
  }

  /* Right block: Venus, Mars, Jupiter, Saturn. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-3 {
    grid-column: 2;
    grid-row: 2;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-4 {
    grid-column: 2;
    grid-row: 3;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-5 {
    grid-column: 2;
    grid-row: 4;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-6 {
    grid-column: 2;
    grid-row: 5;
  }

  /* Give each compact row enough room for sign + degree + minute + house. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    display: grid;
    grid-template-columns: 20px 20px minmax(38px, 1fr) 28px 24px 28px;
    column-gap: 2px;
    align-items: center;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row {
    display: grid;
    grid-template-columns: 20px 18px minmax(38px, 1fr) 28px 24px;
    column-gap: 2px;
    align-items: center;
  }

  /* Keep the central MC corridor clear. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    padding-top: 0;
  }
}

/* 2026-09-21: iPad portrait fullscreen Live Positions compact pass.
   Keep the two-side split, but tighten each block so it stays clear of the
   wheel and begins directly beneath the event legend. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    left: 8px;
    right: 8px;
    top: 0;
    grid-template-columns: 142px 142px;
    grid-template-rows: auto repeat(5, 18px);
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
  }

  /* Heading belongs visually to the left-hand block, not the page centre. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin: 0 0 1px;
    padding: 0;
    line-height: 16px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-angles {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-angles
    .live-angle-pair {
    gap: 0;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    min-height: 18px;
    height: 18px;
    line-height: 18px;
    margin: 0;
    padding: 0;
  }

  /* Compact columns: badge, zodiac, short sign, degree, minute, house. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    grid-template-columns: 18px 18px 30px 22px 20px 24px;
    column-gap: 1px;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row {
    grid-template-columns: 18px 16px 30px 22px 20px;
    column-gap: 1px;
  }

  /* The left block starts immediately below the heading. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-0 {
    grid-column: 1;
    grid-row: 4;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-1 {
    grid-column: 1;
    grid-row: 5;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-2 {
    grid-column: 1;
    grid-row: 6;
  }

  /* Right block begins level with the first data row. */

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-sign-name,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-degree,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-minute,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-house {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* 2026-09-21: final iPad portrait-fullscreen Live Positions balance.
   Left: heading, AC, MC, Sun, Moon.
   Right: Mercury, Venus, Mars, Jupiter, Saturn.
   Restore larger badges and add deliberate spacing between badge/sign and
   between the minute/house coordinate columns. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    grid-template-columns: 150px 150px;
    grid-template-rows: 20px repeat(5, 20px);
    row-gap: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin: 0;
    line-height: 20px;
  }

  /* AC + MC occupy rows 2 and 3 on the left. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-angles {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  /* Sun + Moon complete the left-hand five-line block. */

  /* Mercury, Venus, Mars, Jupiter, Saturn: five rows on the right. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row-2 {
    grid-column: 2;
    grid-row: 1;
  }

  /* Restore the badge size while keeping the two blocks compact. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    grid-template-columns: 20px 20px 34px 23px 21px 27px;
    column-gap: 1px;
    height: 20px;
    min-height: 20px;
    line-height: 20px;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row {
    grid-template-columns: 20px 18px 34px 23px 21px;
    column-gap: 1px;
    height: 20px;
    min-height: 20px;
    line-height: 20px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-planet-badge,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-zodiac-badge {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
    line-height: 19px;
  }

  /* Visual breathing room requested between badges/sign text. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-sign-name {
    padding-left: 3px;
  }

  /* Extra separation between the second and third coordinate values
     (minute and house) without widening the whole row excessively. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-house {
    padding-left: 3px;
  }
}

/* 2026-09-21: iPad portrait-fullscreen Live Positions spacing polish.
   Preserve the 5-line left/right split while adding readable row/column
   breathing room and a clear gap before the house coordinate. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    grid-template-columns: 164px 164px;
    grid-template-rows: 22px repeat(5, 23px);
    row-gap: 1px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    line-height: 22px;
    margin: 0 0 2px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    grid-template-columns: 20px 20px 39px 25px 23px 30px;
    column-gap: 2px;
    height: 23px;
    min-height: 23px;
    line-height: 23px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row {
    grid-template-columns: 20px 18px 39px 25px 23px;
    column-gap: 2px;
    height: 23px;
    min-height: 23px;
    line-height: 23px;
  }

  /* A little air between the zodiac badge and its sign name. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-sign-name {
    padding-left: 4px;
  }

  /* Explicit visual separation between minute and house:
     e.g. Virgo 22° 29'   H1. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-house {
    padding-left: 6px;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-planet-badge,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-zodiac-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    line-height: 20px;
  }
}

/* 2026-09-21: unified tablet Live Positions styling.
   Placement remains responsive (portrait fullscreen keeps its 5+5 split);
   row geometry is now identical across portrait/landscape and full/non-fullscreen. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel {
    font-size: 11px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel h4 {
    font-size: 12px;
    line-height: 20px;
    margin: 0 0 4px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-angle-row,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-row {
    box-sizing: border-box;
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    column-gap: 0;
  }

  /* Planet | zodiac | sign | degree | minute | house.
     The blank space is built into the column widths, rather than relying on
     padding that older responsive rules can collapse. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-row {
    grid-template-columns: 22px 26px minmax(44px, 1fr) 31px 31px 34px;
  }

  /* AC/MC | zodiac | sign | degree | minute. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-angle-row {
    grid-template-columns: 22px 26px minmax(44px, 1fr) 31px 31px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-planet-badge,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-badge {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    justify-self: start;
  }

  /* Clear air after the zodiac badge. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-sign-name {
    box-sizing: border-box;
    min-width: 0;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-degree,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-minute,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-house {
    box-sizing: border-box;
    min-width: 0;
    padding: 0;
    white-space: nowrap;
    justify-self: start;
  }

  /* Deliberate separation between 29' and H1 etc. */
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-house {
    padding-left: 8px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .explorer-planets {
    row-gap: 1px;
  }
}

/* Portrait fullscreen keeps the agreed split:
   Left = Live Positions / AC / MC / Sun / Moon
   Right = Mercury / Venus / Mars / Jupiter / Saturn.
   Only the block widths/rows are adjusted here; internals use the unified rules above. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) and (min-height: 900px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    grid-template-columns: 178px 178px;
    grid-template-rows: 22px repeat(5, 23px);
    row-gap: 1px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-angle-row,
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .live-body-row {
    height: 23px;
    min-height: 23px;
    line-height: 23px;
  }
}

/* Give normal tablet Live Positions enough width for the unified columns
   without allowing it to alter the established wheel centre. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    .explorer-live-panel {
    min-width: 205px;
  }
}

/* 2026-09-21: Live Positions DOM-accurate tablet spacing.
   Actual markup is:
   .live-body-glyph | .live-zodiac-glyph | .live-body-value
   (with .live-body-value displayed as contents by the tablet layout).
   Previous rules targeted non-existent .live-planet-badge/.live-zodiac-badge
   classes, so the visible planet/zodiac pair never received the intended gap. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (min-height: 600px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-row {
    grid-template-columns: 22px 25px minmax(44px, 1fr) 31px 31px 36px;
    column-gap: 2px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-glyph {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 20px;
    min-width: 20px;
    margin: 0;
  }

  #natalWorkspace
    .birth-time-explorer
    .explorer-live-panel
    .live-body-glyph
    .natal-planet-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    line-height: 20px;
    margin: 0;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    margin-left: 3px;
    margin-right: 3px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-sign-name {
    padding-left: 4px;
  }
}

/* Pause-at-events idle message keeps the event row geometry stable. */
#natalWorkspace .explorer-paused-event-dot-idle {
  visibility: hidden;
}

/* Idle Pause-at-Events message: use the full bar width and wrap on narrow screens. */
#natalWorkspace .explorer-paused-event-item:has(> span:only-child) {
  width: 100%;
  min-width: 0;
}
#natalWorkspace .explorer-paused-event-item:has(> span:only-child) > span {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

/* 2026-09-22: explicit tablet-landscape normal-mode placement.
   JS applies .explorer-tablet-landscape using the same device detection that
   performs the DOM placement. Do not depend on CSS hover/pointer media queries,
   which can differ from navigator.maxTouchPoints in DevTools/real browsers. */
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape
  > .explorer-paused-event {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  margin: 6px 0 3px;
  align-self: start;
  z-index: auto;
}

#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape
  > .explorer-event-legend {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  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 0 5px;
  padding: 0;
  gap: 10px;
  white-space: nowrap;
  z-index: auto;
}

#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape
  > .explorer-event-legend
  .explorer-event-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  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;
}

/* 2026-09-22: normal-view event metadata is flow content, not a wheel overlay.
   This deliberately overrides the older generic landscape left/top anchoring. */
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  > .explorer-paused-event,
#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  > .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-paused-event {
  width: max-content;
  max-width: 100%;
  margin: 6px 0 3px;
}

#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  > .explorer-event-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0 0 5px;
  padding: 0;
  gap: 10px;
}

#natalWorkspace
  .birth-time-explorer:not(.explorer-fullscreen)
  > .explorer-event-legend
  .explorer-event-toggle {
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

/* 2026-09-22 FINAL tablet metadata flow fix.
   In tablet landscape normal mode the section is a flex column, so EVERY major
   direct child needs an explicit order. Otherwise an unassigned child defaults
   to order:0 and can jump above the player regardless of its DOM position. */
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-heading {
  order: 0;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-control-dock {
  order: 1;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-paused-event {
  order: 2;
  position: static;
  inset: auto;
  transform: none;
  margin: -3px 0 5px;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-event-legend {
  order: 3;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .birth-day-scan {
  order: 4;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-visual-grid {
  order: 5;
}
#natalWorkspace
  .birth-time-explorer.explorer-tablet-landscape:not(.explorer-fullscreen)
  > .explorer-note {
  order: 6;
}

/* Tablet portrait normal mode: trim 2px above the info bar and add 2px below it. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 701px) {
  #natalWorkspace
    .birth-time-explorer:not(.explorer-fullscreen)
    > .explorer-paused-event {
    margin: 4px 0 5px;
  }
}

/* 2026-09-22: mobile landscape fullscreen — match info-bar text to 12px event legend text. */
@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-paused-event {
    font-size: 12px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event
    .explorer-paused-event-item
    > span,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-paused-event
    .explorer-paused-event-item
    > span {
    font-size: 12px;
  }
}

/* 2026-09-22 mobile fullscreen fit/centering pass.
   Keep the phone viewer compact enough that the complete wheel and Wheel Lines
   remain inside the non-scrolling fullscreen viewport. */
@media (hover: none) and (pointer: coarse) and (max-width: 600px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    box-sizing: border-box;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 18px 16px 22px 22px;
    column-gap: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 17px 16px minmax(0, 1fr);
    column-gap: 1px;
    height: 18px;
    min-height: 18px;
    line-height: 18px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-value {
    display: grid;
    grid-template-columns: 20px 19px 23px;
    column-gap: 0;
    min-width: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-degree,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-minute,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-house {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-sign-name {
    margin: 0;
    padding: 0;
  }
}

/* Portrait phone fullscreen: compact Live Positions vertically and size the
   wheel from the available viewport height, reserving room for Wheel Lines. */
@media (hover: none) and (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4 {
    margin: 0 0 2px;
    line-height: 16px;
    min-height: 16px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-pair,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-pair {
    margin-bottom: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .explorer-angles {
    margin-bottom: 2px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid {
    margin-top: 0;
    padding-top: 0;
    min-height: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart {
    position: relative;
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin: -4px 0 0;
    transform: translateX(-50%);
    align-items: center;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart {
    width: min(92vw, calc(100dvh - 300px));
    max-width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend {
    width: min(92vw, 100%);
    margin: 2px auto max(3px, env(safe-area-inset-bottom));
  }
}

/* Landscape phone fullscreen: the shorter/wrapping event bar no longer needs
   the old wheel drop.  Compact the right-hand Live Positions panel and centre
   the wheel on the viewer/timeline axis while moving it upward. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #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) 174px;
    column-gap: 2px;
    margin-top: 0;
    padding-top: 0;
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    width: 174px;
    min-width: 174px;
    max-width: 174px;
    padding: 1px 0 0;
    margin: 0;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    h4,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    h4 {
    font-size: 12px;
    line-height: 15px;
    min-height: 15px;
    margin: 0 0 2px;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    position: relative;
    left: 50%;
    right: auto;
    margin: -10px 0 0;
    transform: translateX(-50%);
  }
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .natal-chart {
    width: min(48dvh, 270px);
    height: auto;
    aspect-ratio: 1/1;
  }
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-wheel-legend {
    margin: 1px auto max(2px, env(safe-area-inset-bottom));
  }
}

/* 2026-09-22 final phone-landscape fullscreen alignment.
   Centre the wheel against the COMPLETE fullscreen viewer, not the first
   column left over after Live Positions. Live Positions becomes a narrower
   overlay on the right, so it no longer changes the wheel's centre axis. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #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%;
    min-width: 0;
    margin-top: 5px;
    padding-top: 0;
  }

  /* Narrow right overlay. It must not participate in wheel centring. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    position: absolute;
    right: 2px;
    left: auto;
    top: 0;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    margin: 0;
    padding: 0;
    z-index: 8;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 18px 15px 20px 20px;
    column-gap: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 16px 15px minmax(0, 1fr);
    column-gap: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-value,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-body-value {
    grid-template-columns: 18px 18px 21px;
    column-gap: 0;
  }

  /* Full-width chart container: 50% now means the actual viewer centre. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    height: auto;
    margin: -5px auto 0;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart-stage {
    margin-left: auto;
    margin-right: auto;
  }

  /* Give the whole metadata/visual region a little breathing room below player. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    > .explorer-paused-event {
    margin-top: 5px;
  }
}

/* 2026-09-22 mobile landscape fullscreen final spacing refinement.
   Preserve the now-correct horizontal wheel centre. Move only the chart
   vertically and restore enough Live Positions width for one-line values. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    width: 168px;
    min-width: 168px;
    max-width: 168px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-angle-row {
    grid-template-columns: 20px 17px 1fr;
    column-gap: 2px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-body-row {
    grid-template-columns: 18px 17px minmax(0, 1fr);
    column-gap: 2px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-value,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-body-value {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) 21px 21px 24px;
    column-gap: 1px;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-sign-name,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-degree,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-minute,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-house,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-sign-name,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-degree,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-minute,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-house {
    white-space: nowrap;
    min-width: 0;
  }

  /* Horizontal centring stays untouched; only reclaim the empty vertical gap. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    margin: -38px auto 0;
  }
}

/* 2026-09-22 phone landscape fullscreen: final wheel + AC/MC refinement.
   Keep the established horizontal centre. Move the wheel to the top of its
   available area, enlarge it modestly, and keep AC/MC coordinates on one line. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  /* AC / MC: label, zodiac, sign and both coordinates remain on one row. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-angle-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 2px;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-row
    > *,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-angle-row
    > * {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-angle-sign,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel
    .live-angle-sign {
    max-width: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Give AC/MC enough room without allowing Live Positions to dominate the view. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-live-panel,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-live-panel {
    width: 176px;
    min-width: 176px;
    max-width: 176px;
  }

  /* Pull the wheel to the top of the wheel area while retaining a small
     clearance for the upper zodiac sector / MC label. Horizontal centring
     remains the full-viewer centring established in the previous pass. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    margin: -64px auto 0;
  }

  /* Use the recovered vertical room to make the wheel a little larger. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart-stage {
    width: min(205px, 42vh);
    height: min(205px, 42vh);
    max-width: 205px;
    max-height: 205px;
    flex: 0 0 auto;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .explorer-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart {
    width: 100%;
    height: 100%;
  }
}

/* 2026-09-22 mobile landscape fullscreen only:
   final wheel vertical position + size. Keep the established horizontal centre,
   Live Positions layout and all portrait/tablet/desktop layouts untouched. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    margin: -88px auto 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart-stage {
    width: min(240px, 52vh);
    height: min(240px, 52vh);
    max-width: 240px;
    max-height: 240px;
    flex: 0 0 auto;
  }
}

/* 2026-09-22 mobile landscape fullscreen:
   Pause-at-Events must not move the wheel. The info bar/legend occupy the
   left-hand metadata area independently of the chart. Also let the wheel use
   more of the available horizontal space while retaining the right-hand
   Live Positions clearance. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  /* Neutralise older pause-enabled wheel translations/clearance. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart {
    transform: none;
    margin: -88px auto 0;
  }

  /* Size from the space available in landscape rather than the old 52vh cap.
     clamp() keeps short/narrow phones safe while allowing an SE-sized
     landscape viewport to make useful use of its spare left/right room. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart-stage {
    width: clamp(240px, 42vw, 285px);
    height: clamp(240px, 42vw, 285px);
    max-width: 285px;
    max-height: 285px;
    flex: 0 0 auto;
  }
}

/* 2026-09-22 mobile landscape fullscreen:
   .explorer-paused-event is a normal-flow sibling above the visual grid, so
   showing it adds height before the chart even though the chart itself has
   the same margin/transform. Compensate for that flow height so the wheel
   remains at the same screen Y position with Pause at Events on or off.
   This is deliberately scoped to phone landscape fullscreen only. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart {
    transform: none;
    margin: -124px auto 0;
  }
}

/* 2026-09-22 final mobile fullscreen polish.
   Portrait: restore a little visual separation between planet, zodiac and
   coordinate columns without changing the compact Live Positions structure. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 480px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    column-gap: 3px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-glyph {
    margin-right: 2px;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-glyph {
    margin-right: 3px;
  }
}

/* Landscape fullscreen: reserve a stable two-line information area.
   The idle message and actual event message therefore consume the same
   vertical space and cannot move the wheel when playback hits/leaves an event. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    > .explorer-paused-event {
    box-sizing: border-box;
    width: 172px;
    min-width: 172px;
    max-width: 172px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin-top: 0;
    margin-bottom: 4px;
    overflow: hidden;
  }

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

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event
    .explorer-paused-event-item,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    > .explorer-paused-event
    .explorer-paused-event-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    align-items: flex-start;
  }

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

  /* Keep the pause-enabled chart compensation constant now that the message
     area itself has a fixed height. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen.explorer-pause-events-enabled
    .explorer-shared-chart {
    margin: -124px auto 0;
  }
}

/* 2026-09-22 mobile landscape fullscreen final alignment:
   widen the two-line event/info area and lower the complete visual area
   slightly so Live Positions clears the player timeline. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    > .explorer-paused-event {
    width: 205px;
    min-width: 205px;
    max-width: 205px;
  }

  /* Move the complete wheel/live-position visual region down together rather
     than moving the chart alone, preserving their relative alignment. */
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    > .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    > .explorer-visual-grid {
    position: relative;
    top: 4px;
  }
}

/* 2026-09-22 mobile landscape fullscreen — generated DOM correction.
   In landscape fullscreen the info bar now lives inside .explorer-visual-meta,
   so older direct-child selectors on .birth-time-explorer do not apply. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-paused-event,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-paused-event {
    box-sizing: border-box;
    width: 205px;
    min-width: 205px;
    max-width: 205px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    overflow: hidden;
  }

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

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-meta
    .explorer-paused-event-item
    > span,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-meta
    .explorer-paused-event-item
    > span {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: normal;
    line-height: 14px;
  }

  /* Fullscreen itself is normally clipped/non-scrolling. On short phone
     landscape screens allow vertical touch scrolling so Wheel Lines remains
     reachable below the enlarged wheel. */
  #natalWorkspace .birth-time-explorer.explorer-fullscreen,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-wheel-legend {
    flex: 0 0 auto;
    position: relative;
    z-index: 9;
  }
}

/* 2026-09-22 mobile landscape fullscreen — make Wheel Lines genuinely
   scrollable. The fullscreen base layout fixes the second grid row to the
   viewport and gives .explorer-visual-grid height:100%/overflow:hidden.
   Scrolling the outer section alone therefore cannot expose content below
   that clipped row. In phone landscape fullscreen, let the visual row size
   to its contents and remove the inner clipping so Wheel Lines contributes
   to the fullscreen element's scroll height. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer.explorer-fullscreen,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen {
    grid-template-rows: auto auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-visual-grid,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-visual-grid {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-shared-chart,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-shared-chart {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #natalWorkspace .birth-time-explorer.explorer-fullscreen .natal-chart-wrap,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .natal-chart-wrap {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-chart-stage,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-chart-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen.explorer-ios-landscape-fullscreen
    .explorer-wheel-legend {
    display: block;
    position: relative;
    width: min(285px, 56vw);
    margin: 3px auto max(8px, env(safe-area-inset-bottom));
    flex: 0 0 auto;
    visibility: visible;
  }
}

/* 2026-09-22 mobile Live Positions cosmetic spacing.
   Portrait fullscreen: planet -> zodiac -> first coordinate.
   Landscape: zodiac -> first coordinate only. */

/* Mobile portrait fullscreen */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 480px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-glyph {
    margin-right: 3px;
  }
}

/* Mobile landscape, full screen and normal screen */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-glyph {
    margin-right: 3px;
  }
}

/* 2026-09-22 mobile Live Positions structural correction.
   Portrait fullscreen should use the available viewer width rather than
   compressing the Live Positions block against the left edge.
   Landscape uses compact, equal-width planet/zodiac badge columns. */

/* Mobile portrait fullscreen: restore a full-width Live Positions region. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 480px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    align-self: start;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .explorer-planets {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-pair {
    min-width: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-row {
    min-width: 0;
  }

  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-body-glyph,
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-live-panel
    .live-zodiac-glyph {
    flex: 0 0 17px;
    width: 17px;
    min-width: 17px;
    max-width: 17px;
  }
}

/* Mobile landscape: zodiac must not reserve a 24px column.
   Match it to the compact planet badge width, then add the requested gap
   before the first coordinate. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-glyph,
  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-zodiac-glyph {
    flex: 0 0 17px;
    width: 17px;
    min-width: 17px;
    max-width: 17px;
  }

  #natalWorkspace .birth-time-explorer .explorer-live-panel .live-body-value {
    min-width: 0;
    margin-left: 0;
  }
}

/* 2026-09-22: mobile landscape fullscreen — give the wheel IC label
   a little clearance above the Wheel Lines section. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  #natalWorkspace
    .birth-time-explorer.explorer-fullscreen
    .explorer-wheel-legend {
    transform: translateY(3px);
  }
}