/* Full approved landscape overview, not a new portrait menu. Native modal
   remains in the viewport top layer; its existing legible sizing is intact. */
:root[data-settings-preview] { font-size: 16px; }
html[data-settings-preview] .app-shell {
  position: fixed;
  left: var(--settings-preview-left);
  top: var(--settings-preview-top);
  width: var(--settings-preview-width);
  height: calc(var(--settings-preview-height) + 54px);
  max-width: none;
  overflow: visible;
}
html[data-settings-preview] .stage[data-screen="settings"] {
  width: 1428px;
  height: 803.6770334928229px;
  aspect-ratio: 1672 / 941;
  min-width: 0;
  transform-origin: top left;
  transform: scale(var(--settings-preview-scale));
}
html[data-settings-preview] .status-rail {
  position: absolute;
  top: calc(var(--settings-preview-height) + 6px);
  left: 0; width: 100%; height: 48px; margin: 0;
}
.stage[data-screen="settings"] .settings-content:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: -2px;
}

/* Compact landscape: keep the approved scene and give actions their own
   column, so returning home never depends on scrolling past save controls. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px),
       (orientation: landscape) and (min-width: 640px) and (max-width: 1000px) {
  .stage[data-screen="settings"] .settings-panel {
    border-width: 12.65px 8.8px;
    padding: 5px 8px;
    gap: 6px;
  }
  .stage[data-screen="settings"] .settings-scroll-note { display: none; }
  .stage[data-screen="settings"] .settings-content {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(250px, 1.1fr);
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: 12px;
    row-gap: 0;
    overflow: visible;
  }
  .stage[data-screen="settings"] .settings-content .settings-row { grid-column: 1; padding: 6px 0; }
  .stage[data-screen="settings"] .settings-content .settings-row > span:last-child:not(:first-child) { display: none; }
  .stage[data-screen="settings"] .settings-content .action-dock {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }
  .stage[data-screen="settings"] .settings-content .action-button,
  .stage[data-screen="settings"] .settings-content .action-button[data-action="home"] {
    min-height: 48px;
    padding: 6px;
    font-size: 13px;
    line-height: 1.25;
    width: 100%;
  }
}

/* r169: music uses the same master mute and keeps its own remembered volume. */
.stage[data-screen="settings"] .music-settings-row { flex-wrap: wrap; gap: 3px; }
.stage[data-screen="settings"] .music-volume-control { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 13px; font-weight: 800; }
.stage[data-screen="settings"] .music-volume-control > span { flex: 0 0 auto; }
.stage[data-screen="settings"] #music-volume { flex: 1 1 auto; width: 80px; min-width: 40px; min-height: 44px; margin: 0; accent-color: #287a78; cursor: pointer; }
.stage[data-screen="settings"] #music-volume-value { flex: 0 0 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
@media (orientation: landscape) and (min-width: 640px) and (max-height: 760px), (orientation: landscape) and (min-width: 640px) and (max-width: 1000px) {
  .stage[data-screen="settings"] .settings-content .action-dock { grid-row: 1 / span 3; }
}

.stage[data-screen="settings"] .music-settings-row > span:first-child { flex: 1 0 100%; }
.stage[data-screen="settings"] .music-volume-control { flex: 0 0 100%; }
.stage[data-screen="settings"] .settings-content .music-settings-row { display: flex; flex-direction: column; align-items: stretch; }