/* meditera: option C as drawn and accepted (design/options/c/c.css and base.css), tokens only.
   Also the login page's few rules (lib/http.ts links this file). */
@import url("tokens.css");

/* ---- the reset, the icon, the type colours, the star (base.css) ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); min-height: 100vh; line-height: var(--leading-tight); padding-bottom: var(--page-bottom); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; cursor: pointer; }
[hidden] { display: none !important; }
.i { width: var(--icon); height: var(--icon); flex-shrink: 0; display: inline-block; vertical-align: middle; }
.i-sm { width: var(--icon-sm); height: var(--icon-sm); }
.num { font-variant-numeric: tabular-nums; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-meditation { background: var(--type-meditation-bg); color: var(--type-meditation); }
.t-lesson { background: var(--type-lesson-bg); color: var(--type-lesson); }
.t-talk { background: var(--type-talk-bg); color: var(--type-talk); }
.t-contemplation { background: var(--type-contemplation-bg); color: var(--type-contemplation); }
.t-qa { background: var(--type-qa-bg); color: var(--type-qa); }
.t-conversation { background: var(--type-conversation-bg); color: var(--type-conversation); }
.t-intro { background: var(--type-intro-bg); color: var(--type-intro); }
.t-sleep_talk { background: var(--type-sleep-bg); color: var(--type-sleep); }
.t-exercise { background: var(--type-exercise-bg); color: var(--type-exercise); }
.t-daily { background: var(--type-daily-bg); color: var(--type-daily); }
.t-moment { background: var(--type-moment-bg); color: var(--type-moment); }
.link { color: var(--color-link); }
.link:hover { text-decoration: underline; }

/* a range input drawn as a bar: the played part, the knob; the real input lies over it, unseen */
.bar { display: block; position: relative; height: var(--bar); border-radius: var(--radius-pill); background: var(--color-progress-track); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--color-accent); }
.bar > b { position: absolute; top: 50%; width: var(--knob); height: var(--knob); margin: calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2); border-radius: var(--radius-pill); background: var(--color-text-strong); box-shadow: var(--shadow-float); }
.bar.remote > i { background: var(--color-remote); }
.bar > input { position: absolute; left: 0; right: 0; top: 50%; height: var(--tap); transform: translateY(-50%); width: 100%; opacity: 0; cursor: pointer; margin: 0; }

/* ---- the shell ---- */
.shell { min-height: 100vh; }
.main { padding: 0 var(--gutter-phone); max-width: var(--column-wide); }
.appbar { display: flex; align-items: center; justify-content: space-between; height: var(--appbar); }
.word { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text-strong); letter-spacing: 0.02em; }
.word i { font-style: normal; color: var(--color-accent); }
.round-btn { width: var(--round-btn); height: var(--round-btn); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-2); }
.big { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong); letter-spacing: -0.01em; margin-top: var(--space-1); }
.count { font-size: var(--text-xs); color: var(--color-text-faint); margin: var(--space-2) 0 var(--space-3); }
.count .more { margin: 0 0 0 var(--space-2); }
.back { display: inline-flex; align-items: center; color: var(--color-accent); font-size: var(--text-sm); margin-left: var(--back-pull); min-height: var(--tap); }
.loading { color: var(--color-text-muted); font-size: var(--text-md); padding: var(--space-8) 0; }

/* the bottom bar: seven tabs in their order (R-7) */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--color-surface-raised); border-top: var(--hairline) solid var(--color-line-strong); padding: var(--nav-pad-top) 0 var(--space-3); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: var(--nudge-2); color: var(--color-text-faint); font-size: var(--text-2xs); letter-spacing: -0.01em; white-space: nowrap; min-width: 0; }
.nav .pill { width: var(--nav-pill-w); height: var(--nav-pill-h); border-radius: var(--radius-pill); display: grid; place-items: center; }
.nav a .i { width: var(--icon-nav); height: var(--icon-nav); }
.nav a.on { color: var(--color-text-strong); font-weight: var(--weight-medium); }
.nav a.on .pill { background: var(--color-accent-bg-strong); color: var(--color-accent); }
@media (max-width: 22.4375em) { .nav a:not(.on) span:last-child { display: none; } }
.side { display: none; }

/* search and filters */
.search { display: flex; align-items: center; gap: var(--space-2); height: var(--search-h); padding: 0 var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text-faint); font-size: var(--text-sm); margin-top: var(--space-3); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--color-text); font-size: var(--text-sm); }
.search input::placeholder { color: var(--color-text-faint); }
.seg { display: inline-flex; background: var(--color-surface-2); border-radius: var(--radius-pill); padding: var(--nudge-2); margin-top: var(--space-3); }
.seg button { padding: var(--pill-pad-y) var(--seg-pad-x); font-size: var(--text-sm); border-radius: var(--radius-pill); color: var(--color-text-muted); }
.seg button.on { background: var(--color-surface-3); color: var(--color-text-strong); }
.hscroll { display: flex; gap: var(--gap-xs); overflow-x: auto; scrollbar-width: none; margin: var(--space-3) calc(-1 * var(--gutter-phone)) 0; padding: 0 var(--gutter-phone); }
.f { flex-shrink: 0; padding: var(--pill-pad-y) var(--pill-pad-x); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.f.on { background: var(--color-text-strong); color: var(--color-bg); }
.f.sep { background: none; padding-left: 0; padding-right: 0; cursor: default; }
.filters .f.mode { display: none; }
.mtile { flex-shrink: 0; min-width: var(--mtile-w); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.mtile b { display: block; font-size: var(--text-md); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.mtile span { font-size: var(--text-2xs); color: var(--color-text-faint); }

/* groups: a collection, a pack, a playlist, the three tail groups (R-10, R-11) */
.colls { display: flex; flex-direction: column; gap: var(--space-2); }
.coll { display: flex; flex-direction: column; }
.coll-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); width: 100%; }
.coll-row .t { flex: 1; min-width: 0; }
.coll-row b { display: block; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
.coll-row span { font-size: var(--text-xs); color: var(--color-text-faint); }
.coll-row .rm { color: var(--color-remote); display: inline-flex; align-items: center; gap: var(--nudge-2); }
.coll-row .rm .i { width: var(--icon-s); height: var(--icon-s); }
.coll-row > .i { color: var(--color-text-ghost); transition: transform var(--dur-fast) var(--ease); }
.coll.open > .coll-row > .i.chev { transform: rotate(90deg); }
.coll-row .dlall { font-size: var(--text-xs); color: var(--color-accent); flex-shrink: 0; min-height: var(--tap); display: inline-flex; align-items: center; }
.coll-row .sq { width: var(--sq-mini); height: var(--sq-mini); }
.coll-row .s { width: var(--star-w); height: var(--tap); display: grid; place-items: center; color: var(--color-star-off); flex-shrink: 0; }
.coll-row .s.on { color: var(--color-star); }
.coll-row .s .i { width: var(--icon-m); height: var(--icon-m); }
.coll-body { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 0 var(--space-3); padding-left: var(--space-3); border-left: var(--hairline) solid var(--color-line-strong); }
.coll-body > .cards { margin-top: 0; }

/* the hero of a pack, a person or a topic (R-19, R-58, R-60) */
.hero { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-3); }
.hero-art { width: var(--hero-art); height: var(--hero-art); border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0; }
.hero-art .i { width: var(--icon-hero); height: var(--icon-hero); }
.crumbs { font-size: var(--text-xs); color: var(--color-link); }
.crumbs i { font-style: normal; color: var(--color-text-ghost); margin: 0 var(--space-1); }
.hero h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-strong); margin-top: var(--nudge); }
.hero .meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.hero .meta a { color: var(--color-accent); }
.desc { font-size: var(--text-sm); color: var(--color-text-2); line-height: var(--leading-body); margin-top: var(--space-3); }
.desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more { font-size: var(--text-xs); color: var(--color-accent); margin-top: var(--space-1); display: inline-block; }
.topic-head { margin-top: var(--space-3); }

/* rows as cards (R-16) */
.cards { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.card.playing { border-color: var(--color-accent-line); background: var(--color-accent-bg); }
.sq { position: relative; width: var(--sq); height: var(--sq); border-radius: var(--radius-md); flex-shrink: 0; display: grid; place-items: center; font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); overflow: hidden; }
.sq .pr { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sq-progress); background: var(--color-scrim); }
.sq .pr i { display: block; height: 100%; background: var(--color-accent); }
.sq .pr.remote i { background: var(--color-remote); }
.sq .cl { position: absolute; top: var(--nudge-2); right: var(--nudge-2); width: var(--sq-cloud); height: var(--sq-cloud); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-remote-bg); color: var(--color-remote); border: var(--hairline) solid var(--color-remote-line); }
.sq .cl .i { width: var(--icon-xs); height: var(--icon-xs); }
.c-main { flex: 1; min-width: 0; }
.c-title { display: block; max-width: 100%; font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); }
.card.playing .c-title { color: var(--color-accent-strong); }
.c-meta { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--nudge-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-state { display: flex; align-items: center; gap: var(--gap-xs); font-size: var(--text-2xs); margin-top: var(--space-1); color: var(--color-text-muted); }
.c-state .i { width: var(--icon-s); height: var(--icon-s); }
.c-state.done { color: var(--color-accent); }
.c-state.remote { color: var(--color-remote); }
.c-act { display: flex; align-items: center; gap: var(--nudge); flex-shrink: 0; }
.c-act .s { width: var(--star-w); height: var(--tap); display: grid; place-items: center; color: var(--color-text-ghost); }
.c-act .s.on { color: var(--color-star); }
.c-act .s .i { width: var(--icon-m); height: var(--icon-m); }
.c-act .s.busy { width: auto; font-size: var(--text-2xs); color: var(--color-accent); }
.c-play { width: var(--play); height: var(--play); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-text-strong); color: var(--color-bg); flex-shrink: 0; }
.c-play .i { width: var(--icon-play); height: var(--icon-play); }
.card.playing .c-play, .c-play.on { background: var(--color-accent); color: var(--color-accent-ink); }
.card.gone { opacity: 0.75; }
.card.gone .c-meta { font-style: italic; }
/* a row opened by its title (R-20): the drawn description, chips and kv lines, under the row */
.detail { flex-basis: 100%; padding: 0 var(--space-2) var(--space-2); }
.detail .desc { margin-top: 0; }
.detail .kv:last-child { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: var(--space-2); }

/* people */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); min-width: 0; }
.avatar { position: relative; width: var(--avatar); height: var(--avatar); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-surface-3); color: var(--color-text-2); font-size: var(--text-xl); font-weight: var(--weight-medium); flex-shrink: 0; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: var(--avatar-big); height: var(--avatar-big); font-size: var(--text-2xl); }
.pname { font-size: var(--text-sm); color: var(--color-text); font-weight: var(--weight-medium); margin-top: var(--space-2); max-width: 100%; }
.pcount { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--nudge); }

