:root {
  color-scheme: light dark;
  --fg: #1b1b1b; --bg: #fafafa; --panel: #fff; --muted: #6b6b6b; --line: #e3e3e3;
  --accent: #2a6df4; --accent-fg: #fff; --wave: #b9c3d6; --progress: #2a6df4; --warn: #b4540a; --live: #d7263d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #ececec; --bg: #121212; --panel: #1b1b1b; --muted: #9a9a9a; --line: #2c2c2c;
    --accent: #6b9bff; --accent-fg: #0b0b0b; --wave: #3a4253; --progress: #6b9bff; --warn: #f0a25a; --live: #ff5c6c;
  }
}
* { box-sizing: border-box; }
/* Icons (js/icons.js, ADR 0024): drawn in currentColor, sized here. */
.i { width: 1.25rem; height: 1.25rem; display: block; flex: 0 0 auto; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, sans-serif; }
main { max-width: 52rem; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
header h1 { font-size: 1.35rem; margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* The logo on every page (#102, ADR 0037), back to the Transmissions list: at the left of the
   page's column, centred on a phone. Over an artwork background it lets the artwork through. */
.masthead { position: relative; z-index: 1; background: var(--panel); border-bottom: 1px solid var(--line); }
.masthead > div { max-width: 52rem; height: 56px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; }
.masthead a { display: inline-flex; border-radius: 8px; }
.masthead a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.masthead img { width: 32px; height: 32px; display: block; }
@media (max-width: 480px) {
  .masthead > div { height: 52px; justify-content: center; }
  .masthead img { width: 30px; height: 30px; }
}
html[data-bg] .masthead { background: rgb(10 10 10 / .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: rgb(255 255 255 / .09); }
/* Sort on the Transmissions list (#103). */
label.sort { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
label.sort select { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
button, .button {
  font: inherit; border-radius: 8px; padding: .5rem .9rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: inherit;
}
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
input[type=text] {
  font: inherit; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: inherit; min-width: 0; flex: 1 1 12rem;
}
form.inline { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 24px; }
ul.list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
ul.list li { border-bottom: 1px solid var(--line); padding: .7rem .2rem; display: flex; gap: 12px; align-items: baseline; }
ul.list li a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tag { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.warn { color: var(--warn); border-color: currentColor; }
.note { min-height: 1.5em; color: var(--muted); }
.note.error { color: var(--warn); }
[hidden] { display: none !important; }

/* Player */
.player { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
#wave { min-height: 96px; touch-action: pan-y; }
.transport { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.transport button.play { width: 3rem; height: 3rem; border-radius: 50%; padding: 0; font-size: 1.1rem; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; border: 1px solid var(--line);
  background: transparent; color: inherit; display: inline-flex; gap: 6px; align-items: center;
}
.chip[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip .state { font-size: .75rem; opacity: .8; }
.chips.draggable .chip { cursor: grab; }
.chip input.rename { font: inherit; width: 9rem; padding: 0 .2rem; border: 0; border-radius: 4px; background: var(--panel); color: var(--fg); }
button.danger { background: var(--warn); color: var(--bg); border-color: var(--warn); }
.handle { cursor: grab; color: var(--muted); touch-action: none; padding: 0 .4rem; user-select: none; }
.handle:hover { color: var(--fg); }
.handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; color: var(--fg); }
/* Drag to reorder (#59, sortable.js): the picked-up item lifts and follows the pointer; its
   place stays as a dashed gap that moves to where it will land while the others slide. */
.drag-source { background: color-mix(in srgb, var(--accent) 7%, transparent) !important; outline: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); outline-offset: -2px; }
.drag-source > * { visibility: hidden; }
.chip.drag-source { border-color: transparent; }
.drag-ghost { position: fixed; z-index: 40; margin: 0; padding: 0; border: 0; list-style: none; pointer-events: none; will-change: transform; }
.drag-ghost > * { background: var(--panel); box-shadow: 0 10px 28px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .12); transform: scale(1.03); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.drag-ghost > li { border-radius: 8px; border-bottom-color: transparent; }
.drag-ghost.out > * { opacity: .55; }
.drag-ghost.landing > * { transform: none; box-shadow: none; }
html.grabbing, html.grabbing * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { .sortable > *, .sortable > * * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.specs { margin-top: 12px; font-size: .9rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
/* A delete confirmation opens under what it deletes (#64); in a list it is a row of its own
   and the row it is about stays marked. */
.confirm { margin-top: 12px; padding: .7rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; scroll-margin: 16px; }
.confirm > span { flex: 1 1 16rem; overflow-wrap: anywhere; }
li.confirm { margin: 0; border-width: 0 0 1px; border-radius: 0; cursor: auto; }
ul.thumbs li.confirm:hover { background: var(--panel); }
li.confirming, ul.thumbs li.confirming:hover, li.track.confirming:hover { background: var(--panel); }
body.with-bar .confirm { scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom)); }
progress { width: 100%; height: .5rem; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); font-size: inherit; }
.mismatch { margin: 8px 0 0; color: var(--warn); font-size: .9rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; font-size: .9rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; font-variant-numeric: tabular-nums; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 16px; margin: 28px 0 0; }
legend { padding: 0 6px; color: var(--muted); font-size: .9rem; }
select { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
.drop { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 3px dashed var(--accent); display: grid; place-items: center; z-index: 10; pointer-events: none; }
.drop p { font-size: 1.2rem; background: var(--panel); padding: .8rem 1.2rem; border-radius: 12px; }
ul.uploads:empty { display: none; }
ul.uploads li progress { width: 8rem; }
ul.uploads .error { color: var(--warn); }
.grow { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
h1#title { cursor: text; }
input.title-edit { font: inherit; font-size: 1.35rem; font-weight: 700; width: 100%; padding: 0 .2rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit; }
/* Accounts and storage (super admin) */
h2.section { font-size: 1rem; margin: 28px 0 0; }
ul.accounts li { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
ul.accounts .who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
ul.accounts .use { display: flex; flex-direction: column; gap: 4px; min-width: 10rem; }
.bar { display: block; width: 10rem; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.over > span { background: var(--warn); }
label.gb input { width: 5rem; font: inherit; padding: .3rem .4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
#new input[type=email], #new input[type=text] { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: inherit; flex: 1 1 12rem; min-width: 0; }
/* Share panel */
dialog.share { width: min(30rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 14px 18px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); }
dialog.share::backdrop { background: rgb(0 0 0 / .45); }
dialog.share h2 { font-size: 1.05rem; margin: 0; }
dialog.share h3 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; }
.share-head { display: flex; justify-content: space-between; align-items: center; }
dialog.share ul { list-style: none; padding: 0; margin: 0; }
dialog.share li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
dialog.share li .url, dialog.share li .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.share li .url { font-size: .9rem; color: var(--muted); }
dialog.share li.link { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
dialog.share li.link:last-child { border-bottom: 0; }
.link-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
dialog.share .picks-label { margin: 12px 0 0; }
dialog.share ul.picks { margin-top: 2px; }
dialog.share ul.picks li { padding: 4px 0; }
dialog.share ul.picks .who { display: flex; flex-direction: column; }
dialog.share ul.picks .email { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
dialog.share .by { font-size: .8rem; color: var(--muted); white-space: nowrap; }
dialog.share li.link .once { margin: 0; font-size: .8rem; color: var(--muted); }
dialog.share button { padding: .35rem .75rem; }
dialog.share button.link { padding: 0; align-self: flex-start; }
dialog.share select { font: inherit; padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: inherit; }
dialog.share button.icon { width: 2rem; height: 2rem; padding: 0; }
button.icon.quiet { border: 0; background: none; color: var(--muted); }
button.icon.quiet:hover { color: var(--fg); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
dialog.share input[type=text], dialog.share input[type=email] { font: inherit; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: inherit; flex: 1 1 8rem; min-width: 0; }
form.unlock input { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: inherit; flex: 1 1 12rem; min-width: 0; }
dialog.share label { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
dialog.share .note { margin: 8px 0 0; }
/* Listen history: totals, a segmented control, one scrolling view of rows that open on a tap. */
dialog.history { width: min(36rem, calc(100vw - 32px)); }
dialog.history[open] { display: flex; flex-direction: column; height: min(42rem, calc(100vh - 32px)); height: min(42rem, calc(100dvh - 32px)); overflow: hidden; }
dialog.history[open].empty { height: fit-content; }
dialog.history .h-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
dialog.history .h-totals div { display: flex; flex-direction: column-reverse; padding: 8px 10px; border-radius: 10px; background: var(--bg); min-width: 0; }
dialog.history .h-totals dt { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
dialog.history .h-totals dd { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
dialog.history .h-tabs { display: flex; gap: 2px; margin: 12px 0 0; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
dialog.history .h-tabs button { flex: 1 1 0; padding: .3rem .5rem; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: .9rem; }
dialog.history .h-tabs button[aria-selected=true] { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
dialog.history .h-panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 4px -18px 0; padding: 0 18px; }
dialog.history h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 4px; background: var(--panel); border-bottom: 1px solid var(--line); }
dialog.history .h-row { border-bottom: 1px solid var(--line); }
dialog.history .h-list .h-row:last-child { border-bottom: 0; }
dialog.history .h-row summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; list-style: none; cursor: pointer; }
dialog.history .h-row summary::-webkit-details-marker { display: none; }
dialog.history .h-row summary > .i { width: 1rem; height: 1rem; color: var(--muted); transition: transform .15s; }
dialog.history .h-row[open] summary > .i { transform: rotate(90deg); }
dialog.history .h-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
dialog.history .h-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
dialog.history .h-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
dialog.history .h-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.history .h-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--muted); }
dialog.history .h-icon { display: flex; align-items: center; gap: 6px; }
dialog.history .h-icon .i { width: 1rem; height: 1rem; }
dialog.history .h-count, dialog.history time { flex: 0 0 auto; font-size: .875rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
dialog.history .h-how { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
dialog.history .h-how > :last-child { min-width: 4.6rem; display: inline-flex; justify-content: flex-end; }
dialog.history .h-bar { width: 3.5rem; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
dialog.history .h-bar span { display: block; height: 100%; background: var(--progress); }
dialog.history .h-done { align-items: center; gap: 3px; color: var(--accent); }
dialog.history .h-done .i { width: .95rem; height: .95rem; }
dialog.history .h-more { padding: 0 24px 12px 0; }
dialog.history .h-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; font-size: .875rem; }
dialog.history .h-facts dt { color: var(--muted); }
dialog.history .h-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dialog.history .h-more button.link { margin-top: 8px; }
dialog.history .h-filter { display: flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 12px 0 0; padding-left: .75rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: .875rem; }
dialog.history .h-filter span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.history .h-filter button.icon { width: 1.75rem; height: 1.75rem; color: inherit; }
dialog.history .h-filter .i { width: .9rem; height: .9rem; }
dialog.history #history-empty { margin: 16px 0; }
dialog.history #history-more { margin: 4px 0 12px; }
dialog.history .h-credit { margin: 8px 0 0; font-size: .75rem; }
dialog.history .note:empty { display: none; }
@media (max-width: 26rem) {
  dialog.history { padding-inline: 14px; }
  dialog.history .h-panels { margin-inline: -14px; padding-inline: 14px; }
  dialog.history .h-totals { gap: 4px; }
  dialog.history .h-totals div { padding: 6px 7px; }
  dialog.history .h-totals dt { font-size: .68rem; }
  dialog.history .h-totals dd { font-size: 1.15rem; }
  dialog.history .h-bar { width: 2.5rem; }
  dialog.history .h-how > :last-child { min-width: 2.4rem; }
  dialog.history .h-done .h-word { display: none; }
}
form.unlock { max-width: 24rem; margin: 10vh auto; text-align: center; }
/* Transmission page */
header.hero { align-items: center; gap: 16px; flex-wrap: nowrap; }
header.hero .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cover { position: relative; flex: 0 0 auto; }
button.art { width: 200px; height: 200px; padding: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); }
button.art:disabled { opacity: 1; cursor: default; }
button.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-empty { color: var(--muted); }
.art-empty .i { width: 3.5rem; height: 3.5rem; stroke-width: 1.5; }
button.icon.cover-button { position: absolute; right: 8px; bottom: 8px; width: 2rem; height: 2rem; background: rgb(0 0 0 / .55); color: #fff; border-color: rgb(255 255 255 / .25); }
button.icon.cover-button .i { width: 1rem; height: 1rem; }
.bg-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 12rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
.bg-menu button { text-align: left; border: 0; padding: .45rem .7rem; }
.bg-menu button[aria-checked=true] { color: var(--accent); font-weight: 600; }
.bg-menu button:hover, .bg-menu button:focus-visible { background: var(--bg); outline: none; }
h1#name.editable { cursor: text; }
button.icon { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; flex: 0 0 auto; display: inline-grid; place-items: center; }
li.track button.icon.trash { border: 0; background: none; opacity: .55; }
li.track button.icon.trash:hover { opacity: 1; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline-grid; } }
.chip .x { margin-left: 2px; padding: 0 .1rem; line-height: 1; opacity: .75; display: inline-grid; }
.chip .x .i { width: .9rem; height: .9rem; }
.chip .x:hover { opacity: 1; }
ul.thumbs li { align-items: center; gap: 14px; cursor: pointer; }
ul.thumbs li:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); }
ul.thumbs .title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
ul.thumbs .title a, ul.thumbs .title .name { font-weight: 600; overflow-wrap: anywhere; }
ul.thumbs .title .name.editable { cursor: text; }
ul.thumbs .title input.title-edit { font-size: 1rem; font-weight: 600; flex: 0 0 auto; }
ul.thumbs .added { font-size: .85rem; color: var(--muted); }
ul.thumbs .handle .i { width: 1.1rem; height: 1.1rem; }
ul.thumbs a.thumb-link { display: block; flex: 0 0 auto; line-height: 0; }
.thumb { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--panel); border: 1px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
.thumb .i { width: 2rem; height: 2rem; stroke-width: 1.5; }
@media (max-width: 480px) {
  /* The player is the focus on a phone (#93): a small cover beside the name, the header's
     buttons on one row under them, so the player shows without scrolling. */
  header.hero { flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
  header.hero .grow { flex: 1 1 calc(100% - 100px); gap: 2px; }
  header.hero h1 { font-size: 1.2rem; }
  button.art { width: 88px; height: 88px; border-radius: 8px; }
  .art-empty .i { width: 2rem; height: 2rem; }
  button.icon.cover-button { right: 4px; bottom: 4px; width: 1.6rem; height: 1.6rem; }
  .thumb { width: 56px; height: 56px; }
}
.grow { flex: 1 1 auto; min-width: 0; }
.track-title { font-size: 1.05rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.track-title.editable { cursor: text; }
.transport button:not(.play) { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; }
.transport button { display: inline-grid; place-items: center; }
.transport button .i { width: 1.15rem; height: 1.15rem; }
.transport button.play .i { width: 1.35rem; height: 1.35rem; }
/* Shuffle and repeat (#36): borderless and muted while off, the accent colour while on. */
.transport button.mode { border-color: transparent; background: none; color: var(--muted); }
.transport button.mode.on { color: var(--accent); }
@media (max-width: 420px) { .transport { gap: 4px; } .transport button.mode { width: 2.1rem; } .time { white-space: nowrap; font-size: .9rem; } }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; border: 1px dashed var(--line); border-radius: 12px; }
ol.tracks { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
li.track { display: flex; align-items: center; gap: 10px; padding: .55rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; }
li.track:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); }
li.track.playing .name { color: var(--accent); font-weight: 600; }
li.track.target { outline: 2px dashed var(--accent); outline-offset: -2px; }
li.track .num { width: 1.4rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; justify-content: flex-end; }
li.track .num .i { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.handle { display: inline-grid; place-items: center; }
.handle .i { width: 1rem; height: 1rem; }
li.track button.icon .i { width: 1.1rem; height: 1.1rem; }
li.track .name { overflow-wrap: anywhere; }
li.track .dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
li.track select.rev { max-width: 9rem; font-size: .85rem; padding: .3rem .4rem; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; padding: .2rem .5rem; border-radius: 6px; color: var(--muted); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu .menu-items { position: absolute; right: 0; top: 1.8rem; z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 12rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
details.menu .menu-items button { text-align: left; border: 0; }
@media (max-width: 480px) {
  li.track .dur { display: none; }
  li.track select.rev { max-width: 6.5rem; }
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Artwork background (ADR 0024): the cover behind the page, dimmed, with the dark colours
   and translucent panels on top so text and the waveform stay readable. */
.backdrop { display: none; }
html[data-bg] {
  --fg: #ececec; --bg: #121212; --panel: #1b1b1b; --muted: #a8a8a8; --line: rgb(255 255 255 / .14);
  --accent: #7ea8ff; --accent-fg: #0b0b0b; --warn: #f0a25a; --wave: #56607a; --progress: #7ea8ff;
  color-scheme: dark;
}
html[data-bg] body { background: #0b0b0b; }
html[data-bg] .backdrop { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--art); }
html[data-bg=fill] .backdrop { inset: -60px; background-size: cover; background-position: center; filter: blur(30px) brightness(.42); }
html[data-bg=tile] .backdrop { background-size: 160px 160px; background-repeat: repeat; filter: brightness(.34); }
html[data-bg] main { position: relative; z-index: 1; }
html[data-bg] .player, html[data-bg] ol.tracks, html[data-bg] .empty {
  background: rgb(14 14 14 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-bg] ol.tracks { border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; }
html[data-bg] ol.tracks li.track:last-child { border-bottom: 0; }
html[data-bg] header.hero { text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
ul.thumbs .title button.name { border: 0; background: none; padding: 0; border-radius: 0; color: inherit; text-align: left; font: inherit; font-weight: 600; }
ul.thumbs button.icon.trash { border: 0; background: none; color: var(--muted); }
ul.thumbs button.icon.trash:hover { color: var(--fg); }
ul.thumbs button.icon.trash .i { width: 1.1rem; height: 1.1rem; }

/* A guest's way back to their page, and their code sign-in (ADR 0026, 0028) */
.guest-signin input { font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: inherit; flex: 1 1 12rem; min-width: 0; }
.guest-signin { max-width: 26rem; margin-bottom: 16px; }
.guest-signin form { margin-bottom: 8px; }

/* The player bar (ADR 0027): what plays while the list or another transmission is on screen. */
.nowplaying {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 8px;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.np-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.np-line > span { display: block; height: 100%; width: 0; background: var(--accent); }
a.np-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; }
a.np-open:hover { text-decoration: none; }
.np-art { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.np-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.np-track, .np-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-track { font-weight: 600; }
.np-from { font-size: .85rem; color: var(--muted); }
.np-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.nowplaying button { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; }
.nowplaying button .i { width: 1.15rem; height: 1.15rem; }
body.with-bar main { padding-bottom: calc(64px + 72px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) { .np-time { display: none; } .nowplaying { gap: 4px; } a.np-open { margin-right: 4px; } }
/* Live listeners (ADR 0030): avatars by the title, a dot on the list's covers. */
button.listeners { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font-size: .9rem; color: var(--muted); }
button.listeners::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: 0 0 auto; }
.faces { display: inline-flex; }
.faces .avatar + .avatar { margin-left: -6px; }
.avatar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .7rem; font-weight: 600; letter-spacing: .02em; background: var(--accent); color: var(--accent-fg); border: 2px solid var(--bg); flex: 0 0 auto; }
.avatar.you { background: var(--fg); color: var(--bg); }
.avatar.guest { background: var(--line); color: var(--fg); }
ul.listeners-list { list-style: none; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
ul.listeners-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
ul.listeners-list li .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.thumbs a.thumb-link { position: relative; }
.live { position: absolute; top: -5px; right: -5px; min-width: 1.25rem; height: 1.25rem; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--live); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; border: 2px solid var(--bg); }
.tag.live-tag { color: var(--live); border-color: currentColor; }
/* Offline listening (#82) */
button.icon#keep.on { color: var(--accent); border-color: var(--accent); }
/* Which tracks are on the phone, and keeping from the list (#90) */
li.track .kept-mark { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
li.track .kept-mark.done { color: var(--accent); display: inline-flex; align-self: center; }
li.track .kept-mark .i { width: 1rem; height: 1rem; }
button.icon.keep.on { color: var(--accent); border-color: var(--accent); }
.keep-wrap { display: inline-flex; gap: 6px; align-items: center; }
li.track.unavailable { opacity: .45; }
.offline-space { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }