/* The text buttons as rectangles like the sound buttons, the text a little smaller: SOUND DIST, BANDS, CLOSE, CLEAR,
   SEND, CANCEL, Listening (it opens Estelle's Place), and in Estelle's Place RACE, PLUS / BASIC and On. */
:root{--box-line:#252c37;--box-line-hover:#4f5a6a;--box-line-on:#465161;--box-fill:#ffffff01;--box-fill-hover:#ffffff07;--box-fill-on:#171e28;--box-text-hover:var(--klf-text-bright)}

/* The text of these buttons by the grey levels (greys-*.css): Secondary, Primary when pressed or on, Bright on hover
   (below); disabled ones keep their Faint. PLUS / BASIC keeps its own pink. */
.sound-dist-wrap .sound-dist:not(:disabled),.layer .sound-curve:not(.is-estelle) .band-switch,button.estelle-race,button.estelle-vs,.quiet-note .quiet-close,.travel-actions button:not(:disabled),.travel .travel-cancel:not(:disabled),button.estelle-vu-on,html.count-me-in .meter-note .count-me-in{color:var(--klf-text-secondary)}
.sound-dist-wrap .sound-dist[aria-pressed=true]:not(:disabled),html.count-me-in .meter-note button.estelle-open[aria-pressed=true] .count-me-in{color:var(--klf-text-primary)}

/* A part a little further from the one above, now that its buttons are boxes (owner 6 Nov 2026): ON AIR SOUND FAMILY
   from the CHAPTER 3 row (1 rem before) and SOUND DIST from the list (0.9 rem before); on a narrow window the parts
   keep their own gap (more-*.css). */
.closest{margin-top:1.25rem}

/* SOUND DIST: the box where its note starts, the short line before it stays outside. */
.sound-dist-wrap .sound-dist{position:relative;height:auto;margin-top:1.15rem;margin-left:1.55rem;gap:.55rem;padding:.1rem .55rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}
.sound-dist-wrap .sound-dist::before{position:absolute;top:50%;left:-1.55rem}
.sound-dist-wrap .sound-dist[aria-pressed=true]{background:var(--box-fill-on);border-color:var(--box-line-on);box-shadow:inset 0 1px 3px #0005}
.sound-dist-wrap .sound-dist:disabled,.sound-dist-wrap .sound-dist:disabled:hover{background:transparent;border-color:#1d232c;box-shadow:none}

/* BANDS (CURVES n, RESET); in Estelle's Place it stays the round close button. */
.layer .sound-curve:not(.is-estelle) .band-switch{padding:.1rem .5rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;transition:color 300ms ease,background 400ms ease,border-color 400ms ease}

/* Estelle's Place: RACE in its line, PLUS / BASIC at the right (pressed while BASIC shows, that is PLUS is on). */
button.estelle-race,button.estelle-vs,button.estelle-mode{display:inline-block;padding:0 .45rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;vertical-align:baseline;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}
button.estelle-mode{align-self:center}
button.estelle-mode[aria-pressed=true]{background:var(--box-fill-on);border-color:var(--box-line-on);box-shadow:inset 0 1px 3px #0005}

/* CLOSE in its line (CLOSING THE STREAM m:ss). */
.quiet-note .quiet-close{display:inline-block;padding:0 .45rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;vertical-align:baseline;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}

/* Sound map: CLEAR, SEND and CANCEL. */
.travel-actions button,.travel .travel-cancel{height:auto;padding:.1rem .55rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}
.travel-actions{gap:.6rem}
.travel-actions button:disabled,.travel .travel-cancel:disabled{background:transparent;border-color:#1d232c}

/* Estelle's Place: On in Turn VU On. */
button.estelle-vu-on{display:inline-block;padding:0 .45rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;vertical-align:baseline;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}

/* Listening and its number open Estelle's Place: the count in a box, its own letters; pressed while the place is open. */
.meter-note button.estelle-open{display:inline-block;margin:0;padding:0 .2em 0 .5em;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);color:inherit;font:inherit;letter-spacing:inherit;line-height:1.5;vertical-align:baseline;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}
.meter-note button.estelle-open[aria-pressed=true]{background:var(--box-fill-on);border-color:var(--box-line-on);box-shadow:inset 0 1px 3px #0005}
.meter-note .count-me-in{display:none}
/* Only while the row is on: at Play the idle words go and the row fades, and the box must not show for that moment. */
.meter-note:not(.is-on) button.estelle-open{visibility:hidden}
/* Ready: COUNT ME IN as the box beside the count (html.count-me-in). */
html.count-me-in .meter-note button.estelle-open,html.count-me-in .meter-note button.estelle-open[aria-pressed=true]{padding:0;border-color:transparent;background:transparent;box-shadow:none}
html.count-me-in .meter-note .count-me-in{display:inline-block;margin-left:.6em;padding:0 .45rem;border:1px solid var(--box-line);border-radius:2px;background:var(--box-fill);font-family:Montserrat,sans-serif;font-size:.46rem;font-weight:400;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;vertical-align:baseline;transition:color 200ms ease,background 400ms ease,border-color 400ms ease}
html.count-me-in .meter-note button.estelle-open[aria-pressed=true] .count-me-in{background:var(--box-fill-on);border-color:var(--box-line-on);box-shadow:inset 0 1px 3px #0005}

/* Hover as on the sound buttons: the text lighter, the border and the fill a step up (a pressed one keeps its fill).
   Only with a mouse: on touch screens a tap leaves no hover behind. */
@media(hover:hover){
.sound-dist-wrap .sound-dist:not(:disabled):hover,.layer .sound-curve:not(.is-estelle) .band-switch:hover,button.estelle-race:hover,button.estelle-vs:hover,.quiet-note .quiet-close:hover,.travel-actions button:not(:disabled):hover,.travel .travel-cancel:not(:disabled):hover,button.estelle-vu-on:hover,html:not(.count-me-in) .meter-note button.estelle-open:hover,html.count-me-in .meter-note button.estelle-open:hover .count-me-in{border-color:var(--box-line-hover);color:var(--box-text-hover)}
button.estelle-mode:hover{border-color:var(--box-line-hover);color:#f0b7be}
.sound-dist-wrap .sound-dist:not(:disabled):not([aria-pressed=true]):hover,.layer .sound-curve:not(.is-estelle) .band-switch:hover,button.estelle-race:hover,button.estelle-vs:hover,button.estelle-mode:not([aria-pressed=true]):hover,.quiet-note .quiet-close:hover,.travel-actions button:not(:disabled):hover,.travel .travel-cancel:not(:disabled):hover,button.estelle-vu-on:hover,html:not(.count-me-in) .meter-note button.estelle-open:not([aria-pressed=true]):hover,html.count-me-in .meter-note button.estelle-open:not([aria-pressed=true]):hover .count-me-in{background:var(--box-fill-hover)}
}

@media(prefers-reduced-motion:reduce){.sound-dist-wrap .sound-dist,.layer .sound-curve:not(.is-estelle) .band-switch,button.estelle-race,button.estelle-vs,button.estelle-mode,.quiet-note .quiet-close,.travel-actions button,.travel .travel-cancel,button.estelle-vu-on,.meter-note button.estelle-open,.meter-note .count-me-in{transition:none}}