/* Eightbar app (PRODUCT.md: premium, polished, confident; DESIGN.md at the repo root). The brand's palette: one dark
   surface with a cool cast, Instrument Sans, teal for what the DJ acts on (the main button, links, focus, the place
   to drop a file), pink for "live", the selected chapter and Premium. PK, 2026-10-07: all grey was daunting. Rewritten 2026-10-06 after an audit with
   the impeccable skill: a fixed type scale with nothing under 13 px, one button and one field shape, visible field
   edges, 44 px controls, soft corners, no box inside a box, every colour a token. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(vendor/instrument-sans.woff2) format("woff2"); }
:root {
  --bg: #0f1113; --card: #16191c; --alt: #1c2024; --raise: #242a30; --line: #2e353b; --line-strong: #5f6a74;
  --text: #f6f8f9; --dim: #a5adb4; --live: #e0579a; --live-wash: #26161e; --live-line: #6e3050; --bad: #ff8a8a; --bad-line: #5c3232;
  --act: #35d0ba; --act-hi: #6fe3d2; --act-wash: #10211f; --act-line: #2a756a; --on-act: #05211d; --on-wash: #b7cbc7;
  --font: "Instrument Sans", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 14px; --r2: 10px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gut: clamp(16px, 3vw, 40px); --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a, button, input, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(53, 208, 186, .22); }
::selection { background: var(--act-line); color: var(--text); }
input, textarea { caret-color: var(--act); }
:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.02em; margin: 0; font-weight: 700; text-wrap: balance; }
h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 var(--s2); font-weight: 600; }
p { margin: 0; }
[hidden] { display: none !important; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 6px var(--gut); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; }
.top .mark { flex: none; }
.top nav { display: flex; gap: var(--s2); align-items: center; min-width: 0; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--r2); flex: none; text-decoration: none; color: var(--dim); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .15s var(--ease), background-color .15s var(--ease); }
.top nav a:hover { color: var(--text); background: var(--card); }
.top nav #who { flex: 0 1 auto; min-width: 0; max-width: 34vw; }
.top nav #who .wide { overflow: hidden; text-overflow: ellipsis; }
.top .narrow { display: none; }
@media (max-width: 560px) {                       /* phones: the name gives way to a short label so the bar never overflows */
  .top nav { gap: 0; }
  .top nav a { font-size: 14px; padding: 0 10px; } .top nav #who { max-width: none; }
  .top .wide { display: none; } .top .narrow { display: inline; }
}
@media (max-width: 370px) { .top .mark { font-size: 0; gap: 0; } }      /* the smallest phones keep the logo, drop the word */
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 22px; line-height: 1; text-decoration: none; letter-spacing: -.02em; }
.mark.big { font-size: 28px; }
.logo { width: 40px; height: 23px; flex: none; fill: currentColor; }
.logo .dim { opacity: .4; }
.logo .cue { fill: var(--live); }
.logo rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .mark.big .logo rect:not(.cue) { animation: wave .5s var(--ease) backwards; }
  .mark.big .logo rect:nth-child(1) { animation-delay: .10s; } .mark.big .logo rect:nth-child(2) { animation-delay: .15s; }
  .mark.big .logo rect:nth-child(3) { animation-delay: .20s; } .mark.big .logo rect:nth-child(4) { animation-delay: .25s; }
  .mark.big .logo rect:nth-child(5) { animation-delay: .30s; } .mark.big .logo rect:nth-child(6) { animation-delay: .35s; }
  .mark.big .logo rect:nth-child(7) { animation-delay: .40s; } .mark.big .logo rect:nth-child(8) { animation-delay: .45s; }
  .mark.big .logo rect:nth-child(9) { animation-delay: .50s; }
  .mark.big .logo .cue { animation: cue .5s .6s var(--ease) both; }
  .busy .logo rect:not(.cue) { animation: pulse 1s var(--ease) infinite alternate; }
}
@keyframes wave { from { transform: scaleY(.1); } }
@keyframes cue { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pulse { to { transform: scaleY(.45); } }

/* page frame */
main, main:focus-visible { outline: none; }
.page { width: min(100%, 860px); margin: 0 auto; padding: var(--s7) var(--gut) 72px; }
.page.wide { width: min(100%, 1240px); }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s2); }
.usage { color: var(--dim); margin: 0 0 var(--s5); }
.head .usage { margin: var(--s2) 0 0; }
.back { margin: 0 0 var(--s2); font-size: 15px; }
.back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); text-decoration: none; }
.back a::before { content: "\2190"; margin-right: var(--s2); }
.back a:hover { color: var(--text); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); }