/* topics */
.tchip { display: inline-flex; align-items: center; gap: var(--gap-xs); font-size: var(--text-sm); padding: var(--nudge-2) var(--gap-s); border-radius: var(--radius-pill); border: var(--hairline) solid; }
.tchip.blue { color: var(--topic-blue); border-color: var(--topic-blue-line); }
.tchip.sand { color: var(--topic-sand); border-color: var(--topic-sand-line); }
.tchip.lg { font-size: var(--text-lg); padding: var(--pill-pad-y) var(--seg-pad-x); }
.tcard { display: block; width: 100%; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.tcard .top { display: flex; align-items: center; justify-content: space-between; }
.tcard .top span:last-child { font-size: var(--text-xs); color: var(--color-text-faint); }
.tcard p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-body); margin-top: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* quotes */
.quote { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.quote .mark { color: var(--color-accent); }
.quote .mark .i { width: var(--space-5); height: var(--space-5); }
.quote p { font-size: var(--text-md); color: var(--color-text); line-height: var(--leading-body); margin-top: var(--space-1); }
.quote .by { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.quote .by em { font-style: normal; color: var(--color-text-faint); }
.none { font-size: var(--text-sm); color: var(--color-text-muted); padding: var(--space-4) 0; }

/* calendar */
.year { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); margin-top: var(--space-2); width: 100%; }
.year b { flex: 1; font-size: var(--text-md); color: var(--color-text); }
.year span { font-size: var(--text-xs); color: var(--color-text-faint); }
.year .i { color: var(--color-text-faint); }
.days { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.day { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.dsq { width: var(--sq); height: var(--sq); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.dsq b { font-size: var(--text-lg); line-height: 1; }
.dsq span { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: var(--nudge); }
.cutpair { display: flex; margin-top: var(--gap-xs); border-radius: var(--radius-pill); background: var(--color-surface-2); padding: var(--nudge-2); width: max-content; max-width: 100%; }
.cut { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--cut-pad-y) var(--gap-s); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.cut.on { background: var(--color-accent); color: var(--color-accent-ink); }
.cut .i { width: var(--icon-xs); height: var(--icon-xs); }
.cut .p { color: var(--color-text-faint); }
.cut .p.done { color: var(--color-accent); }
.cut.on .p { color: inherit; }
.cut-dl { color: var(--color-text-ghost); padding: 0 var(--space-1); display: grid; place-items: center; }
.cut-dl .i { width: var(--icon-sm); height: var(--icon-sm); }

/* you */
.ytiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.ytile { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-1); border: var(--hairline) solid var(--color-line); }
.ytile b { display: block; font-size: var(--text-xl); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.ytile span { font-size: var(--text-xs); color: var(--color-text-faint); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-5) 0 0; }
.sec-h h3 { font-size: var(--text-lg); color: var(--color-text-strong); }
.sec-h span { font-size: var(--text-xs); color: var(--color-text-faint); }
.kv { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); padding: var(--kv-pad-y) 0; border-bottom: var(--hairline) solid var(--color-line); }
.kv span:first-child { color: var(--color-text-faint); }
.kv span:last-child { color: var(--color-text-2); text-align: right; }
.kvs { padding: 0 var(--space-1); }
.hist { padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--color-line); }
.hist .kv { border: 0; padding: 0 0 var(--gap-xs); }
.hist .kv span:first-child { color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist .kv span:last-child { color: var(--color-text-faint); flex-shrink: 0; font-size: var(--text-xs); }

/* the mini player above the bar (phone) */
.mini { position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--nav-height); z-index: 24; background: var(--color-surface-2); border: var(--hairline) solid var(--color-line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.mini > .bar { height: var(--bar-mini); border-radius: 0; background: var(--color-line-strong); }
.mini-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.mini .sq { width: var(--sq-mini); height: var(--sq-mini); }
.mini .open-np { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.m-title { font-size: var(--text-sm); color: var(--color-text-strong); }
.m-sub { font-size: var(--text-2xs); color: var(--color-text-muted); margin-top: var(--nudge); display: flex; gap: var(--gap-xs); align-items: center; white-space: nowrap; overflow: hidden; }
.tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--nudge-2); padding: var(--hairline) var(--pill-pad-y); border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: var(--weight-bold); }
.tag.resume { background: var(--color-accent-bg-strong); color: var(--color-accent-strong); }
.tag.stream { background: var(--color-remote-bg); color: var(--color-remote); border: var(--hairline) solid var(--color-remote-line); }
.tag.own { background: var(--color-surface-3); color: var(--color-text-2); }
.tag.err { background: var(--color-danger-bg); color: var(--color-danger); border: var(--hairline) solid var(--color-danger-line); }
.tag .i { width: var(--icon-xs); height: var(--icon-xs); }
.m-btn { width: var(--round-btn); height: var(--round-btn); display: grid; place-items: center; color: var(--color-text); flex-shrink: 0; }
.m-btn .i { width: var(--icon-l); height: var(--icon-l); }

/* the full player (phone) and the player column (computer) */
.np { position: fixed; inset: 0; z-index: 40; background: var(--color-surface-raised); padding: var(--space-2) var(--space-5) var(--space-6); display: flex; flex-direction: column; overflow-y: auto; }
.np-head { display: flex; align-items: center; justify-content: space-between; height: var(--appbar); }
.np-head span { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-faint); text-align: center; min-width: 0; }
.np-head span b { display: block; color: var(--color-text-2); font-weight: var(--weight-medium); text-transform: none; letter-spacing: 0; font-size: var(--text-xs); margin-top: var(--nudge); }
.np-art { height: var(--np-art); border-radius: var(--radius-xl); display: grid; place-items: center; margin: var(--space-3) 0 var(--space-5); flex-shrink: 0; }
.np-art .i { width: var(--icon-art-l); height: var(--icon-art-l); }
.np-title { display: flex; align-items: flex-start; gap: var(--space-3); }
.np-title h2 { flex: 1; font-size: var(--text-xl); color: var(--color-text-strong); }
.np-title .s { color: var(--color-text-ghost); min-width: var(--star-w); min-height: var(--tap); display: grid; place-items: center; }
.np-title .s.on { color: var(--color-star); }
.np-path { font-size: var(--text-sm); color: var(--color-link); margin-top: var(--space-1); }
.np-tags { display: flex; gap: var(--gap-xs); margin-top: var(--space-3); flex-wrap: wrap; }
.np-tags .tag { font-size: var(--text-xs); padding: var(--nudge-2) var(--space-2); }
.np .seek { margin-top: var(--space-5); }
.seek .bar { height: var(--bar-seek); }
.times { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.tp { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-4); }
.tp .m-btn { width: var(--btn-np); height: var(--btn-np); }
.tp .m-btn .i { width: var(--icon-big); height: var(--icon-big); }
.tp .c-play { width: var(--play-np); height: var(--play-np); background: var(--color-text-strong); color: var(--color-bg); }
.tp .c-play .i { width: calc(var(--icon-l) + var(--gap-xs)); height: calc(var(--icon-l) + var(--gap-xs)); }
.speeds { display: flex; gap: var(--space-1); margin-top: var(--space-5); }
.speeds button { flex: 1; text-align: center; padding: var(--gap-xs) 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.speeds button.on { background: var(--color-text-strong); color: var(--color-bg); }
.vol { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); color: var(--color-text-faint); }
.vol .bar { flex: 1; }
.vol .bar > i { background: var(--color-text-2); }
.panel { display: none; }

/* could not load (R-5) */
.empty { text-align: center; padding: var(--empty-top) var(--space-6) 0; }
.empty .ico { width: var(--empty-ico); height: var(--empty-ico); border-radius: var(--radius-xl); margin: 0 auto; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-danger); }
.empty .ico .i { width: var(--icon-big); height: var(--icon-big); }
.empty h2 { font-size: var(--text-xl); color: var(--color-text-strong); margin-top: var(--space-5); }
.empty p { font-size: var(--text-md); color: var(--color-text-muted); margin-top: var(--space-2); line-height: var(--leading-body); }
.empty button { margin-top: var(--space-5); height: var(--button-h); width: 100%; border-radius: var(--radius-lg); background: var(--color-text-strong); color: var(--color-bg); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; }

