/* The sound buttons as a rail of three (sound-rail-20261104.mjs). Replaces sound-notes-20261102.css: the note now
   shows under the rail, so the clipped rail cannot cut it. */
.sound-rail{position:relative;width:min(100%,19rem);margin:1.35rem auto 0}
.sound-rail-view{overflow:hidden;overflow:clip;margin:-3px 0;padding:3px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sound-rail .sound-presets{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - .9rem) / 3);gap:.45rem;width:100%;margin:0;transform:translateX(calc(var(--rail,0) * ((100% - .9rem) / 3 + .45rem) * -1));transition:transform 520ms cubic-bezier(.22,.7,.2,1)}
/* About a pixel smaller than before (.52rem), so UNREAL ENGINE fits its box (owner 4 Nov 2026). */
.sound-rail .sound-choice{font-size:.46rem}
/* Buttons out of view stay focusable: Tab brings them in. clip, not hidden, so focus cannot scroll the view. */

/* The edges: a short thin line, only on a side with more sounds. */
.rail-edge{position:absolute;top:0;width:1.1rem;height:1.8rem;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;opacity:0;visibility:hidden;transition:opacity 700ms ease,visibility 0s linear 700ms}
/* Shown a moment after the buttons (sound-rail .mjs adds is-shown); gone at once when the page sleeps. */
.sound-rail.is-shown .rail-edge{opacity:1;visibility:visible;transition:opacity 700ms ease}
.rail-prev{left:-1.35rem}
.rail-next{right:-1.35rem}
.rail-edge::before{content:"";position:absolute;top:50%;left:50%;width:1px;height:.95rem;background:#5b6676;transform:translate(-50%,-50%);transition:height 300ms ease,background 300ms ease}
.rail-edge:hover::before,.rail-edge:focus-visible::before{height:1.45rem;background:#bcc3cc}
.rail-edge:focus-visible{outline:1px solid #465161;outline-offset:2px}
.sound-rail .rail-edge:disabled{opacity:0;visibility:hidden;pointer-events:none;cursor:default}
/* Once, when the sounds become available: the line on the right brightens and settles. */
.sound-rail.is-ready.is-shown .rail-next:not(:disabled)::before{animation:rail-hint 1.8s ease-in-out .6s 1}
@keyframes rail-hint{0%,100%{height:.95rem;background:#5b6676}45%{height:1.45rem;background:#bcc3cc}}

/* No background; never larger than the buttons' .46rem (owner 4 Nov 2026). */
.sound-rail-note{position:absolute;top:calc(100% + .45rem);left:50%;z-index:3;width:max-content;max-width:calc(100vw - 3rem);margin:0;padding:.15rem .4rem;transform:translateX(-50%);color:#87909c;font-size:.46rem;font-weight:300;letter-spacing:.15em;line-height:1.6;text-transform:uppercase;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}
.sound-rail-note.is-on{opacity:1;visibility:visible;transition:opacity 200ms ease}
@media(hover:none){.sound-rail-note{display:none}}
/* While NEXT CHANGE IS AVAILABLE IN ... shows under the buttons, the note stays away. */
.layer:has(#sound-timer:not(:empty)) .sound-rail-note{opacity:0;visibility:hidden;transition:none}
/* Asleep (before Play, after Stop) the buttons are hidden, so their notes are too. */
html.is-idle .sound-rail-note{opacity:0;visibility:hidden;transition:none}
@media(prefers-reduced-motion:reduce){.sound-rail .sound-presets,.rail-edge,.rail-edge::before,.sound-rail-note{transition:none}.sound-rail.is-ready.is-shown .rail-next::before{animation:none}}