/* one button shape, one field shape */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--act); border-radius: var(--r2); background: var(--act); color: var(--on-act); font: 600 16px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), opacity .15s; }
.btn:hover { background: var(--act-hi); border-color: var(--act-hi); }
.btn[data-google], .btn[data-google]:hover { background: #fff; border-color: #fff; color: #1f1f1f; }      /* Google's own button colours */
.btn:active { opacity: .85; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--raise); border-color: var(--dim); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn .g { width: 20px; height: 20px; }
.btn.danger { color: var(--bad); border-color: var(--bad-line); }
.btn.danger:hover { background: transparent; border-color: var(--bad); }
label, .label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 6px; }
input[type=email], input[type=text], textarea, select { width: 100%; min-height: 44px; padding: 10px 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r2); font: 16px/1.4 var(--font); transition: border-color .15s var(--ease); }
input::placeholder, textarea::placeholder { color: #8f8f8f; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.field > label:not(.drop), .field > .label, .tlhead > label:first-child { color: var(--text); font-size: 15px; font-weight: 600; }
textarea { resize: vertical; font-family: var(--font); }
select { padding: 0 42px 0 14px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a1a1a1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 22px; -webkit-appearance: none; appearance: none; }
form .btn { margin-top: var(--s3); }
.opt { color: var(--dim); font-size: 13px; margin-left: var(--s1); }
.msg { margin: var(--s3) 0 0; color: var(--dim); }
.msg:empty { display: none; }
.msg.bad { color: var(--bad); }
.msg.good { color: var(--text); }
.count { margin: 6px 0 0; font-size: 14px; color: var(--dim); }
.count.bad { color: var(--bad); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--text); margin: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--act); flex: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* signed out: sign in, request access */
.signin { width: min(100%, 420px); margin: 0 auto; padding: clamp(40px, 12vh, 120px) var(--gut) var(--s7); text-align: center; }
.signin h1 { margin-top: var(--s6); }
.signin .sub { color: var(--dim); margin: var(--s2) 0 var(--s6); text-wrap: balance; }
.signin .card { text-align: left; }
.signin.request { width: min(100%, 520px); }
.signin.request .btn { align-self: stretch; }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--dim); font-size: 14px; margin: var(--s5) 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note { color: var(--dim); font-size: 15px; margin-top: var(--s5); }

/* my sets */
.list { padding: 0; overflow: hidden; }
.list .empty { padding: var(--s5); margin: 0; color: var(--dim); max-width: 70ch; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); text-decoration: none; transition: background-color .15s var(--ease); }
.row:first-child { border-top: 0; }
.row:hover { background: var(--raise); }
.row .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .d { color: var(--dim); font-size: 14px; }
.row .s { grid-row: span 2; align-self: center; font-size: 14px; font-weight: 500; color: var(--dim); }
.row .s.live { color: var(--live); }
.row .s.ok { color: var(--act); }
.row .s.bad { color: var(--bad); }

/* account */
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0 0 var(--s5); }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.asec { margin-top: var(--s4); }
.asec p { color: var(--dim); margin: 0 0 var(--s3); max-width: 62ch; }
.asec .msg { margin-top: var(--s2); }

