/* musica — "Ledger" (#1294): white paper, ink #0A0A0A, IBM Plex, hairline
   rules, red only for deletion verdicts, a black player dock. Volume stays
   bottom-left (#1244). */

@font-face { font-family: 'IBM Plex Sans'; src: url('/plex-sans-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --paper: #FFFFFF; --ink: #0A0A0A; --ink-soft: #262626; --muted: #8A8A8A; --muted-2: #6B6B6B;
  --hair: #E5E5E5; --wash: #F5F5F5; --row-hover: rgba(10,10,10,.045); --row-now: rgba(10,10,10,.07);
  --red: #DC2626; --red-wash: rgba(220,38,38,.07);
  --dock: #0A0A0A; --dock-strip: #161616; --dock-hair: #262626; --dock-bar: #3A3A3A; --dock-dim: #A3A3A3;
  --shadow: rgba(10,10,10,.14); --focus: rgba(10,10,10,.35);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --row: 38px; --rail: 248px; --art: 28px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #131313; --ink: #F2F2F2; --ink-soft: #D8D8D8; --muted: #7C7C7C; --muted-2: #A8A8A8;
  --hair: #262626; --wash: #1B1B1B; --row-hover: rgba(255,255,255,.05); --row-now: rgba(255,255,255,.09);
  --red: #F05252; --red-wash: rgba(240,82,82,.14); --shadow: rgba(0,0,0,.5); --focus: rgba(255,255,255,.35);
}
:root[data-theme="dark"] .dock { border-top: 1px solid var(--hair); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--sans); font-size: 14px; background: var(--paper); color: var(--ink); overflow: hidden; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }
svg { width: 20px; height: 20px; flex: none; }

.shell {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "rail main" "dock dock";
}

/* ---------- rail ---------- */
.rail { grid-area: rail; display: flex; flex-direction: column; border-right: 1px solid var(--hair); min-height: 0; background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 14px 12px 18px; }
.brand-disc { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.brand-disc span { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.brand-text { flex: 1; min-width: 0; }
.brand-text h1 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand-text p { font: 11px var(--mono); color: var(--muted); }
.theme-btn { width: 30px; height: 30px; border-radius: 6px; color: var(--muted-2); font-size: 15px; }
.theme-btn:hover, .icon-btn:hover { background: var(--row-hover); }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 220px; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 4px; }
.menu-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 5px; text-align: left; }
.menu-item:hover { background: var(--row-hover); }
.menu-item.danger { color: var(--red); }
.menu-state { font: 11px var(--mono); color: var(--muted); }
.menu-sep { height: 1px; background: var(--hair); margin: 4px 2px; }

.icon-btn { width: 34px; height: 34px; border-radius: 6px; display: inline-grid; place-items: center; color: inherit; flex: none; }

.search { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 0 10px; height: 34px; border: 1px solid var(--hair); border-radius: 7px; color: var(--muted); }
.search svg { width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); }
.search:focus-within { border-color: var(--ink); }

.outputs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 14px 12px; }
.outputs button { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--hair); border-radius: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outputs button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.outputs button.add { flex: 0 0 auto; color: var(--muted-2); }

.nav { display: flex; flex-direction: column; padding: 0 8px 8px; border-bottom: 1px solid var(--hair); }
.nav a, .links a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; }
.nav a:hover, .links a:hover { background: var(--row-hover); }
.nav a.on, .links a.on { background: var(--row-now); font-weight: 600; }
.count { font: 11px var(--mono); color: var(--muted); font-weight: 400; }
.rail-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 10px; min-height: 0; overscroll-behavior: contain; }
.rail-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rail-add { width: 22px; height: 22px; border-radius: 5px; font-size: 16px; line-height: 1; color: var(--muted-2); }
.rail-add:hover { background: var(--row-hover); color: var(--ink); }
.links a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links a.mark-target::after { content: '●'; font-size: 8px; margin-left: 4px; color: var(--ink); }

.curation { margin: 6px 14px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 8px; cursor: pointer; user-select: none; }
.curation-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.curation .state { font: 500 11px var(--mono); color: var(--muted); }
.curation[aria-checked="true"] { border-color: var(--ink); }
.curation[aria-checked="true"] .state { color: var(--ink); }
.curation .sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.curation .counts { font: 11px var(--mono); color: var(--muted); margin-top: 4px; }

