/* Audio: what is playing, a station's tracks, a voice's lines. */
.nowplaying { margin: 0 0 6px; min-height: 18px; color: var(--muted); font: var(--t-code-small); overflow-wrap: anywhere; }
.lsound > b { display: block; margin: var(--s-2) 0 6px; color: var(--text); font: var(--t-label); }

/* radio: its tracks, by kind */
.rtracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.rtracks button { display: flex; align-items: center; gap: var(--s-2); padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r-1); background: var(--sunken); text-align: left; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease); }
.rtracks button:hover { border-color: var(--line-2); }
.rtracks button.on { border-color: var(--accent-line); background: var(--accent-bg); }
.rtracks b { overflow: hidden; color: var(--text); font: var(--t-label); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.rtracks small { margin-left: auto; color: var(--faint); font: var(--t-code-small); font-size: 11px; }

/* voices: lines by context, each line a small numbered button */
.vctx { display: grid; gap: 4px; }
.vctx > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-radius: var(--r-1); background: var(--sunken); }
.vctx b { flex: 1 1 100%; margin-bottom: 2px; color: var(--text); font: var(--t-code-small); font-weight: 600; }
.vctx button { min-width: 32px; height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: none; color: var(--dim); font: var(--t-code-small); font-size: 11px; transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.vctx button:hover { border-color: var(--line-3); color: var(--text); }
.vctx button.on { border-color: var(--accent-line); background: var(--accent-bg); color: var(--white); }

/* a link inside a sentence */
.linkish { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish:hover { color: var(--lilac-2); }