/* Pick your station and sound (station-r23, David 2 Nov): step 4's second page, built by station-sound.js.
   The chosen station in its colour (frequency, name, its music described) with its tracks to pick from (each with its
   style, a play button for a 20-second clip), then the 12 stations (the DJ's own marked ★, the picked one lit, the same
   chips as before) and the own-style section. Reduced motion: no pulse on a loading clip, no bar animation.
   djstation-r26: the line under the heading is one line (it steps its size down, then ellipsis: RQFit.fitLine); a
   track row selects, its play button plays; "Describe your own style" is a section of its own. */
#monitor .sd-line { margin: -4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#monitor .sd-line b { display: inline; margin: 0; font-weight: 800; color: #fff; }
#monitor .sd-plays { margin: 0 0 8px; font: 500 calc(var(--f) * .86)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .sd-plays b { font-weight: 700; color: var(--sc, #fff); }
#monitor .sd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
#monitor .sd-acts [hidden] { display: none; }
#monitor .sd-acts .tz-mini[aria-pressed="true"] { --c: #fff; border-color: #fff; background: #fff; color: #0b0918; }
#monitor .sd-acts .sd-back { --c: var(--sc, #3df0ff); border-color: var(--sc, #3df0ff); color: var(--sc, #3df0ff); }
#monitor .sd-acts .sd-back:hover { background: var(--sc, #3df0ff); color: #0b0918; }

/* the chosen station: the station's look (its colour edge and glow) */
#monitor .sd-now { --c: #7dff8f; position: relative; margin: 0 0 4px; padding: 12px 12px 8px; border-radius: 14px; border: 1.5px solid var(--c);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), color-mix(in srgb, var(--c) 12%, var(--surf));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 0 20px color-mix(in srgb, var(--c) 24%, transparent); transition: border-color .3s, box-shadow .3s, background .3s; }
#monitor .sd-nhead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
#monitor .sd-fq { font: 700 calc(var(--f) * 1.35)/1 "JetBrains Mono", monospace; color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
#monitor .sd-nm { min-width: 0; }
#monitor .sd-nm p { font: 800 calc(var(--f) * 1.08)/1.1 "Inter Tight"; letter-spacing: .01em; color: #fff; overflow-wrap: anywhere; }
#monitor .sd-nm .sd-gn { margin-top: 2px; font: 500 calc(var(--f) * .8)/1.25 "Inter Tight"; letter-spacing: 0; color: var(--g1); }
#monitor .sd-tag { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--c); font: 700 calc(var(--f) * .64)/1.2 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
#monitor .sd-about { margin: 10px 0 0; font: 500 calc(var(--f) * .84)/1.4 "Inter Tight"; color: #e6e1f2; }
#monitor .sd-about[hidden], #monitor .sd-tracks[hidden] { display: none; }
#monitor .sd-now .sd-tl { margin: 14px 0 2px; }
#monitor .sd-thelp { margin: 0 0 6px; font: 500 calc(var(--f) * .78)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .sd-own { margin: 10px 0 4px; font: 500 calc(var(--f) * .84)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .sd-pick { margin: 8px 0 2px; padding: 6px 9px; border-radius: 9px; border: 1px dashed rgba(255,255,255,.2); font: 500 calc(var(--f) * .8)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .sd-pick.on { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: #fff; }
#monitor .sd-pick b { font-weight: 800; color: #fff; }

/* the tracks: a row picks (its select button stretches over the row), the play button at the end plays the clip; the
   picked row is lit with a tick for its number; the clip's progress runs along the bottom */
#monitor .sd-trk { list-style: none; margin: 0; padding: 0; }
#monitor .sd-row { --p: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 46px; padding: 5px 4px 5px 4px;
  border-bottom: 1px dashed rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; transition: background .2s, box-shadow .2s; }
#monitor .sd-trk li:last-child { border-bottom-color: transparent; }
#monitor .sd-row:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
#monitor .sd-row.on { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); border-bottom-color: transparent; }
#monitor .sd-t { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; cursor: pointer;
  font: 600 calc(var(--f) * .9)/1.2 "Inter Tight"; color: #f3f0fa; }
