/* Song board, "Liner notes" look.
   Bold condensed type, square solid covers, thick rules, stage colour blocks.
   Colours are tokens below; dark mode follows the device. */

:root{
  --bg:#F3F2EE; --panel:#FFFFFF; --sunk:#E8E7E1; --ink:#0B0B0B; --ink2:#2B2B2B; --muted:#67665F;
  --rule:#0B0B0B; --hair:#D8D7D0; --hover:#ECEBE6;
  --accent:#FF3B1F; --accent-ink:#FFFFFF; --accent-soft:#FFE2DB;
  --s-spark:#FFC400; --s-writing:#1F4BFF; --s-edit:#FF3B1F; --s-ready:#8A3FFF; --s-recorded:#00A86B; --s-done:#0B0B0B;
  --on-spark:#0B0B0B; --on-writing:#FFFFFF; --on-edit:#FFFFFF; --on-ready:#FFFFFF; --on-recorded:#FFFFFF; --on-done:#FFFFFF;
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --side:252px; --player:96px; --tabs:62px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --panel:#141414; --sunk:#1C1C1B; --ink:#F2F1EC; --ink2:#D2D1CB; --muted:#94938C;
    --rule:#F2F1EC; --hair:#2E2E2B; --hover:#1B1B1A; --accent-soft:#3A140E;
    --s-done:#F2F1EC; --on-done:#0B0B0B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0B; --panel:#141414; --sunk:#1C1C1B; --ink:#F2F1EC; --ink2:#D2D1CB; --muted:#94938C;
  --rule:#F2F1EC; --hair:#2E2E2B; --hover:#1B1B1A; --accent-soft:#3A140E;
  --s-done:#F2F1EC; --on-done:#0B0B0B; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}

/* condensed display type */
.display,h1,h2,.brand b,.col-h b,.card-title,.tile-title,.album-title,.f-title,.t-title,.box h3{
  font-family:var(--sans);font-stretch:70%;font-weight:850;text-transform:uppercase;letter-spacing:-.005em;line-height:.95}
h1,h2,h3{margin:0}
.label,.nav-h,.chip,.th,.paper-h,.fact small,.meta-ago,.sub-mono,.n,.kbd{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;font-stretch:75%;font-weight:850;font-size:16px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;border:2px solid var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.55}
.linkish{color:var(--accent);font-weight:700;padding:6px 0;text-align:left}
.danger{color:var(--accent);font-weight:800;text-transform:uppercase;font-stretch:75%;font-size:16px;padding:12px 0;letter-spacing:.02em}
.hint{font-size:13.5px;color:var(--muted);margin:.5rem 0 0}
.hint.warn,.warn{color:var(--accent)}
.icon{width:18px;height:18px;flex:none;display:block}

/* inputs */
.field-in,.search input,.add input,.box input,.share input,.share select,.row input{
  background:var(--panel);border:2px solid var(--ink);border-radius:0;padding:9px 12px;min-width:0;outline:0}
.field-in:focus,.add input:focus,.box input:focus,.share input:focus,.share select:focus,.row input:focus{border-color:var(--accent)}
.row{display:flex;gap:8px}
.row input{flex:1}

/* ---------------- sign in ---------------- */
.signin{max-width:34rem;margin:0 auto;padding:15vh 20px 40px}
.signin h1{font-size:clamp(56px,14vw,96px)}
.signin-lede{margin:1.25rem 0 0;color:var(--ink2);font-size:17px;max-width:32ch}
.signin-lede b{color:var(--ink);overflow-wrap:anywhere}
.signin .add{margin-top:1.25rem}

/* ---------------- app shell ---------------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.app.playing{padding-bottom:var(--player)}

.side{position:sticky;top:0;height:100vh;overflow:auto;border-right:3px solid var(--rule);background:var(--panel);
  padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:20px}
.app.playing .side{height:calc(100vh - var(--player))}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand-mark{width:32px;height:32px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;font-stretch:70%;font-size:20px}
.brand b{font-size:21px;display:block}
.brand small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.nav{display:grid;gap:1px}
.nav-h{color:var(--ink);padding:0 8px 6px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.nav-i{display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px;font-weight:600;color:var(--ink2);text-align:left}
.nav-i:hover{background:var(--hover)}
.nav-i[aria-current="true"]{background:var(--ink);color:var(--bg)}
.nav-i .n{margin-left:auto;color:inherit;opacity:.65;font-size:12px}
.sw{width:10px;height:10px;flex:none;background:var(--c)}
.side-foot{margin-top:auto;display:grid;gap:8px;border-top:3px solid var(--rule);padding-top:12px}
.acct{display:grid;gap:2px;padding:0 8px;font-size:13px;overflow-wrap:anywhere}
.status{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.status.warn{color:var(--accent);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px}

.main{min-width:0}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 28px;
  background:var(--bg);border-bottom:3px solid var(--rule)}
.search{flex:1;max-width:480px;display:flex;align-items:center;gap:8px;border:2px solid var(--ink);background:var(--panel);padding:0 10px}
.search input{border:0;flex:1;padding:9px 0;background:transparent}
.search .kbd{border:1px solid var(--hair);padding:0 5px;color:var(--muted)}
.seg{display:flex;border:2px solid var(--ink)}
.seg button{padding:7px 12px;font-weight:700;display:flex;align-items:center;gap:6px;font-size:14px}
.seg button + button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.top .status-m{display:none}
.content{padding:26px 28px 56px;max-width:1500px}

/* home head */
.greet{font-size:clamp(44px,6vw,64px)}
.summary{margin:8px 0 0;color:var(--ink2);font-size:16px;max-width:60ch}
.sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:3px solid var(--rule);padding-top:10px;margin:30px 0 14px}
.sec-h h2{font-size:26px}
.sec-h .grow{flex:1}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);padding:3px 8px;font-weight:700;font-size:13px}
.filter b{font-family:var(--mono);font-weight:500;font-size:11px;text-transform:uppercase}
.sort{background:transparent;border:2px solid var(--ink);padding:5px 8px;font-weight:600}

/* covers: square solid colour, giant initials, a catalogue number */
.cover{position:relative;flex:none;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:hsl(var(--h,260) 85% 56%);color:#0B0B0B;font-family:var(--sans);font-stretch:62%;font-weight:900;letter-spacing:-.02em;line-height:1}
.cover .cn{position:absolute;left:7%;top:6%;font-family:var(--mono);font-stretch:100%;font-weight:700;letter-spacing:0;font-size:max(8px,.15em)}
.cover.sm{width:44px;font-size:22px}
.cover.sm .cn{display:none}
.cover.md{width:56px;font-size:28px}
.cover.md .cn{display:none}
.cover.lg{width:100%;font-size:clamp(64px,7vw,104px)}
.cover.lg .cn{font-size:12px}
.cover.xl{width:220px;font-size:150px}
.cover.xl .cn{font-size:13px}

/* working on now */
.now{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.tile,.album{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left}
.tile-title{display:block;font-size:22px;margin-top:10px}
.tile-next{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink2);font-size:14px;margin-top:2px}
.now-empty{border:2px dashed var(--hair);padding:16px;color:var(--muted);margin:0}

/* quick add */
.add{display:flex;gap:8px;margin:0 0 6px}
.add input{flex:1;font-size:16px}

/* stage pill */
.pill{display:inline-flex;align-items:center;background:var(--c);color:var(--on);font-stretch:75%;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.02em;padding:2px 7px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ink);padding:1px 6px;white-space:nowrap;font-size:10.5px;color:var(--ink2)}