.volume { display: flex; align-items: center; gap: 4px; padding: 8px 10px 12px 10px; border-top: 1px solid var(--hair); }
.volume input { flex: 1; min-width: 0; accent-color: var(--ink); }
.vol-label { font: 11px var(--mono); color: var(--muted); width: 36px; text-align: right; }
.volume.fixed input, .volume.fixed .icon-btn { opacity: .35; pointer-events: none; }

/* ---------- main ---------- */
.main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 10px; min-height: 64px; }
.rail-toggle { display: none; }
.title-wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.title-wrap h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-actions { display: flex; gap: 6px; align-items: center; }
.pill { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill.solid { background: var(--ink); color: var(--paper); }
.pill svg { width: 16px; height: 16px; }
.pill.ghost { border-color: var(--hair); }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.seg button { height: 30px; padding: 0 12px; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.elsewhere { font: 12px var(--mono); color: var(--muted-2); margin-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.offline-badge { font: 500 11px var(--mono); padding: 3px 8px; border: 1px solid var(--ink); border-radius: 10px; }

.cols, .row { display: grid; grid-template-columns: var(--art) minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,1.4fr) 52px 74px 52px 96px; gap: 12px; align-items: center; padding: 0 20px; }
.r-art { width: var(--art); height: var(--art); border-radius: 3px; display: block; }
.cols { height: 30px; border-bottom: 1px solid var(--hair); font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.col { text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.col.num { text-align: right; }
.col.on { color: var(--ink); }
.col.on::after { content: ' ↑'; }
.col.on.desc::after { content: ' ↓'; }

.list { flex: 1; overflow-y: auto; position: relative; min-height: 0; overscroll-behavior: contain; outline: 0; }
.spacer { position: relative; width: 100%; }
.row { position: absolute; left: 0; right: 0; height: var(--row); border-bottom: 1px solid var(--hair); cursor: pointer; will-change: transform; }
.row:hover { background: var(--row-hover); }
.row.now { background: var(--row-now); }
.row.now .r-title::before { content: '▶ '; font-size: 10px; }
.row.trashed .r-title, .row.trashed .r-sub { text-decoration: line-through; }
.row.played { color: var(--muted); }
.row.placeholder { color: var(--muted); cursor: default; }
.cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-main { min-width: 0; }
.r-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; line-height: 18px; }
.r-sub { display: none; font-size: 12px; line-height: 15px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pointer-only: on touch, a cursor/hover style makes the browser snap taps
   on the title to these links (touch adjustment), opening artist/album
   pages instead of playing. Phones reach those via long-press. */
@media (hover: hover) { .r-sub .link { cursor: pointer; } }
.r-sub .sep { padding: 0 5px; }
.num { text-align: right; font: 12px var(--mono); color: var(--muted-2); }
@media (hover: hover) { .link:hover { text-decoration: underline; } }
.acts { display: flex; justify-content: flex-end; gap: 2px; }
.acts .icon-btn { width: 30px; height: 30px; color: var(--muted); }
.acts .icon-btn svg { width: 16px; height: 16px; }
/* Verdicts are red when set: a liked heart, a trashed cross (Johan 2026-10-07). */
.acts .like.on, .acts .trash.on, .verdicts .like.on, .strip .like.on, .strip .trash.on, .dock .like.on { color: var(--red); }
.acts .trash:hover { color: var(--red); }
.acts .mark { font: 500 12px var(--mono); }
.acts .mark.on { color: var(--ink); }
.row:not(:hover) .acts .like:not(.on), .row:not(:hover) .acts .trash:not(.on) { opacity: .35; }

/* artists, albums, playlists */
.row.simple { grid-template-columns: 40px minmax(0,1fr) 120px; }
.row.simple .initials { width: 30px; height: 30px; border-radius: 50%; background: var(--wash); display: grid; place-items: center; font: 500 11px var(--mono); }
.row.simple .meta { text-align: right; font: 12px var(--mono); color: var(--muted-2); }
.row.simple canvas { width: 30px; height: 30px; border-radius: 4px; }
.empty { padding: 40px 20px; color: var(--muted); text-align: center; }

/* ---------- dock ---------- */
.dock { grid-area: dock; min-width: 0; background: var(--dock); color: #fff; padding-bottom: env(safe-area-inset-bottom); }
.strip { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 30px; background: var(--dock-strip); font-size: 12px; color: var(--dock-dim); }
.strip-label { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #737373; flex: none; }
.strip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.strip-gap { flex: 1; }
.strip .icon-btn.mini { width: 24px; height: 24px; color: #737373; }
.strip .icon-btn.mini svg { width: 14px; height: 14px; }
.strip .trash.on { color: var(--red); }
.strip.no-prev .mini { display: none; }
.strip .icon-btn:hover, .dock .icon-btn:hover { background: rgba(255,255,255,.08); }
.progress { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; }
.time { font: 11px var(--mono); color: var(--dock-dim); width: 40px; flex: none; }
.time:last-child { text-align: right; }
.bar { flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.bar::before { content: ''; position: absolute; }
.bar .fill { height: 3px; background: #fff; border-radius: 2px; width: 0; box-shadow: 0 0 0 0 transparent; }
.bar { background: linear-gradient(var(--dock-bar), var(--dock-bar)) center / 100% 3px no-repeat; }
.dock-main { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; padding: 8px 16px 12px; }
.np { display: flex; align-items: center; gap: 12px; min-width: 0; }
.art { width: 48px; height: 48px; border-radius: 4px; flex: none; background: #1F1F1F; }
.np-text { min-width: 0; }
.np-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-artist { color: var(--dock-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; text-align: left; }
.np-artist:hover { text-decoration: underline; }
.controls { display: flex; align-items: center; gap: 6px; }
.dock .icon-btn { color: #E5E5E5; }
.dock .icon-btn.big { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0A0A0A; }
.dock .icon-btn.big:hover { background: #E5E5E5; }
.dock .icon-btn.big svg { width: 22px; height: 22px; }
.dock .i-pause { display: none; }
.dock.playing .i-pause { display: block; }
.dock.playing .i-play { display: none; }
.dock .toggle[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.14); }
.dock .toggle[aria-pressed="false"] { color: #737373; }
.verdicts { display: flex; justify-content: flex-end; gap: 4px; }
.dock .trash:hover { color: var(--red); }
.dock.idle .controls, .dock.idle .verdicts, .dock.idle .progress { opacity: .45; }

/* ---------- menus & toasts ---------- */
.ctx { position: fixed; z-index: 50; min-width: 200px; max-height: 60vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 4px; }
.ctx .ctx-title { padding: 6px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--hair); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.ctx button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 5px; }
.ctx button:hover { background: var(--row-hover); }
.ctx button.danger { color: var(--red); }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 8px; box-shadow: 0 6px 18px var(--shadow); display: flex; gap: 12px; align-items: center; font-size: 13px; max-width: min(92vw, 520px); }
.toast.err { background: var(--red); color: #fff; }
.toast button { font-weight: 600; text-decoration: underline; }

/* ---------- medium (a ~1000 px window, laptops): two-line rows ----------
   Title gets the full width; artist · album move under it, still clickable. */
@media (min-width: 761px) and (max-width: 1279px) {
  :root { --row: 44px; --rail: 228px; --art: 32px; }
  .md-hide { display: none !important; }
  /* Fixed acts width: header and rows are separate grids, so "auto" sized them apart. */
  .cols, .row { grid-template-columns: var(--art) minmax(0,1fr) 40px 64px 44px 96px; gap: 10px; padding: 0 16px; }
  .r-sub { display: block; }
  .head { padding: 14px 16px 8px; }
  .brand { padding: 16px 12px 10px 14px; }
  .search, .outputs, .curation { margin-left: 12px; margin-right: 12px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --row: 52px; --art: 36px; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "dock"; }
  .head { flex-wrap: wrap; row-gap: 8px; }
  .head-actions { order: 3; width: 100%; }
  .head-actions:empty { display: none; }
  .rail { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 30px var(--shadow); padding-top: env(safe-area-inset-top); }
  .shell.rail-open .rail { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.35); }
  .rail-toggle { display: inline-grid; }
  .head { padding: calc(10px + env(safe-area-inset-top)) 10px 8px; min-height: 56px; }
  .title-wrap h2 { font-size: 19px; }
  .sm-hide { display: none !important; }
  .cols, .row { grid-template-columns: var(--art) minmax(0,1fr) 44px 74px; padding: 0 12px; gap: 8px; }
  .r-sub { display: block; }
  .row.simple { grid-template-columns: 36px minmax(0,1fr) auto; }
  .row.simple .meta { white-space: nowrap; font-size: 11px; }
  .dock-main { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "np verdicts" "controls controls"; gap: 6px 10px; padding: 6px 12px 10px; }
  .np { grid-area: np; }
  .verdicts { grid-area: verdicts; }
  .controls { grid-area: controls; justify-content: center; gap: 18px; }
  .strip { padding: 0 12px; }
  .strip .strip-label:first-child { display: none; }
  .progress { padding: 6px 12px 0; }
  .art { width: 40px; height: 40px; }
  .toasts { bottom: 190px; }
}