/* new set */
.tips { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); background: var(--act-wash); border: 1px solid var(--act-line); border-radius: var(--r); }
.tips ul { margin: 0; padding-left: 20px; color: var(--on-wash); max-width: 72ch; }
.tips li::marker { color: var(--act); }
.tips li + li { margin-top: var(--s1); }
.eg { color: var(--text); font-weight: 600; white-space: nowrap; }
.form { display: flex; flex-direction: column; gap: var(--s5); }
.form .btn { align-self: flex-start; margin-top: 0; }
.drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4); border: 1px dashed var(--act-line); border-radius: var(--r2); background: var(--bg); cursor: pointer; margin: 0; color: var(--text); font-size: 16px; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.drop:hover, .drop.over { border-color: var(--act); background: var(--act-wash); }
.drop.has { border-style: solid; }
.drop:focus-within { outline: 2px solid var(--act); outline-offset: 2px; }
.drop .pick { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--act); border-radius: var(--r2); color: var(--act); font-weight: 600; }
.drop .hint { color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.drop.has .hint { color: var(--text); }
.shotbtn input, .drop input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* Safari gives file inputs a wide minimum size */
#genre_other { margin-top: var(--s2); }
.tlhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.shotbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -6px; color: var(--act); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shotbtn:hover { color: var(--act-hi); }
.shotbtn:focus-within { outline: 2px solid var(--act); outline-offset: 2px; }
.tlwrap { position: relative; }
.tlwrap textarea { display: block; }
.tldrop { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s4); text-align: center; background: rgba(15, 17, 19, .9); border: 2px dashed var(--act); border-radius: var(--r2); color: var(--text); font-weight: 600; font-size: 17px; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }
.tlwrap.over .tldrop, .tlwrap.reading .tldrop { opacity: 1; }
.tlwrap.reading .tldrop span::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.progress .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--live); }
.ptext { margin: var(--s2) 0 0; color: var(--dim); font-size: 14px; }

/* one set */
.state { display: flex; gap: var(--s5); align-items: flex-start; }
.state p { color: var(--dim); margin: 0 0 var(--s3); max-width: 62ch; }
.state p:last-child { margin-bottom: 0; }
.state .btn { margin-top: var(--s1); }
.state.bad h2 { color: var(--bad); }
.logo.working { width: 52px; height: 30px; margin-top: var(--s1); }
@media (prefers-reduced-motion: no-preference) {
  .logo.working rect:not(.cue) { animation: pulse .9s var(--ease) infinite alternate; }
  .logo.working rect:nth-child(2n) { animation-delay: .2s; }
  .logo.working rect:nth-child(3n) { animation-delay: .4s; }
}
.problems { border: 1px solid var(--bad-line); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.problems ul { margin: 0; padding-left: 20px; color: var(--text); }
/* what to do with the chapters: one main action, then where to copy them to as one joined group, then the file */
.exports { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); margin-bottom: var(--s1); }
.copyfor .glabel { display: block; font-size: 14px; color: var(--dim); margin-bottom: 6px; }
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; margin-left: -1px; }
.seg .btn:first-child { border-radius: var(--r2) 0 0 var(--r2); margin-left: 0; }
.seg .btn:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
.seg .btn:hover, .seg .btn:focus-visible { position: relative; z-index: 1; }
.chapters { list-style: none; margin: var(--s4) 0 0; padding: 0; overflow: hidden; }
.chapters li { border-top: 1px solid var(--line); }
.chapters a { display: grid; grid-template-columns: 2em 5em minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 48px; padding: var(--s2) var(--s5); color: inherit; text-decoration: none; transition: background .15s var(--ease); }
.chapters a:hover, .chapters a:focus-visible { background: var(--raise); }
.chapters a:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.chapters b { color: var(--dim); font-weight: 600; font-size: 14px; }
.chapters i { font-style: normal; font-size: 14px; color: var(--dim); white-space: nowrap; }
.chapters a:hover i, .chapters a:focus-visible i { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.chapters li:first-child { border-top: 0; }
.chapters li:nth-child(even), .list .row:nth-child(even) { background: var(--alt); }      /* two tones down a list: easier to follow one line across (PK, 2026-10-07) */
.chapters time { color: var(--dim); }
.fb { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.fb h2 { margin: 0; }
.fbbtns { display: flex; gap: var(--s2); flex-wrap: wrap; }
.fbbtns [aria-pressed="true"] { border-color: var(--live); background: var(--live-wash); }
.fb [data-fbmore] { display: flex; flex-direction: column; gap: var(--s2); }
.fb [data-fbmore] .btn, .fb[data-tell] .btn { align-self: flex-start; }
.fb[data-tell] label { color: var(--text); font-size: 16px; line-height: 1.5; max-width: 62ch; }

/* chapter editor (ported from the Kineq editor) */
.editor .head { flex-wrap: wrap; }
.savebar { display: flex; align-items: center; gap: var(--s4); }
.estatus { color: var(--dim); font-size: 14px; text-align: right; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s4); margin-top: var(--s5); }
.transport .btn { padding: 0 var(--s4); }
.transport svg { width: 18px; height: 18px; fill: currentColor; }
.transport [data-back8] svg, .transport [data-fwd8] svg { fill: none; stroke: currentColor; stroke-width: 2; }
.clock { font-family: var(--mono); font-size: 14px; color: var(--dim); margin: 0 var(--s2); white-space: nowrap; }
@media (hover: none) { .legend .desk { display: none !important; } }
.wave { padding: var(--s3) var(--s4) var(--s4); margin-bottom: var(--s3); }
.wlabel { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--dim); font-size: 14px; margin-bottom: var(--s2); }
.wave canvas { display: block; width: 100%; border-radius: 8px; background: var(--bg); cursor: pointer; touch-action: none; }
[data-overview] { height: 96px; }
[data-zoom] { height: 140px; }
.egrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
@media (max-width: 900px) { .egrid { grid-template-columns: 1fr; } }
.tracks { padding: var(--s3) 0 0; overflow: hidden; }
.tracks .wlabel { padding: 0 var(--s4); }
.tracks ol { list-style: none; margin: 0; padding: 0; }
.trow { display: grid; grid-template-columns: 3em 6.6em minmax(0, 1fr) 4.8em 44px 44px; gap: 6px; align-items: center; padding: var(--s1) var(--s2) var(--s1) var(--s4); border-top: 1px solid var(--line); cursor: pointer; transition: background-color .15s var(--ease); }
.trow:nth-child(even) { background: var(--alt); }
.trow:hover { background: var(--raise); }
.trow.sel { background: var(--live-wash); }
.trow .n { color: var(--dim); font-size: 14px; }
.trow.sel .n { color: var(--live); font-weight: 700; }
.trow .n.bad { color: var(--bad); }
.trow input { min-height: 44px; background: transparent; border: 1px solid transparent; border-radius: var(--r2); padding: 0 var(--s2); color: var(--text); font: 15px/1.3 var(--font); width: 100%; }
.trow input.time { font-family: var(--mono); font-size: 14px; background: var(--bg); border-color: var(--line-strong); }
.trow input:hover { border-color: var(--line-strong); }
.trow input:focus { border-color: var(--text); outline: none; background: var(--bg); }
.trow .d { font-family: var(--mono); font-size: 13px; color: var(--dim); white-space: nowrap; text-align: right; }
.trow .d.moved { color: var(--live); }
.icon { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: var(--r2); color: var(--dim); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.icon:hover { color: var(--text); border-color: var(--line-strong); }
.icon svg { width: 18px; height: 18px; fill: currentColor; }
.yt { display: flex; flex-direction: column; gap: var(--s3); }
.yt pre { margin: 0 calc(-1 * var(--s5)); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 420px; overflow: auto; }
.yt .btn { align-self: flex-start; }
.plist { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: var(--s1); }
.plist li { color: var(--bad); }
.plist li.ok { color: var(--text); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

@media (max-width: 560px) {
  h1 { font-size: 26px; }
  .page { padding-top: var(--s5); }
  .card { padding: var(--s4); } .list, .chapters, .tracks { padding: 0; } .tracks { padding-top: var(--s3); }
  .row, .chapters a { padding-left: var(--s4); padding-right: var(--s4); }
  .chapters a { grid-template-columns: 1.6em 4.2em minmax(0, 1fr); }
  .chapters i { display: none; }
  .checkhead .btn { width: 100%; }
  .yt pre { margin: 0 calc(-1 * var(--s4)); padding: var(--s3) var(--s4); }
  .exports { gap: var(--s4); } .exports > .btn, .copyfor, .seg { width: 100%; } .seg .btn { flex: 1; padding: 0 var(--s2); }
  .editor .head { flex-direction: column; } .savebar { width: 100%; justify-content: space-between; }
  .transport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .transport .clock { margin: 0; align-self: center; font-size: 13px; }
  .transport .btn { min-width: 0; padding: 0 var(--s2); font-size: 15px; } .tgroup { display: flex; } .tgroup .btn { flex: 1; }
  .trow { grid-template-columns: 2.6em minmax(0, 1fr) auto 44px 44px; grid-template-areas: "n t d p r" "n x x x x"; padding: var(--s2) 6px var(--s2) var(--s3); }
  .trow .n { grid-area: n; align-self: start; padding-top: 12px; }
  .trow .time { grid-area: t; max-width: 9em; }
  .trow .title { grid-area: x; }
  .trow .d { grid-area: d; }
  .trow .icon { grid-area: p; } .trow .icon.rm { grid-area: r; }
}

/* Premium, coming soon: shown on the upload screen, greyed and out of reach */
.premium { margin-top: var(--s5); padding-bottom: var(--s2); }
.premium .phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.premium h2 { margin: 0; font-size: 18px; }
.ptag { padding: 4px 10px; border: 1px solid var(--live-line); border-radius: 6px; background: var(--live-wash); color: var(--live); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pnote { margin: var(--s2) 0 var(--s3); color: var(--dim); font-size: 14px; }
.premium details { border-top: 1px solid var(--line); }
.premium summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; color: var(--dim); font-weight: 600; border-radius: var(--r2); }
.premium summary::-webkit-details-marker { display: none; }
.premium summary::after { content: ""; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a1a1a1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform .15s var(--ease); }
.premium details[open] summary::after { transform: rotate(180deg); }
.premium summary:hover { color: var(--text); }
.premium summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pbody { padding: 0 0 var(--s4); color: var(--dim); font-size: 15px; max-width: 72ch; }
.pbody p { margin: 0 0 var(--s3); }
.pbody fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.pbody legend { float: left; margin-right: var(--s5); padding: 0; font-size: 14px; }
.pbody label { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin: 0; font-weight: 500; color: var(--dim); cursor: not-allowed; }
.pbody input { width: 18px; height: 18px; margin: 0; accent-color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .premium summary::after { transition: none; } }
.agree2 { border: 0; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s1); }
.agree2 a { color: var(--act); } .agree2 a:hover { color: var(--act-hi); }
.agree { display: flex; align-items: flex-start; gap: var(--s3); margin: 0; min-height: 44px; font-weight: 500; cursor: pointer; max-width: 72ch; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--act); }
.agree input:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