#monitor .sd-t::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
#monitor .tz .sd-t:focus-visible { outline: none; }
#monitor .sd-row:has(.sd-t:focus-visible) { outline: 2px solid #3df0ff; outline-offset: -2px; }
#monitor .sd-n { font: 400 calc(var(--f) * .8)/1 "JetBrains Mono", monospace; color: var(--c); text-align: right; }
#monitor .sd-row.on .sd-n { font-weight: 800; }
#monitor .sd-tx { display: grid; gap: 2px; min-width: 0; }
#monitor .sd-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#monitor .sd-ts { font: 500 calc(var(--f) * .74)/1.3 "Inter Tight"; color: var(--g1); }
#monitor .sd-row.on .sd-ts { color: #e6e1f2; }
#monitor .sd-play { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 3px 3px 3px 8px; border-radius: 999px; cursor: pointer; }
#monitor .sd-play:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
#monitor .sd-play:focus-visible { outline: 2px solid #3df0ff; outline-offset: 1px; }
#monitor .sd-len { font: 500 calc(var(--f) * .72)/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--g1); white-space: nowrap; }
#monitor .sd-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--c); color: var(--c); }
#monitor .sd-go::before { content: "▶"; font-size: 10px; line-height: 1; margin-left: 2px; }
#monitor .sd-row.playing .sd-go { background: var(--c); color: #0b0918; }
#monitor .sd-row.playing .sd-go::before { content: "❚❚"; margin-left: 0; font-size: 9px; letter-spacing: -1px; }
#monitor .sd-row.wait .sd-go { animation: sdWait 1s ease-in-out infinite; }
@keyframes sdWait { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); } }
#monitor .sd-bar { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none; transform-origin: left; transform: scaleX(var(--p)); background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; }
#monitor .sd-row.playing .sd-bar { opacity: 1; }
/* a track with no clip yet: a labelled slot instead of the play button (the track can still be picked) */
#monitor .sd-soon { padding: 3px 8px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.28); color: var(--g1); }

/* the own style: a section of its own (white, as "your own sound" is everywhere else) */
#monitor .sd-now.own .sd-fq { font-size: calc(var(--f) * 1.5); }
#monitor .sd-ownbox { margin: 18px 0 6px; padding: 12px 12px 10px; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 50%), var(--surf); transition: border-color .25s, box-shadow .25s; }
#monitor .sd-ownbox.on { border-style: solid; border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 18px rgba(255,255,255,.16); }
#monitor .sd-yh { margin: 0 0 4px; font: 800 calc(var(--f) * 1.02)/1.2 "Inter Tight"; color: #fff; }
#monitor .sd-yhelp { margin: 0 0 8px; font: 500 calc(var(--f) * .84)/1.4 "Inter Tight"; color: #e6e1f2; }
#monitor .sd-yhint { margin: 6px 0 0; font: 500 calc(var(--f) * .76)/1.35 "Inter Tight"; color: var(--g1); overflow-wrap: anywhere; }
#monitor .sd-ynote { margin: 6px 0 0; font: 500 calc(var(--f) * .76)/1.35 "Inter Tight"; color: var(--g1); }
#monitor .sd-ownbox.on .sd-ynote { color: #fff; }
#monitor .sd-style { transition: border-color .25s, box-shadow .25s, opacity .25s; }
#monitor .sd-style.on { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 16px rgba(255,255,255,.18); }
#monitor .sd-style.idle { opacity: .6; }
#monitor .sd-style textarea::placeholder { color: #8a83a2; }
#monitor .sd-st { margin-bottom: 2px; }

.tz-full #monitor .sd-trk .sd-row { min-height: 48px; }
@media (prefers-reduced-motion: reduce) {
  #monitor .sd-row.wait .sd-go { animation: none; }
  #monitor .sd-now, #monitor .sd-row, #monitor .sd-style, #monitor .sd-ownbox { transition: none; }
}