/* stages board */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;padding-bottom:10px;align-items:start}
.col{border-top:6px solid var(--c);padding-top:10px;min-height:220px;display:flex;flex-direction:column;gap:10px}
.col.over{background:var(--hover);outline:2px dashed var(--ink);outline-offset:2px}
.col-h{display:flex;align-items:center;gap:8px}
.col-h b{font-size:21px}
.col-h .n{opacity:1;color:var(--muted)}
.col-h .col-add{margin-left:auto;width:28px;height:28px;border:2px solid var(--ink);display:grid;place-items:center;font-weight:900;font-size:16px}
.col-empty{border:2px dashed var(--hair);padding:14px;color:var(--muted);font-size:13px}
.card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;text-align:left;background:var(--panel);border:2px solid var(--ink);padding:10px;width:100%;position:relative}
.card[draggable="true"]{cursor:grab}
.card:hover{box-shadow:4px 4px 0 var(--ink)}
.card.drag{opacity:.35}
.card-title{display:block;font-size:19px;padding-right:22px;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.tile-title,.album-title,.f-title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.card-next{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;color:var(--ink2);margin-top:3px}
.card-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.meta-ago{margin-left:auto;color:var(--muted);font-size:10.5px}
.star{position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;color:var(--muted)}
.star[aria-pressed="true"]{color:var(--accent)}
.star svg{width:18px;height:18px}

/* list (tracklist) */
.table{border:2px solid var(--ink);background:var(--panel)}
.tr{display:grid;grid-template-columns:62px minmax(200px,2.2fr) 128px minmax(110px,1fr) minmax(150px,1.6fr) 64px 92px 54px 120px 36px;
  align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--ink);text-align:left;width:100%}
.tr:first-child{border-top:0}
.tr:hover{background:var(--hover)}
.tr.th{background:var(--ink);color:var(--bg);padding-top:7px;padding-bottom:7px}
.tr.th:hover{background:var(--ink)}
.tr .no{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tr .song-cell{display:flex;align-items:center;gap:10px;min-width:0}
.t-title{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr .c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);font-size:14px}
.tr .m{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .star{position:static}

/* projects */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.album{background:var(--panel);border:2px solid var(--ink);padding:12px;text-align:left}
.album:hover{box-shadow:5px 5px 0 var(--ink)}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.stack .cover{width:100%;font-size:40px}
.stack .cover.blank{background:var(--sunk)}
.album-title{display:block;font-size:26px;margin-top:12px}
.album-sub{color:var(--muted);font-size:13px;font-family:var(--mono);text-transform:uppercase}
.bar{display:flex;height:10px;margin-top:10px;background:var(--sunk)}
.bar i{display:block;background:var(--c)}

/* recordings page */
.takes-list{border:2px solid var(--ink);background:var(--panel)}
.takes-list .take{padding:10px 14px;border-top:1px solid var(--ink)}
.takes-list .take:first-child{border-top:0}

.empty{color:var(--muted);padding:2rem 0;font-size:16px;max-width:40ch;margin:0}

/* ---------------- song page ---------------- */
.song{padding:18px 28px 60px;max-width:1500px}
.song-bar{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--rule);padding-bottom:12px}
.back{display:flex;align-items:center;gap:6px;font-weight:800;text-transform:uppercase;font-stretch:75%;font-size:16px}
.song-bar .status{flex:1;text-align:right}
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:end;margin-top:22px}
.hero-text{min-width:0}
.stage-pick{display:inline-flex;position:relative;background:var(--c);color:var(--on)}
.stage-pick select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;padding:4px 30px 4px 10px;
  font-stretch:75%;font-weight:850;font-size:15px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.stage-pick::after{content:"";position:absolute;right:11px;top:50%;margin-top:-2px;pointer-events:none;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor}