/* the tracks as read from the tracklist: shown back before upload and while chapters are made */
.readback, .read ol { margin: var(--s2) 0 0; padding-left: 2.2em; color: var(--dim); font-size: 14px; line-height: 1.5; }
.readback { max-height: 11.5em; overflow-y: auto; padding-top: var(--s2); padding-bottom: var(--s2); border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); }
.read { margin-top: var(--s4); }
.read h2 { margin: 0 0 var(--s1); font-size: 18px; }
.read ol { font-size: 15px; color: var(--text); columns: 2; column-gap: var(--s6); }
.read li, .readback li { break-inside: avoid; overflow-wrap: anywhere; }
.state .progress { margin-top: var(--s4); max-width: 520px; }
.state .ptext { margin: var(--s2) 0 0; color: var(--text); font-size: 15px; }
@media (max-width: 640px) { .read ol { columns: 1; } }

/* the set's page: see where the chapters fall, then open the editor to hear and move them */
.checkit { margin-bottom: var(--s5); }
.checkhead { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: flex-start; justify-content: space-between; }
.checkhead h2 { margin: 0 0 var(--s1); font-size: 18px; }
.checkhead p { margin: 0; color: var(--dim); max-width: 60ch; }
.checkhead .btn { flex: none; }
.strip { display: block; margin-top: var(--s4); border-radius: var(--r2); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.strip:hover, .strip:focus-visible { border-color: var(--line-strong); }
.strip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.strip canvas { display: block; width: 100%; height: 96px; }
.checkit .count:empty { display: none; }
.editor .head h2 { margin: 0; font-size: 22px; }
[data-editor-slot] { scroll-margin-top: 72px; }
.tgroup { display: inline-flex; gap: var(--s2); }

/* the editor's legend: every action and how to do it */
.legend { margin-top: var(--s4); padding: 0 var(--s5); }
.legend summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600; }
.legend summary::-webkit-details-marker { display: none; }
.legend summary::after { content: ""; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a1a1a1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform .15s var(--ease); }
.legend[open] summary::after { transform: rotate(180deg); }
.legend summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--r2); }
.legend dl { margin: 0; padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s3) var(--s6); }
.legend dl.desk { display: grid; }
.legend dt { font-size: 14px; color: var(--dim); }
.legend dd { margin: 2px 0 0; font-size: 15px; }
.legend kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--raise); font: 600 13px/1.5 var(--font); text-align: center; }
@media (max-width: 640px) { .legend { padding: 0 var(--s4); } }
@media (prefers-reduced-motion: reduce) { .legend summary::after { transition: none; } }

