.wave-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font: calc(12px * var(--app-text-scale, 1))/1.35 system-ui, sans-serif; }
.wave-controls button, .wave-controls select { box-sizing: border-box; min-height: 36px; padding: 7px 12px; border: 1px solid #9dbdc4; border-radius: 9px; font: inherit; color: #174252; background: #e6f3ef; cursor: pointer; }
.wave-controls .wave-mode[aria-pressed="true"] { background: #174d60; border-color: #174d60; color: white; }
.wave-controls .wave-mode { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 650; }
.wave-mode-icon { font-size: calc(19px * var(--app-text-scale, 1)); line-height: calc(14px * var(--app-text-scale, 1)); }
.wave-controls :focus-visible { outline: 2px solid #269ba5; outline-offset: 3px; }
.wave-choice { min-width: 0; max-width: 100%; }
.wave-choice select { max-width: 100%; }
.wave-controls [hidden], .wave-heading[hidden], .wave-floating[hidden], .wave-study [hidden] { display: none; }
.wave-floating { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 11; width: max-content; padding: 7px; border: 1px solid #67bcca50; border-radius: 14px; background: #0a162bef; box-shadow: 0 4px 26px #0007; }
.wave-floating .wave-controls { justify-content: center; }
.wave-floating[data-deck-open="true"] { z-index: 21; }
.wave-readouts { position: fixed; z-index: 6; display: grid; grid-template-rows: minmax(0, 1fr); gap: 10px; overflow: hidden; border-radius: 10px; background: #0a162b; }
.wave-readouts[data-split="true"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.wave-readout-frame { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; scrollbar-gutter: stable; border-radius: 10px; box-shadow: inset 0 0 0 1px #799ba944; }
.wave-readouts[hidden], .wave-readout-frame[hidden] { display: none; }
.wave-readouts canvas { display: block; }
.wave-readout-frame:focus-visible { outline: 2px solid #79dfc3; outline-offset: -2px; }
.stage-explainers-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; box-sizing: border-box; cursor: pointer; touch-action: manipulation; flex: 0 0 auto; }
.stage-explainers-toggle input { width: 20px; height: 20px; margin: 0; font: inherit; accent-color: var(--ui-button-start, #0f8a4e); cursor: pointer; }
.wave-floating button, .wave-floating select { background: #182a40; border-color: #446279; color: #dceef5; }
.wave-floating .wave-mode[aria-pressed="true"] { background: #99e6de; border-color: #b4ffec; color: #0b303c; }
.wave-heading { pointer-events: none; position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 6; width: max-content; text-align: center; color: #daeff4; font: calc(12px * var(--app-text-scale, 1))/1.5 system-ui, sans-serif; }
.wave-heading strong, .wave-heading span, .wave-heading small { display: block; }
.wave-heading[data-compact-lesson="true"] .wave-axis, .wave-heading[data-compact-lesson="true"] .wave-note { display: none; } /* The lesson card explains the model and its limits; keep the small plot clear. */
.wave-heading strong { font-weight: 600; font-size: calc(16px * var(--app-text-scale, 1)); letter-spacing: .03em; }
.wave-axis { color: #a8ccdb; }
.wave-note { color: #799ba9; font-size: calc(10px * var(--app-text-scale, 1)); margin-top: 5px; }
.wave-deck-controls { margin: 8px 0 12px; }
#left-deck .deck-folder-tabs { display: none; } /* The host's prominent depiction buttons select these same folders. */
.wave-tour-controls { width: 100%; }
.wave-tour-controls .wave-controls { font-size: calc(11px * var(--app-text-scale, 1)); }
.wave-tour-controls .wave-controls button, .wave-tour-controls .wave-controls select { min-height: 29px; padding: 4px 7px; }
.wave-study { margin: 14px 0; padding: 14px; border: 1px solid #b9ccc8; border-radius: 12px; background: #eef3ef; }
.wave-study h3 { margin: 0 0 10px; font-size: calc(14px * var(--app-text-scale, 1)); }
.wave-study .wave-controls { margin-bottom: 10px; }
.wave-study-canvas { display: block; width: 100%; height: clamp(180px, 28vw, 300px); border-radius: 9px; }
.wave-study-label { margin: 6px 0; font: calc(11px * var(--app-text-scale, 1))/1.5 system-ui, sans-serif; }
.wave-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
#wave-control-tip { z-index: 45; }
@media (max-width: 759px) {
  .wave-floating { padding: 5px; width: calc(100% - 32px); }
  .wave-floating .wave-controls { font-size: calc(11px * var(--app-text-scale, 1)); }
  .wave-floating button, .wave-floating select { min-height: 34px; padding: 6px 8px; }
  .wave-heading { top: 78px; }
  .wave-heading strong { font-size: calc(13px * var(--app-text-scale, 1)); }
  .wave-note { font-size: calc(9px * var(--app-text-scale, 1)); }
}
@media (max-width: 759px), (pointer: coarse) and (max-width: 1024px) {
  .wave-floating[data-deck-open="true"] { max-height: 24dvh; overflow-y: auto; }
  /* Enlarged edge tabs extend beside the tray; keep the floating controls between them. */
  html[data-text-enlarged="true"] .wave-floating[data-deck-open="true"] { max-width: calc(100% - 128px); max-height: 24dvh; }
  html[data-deck-open="true"] .controller-deck .developer-panel-body { padding-bottom: calc(24dvh + 24px); }
}
@media (max-height: 500px) and (max-width: 1024px) {
  html[data-text-enlarged="true"] .wave-floating[data-deck-open="true"] { max-width: calc(100% - 184px); }
}