.stage-pick option{color:#0B0B0B;background:#fff;text-transform:none}
.f-title{display:block;width:100%;margin-top:10px;background:none;border:0;padding:0;outline:0;font-size:clamp(48px,7vw,96px)}
.f-title::placeholder{color:var(--hair)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:stretch}
.fact{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:0 10px;min-height:40px;background:var(--panel)}
.fact small{color:var(--muted)}
.fact input{border:0;background:none;outline:0;width:5.5em;font-weight:700;padding:8px 0}
.fact.grow input{width:12em}
.fact .tap{background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:3px 8px}
.fact .val{font-weight:700}
.next-step{display:flex;align-items:center;gap:12px;margin-top:20px;background:var(--ink);color:var(--bg);padding:12px 16px}
.next-step span{font-stretch:75%;font-weight:850;text-transform:uppercase;white-space:nowrap}
.next-step input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--bg);font-size:17px;font-weight:600}
.next-step input::placeholder{color:var(--muted)}
.shared-banner,.notice{margin:14px 0 0;border:2px solid var(--ink);padding:9px 12px;font-size:14px;background:var(--panel)}
.notice{background:var(--accent-soft)}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:24px;margin-top:24px;align-items:start}
.paper{background:var(--panel);border:2px solid var(--ink);padding:22px 28px}
.paper-h{display:flex;justify-content:space-between;gap:12px;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:12px}
#f-lyrics{display:block;width:100%;min-height:55vh;border:0;outline:0;background:none;resize:none;font:500 21px/1.6 var(--sans);color:var(--ink)}
.panelcol{display:grid;gap:18px}
.box{background:var(--panel);border:2px solid var(--ink);padding:14px 16px}
.box h3{font-size:22px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.box h3 small{font-family:var(--mono);font-stretch:100%;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.04em}
.box > input{width:100%}
.beat-open{display:inline-block;margin-top:8px;color:var(--accent);font-weight:800;text-transform:uppercase;font-stretch:75%;font-size:15px}
.notes{width:100%;min-height:120px;border:0;outline:0;background:var(--sunk);padding:10px 12px;resize:vertical;font-size:15px}
.song-foot{display:flex;justify-content:flex-start;margin-top:28px;border-top:3px solid var(--rule);padding-top:8px}

/* takes (recordings with waveforms) */
.take{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.box .take:first-child{border-top:0;padding-top:2px}
.pp{width:40px;height:40px;background:var(--accent);color:#fff;display:grid;place-items:center}
.pp svg{width:16px;height:16px}
.pp.link{background:var(--ink);color:var(--bg)}
.take-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.take-name{font-weight:800;overflow-wrap:anywhere}
.take-song{font-stretch:75%;font-weight:850;text-transform:uppercase;font-size:17px;text-align:left}
.take-dur{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.take-foot{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted)}
.take-foot button{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink2);padding:4px 0}
.take-foot .rm{color:var(--accent);margin-left:auto}
.wave{display:flex;align-items:center;gap:2px;height:34px;margin:4px 0;cursor:pointer}
.wave i{flex:1;min-width:1px;background:color-mix(in srgb,var(--ink) 24%,transparent);height:var(--v,30%)}
.wave i.on{background:var(--ink)}
.rec-add{display:grid;gap:8px;margin-top:12px}
.drop{display:grid;gap:2px;place-items:center;border:2px dashed var(--ink);padding:14px;font-weight:800;text-transform:uppercase;font-stretch:75%;font-size:16px;width:100%}
.drop small{font-family:var(--mono);font-stretch:100%;font-weight:500;font-size:11px;color:var(--muted)}
.drop.over,.recs.over .drop{background:var(--accent-soft);border-color:var(--accent)}
#f-rec-progress{width:100%;height:8px;appearance:none;-webkit-appearance:none;border:0;background:var(--sunk)}
#f-rec-progress::-webkit-progress-bar{background:var(--sunk)}
#f-rec-progress::-webkit-progress-value{background:var(--accent)}
#f-rec-progress::-moz-progress-bar{background:var(--accent)}

/* sharing (step 4) */
.share h3{margin-top:4px}
.share .hint{margin:0 0 8px}
.share-add{display:grid;gap:8px;margin-top:10px}
.share-add .row select{flex:1}
.share-add .btn{justify-self:start}
.check{display:flex;gap:8px;align-items:center;font-size:14px}
.person{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--hair);padding:8px 0}
.person small{display:block;color:var(--muted);font-size:12px}
#f-public-row{margin-top:8px}

/* tools page */
.tools-page{display:grid;gap:24px;max-width:720px}
.tools-page section{border:2px solid var(--ink);background:var(--panel);padding:16px}
.tools-page h2{font-size:24px;margin-bottom:6px}
.tools-page .btn{margin-top:10px}
.diag pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sunk);padding:12px;font:12px/1.45 var(--mono);max-height:26rem;overflow:auto}