/* editor: the listened tick, removing a track, zoom on the second waveform, hints */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trow .n { display: flex; align-items: center; gap: 4px; }
.trow .n b { font-weight: inherit; }
.trow .n .h { font-style: normal; font-size: 13px; color: var(--dim); }
.trow .icon.rm svg { width: 18px; height: 18px; }
.trow .icon.rm:hover { color: var(--bad); border-color: var(--bad-line); }
.wlabel .zoomer { display: inline-flex; gap: var(--s1); margin-left: var(--s3); }
.zoomer .icon { width: 36px; height: 36px; border-color: var(--line-strong); font: 600 18px/1 var(--font); color: var(--text); }
.zoomer .icon:disabled { color: var(--dim); border-color: var(--line); cursor: default; }
.hints { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); color: var(--text); font-size: 14px; background: var(--raise); }
.hints li { color: var(--text); }

/* editor: offer to place every chapter again after the tracklist changed */
.rescan { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; margin-top: var(--s4); border-color: var(--line-strong); }
.rescan h3 { margin: 0 0 var(--s1); font-size: 16px; }
.rescan p { margin: 0; color: var(--dim); max-width: 70ch; font-size: 15px; }
.rescan .btn { flex: none; }
.rescan > div:first-child { flex: 1 1 320px; }
.rescan-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* What's new, on My sets */
.news { margin-bottom: var(--s4); }
.newshead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.newshead h2 { margin: 0; font-size: 18px; }
.news h3 { margin: var(--s4) 0 var(--s1); font-size: 14px; font-weight: 600; color: var(--dim); }
.news p { margin: var(--s2) 0 0; color: var(--dim); max-width: 72ch; }
.news ul { margin: var(--s1) 0 0; padding-left: 1.2em; max-width: 72ch; }
.news li { margin-top: var(--s1); }