/* Step C (REFLEXIONSPUNKTE): the sound stage of sound-step-ui.mjs, built as
   step B (theme.css .materials-grid): the room view left, the side right with
   the one big button, the legend and the expert controls; below 900 px all of
   it under each other. C takes the whole width of the room flow; the treatment
   moved to Ergebnis (BEHANDLUNG.md 2.2, SCHALLMODELL.md §8.5). Loaded after
   theme.css and uses its tokens; the colours of points, sources and
   suggestions are those of the model (SOUND_COLOURS, SOURCE_COLORS) and come
   in per element as --c. */

/* ---------------------------------------------------------------- the stage */
.sound-stage{--sound-treat:#f0b48a;--sound-second:rgb(214,158,46);display:grid;gap:12px;min-width:0;margin:6px 0 20px}
/* Button, legend and expert controls in one column beside (or under) the view. */
.sound-side{display:grid;gap:12px;align-content:start;min-width:0}
/* View left, side right as step B; no `order` anywhere (tests/room-steps.test.mjs):
   the document order view → side is also the order under 900 px. */
@media (min-width:900px){
  .sound-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:start}
}
/* On a computer (Jonas, 06.10.2026: „mache das fenster der simulation genau
   so groß, mache alles andere clean passend in die leiste rechts (desktop
   only)“): the view as large as step B's (theme.css, .materials-card), the
   rest in a column of 260 px beside it, one control under the other. */
@media (min-width:901px){
  .sound-stage{grid-template-columns:minmax(0,1fr) 260px;gap:16px}
  .sound-stage .sound-view{height:clamp(420px,calc(100vh - 230px),900px)}
  .sound-side{gap:10px}
  .sound-side .sound-bar{gap:8px}
  .sound-side .button.sound-action{flex:1 1 0;min-width:0;padding:12px 14px}
  .sound-side .sound-note{flex:1 1 100%;font-size:11.5px}
  .sound-side .sound-top{gap:10px;padding:12px}
  .sound-side .sound-freq .field{grid-template-columns:minmax(0,1fr) auto;gap:6px 8px}
  .sound-side .sound-freq .field>span{grid-column:1/-1}
  .sound-side .sound-expert-pair{grid-template-columns:minmax(0,1fr)}
  .sound-side .sound-expert-label{flex-basis:100%}
  .sound-side .choice-pop{left:auto;right:0}
  .sound-side .sound-legend-summary{padding:10px 12px}
  .sound-side .sound-legend-box,.sound-side .sound-refl-fold>.sound-arrivals{padding:0 12px 12px}
  .sound-side .sound-refl{gap:4px 8px;padding:7px 10px;font-size:12px}
}
/* The canvas carries .materials-view as well: the height of step B's view at every width. */
.sound-view{display:block;width:100%}

/* The button and the line beside it */
.sound-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;min-width:0}
.button.sound-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:200px;min-height:50px;padding:12px 26px;font-size:14px;letter-spacing:.04em}
/* without Pro the button goes once the points are there (sound-step-ui.mjs render) */
.sound-bar[hidden],.button.sound-action[hidden]{display:none}
/* without Pro the bar of what Pro adds, between the strongest reflections and
   the legend (pro-teasers.mjs mountStepCTeaser): the picture on top, under it
   the title and the link, as narrow as the side */
.sound-side .pro-teaser-step{display:flex;flex-direction:column;min-height:0}
.sound-side .pro-teaser-art{position:relative;width:100%;height:auto;aspect-ratio:12/5}
.sound-side .pro-teaser-step::before{display:none}
.sound-side .pro-teaser-step-text{max-width:none;padding:12px 14px 14px}
.sound-side .pro-teaser-step-text h3{margin:0 0 10px;font-size:19px}
/* Something to play: a small play mark in front of "Abspielen". */
.sound-action[data-state=computed]::before,.sound-action[data-state=animated]::before{content:"";flex:none;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
/* Busy: locked, but stays readable (the app's :disabled fades to .45) with a running sheen. */
.button.sound-action[aria-busy=true]:disabled{opacity:.88;cursor:progress;background-image:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:sound-busy 1.4s linear infinite}
.button.sound-action.is-playing{box-shadow:0 0 0 3px rgba(97,216,200,.22)}
@keyframes sound-busy{from{background-position:120% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.button.sound-action[aria-busy=true]:disabled{animation:none}}
/* Two lines kept free, also while it is empty or short (computing): nothing under it moves (Jonas, 06.10.2026). */
.sound-note{flex:1 1 240px;min-width:0;min-height:3em;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* On a phone (Jonas, 09.10.2026: „das ‚Rechnet Direktschall …‘ bei Berechnen
   weg, und den Berechnen-Button über die Breite gehen lassen (größer)“): the
   button across (the pause beside it while it plays), the line under it,
   the first line of all (sound-step-ui.mjs data-kind=intro) not at all. */
@media(max-width:560px){
  .button.sound-action{flex:1 1 auto;min-width:0;min-height:56px;font-size:15px}
  .sound-note{flex-basis:100%}
  .sound-note[data-kind=intro]{display:none}
}
/* The free camera under the settings (free-camera-ui.mjs, theme.css
   .materials-camera): its button wide, the „i“ beside it, „Kamera
   zurücksetzen“ in the line under them. */
.sound-side .sound-camera{margin-top:4px}
.sound-camera #sound-free-camera{flex:1 1 auto;height:36px}
.sound-camera #sound-camera-reset{flex:1 1 100%}
/* Pause right of „Abspielen“ while the sound plays (Jonas, 06.10.2026): two
   bars; held, the play mark, it goes on from there. */
.button.sound-pause{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:50px;min-width:50px;min-height:50px;padding:0}
.button.sound-pause[hidden]{display:none}
.button.sound-pause::before,.button.sound-pause::after{content:"";width:4px;height:16px;border-radius:1px;background:currentColor}
.button.sound-pause[data-state=held]::before{width:0;height:0;border-radius:0;background:none;border-left:11px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.button.sound-pause[data-state=held]::after{display:none}

/* ---------------------------------------------------------------- the box and the legend
   (Jonas, 05.10.2026): under the button one box without a title — analysis
   frequency (Pro), the strongest reflections as buttons, the model's notes,
   the expert's controls — and under it the legend, folded. No pills: clean
   buttons and plain tags. */
.sound-top{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45)}
.sound-top[hidden],.sound-freq[hidden],.sound-arrivals[hidden],.sound-notices[hidden]{display:none}
/* Label, the number (no up/down arrows) and an info button beside it (Jonas, 05.10.2026). */
.sound-freq .field{display:grid;grid-template-columns:auto 96px auto;align-items:center;justify-content:start;gap:4px 12px;margin:0}
.sound-freq .field input{-moz-appearance:textfield;appearance:textfield}
.sound-freq .field input::-webkit-inner-spin-button,.sound-freq .field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sound-freq .info-button{margin:0}
.sound-freq .field>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sound-freq .field input{height:36px;min-height:0;padding:0 10px;font:600 13px var(--mono)}
.sound-legend-fold{min-width:0;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.3)}
.sound-legend-fold[hidden]{display:none}
.sound-legend-summary{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none}
.sound-legend-summary::-webkit-details-marker{display:none}
.sound-legend-summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
.sound-legend-fold[open]>.sound-legend-summary::before{transform:rotate(45deg)}
.sound-legend-summary:hover{color:var(--text)}
.sound-legend-box{display:grid;gap:10px;min-width:0;padding:0 14px 14px}
.sound-legend-box[hidden]{display:none}
.sound-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;line-height:1.3;color:var(--muted)}
.sound-key-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sound-key-chips{display:inline-flex;gap:4px}

/* Symbols: small, the colour as on the canvas */
.sound-sym{--c:var(--accent);flex:none;display:inline-block;box-sizing:border-box;width:10px;height:10px;border-radius:50%;font-style:normal}
.sound-sym.is-filled{background:var(--c);box-shadow:0 0 0 2px rgba(10,26,32,.85)}
.sound-sym.is-hollow{border:2px solid var(--c)}
.sound-sym.is-dashed{border:1.5px dashed var(--c)}
.sound-sym.is-listener{width:9px;height:9px;background:var(--c);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--c)}
.sound-sym.is-mirror{width:16px;height:9px;border:2px solid var(--c);border-bottom:0;border-radius:9px 9px 0 0;opacity:.6}
.sound-sym.is-plan{width:auto;min-width:18px;height:14px;padding:0 3px;border:1.5px dashed var(--c);border-radius:2px;color:var(--c);font:600 9px/11px var(--mono);text-align:center}
.sound-sym.is-plan.is-built{border-style:solid}
/* A sound path S → P → R (thin line in the loudspeaker's colour) and the pulse travelling on it. */
.sound-sym.is-path{width:18px;height:0;border-radius:0;border-top:2px solid var(--c);opacity:.7}
.sound-sym.is-pulse{width:7px;height:7px;background:var(--c);box-shadow:0 0 0 2px rgba(10,26,32,.85),0 0 6px 1px var(--c)}

/* A loudspeaker: its colour and its name (L, R, SUB, …) */
.sound-src-tag{--c:var(--accent);display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--mono);color:var(--text);white-space:nowrap}
.sound-src-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}

/* The strongest reflections at the seat, in a fold of their own over the
   legend (Jonas, 06.10.2026), open at first; its head in champagne. With
   several seats shown a list each, under the seat's name. */
.sound-arrivals-seat{margin:4px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sound-refl-fold>.sound-arrivals{padding:0 14px 14px}
.sound-arrivals{display:grid;gap:6px;min-width:0}
.sound-arrivals-head{margin:0;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
.sound-refl-list{display:grid;gap:6px}
/* A reflection is a button: tapping it lights its point up in the view. */
.sound-refl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;width:100%;min-height:40px;margin:0;padding:8px 12px;border:1px solid var(--line-soft);border-radius:4px;background:rgba(10,26,32,.5);color:var(--text);font:inherit;font-size:12.5px;line-height:1.3;text-align:left;cursor:pointer}
.sound-refl:hover{border-color:var(--accent)}
.sound-refl[aria-pressed=true]{border-color:rgba(233,239,236,.85);background:rgba(233,239,236,.06)}
.sound-refl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sound-refl-name{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sound-refl .sound-num{font:500 12px/1.3 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sound-refl .sound-class{white-space:nowrap}
.sound-refl-show{flex:none;position:relative;width:14px;height:14px;border:1.5px solid var(--faint);border-radius:50%;box-sizing:border-box}
.sound-refl-show::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--faint)}
.sound-refl:hover .sound-refl-show,.sound-refl[aria-pressed=true] .sound-refl-show{border-color:var(--text)}
.sound-refl:hover .sound-refl-show::after,.sound-refl[aria-pressed=true] .sound-refl-show::after{background:var(--text)}
.sound-refl .sound-shade{flex:1 0 100%;font-size:11.5px}
/* The two ears in expert mode (Jonas, 06.10.2026). */
.sound-refl .sound-ears{flex:1 0 100%;font:500 11.5px/1.35 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sound-class.is-behandeln{color:var(--sound-treat)}
.sound-class.is-optional{color:var(--champagne)}
.sound-class.is-unkritisch,.sound-class.is-spaet,.sound-shade{color:var(--muted)}
.sound-warnings{margin:0;font-size:11.5px;line-height:1.5;color:var(--faint)}
/* Why the room modes move, or what the still picture is (Jonas, 06.10.2026). */
.sound-modes-why{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- the settings of Pro (#sound-expert; the expert's until 06.10.2026) */
.sound-expert{display:grid;gap:10px;min-width:0;padding:4px 0 0}
.sound-expert[hidden]{display:none}
.sound-expert-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.sound-expert-label{flex:0 0 108px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sound-expert .button{min-height:36px;padding:7px 14px;font-size:12px}
.sound-expert .button[aria-pressed=true]{border-color:var(--sound-second);color:var(--text)}
.sound-expert-note{font-size:11.5px;color:var(--muted)}
/* Tempo and loudspeaker side by side (Jonas, 05.10.2026): two dropdowns with
   pictures (choice-menu.mjs), under 560 px one under the other. */
.sound-expert-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;min-width:0}
.sound-tempo-slot,.sound-source-slot{min-width:0}
.sound-source-slot[hidden]{display:none}
.choice-menu{position:relative;display:grid;gap:5px;min-width:0}
.choice-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.choice-current{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--text);font:600 12.5px/1.2 var(--sans);text-align:left;cursor:pointer}
.choice-current:hover{border-color:var(--accent)}
.choice-menu.is-open .choice-current{border-color:var(--accent);background:var(--panel2)}
.choice-current:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.choice-current:disabled{opacity:.5;cursor:default}
.choice-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.choice-chevron{flex:none;color:var(--muted);font-size:11px}
.choice-icon{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;color:var(--accent)}
.choice-icon svg{display:block;width:24px;height:24px}
.choice-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:30;display:grid;gap:2px;width:max-content;min-width:100%;max-width:min(380px,calc(100vw - 32px));list-style:none;margin:0;padding:6px;border:1px solid var(--line);border-radius:6px;background:#0c1f25;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.choice-pop[hidden]{display:none}
.choice-option{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer}
.choice-option:hover,.choice-option:focus-visible{background:rgba(97,216,200,.1);outline:none}
.choice-option.is-chosen{background:rgba(97,216,200,.14)}
.choice-option.is-disabled{opacity:.45;cursor:default}
/* A heading over a group of choices (choice-menu.mjs group), the next one under a line. */
.choice-group{padding:6px 8px 3px;font:600 10px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);cursor:default}
.choice-group:not(:first-child){margin-top:4px;padding-top:9px;border-top:1px solid var(--line-soft)}
.choice-option.is-disabled:hover{background:none}
.choice-menu.is-multiple .choice-option{grid-template-columns:28px minmax(0,1fr) 16px}
.choice-menu.is-multiple .choice-option::after{content:"";width:14px;height:14px;border:1.5px solid var(--line);border-radius:3px;box-sizing:border-box}
.choice-menu.is-multiple .choice-option.is-chosen::after{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23071a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.choice-note{padding:7px 8px 3px;margin-top:4px;border-top:1px solid var(--line-soft);font:500 11px/1.35 var(--sans);color:var(--muted);cursor:default}
.choice-option:has(.choice-tag){grid-template-columns:28px minmax(0,1fr) auto}
.choice-menu.is-multiple .choice-option:has(.choice-tag){grid-template-columns:28px minmax(0,1fr) auto 16px}
.choice-tag{align-self:center;padding:2px 6px;border:1px solid var(--champagne-line);border-radius:3px;font:600 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--champagne)}
.choice-text{display:grid;gap:1px;min-width:0;overflow:hidden}
.choice-option-name{font:600 13px var(--sans);color:var(--text)}
.choice-option-meta{font:500 11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-source .choice-pop{left:auto;right:0}
/* On a phone too „Tempo“ and „Quelle“ side by side (Jonas, 09.10.2026), „Hörplatz“ under them across; the list of „Quelle“ opens to the left. */
@media(max-width:560px){.sound-expert-pair>.sound-seat-slot{grid-column:1/-1}
  /* the box no wider than the phone: the analysis frequency's name over its field, as in the column of a computer */
  .sound-top{grid-template-columns:minmax(0,1fr)}
  .sound-freq .field{grid-template-columns:minmax(0,1fr) auto;gap:6px 8px}
  .sound-freq .field>span{grid-column:1/-1}}
/* Further seats (sound-seats.mjs, Jonas 06.10.2026): several at once, each
   with a check; on top the small switch „Alle“ (as .report-switch). The
   loudspeakers of „Quelle“ alike (07.10.2026). */
.sound-seat-slot{min-width:0}
.sound-seat-slot[hidden]{display:none}
.choice-option.seat-option,.choice-option.source-option{grid-template-columns:28px minmax(0,1fr) auto}
.seat-check,.source-check{position:relative;width:16px;height:16px;border:1.5px solid #4a6770;border-radius:3px}
.seat-check.is-on,.source-check.is-on{border-color:var(--accent);background:var(--accent)}
.seat-check.is-on::after,.source-check.is-on::after{content:'';position:absolute;left:4px;top:0;width:4px;height:9px;border:solid #0c1f25;border-width:0 2px 2px 0;transform:rotate(45deg)}
.seat-all,.source-all{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 2px;padding:3px 8px 7px;border-bottom:1px solid var(--line);font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.seat-all:focus-visible,.source-all:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.seat-all-switch,.source-all-switch{position:relative;width:30px;height:16px;border-radius:3px;background:#1d333b;border:1px solid #4a6770}
.seat-all-switch::after,.source-all-switch::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:2px;background:#8aa3a8;transition:transform .15s,background .15s}
.seat-all-switch.is-on,.source-all-switch.is-on{background:#1f5a58;border-color:#61d8c8}
.seat-all-switch.is-on::after,.source-all-switch.is-on::after{transform:translateX(14px);background:#61d8c8}
/* Raummoden on/off: a plain button like the others, lit when on. */
.sound-modes-toggle{min-height:32px;min-width:56px;padding:4px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--muted);font:600 11.5px/1 var(--mono);cursor:pointer}
.sound-modes-toggle:hover{color:var(--text)}
.sound-modes-toggle.is-on{border-color:var(--accent);background:rgba(97,216,200,.1);color:var(--text)}
.sound-modes-toggle:disabled{opacity:.45;cursor:default}
.sound-modes-toggle:disabled:hover{color:var(--muted)}
/* Right of the two buttons the mode range in plain text, only while on;
   off it keeps its place unseen, so nothing moves (Jonas, 06.10.2026). */
.sound-modes-info{flex:1 1 0;min-width:72px;font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
/* „Mode: Stärkste / Eigene“ and, in expert mode, „Stehend / Laufend“: two
   buttons side by side, the chosen one lit (Jonas, 07.10.2026); only while
   the modes are on (08.10.2026). */
.sound-mode-choice{display:inline-flex;align-items:center;gap:8px}
.sound-mode-choice[hidden]{display:none}
.sound-mode-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sound-seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sound-seg[hidden]{display:none}
.sound-seg-btn{min-height:32px;padding:4px 12px;border:0;background:var(--panel);color:var(--muted);font:600 11.5px/1 var(--mono);cursor:pointer}
.sound-seg-btn+.sound-seg-btn{border-left:1px solid var(--line)}
.sound-seg-btn:hover{color:var(--text)}
.sound-seg-btn.is-on{background:rgba(97,216,200,.16);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.sound-seg-btn:disabled{opacity:.45;cursor:default}
.sound-seg-btn:disabled:hover{color:var(--muted)}
.sound-modes-info.is-off{visibility:hidden}
.sound-legend-head{margin:10px 0 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media(max-width:560px){.sound-expert-label{flex-basis:100%}}

/* Room modes being worked out: a running bar instead of „wird gerechnet …“
   (Stefan, 12.10.2026). There is no count to show, the field comes in one
   go; the bar moves by transform, so it keeps running while the page computes. */
.sound-modes-info .calc-bar{position:relative;display:inline-block;width:min(160px,100%);height:4px;border-radius:2px;overflow:hidden;vertical-align:middle;background:rgba(217,201,174,.16)}
.sound-modes-info .calc-bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:2px;background:var(--accent);animation:calc-run 1.1s cubic-bezier(.45,0,.55,1) infinite}
@keyframes calc-run{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.sound-modes-info .calc-bar::after{width:100%;animation:calc-pulse 1.4s ease-in-out infinite}@keyframes calc-pulse{50%{opacity:.35}}}
/* hidden must hide in the stage, also where a class sets display (the room
   modes row stood visible while hidden, 12.10.2026). */
.sound-stage [hidden]{display:none!important}

/* The room modes in the legend (Stefan, 12.10.2026): one colour scale. */
.sound-modes-key-bar{height:8px;border-radius:4px;margin-top:4px}
.sound-modes-key-labels{display:flex;justify-content:space-between;margin:3px 0 6px;font-size:11px;color:var(--muted)}
.sound-modes-key-node{display:inline-flex;align-items:center;gap:6px}
.sound-sym.is-dashline{width:20px;height:0;border-radius:0;border-top:2px dashed var(--c)}
.sound-modes-key-text{margin:0;font-size:12px;line-height:1.4;color:var(--muted)}
.sound-modes-key-seat{margin:6px 0 0;font-size:12px;color:var(--champagne)}