/* ---------------- project covers and the home shelf ---------------- */
.btn.small{padding:6px 10px;font-size:14px}
.btn.big{padding:13px 22px;font-size:20px}
.pcover{position:relative;display:flex;align-items:flex-end;aspect-ratio:1;overflow:hidden;background:hsl(var(--h) 80% 52%);color:#0B0B0B;
  padding:10px 12px;font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.01em}
.pcover .pc-name{font-size:var(--fs,44px);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.pcover .pc-count{position:absolute;top:9px;left:12px;font-family:var(--mono);font-stretch:100%;font-weight:700;font-size:12px;letter-spacing:0}
.pcover.loose{background:var(--sunk);color:var(--ink);border:2px dashed var(--ink)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;text-align:left}
.pcard .pcover{width:100%}
.pcard:hover .pcover{box-shadow:6px 6px 0 var(--ink)}
.pcard-title{display:block;margin-top:10px;font-size:22px}
.pcard-sub{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;color:var(--muted)}
.pcard-play{position:absolute;right:10px;top:10px;width:46px;height:46px;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.pcard-play svg{width:18px;height:18px}
.pcard-play:hover{background:var(--accent);color:#fff}
.new-project{padding:4px 0}
.new-project input{width:100%;border:2px solid var(--ink);background:var(--panel);padding:7px 9px;outline:0}
.new-project-btn{color:var(--muted)}
#latest:empty{display:none}

/* ---------------- album page ---------------- */
.album-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end}
.pcover.xl{width:260px;--fs:64px}
.album-name{font-size:clamp(52px,8vw,110px);margin-top:6px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.mono-sum{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.album-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.album-actions .btn.big svg{width:20px;height:20px}
.tracks{border:2px solid var(--ink);background:var(--panel)}
.track{display:grid;grid-template-columns:22px 34px 44px 44px minmax(0,1fr) 128px minmax(120px,.8fr) 64px;gap:12px;align-items:center;padding:8px 12px;border-top:1px solid var(--ink)}
.track:first-child{border-top:0}
.track:hover{background:var(--hover)}
.track.now{background:var(--accent-soft)}
.track.drag{opacity:.35}
.track.over{box-shadow:inset 0 3px 0 var(--accent)}
.grip{cursor:grab;color:var(--muted);font-size:16px;line-height:1;text-align:center;user-select:none}
.track-no{font-family:var(--mono);font-size:13px;color:var(--muted)}
.track .pp{width:40px;height:40px}
.track .pp.off{background:var(--sunk);color:var(--muted);cursor:default}
.track-title{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:20px;line-height:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-take{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-dur{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}

/* ---------------- waveforms with note pins ---------------- */
.wave-wrap{position:relative;flex:1;min-width:0}
.wave-wrap .wave{margin:0}
.pins{position:absolute;inset:0;pointer-events:none}
.pin-mk{position:absolute;top:-6px;bottom:-2px;width:0;border-left:2px solid var(--accent);pointer-events:auto;cursor:pointer}
.pin-mk::before{content:"";position:absolute;top:-1px;left:-6px;width:10px;height:10px;background:var(--accent)}
.pin-mk:hover::after,.pin-mk:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:-8px;z-index:5;width:max-content;max-width:240px;
  background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600;padding:5px 8px;white-space:normal}

/* ---------------- player bar ---------------- */
.player{position:fixed;left:0;right:0;bottom:0;height:var(--player);z-index:30;background:var(--panel);border-top:4px solid var(--rule);
  display:grid;grid-template-columns:minmax(220px,var(--side)) minmax(0,1fr) auto;align-items:center;padding-bottom:env(safe-area-inset-bottom,0px)}
.p-song{display:flex;align-items:center;gap:12px;padding:0 14px;min-width:0;text-align:left;height:100%}
.cover.pl{width:68px;font-size:34px}
.cover.pl .cn{display:none}
.p-text{min-width:0;display:grid}
.p-text b{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-text span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.p-text .p-queue{color:var(--accent)}
.p-mid{display:flex;align-items:center;gap:16px;padding:0 22px;min-width:0}
.p-ctrls{display:flex;align-items:center;gap:6px}
.p-skip{width:38px;height:38px;display:grid;place-items:center;color:var(--ink)}
.p-skip svg{width:20px;height:20px}
.p-skip:disabled{opacity:.3;cursor:default}
.pp.big{width:56px;height:56px}
.pp.big svg{width:22px;height:22px}
.p-mid .wave-wrap .wave{height:46px}
.t{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.p-right{display:flex;align-items:center;gap:10px;padding:0 16px}
.p-icon{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--ink)}
.p-msg{font-size:13px;color:var(--accent);max-width:180px}

/* ---------------- now playing ---------------- */
.np{position:fixed;z-index:35;left:var(--side);right:0;top:0;bottom:var(--player);overflow:auto;background:var(--bg);border-left:3px solid var(--rule);padding:16px 28px 40px}
.np-bar{display:flex;align-items:center;gap:14px;border-bottom:3px solid var(--rule);padding-bottom:10px}
.np-bar .label{flex:1;text-align:center}
.np-grid{display:grid;grid-template-columns:minmax(220px,420px) minmax(0,1fr);gap:32px;margin-top:24px;align-items:start}
.np-cover{width:100%;font-size:clamp(120px,16vw,240px)}
.np-cover .cn{font-size:14px}
.np-title{font-size:clamp(44px,6vw,84px);margin-top:6px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.np-wave{margin-top:22px}
.np-wave .wave{height:90px;gap:3px}
.np-times{display:flex;justify-content:space-between;margin-top:6px}
.np-ctrls{display:flex;align-items:center;gap:12px;margin-top:14px}
.p-skip.big{width:48px;height:48px}
.p-skip.big svg{width:26px;height:26px}
.pp.huge{width:76px;height:76px}
.pp.huge svg{width:30px;height:30px}
.np-ctrls .btn{margin-left:auto}
.np-notes,.np-queue{margin-top:28px;border-top:3px solid var(--rule);padding-top:10px}
.np-notes h2,.np-queue h2{font-size:24px;margin-bottom:10px}
.note-add{display:flex;gap:8px}
.note-add input{flex:1;min-width:0;border:2px solid var(--ink);background:var(--panel);padding:9px 12px;outline:0}
.note-add input:focus{border-color:var(--accent)}
.note-at{font-family:var(--mono);font-weight:700;background:var(--accent);color:#fff;padding:0 12px;min-width:68px}
.note{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--hair)}
.note:first-child{border-top:0}
.note-time{font-family:var(--mono);font-weight:700;color:var(--accent);text-align:left}
.note-text{overflow-wrap:anywhere}
.note-by{display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.note-rm{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--accent)}
.qitem{display:grid;grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:7px 0;border-top:1px solid var(--hair);text-align:left}
.qitem:first-child{border-top:0}
.qitem.now .track-title{color:var(--accent)}
.take-notes{margin:4px 0 2px;display:grid;gap:2px}
.take-notes button{display:flex;gap:8px;text-align:left;font-size:13px;color:var(--ink2)}
.take-notes b{font-family:var(--mono);color:var(--accent);font-weight:700;min-width:38px}
.album-take{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink2)}
.album-take[aria-pressed="true"]{color:var(--accent);font-weight:700}


/* medium windows: lyrics and the side panel stack */
@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr)}
  .panelcol{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .cover.xl{width:180px;font-size:124px}
  .np-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .np-art{max-width:300px}
}

/* ---------------- phone ---------------- */
.tabs{display:none}
.scrim{display:none}
@media (max-width:860px){
  :root{--player:76px}
  .app{grid-template-columns:1fr;padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px))}
  .app.playing{padding-bottom:calc(var(--tabs) + var(--player) + env(safe-area-inset-bottom,0px))}
  .side{position:fixed;z-index:50;left:0;top:0;bottom:0;width:min(86vw,320px);height:auto!important;transform:translateX(-102%);transition:transform .2s ease;
    padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .app.side-open .side{transform:none}
  .app.side-open .scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.4)}
  .top{flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;gap:8px}
  .top .search{order:3;max-width:none;flex-basis:100%}
  .top .status-m{display:block;flex:1;text-align:right}
  .top .btn .lbl,.seg .lbl,.search .kbd{display:none}
  .top .btn{padding:8px 12px}
  .content{padding:18px 14px 40px}
  .now{grid-auto-flow:column;grid-auto-columns:150px;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -14px;padding:0 14px 4px;scroll-padding-inline:14px}
  .tile{scroll-snap-align:start}
  .cover.lg{font-size:72px}
  .kanban{grid-auto-columns:84%;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 10px;scroll-padding-inline:14px}
  .col{scroll-snap-align:start}
  .tr{grid-template-columns:44px minmax(0,1fr) auto 32px;gap:10px}
  .tr > .hide-m{display:none}
  .tr.th{display:none}
  .tr .no{display:none}
  .song{padding:12px 14px 40px}
  .hero{grid-template-columns:1fr;gap:14px}
  .cover.xl{width:120px;font-size:84px}
  .f-title{font-size:48px}
  .split{grid-template-columns:1fr}
  .paper{padding:16px}
  #f-lyrics{font-size:19px;min-height:45vh}
  .player{bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr) auto;padding-bottom:0;border-top-width:3px}
  .cover.pl{width:52px;font-size:26px}
  .p-text b{font-size:19px}
  .p-mid{padding:0 10px 0 0;gap:6px}
  .p-mid .wave-wrap,.p-mid .t,.p-right,#p-prev{display:none}
  .pp.big{width:50px;height:50px}
  .np{left:0;bottom:0;z-index:60;border-left:0;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(30px + env(safe-area-inset-bottom,0px))}
  .np-grid{grid-template-columns:1fr;gap:18px}
  .np-art{max-width:300px}
  .np-title{font-size:44px}
  .np-wave .wave{height:70px}
  .album-hero{grid-template-columns:1fr;gap:16px}
  .pcover.xl{width:200px;--fs:48px}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pcard-title{font-size:19px}
  .track{grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px}
  .track > .hide-m{display:none}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tabs) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:3px solid var(--rule)}
  .tabs button{display:grid;place-items:center;align-content:center;gap:2px;font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted)}
  .tabs button[aria-current="true"]{color:var(--ink)}
  .tabs .t-add{width:48px;height:48px;margin:auto;background:var(--accent);color:#fff;font-size:28px;font-weight:900;font-family:var(--sans)}
}
@media (min-width:861px){ .only-m{display:none!important} }
.pcard-open{display:flex;flex-direction:column;align-items:stretch;text-align:left}
.pcard-open:hover .pcover{box-shadow:6px 6px 0 var(--ink)}
.album-page{margin-bottom:10px}
.wave{overflow:hidden;min-width:0}
.np-main{min-width:0}
@media (max-width:860px){ .np-wave .wave{gap:1px} .np-ctrls .btn{padding:8px 10px;font-size:14px} }
.share-add > input,.share-add .row{width:100%}
.share-add .row select{flex:1;min-width:0;width:0}
#f-public-row input{min-width:0;width:0;flex:1}