/* ---- computer: sidebar, content, player column ---- */
@media (min-width: 56.25em) {
  body { padding-bottom: 0; }
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; }
  body.playing .shell { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--panel-w); }
  .nav, .mini, .appbar, .np { display: none !important; }
  .side { display: flex; flex-direction: column; gap: var(--nudge); padding: var(--space-5) var(--space-3); background: var(--color-surface-1); border-right: var(--hairline) solid var(--color-line); overflow-y: auto; }
  .side .word { font-size: var(--text-lg); padding: 0 var(--space-3) var(--space-5); }
  .side a { display: flex; align-items: center; gap: var(--space-3); height: var(--search-h); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); }
  .side a.on { background: var(--color-surface-3); color: var(--color-text-strong); }
  .side a.on .i { color: var(--color-accent); }
  .side .stats { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xs); }
  .side .stats div { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--gap-xs) var(--space-2); }
  .side .stats b { display: block; font-size: var(--text-sm); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .side .stats span { font-size: var(--text-2xs); color: var(--color-text-faint); }
  .main { padding: var(--space-6) var(--space-8); overflow-y: auto; max-width: none; }
  .main > * { max-width: var(--column-wide); }
  .lib-tiles, .lib-seg { display: none !important; }
  .dhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .dhead .search { width: var(--search-w); margin-top: 0; border-radius: var(--radius-pill); }
  .filters { display: flex; gap: var(--gap-xs); flex-wrap: wrap; margin: var(--space-4) 0 0; padding: 0; overflow: visible; align-items: center; }
  .filters .f.mode { display: inline-block; }
  .colls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
  .colls .coll.open { grid-column: 1 / -1; }
  /* a collection card: the name on its own line, whole; the counts and "↓ all" on the line under it (D-1) */
  .colls > .coll > .coll-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; row-gap: var(--nudge); height: 100%; }
  .colls > .coll > .coll-row > .t { display: contents; }
  .colls > .coll > .coll-row b { grid-column: 1 / -1; font-size: var(--text-sm); white-space: normal; overflow: visible; }
  .colls > .coll > .coll-row > .dlall { grid-column: 2; grid-row: 2; min-height: 0; }
  .colls > .coll > .coll-row > .chev { display: none; }
  .cards.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { background: var(--color-surface-1); border-left: var(--hairline) solid var(--color-line); padding: var(--space-5); display: flex; flex-direction: column; overflow-y: auto; }
  body:not(.playing) .panel { display: none; }
  .panel .lbl { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-faint); display: flex; justify-content: space-between; align-items: center; }
  .panel .art { height: var(--panel-art); border-radius: var(--radius-xl); display: grid; place-items: center; margin: var(--space-4) 0; flex-shrink: 0; }
  .panel .art .i { width: var(--icon-art); height: var(--icon-art); }
  .panel h3 { font-size: var(--text-lg); color: var(--color-text-strong); }
  .panel .path { font-size: var(--text-xs); color: var(--color-link); margin-top: var(--space-1); }
  .panel .tags { display: flex; gap: var(--gap-xs); margin-top: var(--space-3); flex-wrap: wrap; }
  .panel .tag { font-size: var(--text-xs); padding: var(--nudge-2) var(--space-2); }
  .panel .seek { margin-top: var(--space-5); }
  .panel .tp { gap: var(--space-6); }
  .panel .tp .m-btn .i { width: calc(var(--icon-xl) + var(--space-1)); height: calc(var(--icon-xl) + var(--space-1)); }
  .panel .tp .c-play { width: var(--play-panel); height: var(--play-panel); }
  .panel .tp .c-play .i { width: var(--icon-xl); height: var(--icon-xl); }
}

/* ---- the login page (lib/http.ts) ---- */
body.login { padding: 0; }
.wrap { max-width: var(--column); margin: 0 auto; padding: var(--space-6) var(--gutter-phone); }
.wrap.narrow { max-width: calc(var(--column) / 2); }
.eyebrow { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-1); }
.login h1 { font-size: var(--text-2xl); color: var(--color-text-strong); margin: 0 0 var(--space-4); }
.login form { display: grid; gap: var(--space-2); }
.login label { font-size: var(--text-sm); color: var(--color-text-muted); }
.login input { padding: var(--space-3); border-radius: var(--radius-lg); border: var(--hairline) solid var(--color-line-strong); background: var(--color-surface-2); color: var(--color-text); }
.login button { height: var(--button-h); border-radius: var(--radius-lg); background: var(--color-text-strong); color: var(--color-bg); font-weight: var(--weight-bold); text-align: center; }
.err { color: var(--color-danger); min-height: 1lh; font-size: var(--text-sm); }