/* Tuneoff - four looks, one structure.
Drop-in flat stylesheet. No preprocessor, no framework, no build step.
The look is the viewer's: lookui.js sets
and remembers it in localStorage. Lantern is the default when the attribute is absent.
Everything the set stores (ratings, rotation, notes, marks) is untouched by this file.
Layers:
1. Scales shared by every look (spacing, type, motion)
2. Per-look tokens (colour, font, radius, glow, glass)
3. Component rules on the existing class names, written against the tokens
Canvas colours (waveform, spectrogram, notes, marks, playhead, loop, lane) are data,
painted by look.js from the viewer's own picks. This file only sets their defaults
via --wave-* so a fresh browser matches the look. */
/* Fonts: loaded by a in base.html (Google Fonts, seven families), not an @import. */
/* ---------- 1. Shared scales ---------- */
:root {
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--t-xs: 10.5px; --t-sm: 12px; --t-base: 14px; --t-md: 15px;
--t-lg: 18px; --t-xl: 24px; --t-2xl: 30px; --t-clock: 26px;
--lh: 1.55; --track-caps: .1em;
--dur: .15s; --ease: cubic-bezier(.2,.7,.2,1);
/* Shared semantic colours. Good/bad marks and the four note colours are
the same in every look so a mark or a note means one thing everywhere. */
--ok: #7ddb8f; --bad: #ff6b6b;
--note-teal: #5fd3c8; --note-sky: #8fb8ff; --note-lilac: #c9a3ff; --note-yellow: #ffcc66;
--gold: #e0b062;
/* A filter's own colour (owner, 2026-09-08): rgb(128,0,255). Fixed like the
note colours, so a filter means one thing in every look. Its text is the
look's own --live, which the owner chose over a fixed lime. */
--flt: #8000ff;
/* The same violet, lighter, for the parts drawn as solid lines rather than
as a wash: the span's edges, the drag handles and the fade hatch (owner,
2026-09-08, "make the handles+strip a lighter violet"). The 45% fill he
approved is unchanged and still mixes the base. */
--flt-lite: #a64dff;
/* A render's speed (DECISIONS 036, amended 2026-09-29: "make it have a
color so it is easily spotted"): cyan, fixed in every look like the
filter violet, because the looks' own tokens repeat the lime of
everything live. */
--spd: #22d3ee; --on-spd: #05242b;
}
/* ---------- 2. Looks ---------- */
/* Lantern (default). Cool blue-slate night, one warm lamp. */
:root, html[data-look="lantern"] {
--bg: #101418; --bg-deep: #0a0d11; --panel: #181f26; --panel-2: #141a20;
--line: #2a333d; --line-soft: #1e262e;
--fg: #d6dde3; --fg-strong: #fff3dc; --dim: #8592a0; --faint: #5f6b78;
--accent: #ffb347; --accent-2: #ffd08a; --on-accent: #1f1508;
--live: var(--accent); --live-2: var(--accent-2); --on-live: var(--on-accent);
--cool: #5fd3c8; --cool-2: #8ff7ea; --on-cool: #0e2b28;
--ember: rgba(255,179,71,.35); --ember-soft: rgba(255,179,71,.2); --ember-wash: rgba(255,179,71,.06);
--glass: var(--panel); --gloss: inset 0 1px 0 rgba(255,255,255,.14);
--r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 10px; --r-pill: 6px;
--font: 'Public Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
--wave-hi: #ffb347; --wave-lo: #ff783c; --wave-bg: #0a0d11; --playhead: #ffffff;
--lamp: none;
}
/* Velvet. Plum-black base, coral ember, rounder and softer. */
html[data-look="velvet"] {
--bg: #171318; --bg-deep: #0e0b0f; --panel: #221c25; --panel-2: #1c171e;
--line: #362e3a; --line-soft: #2c252f;
--fg: #e4dce6; --fg-strong: #fff1ea; --dim: #948a99; --faint: #6f6576;
--accent: #ff8a5b; --accent-2: #ffb08a; --on-accent: #2b130a;
--live: var(--accent); --live-2: var(--accent-2); --on-live: var(--on-accent);
--cool: #5fd3c8; --cool-2: #8ff7ea; --on-cool: #0e2b28;
--ember: rgba(255,138,91,.35); --ember-soft: rgba(255,138,91,.2); --ember-wash: rgba(255,138,91,.07);
--glass: var(--panel); --gloss: inset 0 1px 0 rgba(255,255,255,.14);
--r-1: 5px; --r-2: 8px; --r-3: 10px; --r-4: 12px; --r-pill: 999px;
--font: 'Atkinson Hyperlegible', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace;
--wave-hi: #ff8a5b; --wave-lo: #ff6450; --wave-bg: #0e0b0f; --playhead: #ffffff;
--lamp: none;
}
/* Melon. Dark rind, pink flesh for what you press, lime seedcoat for what is live. Glossy. */
html[data-look="melon"] {
--bg: #120f16; --bg-deep: #0a0b0e; --panel: #1b1720; --panel-2: #161219;
--line: #2a2530; --line-soft: #211c27;
--fg: #f3ecf1; --fg-strong: #ffffff; --dim: #a396a3; --faint: #6f6576;
--accent: #ff3d8a; --accent-2: #ff7ab3; --on-accent: #3a0a1f;
--live: #b8ff3c; --live-2: #d4ff5a; --on-live: #12200a;
--cool: #b8ff3c; --cool-2: #d4ff5a; --on-cool: #12200a;
--ok: #b8ff3c; --bad: #ff5c9a;
--ember: rgba(255,61,138,.35); --ember-soft: rgba(255,61,138,.2); --ember-wash: rgba(255,61,138,.07);
--live-ember: rgba(184,255,60,.35); --live-ember-soft: rgba(184,255,60,.18);
--glass: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
--gloss: inset 0 1px 0 rgba(255,255,255,.2);
--r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 22px; --r-pill: 999px;
--font: 'Syne', system-ui, sans-serif; --mono: 'Fira Code', ui-monospace, monospace;
--wave-hi: #ff3d8a; --wave-lo: #b8ff3c; --wave-bg: #0a0b0e; --playhead: #ffffff;
--lamp: radial-gradient(900px 420px at 15% -10%, #2b1030, transparent 55%);
}
/* Comfy. Warm greys, a lamp in the corner, glassy panels. Blue is live, orange is what you left behind. */
html[data-look="comfy"] {
--bg: #151517; --bg-deep: #100f11; --panel: #1f1e20; --panel-2: #1a191b;
--line: #2b2a2d; --line-soft: #232224;
--fg: #e9e5e0; --fg-strong: #f4f7ff; --dim: #a39d97; --faint: #6b655f;
--accent: #5b93ff; --accent-2: #9dbcff; --on-accent: #06132b;
--live: var(--accent); --live-2: var(--accent-2); --on-live: var(--on-accent);
--cool: #ff6600; --cool-2: #ff9a4d; --on-cool: #1b1204;
--ember: rgba(91,147,255,.35); --ember-soft: rgba(91,147,255,.2); --ember-wash: rgba(91,147,255,.08);
--glass: rgba(255,255,255,.045); --gloss: inset 0 1px 0 rgba(255,255,255,.08);
--r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 22px; --r-pill: 999px;
--font: 'Nunito Sans', system-ui, sans-serif; --mono: 'Fira Code', ui-monospace, monospace;
--wave-hi: #5b93ff; --wave-lo: #8ab8ff; --wave-bg: #100f11; --playhead: #ffffff;
--lamp: radial-gradient(1100px 520px at 12% -12%, #3a2a22, transparent 50%);
}
html:not([data-look="melon"]) { --live-ember: var(--ember); --live-ember-soft: var(--ember-soft); }
/* Glass (the 6a Watermelon Glass test). Melon's palette, with the chrome of the
6a board: everything a pill, glass gradients, gradient fills on what is live
or pressed, the pink lamp top right. */
html[data-look="glass"] {
--bg: #120f16; --bg-deep: #0a0b0e; --panel: #1b1720; --panel-2: #161219;
--line: rgba(255,255,255,.1); --line-soft: rgba(255,255,255,.06);
--fg: #f3ecf1; --fg-strong: #ffffff; --dim: #a396a3; --faint: #6f6576;
--accent: #ff3d8a; --accent-2: #ff7ab3; --on-accent: #3a0a1f;
--live: #b8ff3c; --live-2: #d4ff5a; --on-live: #12200a;
--cool: #5fd3c8; --cool-2: #8ff7ea; --on-cool: #0e2b28;
--ok: #b8ff3c; --bad: #ff5c9a;
--ember: rgba(255,61,138,.35); --ember-soft: rgba(255,61,138,.2); --ember-wash: rgba(255,61,138,.07);
--live-ember: rgba(184,255,60,.35); --live-ember-soft: rgba(184,255,60,.18);
--glass: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
--gloss: inset 0 1px 0 rgba(255,255,255,.18);
--r-1: 999px; --r-2: 18px; --r-3: 20px; --r-4: 22px; --r-pill: 999px;
--font: 'Syne', system-ui, sans-serif; --mono: 'Fira Code', ui-monospace, monospace;
--wave-hi: #ff3d8a; --wave-lo: #b8ff3c; --wave-bg: #0a0b0e; --playhead: #ffffff;
--lamp: radial-gradient(900px 420px at 15% -10%, #2b1030, transparent 50%);
--glass-accent: linear-gradient(180deg, #ff8ab9, #ff3d8a 45%, #c4185f);
--glass-live: linear-gradient(180deg, #e2ff7a, #b8ff3c 40%, #7fc41a);
}
/* ---------- 3. Components ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--lamp), var(--bg); background-attachment: fixed; color: var(--fg);
font: var(--t-base)/var(--lh) var(--font); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
header { border-bottom: 1px solid var(--line); padding: var(--sp-4) var(--sp-6);
display: flex; align-items: baseline; gap: var(--sp-4); position: relative; }
header h1 { margin: 0; font: 700 var(--t-md) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
header .crumb { color: var(--dim); }
/* The Look pill: the page's own look, on every page, at the header's right end.
lookpill.js builds it; the sheet's Look group on the set page is the same pick. */
.lookctl { margin-left: auto; position: relative; align-self: center; font-size: var(--t-sm); }
.lookctl > .tb { display: inline-flex; align-items: center; gap: 8px; }
.lookctl .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.lookctl .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px; padding: 6px; border-radius: var(--r-3);
background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.6), var(--gloss); display: flex; flex-direction: column; gap: 2px; }
.lookctl .menu .opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--fg);
padding: 7px 10px; border-radius: var(--r-2); font: 600 var(--t-sm) var(--font); cursor: pointer; box-shadow: none; }
.lookctl .menu .opt:hover { background: var(--ember-wash); border-color: var(--line); }
.lookctl .menu .opt.on { color: var(--accent); border-color: var(--accent); }
html[data-look="glass"] .lookctl .menu { border-radius: 16px; }
main { padding: var(--sp-5) var(--sp-6) var(--sp-8); }
h2 { font-size: var(--t-md); margin: 0 0 var(--sp-1); }
.sub, .muted { color: var(--dim); }
.sub { margin: 0 0 var(--sp-5); }
.tiny { font-size: var(--t-sm); color: var(--dim); }
.tiny.warn { color: var(--accent-2); }
.num, .k, .state, .badge, kbd, .mtally, .clockstrip, .labcount, .labsel, .chip2, .pill, .chip { font-family: var(--mono); }
.k { color: var(--accent); font-weight: 600; }
.num { text-align: right; color: var(--dim); white-space: nowrap; }
/* Tables and cards */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: var(--t-sm);
border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:hover td { background: var(--ember-wash); }
.panel, .comp { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-3);
padding: var(--sp-4) var(--sp-4); box-shadow: var(--gloss); }
.empty, .drop, .again { color: var(--dim); border: 1px dashed var(--line); border-radius: var(--r-3);
padding: var(--sp-6); text-align: center; }
.drop, .again { cursor: pointer; } /* a click opens the picker (upload.js) */
.drop:hover, .drop.over, .again:hover, .again.over { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 24px var(--ember-soft); }
.drop .big { font-size: var(--t-md); color: var(--fg); margin: 0 0 var(--sp-1); }
/* Buttons. Five states: plain (.tb), primary (button), lit (.tb.on), idle (.tb.idle / :disabled), danger (.clearmarks). */
button, .tb { color: inherit; font: 500 var(--t-sm)/1.2 var(--font); cursor: pointer; border-radius: var(--r-pill);
transition: box-shadow var(--dur) var(--ease), border-color var(--dur), background-color var(--dur), color var(--dur); }
button:not([class]):not(.look-sheet button):not(.film-blk button) { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700;
padding: var(--sp-2) var(--sp-4);
box-shadow: 0 0 0 1px var(--ember), 0 0 16px var(--ember), var(--gloss); }
button:not([class]):not(.look-sheet button):not(.film-blk button):hover { background: var(--accent-2); box-shadow: 0 0 0 1px var(--ember), 0 0 24px var(--ember), var(--gloss); }
.tb, button.ghost { background: var(--glass); color: var(--fg); border: 1px solid var(--line);
padding: 7px 14px; font-weight: 600; box-shadow: var(--gloss); }
.tb:hover:not(:disabled), button.ghost:hover { border-color: var(--accent-2); color: var(--accent-2); box-shadow: var(--gloss), 0 0 12px var(--ember-soft); }
.tb:hover:not(:disabled), button.ghost:hover, .tb.on:hover:not(:disabled), .tb.toggle.on:hover, .theight .tb.on:hover, .waveh .tb.on:hover, #btn-hideout.on:hover, #btn-note.on:hover {
background: var(--accent-2); border-color: var(--accent-2); color: #000; font-weight: 700;
box-shadow: 0 0 0 1px var(--ember), 0 0 24px var(--ember), var(--gloss); }
.tb:disabled, button:disabled { opacity: .4; cursor: default; }
button:focus-visible, .tb:focus-visible, a.tb:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.tb.idle { opacity: .55; }
.tb.toggle.on, .tb.on, .theight .tb.on, .waveh .tb.on, #btn-hideout.on, #btn-note.on {
background: var(--accent); border-color: var(--accent); color: var(--on-accent);
box-shadow: 0 0 0 1px var(--ember), 0 0 18px var(--ember), var(--gloss); }
.tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 var(--sp-1); }
/* Compact (owner, 2026-09-06): the grey pill's height for an accent button, glow dropped, ring kept. */
button.compact { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700;
padding: 4px 12px; font-size: var(--t-sm); box-shadow: 0 0 0 1px var(--ember), var(--gloss); }
button.compact:hover:not(:disabled) { background: var(--accent-2); box-shadow: 0 0 0 1px var(--ember), 0 0 12px var(--ember), var(--gloss); }
.tb.compact { padding: 4px 10px; }
.takeaway { display: inline-flex; gap: var(--sp-2); align-items: center; }
.editsline { margin: 0 0 var(--sp-2); text-align: right; display: block; }
.editsline.behind { color: var(--accent-2); margin-top: calc(-1 * var(--sp-1)); }
.clearmarks { font: 600 var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .06em;
padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--bad); background: transparent; color: var(--bad); }
.clearmarks:hover { background: rgba(255,107,107,.12); }
.asking { display: inline-flex; gap: var(--sp-1); align-items: center; }
.clearmarks.yes { background: var(--bad); color: #2b0a0a; }
.clearmarks.keep { border-color: var(--line); color: var(--dim); }
.nudge { background: var(--glass); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-1);
width: 1.3rem; padding: 0; font: 600 var(--t-sm) var(--mono); cursor: pointer; box-shadow: none; }
.nudge:hover { border-color: var(--accent); color: var(--accent); }
/* Toolbar groups */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin: 0 0 var(--sp-3); }
.toolbar .tgroup { display: inline-flex; gap: var(--sp-1); position: relative; padding-top: 14px; }
.toolbar .tgroup::before { content: attr(data-label); position: absolute; top: 0; left: 2px;
font: 600 9.5px var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }
#transport .toolbar .tb { padding: 6px 12px; }
/* Chips, pills, tally, stars */
.chip { background: var(--glass); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-1);
padding: 1px 6px; font: 600 var(--t-xs) var(--mono); cursor: pointer; box-shadow: none; }
.chip:hover { border-color: var(--accent-2); color: var(--accent-2); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 10px var(--ember-soft); }
.chip.out, .film-blk .win.out { color: var(--faint); border-style: dashed; font-size: var(--t-xs); } /* no key plays it (comp plan) */
.chip2 { font-size: var(--t-xs); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-1);
padding: 1px 6px; white-space: nowrap; background: var(--glass); }
.chip2:empty { display: none; }
.pill { display: inline-block; font: 600 var(--t-xs) var(--mono); padding: 1px 7px; border-radius: var(--r-1);
border: 1px solid var(--line); color: var(--dim); }
.pill.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); }
.pill.failed { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.pill.pending, .pill.running { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.pill.gone { border-style: dashed; }
.mtally { font-weight: 700; letter-spacing: .02em; }
.mtally .p { color: var(--ok); } .mtally .m { color: var(--bad); } .mtally .z { color: var(--dim); font-weight: 400; }
#now-tally { font-size: var(--t-md); }
.stars .star { background: none; border: none; cursor: pointer; font-size: var(--t-md); padding: 0 1px; color: var(--line); line-height: 1; box-shadow: none; }
.stars .star.on { color: var(--gold); text-shadow: 0 0 8px color-mix(in oklab, var(--gold) 50%, transparent); }
.stars:hover .star { color: var(--gold); opacity: .7; }
kbd { font: 600 var(--t-xs) var(--mono); border: 1px solid var(--line); border-radius: var(--r-1);
padding: 0 5px; color: var(--fg); background: var(--glass); }
/* Condition badge: mandatory on every playing surface. RAW is the default. */
.badge { font: 600 var(--t-sm) var(--mono); padding: 5px 11px; border-radius: var(--r-pill);
border: 1px solid var(--accent); color: var(--accent); letter-spacing: .04em; white-space: nowrap;
background: var(--ember-wash); box-shadow: 0 0 14px var(--ember-soft); }
.badge.raw { border-color: var(--accent-2); color: var(--accent-2); }
/* What a Match press did (DECISIONS 041): under the button, gone after a few seconds. */
.match-note { position: absolute; z-index: 30; max-width: 26rem; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--r-4); padding: 8px 11px; font: var(--t-xs) var(--mono); line-height: 1.55; color: var(--fg);
box-shadow: 0 16px 40px rgba(0,0,0,.5); pointer-events: none; }
.match-note[hidden] { display: none; }
/* Key tile: press it to hear that render. */
.k.tile { align-self: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-2); padding: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
font-family: var(--mono); font-weight: 700; border: 2px solid var(--live); background: var(--live); color: var(--on-live); box-shadow: none; }
.k.tile b { font-size: 20px; }
.k.tile small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; opacity: .8; }
.k.tile:hover { background: var(--live-2); border-color: var(--live-2); }
.k.tile.in { box-shadow: 0 0 0 1px var(--live-ember), 0 0 18px var(--live-ember), var(--gloss); }
.k.tile.nokey { background: transparent; color: var(--live); border-color: color-mix(in oklab, var(--live) 45%, transparent); box-shadow: none; }
.k.tile.out { background: transparent; border: 2px dashed var(--line); color: var(--faint); cursor: default; box-shadow: none; }
.k.tile.out:hover { background: transparent; border-color: var(--line); }
/* The band above the transport */
#transport { display: contents; }
.pinned { position: sticky; top: 0; z-index: 30; background: var(--bg); padding: var(--sp-2) 0 var(--sp-3); margin: 0 0 var(--sp-1); }
body.transport-tall .pinned { position: static; }
.tstatus { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-3); font-size: var(--t-md);
background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-4); padding: var(--sp-3) var(--sp-4); box-shadow: var(--gloss); }
.tstatus b { color: var(--fg); font-weight: 700; }
.tstatus .cond { margin-left: auto; }
.tstatus .k.tile.now { width: 42px; height: 42px; cursor: default; }
.clockstrip { display: flex; gap: var(--sp-4); align-items: baseline; }
.clockstrip .pos { font-size: var(--t-clock); font-weight: 700; color: var(--fg-strong); }
.clockstrip .len, .clockstrip .left { font-size: var(--t-base); color: var(--dim); }
.clockstrip .lab { font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.clockstrip .file { font-size: var(--t-xs); color: var(--dim); }
.clockstrip .file:empty { display: none; }
.editsum .kept { color: var(--fg); }
.editsum .file { color: var(--dim); }
/* Transport: notes strip, wave, section lane. The picture is canvas; this is the frame. */
.transport-wrap { position: relative; background: var(--wave-bg); border: 1px solid var(--line); border-radius: var(--r-4);
overflow: hidden; cursor: crosshair; user-select: none;
height: calc(var(--transport-h, 164px) + 26px);
box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 70px var(--ember-wash); }
.transport-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#transport-notes { inset: 0 0 auto 0; height: 26px; background: var(--panel-2); border-bottom: 1px solid var(--line-soft); cursor: default; }
#transport-notes.hot { cursor: pointer; }
#transport-wave { inset: 26px 0 24px 0; height: calc(100% - 50px); }
#transport-overlay { inset: 26px 0 0 0; height: calc(100% - 26px); }
.transport-wrap.on-lane { cursor: pointer; } .transport-wrap.on-edge { cursor: col-resize; } .transport-wrap.on-close { cursor: pointer; }
.transport-wrap.arming { cursor: copy; box-shadow: inset 0 0 0 1px var(--note-yellow), 0 12px 40px rgba(0,0,0,.55); }
.tgrip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: row-resize; z-index: 2; }
.tgrip::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 36px; height: 3px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.tgrip:hover::after, .transport-wrap.resizing .tgrip::after { background: var(--accent); }
.theight, .waveh { display: inline-flex; gap: 3px; align-items: center; }
.theight .tb, .waveh .tb { padding: 5px 9px; font-size: var(--t-xs); }
/* Note and mark cards */
.notecard, .markcard { position: absolute; z-index: 3; pointer-events: none; background: var(--panel); color: var(--fg);
border: 1px solid var(--line); border-radius: var(--r-2); padding: 6px 9px; font-size: var(--t-sm); max-width: 22rem;
box-shadow: 0 4px 16px rgba(0,0,0,.5), var(--gloss); }
.notecard { border-color: var(--cool); box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 14px color-mix(in oklab, var(--cool) 20%, transparent); }
.notecard .at { font: 600 var(--t-sm) var(--mono); margin-right: 6px; color: var(--cool); }
.notecard .tag { display: inline-block; background: var(--line-soft); font: 600 var(--t-xs) var(--mono); padding: 1px 5px; border-radius: var(--r-1); margin-right: 6px; color: var(--cool); }
/* Legend: how the shortcuts are taught. Keep it in view. */
.legend { color: var(--dim); font-size: var(--t-sm); margin: var(--sp-2) 0 var(--sp-4); }
.legend summary { cursor: pointer; list-style: none; line-height: 1.9; }
.legend summary::-webkit-details-marker { display: none; }
.legend .more { color: var(--accent-2); }
.legend .more::before { content: "+ "; } .legend[open] .more::before { content: "- "; }
.legend-body { line-height: 1.9; margin-top: 2px; border-left: 2px solid var(--line); padding-left: var(--sp-3); }
.legend b { color: var(--fg); }
/* Lanes */
.lanebar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.lanehint { font-size: var(--t-sm); }
.lanecount { margin-left: auto; color: var(--dim); font: var(--t-sm) var(--mono); }
.lanecount b { color: var(--accent); } .lanecount .hid { color: var(--accent); }
.lanes { display: flex; flex-direction: column; gap: 6px; }
.lane { display: grid; grid-template-columns: 44px 270px 1fr; gap: var(--sp-3); align-items: stretch;
padding: var(--sp-2) var(--sp-3); border-radius: var(--r-3); cursor: pointer; border: 1px solid transparent; }
.lane:hover { background: var(--ember-wash); }
.lane.active { background: var(--ember-wash); border-color: color-mix(in oklab, var(--live) 45%, transparent);
box-shadow: inset 3px 0 0 var(--live), 0 0 24px var(--live-ember-soft); }
.lane.active .rowwave .wave { border-color: var(--live); box-shadow: 0 0 14px var(--live-ember-soft); }
.lanehead { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px var(--sp-2); align-content: center; align-items: center; }
.lanehead > * { min-width: 0; }
.lanewho, .lanechips, .lanehead .stars { grid-column: 1 / -1; }
.lanewho { display: flex; gap: var(--sp-2); align-items: center; }
.lanename { color: var(--accent-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane.active .lanename { color: var(--fg-strong); }
.cover { width: 34px; height: 34px; border-radius: var(--r-1); border: 1px solid var(--line); vertical-align: middle; }
.cover.none { display: inline-block; background: linear-gradient(135deg, var(--line), var(--bg-deep)); }
.lanechips { display: flex; gap: 3px 6px; flex-wrap: wrap; align-items: baseline; }
.lanechips .when { color: var(--dim); font: var(--t-xs) var(--mono); }
/* The lane's own clock (owner pick B, 2026-10-02): the transport's, smaller.
Three classes deep so the phone's transport clock rule does not reach it. */
.lanehead .laneclock { grid-column: 1 / -1; flex-basis: auto; gap: 8px; flex-wrap: wrap; row-gap: 0; }
.lanehead .laneclock .pos { font-size: 16px; }
.lanehead .laneclock .pos:empty { display: none; }
.lanehead .laneclock .len, .lanehead .laneclock .left { font-size: var(--t-sm); }
html .lane:not(.active) .lanehead .laneclock .pos { color: var(--dim); font-weight: 600; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.lane.off .laneclock { display: none; }
.lanehead .rating-cell { display: contents; }
.lanehead .stars { white-space: nowrap; }
.lanehead .rot { grid-column: 1; text-align: center; font: 600 var(--t-xs) var(--mono); letter-spacing: .1em; text-transform: uppercase;
padding: 5px 6px; border-radius: var(--r-1); border: 1px solid var(--live); background: var(--live); color: var(--on-live); cursor: pointer; white-space: nowrap;
box-shadow: 0 0 0 1px var(--live-ember), 0 0 14px var(--live-ember-soft), var(--gloss); }
.lanehead .rot:hover { background: var(--live-2); }
.lanehead .rot.off { background: transparent; border: 1px dashed var(--line); color: var(--dim); box-shadow: none; }
.lanehead .rot.off:hover { border-color: var(--accent-2); color: var(--accent-2); }
.lanehead .vox { grid-column: 2; display: inline-flex; gap: 2px; }
.lanewave { min-width: 0; display: flex; flex-direction: column; }
.lanewave .rowwave { flex: 1; min-height: 56px; height: auto; }
.lanewave .nowave { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--t-sm); color: var(--dim);
border: 1px dashed var(--line); border-radius: var(--r-2); }
.rowwave { position: relative; height: 44px; cursor: crosshair; }
.rowwave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rowwave .wave { background: var(--wave-bg); border: 1px solid var(--line); border-radius: var(--r-2); }
.rowlane { position: relative; height: 12px; margin-top: 3px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-1); cursor: col-resize; }
.rowlane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.waveh-s .lane:not(.off) .lanewave .rowwave { min-height: 40px; }
body.waveh-m .lane:not(.off) .lanewave .rowwave { min-height: 56px; }
body.waveh-l .lane:not(.off) .lanewave .rowwave { min-height: 160px; }
/* Out of the rotation: folded to one line, never hidden silently. */
.lane.off { padding: 3px var(--sp-3); align-items: center; }
.lane.off .lanewho, .lane.off .lanechips, .lane.off .lanewave { opacity: .4; }
.lane.off .lanename { text-decoration: line-through; color: var(--dim); }
.lane.off .lanechips, .lane.off .lanehead .stars, .lane.off .vox, .lane.off .rowlane, .lane.off .editstrip, .lane.off .cv-row, .lane.off .editsum { display: none; }
.lane.off .lanehead { grid-template-columns: 1fr auto; }
.lane.off .lanewho { grid-column: 1; } .lane.off .lanehead .rot { grid-column: 2; grid-row: 1; }
.lane.off .lanewave .rowwave { min-height: 14px; height: 14px; flex: none; }
.lanenums { display: none; grid-column: 2 / -1; gap: 4px var(--sp-4); flex-wrap: wrap; align-items: center; font-size: var(--t-sm); color: var(--dim); }
.lanenums b { color: var(--fg); font-weight: 500; }
body.details .lane:not(.off) .lanenums { display: flex; }
body.hideout .lane.off { display: none; }
.hiddenfold { display: none; border: 2px dashed var(--line); border-radius: var(--r-3); padding: var(--sp-2) var(--sp-4);
color: var(--dim); font-size: var(--t-base); gap: var(--sp-3); align-items: center; margin-top: 6px; background: color-mix(in oklab, var(--cool) 4%, transparent); border-color: color-mix(in oklab, var(--cool) 35%, transparent); }
.hiddenfold b { color: var(--fg); } .hiddenfold .k.tile { width: 32px; height: 32px; cursor: default; } .hiddenfold .tb { margin-left: auto; }
body.hideout .hiddenfold { display: flex; } body.hideout .hiddenfold.none { display: none; }
/* Trim and fades under the lane */
.editstrip { position: relative; height: 18px; margin-top: 3px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-1); }
.editstrip .keep { position: absolute; top: 0; bottom: 0; background: var(--ember-soft); }
.editstrip .fade { position: absolute; top: 0; bottom: 0; cursor: grab;
background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--note-yellow) 30%, transparent) 0 3px, transparent 3px 6px); }
.editstrip .h { position: absolute; top: -1px; bottom: -1px; width: 12px; margin-left: -6px; cursor: col-resize; border-radius: 2px; z-index: 1; }
.editstrip .h.trim { background: var(--accent); }
.editstrip .h.fade { background: var(--note-yellow); width: 8px; margin-left: -4px; cursor: ew-resize; top: 3px; bottom: 3px; }
.editstrip.refused { border-color: var(--bad); }
.editsum { grid-column: 1 / -1; font: var(--t-xs) var(--mono); color: var(--accent-2); }
.editsum:empty { display: none; }
.editsum .clear { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: var(--r-1); font: var(--t-xs) var(--mono); padding: 0 5px; cursor: pointer; margin-left: 5px; box-shadow: none; }
.cv-row { display: flex; gap: var(--sp-4); margin-top: 4px; flex-wrap: wrap; }
.cv-strip { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cv-label { font: 600 9.5px var(--mono); color: var(--faint); letter-spacing: var(--track-caps); text-transform: uppercase; margin-right: 3px; }
.cv { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px; cursor: pointer; line-height: 0; box-shadow: none; }
.cv:hover { border-color: var(--accent-2); }
/* Hear this fade back: play once, or round (owner's pick D, 2026-09-04). They
sit at the end of the curve row, which exists exactly when a fade does. */
.cv-hear { display: inline-flex; gap: 3px; margin-left: 6px; }
.fplay { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-1);
padding: 3px 5px; cursor: pointer; line-height: 0; color: var(--fg); box-shadow: none; }
.fplay svg { display: block; width: 11px; height: 11px; fill: currentColor; }
.fplay:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--panel-2); }
.fplay.on, .fplay.on:hover { background: var(--accent); border-color: var(--accent);
color: var(--on-accent); box-shadow: 0 0 10px var(--ember); }
.cv.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Blind mode: deliberately different, so the condition is never in doubt.
Colour drains out of the page; only the alias rail and the transport stay lit. */
body.blind { --accent: var(--fg); --accent-2: var(--fg); --on-accent: var(--bg); --ember: rgba(255,255,255,.18); --ember-soft: rgba(255,255,255,.1); --ember-wash: rgba(255,255,255,.04);
--live: var(--fg); --live-2: var(--fg-strong); --on-live: var(--bg); --live-ember: rgba(255,255,255,.18); --live-ember-soft: rgba(255,255,255,.1); --lamp: none;
background-image: repeating-linear-gradient(135deg, transparent 0 28px, rgba(255,255,255,.015) 28px 29px); }
body.blind #render-table, body.blind .takeout { display: none; }
body.blind .note .who, body.blind .editsum, body.blind .fade-cond { visibility: hidden; }
.blind-warn { color: var(--fg); background: rgba(255,255,255,.04); border: 1px dashed var(--fg); border-radius: var(--r-3);
padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--t-base); max-width: 52rem; letter-spacing: .01em; }
.blind-warn b { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#blind-rail { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); max-width: 60rem; }
.blind-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-2); }
.blind-row.active { border-color: var(--fg); box-shadow: 0 0 16px rgba(255,255,255,.12); }
.blind-row .bk { font-family: var(--mono); color: var(--fg); font-weight: 700; }
.blind-row .alias { font-size: var(--t-md); font-weight: 700; letter-spacing: .04em; }
.blind-row .bstate { margin-left: auto; font: var(--t-xs) var(--mono); color: var(--dim); }
/* Sections and notes lists */
.sec { display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.sec:hover, .note:hover { background: var(--ember-wash); }
.sec .at, .note .at { font-family: var(--mono); color: var(--accent); cursor: pointer; }
.sec .at { min-width: 9rem; } .note .at { min-width: 4rem; color: var(--cool); }
.sec .what { flex: 1; font-weight: 600; }
.sec .del, .note .del { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 5px; box-shadow: none; }
.sec .del:hover, .note .del:hover { color: var(--bad); background: none; }
.note { display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.note .who { color: var(--dim); font-size: var(--t-sm); min-width: 12rem; }
.note .body { flex: 1; }
.note .tag { display: inline-block; font: 600 var(--t-xs) var(--mono); padding: 1px 5px; margin-right: 3px; border-radius: var(--r-1);
background: color-mix(in oklab, var(--cool) 14%, transparent); color: var(--cool); }
#section-entry, #note-entry { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); background: var(--glass); border: 1px solid var(--accent); border-radius: var(--r-3); max-width: 52rem; box-shadow: var(--gloss), 0 0 18px var(--ember-soft); }
.note-head { color: var(--dim); font-size: var(--t-sm); margin-bottom: var(--sp-2); } .note-head b { color: var(--accent-2); font-family: var(--mono); }
/* Forms, inputs, selects, sliders */
.form { max-width: 56rem; }
.form label, .fields label { display: block; margin-bottom: var(--sp-4); color: var(--dim); font-size: var(--t-sm); }
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-2);
padding: 7px 10px; font: inherit; font-size: var(--t-base); }
.form input, .form textarea, .form select, .fields input, .fields select { display: block; width: 100%; margin-top: 4px; }
textarea { font-family: var(--mono); font-size: var(--t-sm); resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ember-wash), 0 0 12px var(--ember-soft); }
input[type=range] { accent-color: var(--accent); }
.form .row { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .form .row label { flex: 1 1 12rem; }
input.cell { background: transparent; border-color: transparent; }
input.cell:hover { border-color: var(--line); } input.cell:focus { background: var(--panel-2); }
.celledit { position: absolute; z-index: 9; background: var(--panel); color: var(--fg); border: 2px solid var(--accent); border-radius: var(--r-1); padding: 4px 7px; font: inherit; font-size: var(--t-sm); }
/* The Colour sheet: the viewer's look. Nothing here is stored with the set. */
.look-pop { position: relative; display: inline-block; }
.look-sheet { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-4);
padding: var(--sp-4) var(--sp-4); width: 430px; box-shadow: 0 10px 30px rgba(0,0,0,.6), var(--gloss); }
.look-grp { color: var(--dim); font: 600 var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: var(--track-caps); margin: var(--sp-4) 0 var(--sp-2); }
.look-grp:first-child { margin-top: 0; }
.look-swatches, .look-blends, .look-looks { display: flex; gap: 5px; flex-wrap: wrap; }
.look-swatches button { padding: 0; background: none; border: 1px solid var(--line); border-radius: var(--r-1); cursor: pointer; line-height: 0; box-shadow: none; }
.look-swatches button:hover { border-color: var(--accent-2); }
.look-swatches button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--ember-soft); }
.look-swatches canvas, .look-swatches i { display: block; width: 34px; height: 16px; border-radius: 2px; }
.look-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; margin-top: 3px; }
.look-rows label { font-size: var(--t-sm); color: var(--dim); }
.look-rows input[type=range] { width: 100%; }
.look-rows b { font: var(--t-sm) var(--mono); color: var(--fg); min-width: 2.6rem; text-align: right; }
.look-checks { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); }
.look-checks label { font-size: var(--t-sm); color: var(--fg); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.look-blends button, .look-looks button { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--dim); font: 600 var(--t-sm) var(--font); cursor: pointer; padding: 4px 10px; box-shadow: none; }
.look-blends button:hover, .look-looks button:hover { border-color: var(--accent-2); color: var(--accent-2); }
.look-blends button.on, .look-looks button.on { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--ember-soft); }
.look-looks button i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.look-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.look-foot span { color: var(--dim); font-size: var(--t-xs); }
/* Region window: one crop of the region on the render you are hearing. */
.from { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); color: var(--dim); font-size: var(--t-base);
border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-3); background: var(--glass); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); }
.from b { color: var(--fg); } .from .rtitle { color: var(--accent-2); font-weight: 600; }
.win-head { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.win-play { width: 64px; height: 64px; border-radius: 50%; flex: none; padding: 0; border: 0;
background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, color-mix(in oklab, var(--accent) 80%, #000));
box-shadow: 0 0 0 3px var(--ember-soft), 0 0 28px var(--ember), inset 0 1px 0 rgba(255,255,255,.3); }
.win-play svg { width: 26px; height: 26px; fill: var(--on-accent); display: block; margin: 0 auto; }
.win-play .icon-pause { display: none; } .win-play.playing .icon-play { display: none; } .win-play.playing .icon-pause { display: block; }
.win-play.playing { animation: ember-breathe 2.2s ease-in-out infinite; }
@keyframes ember-breathe {
0%, 100% { box-shadow: 0 0 0 3px var(--ember-soft), 0 0 22px var(--ember), inset 0 1px 0 rgba(255,255,255,.3); }
50% { box-shadow: 0 0 0 5px var(--ember-soft), 0 0 40px var(--ember), inset 0 1px 0 rgba(255,255,255,.3); } }
@media (prefers-reduced-motion: reduce) { .win-play.playing { animation: none; } }
.win-who { min-width: 0; } .win-now { font-size: var(--t-lg); font-weight: 700; } .win-span { color: var(--dim); font: var(--t-sm) var(--mono); }
.win-badge { margin-left: auto; }
.win-wave { position: relative; overflow: hidden; height: 180px; background: var(--wave-bg); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 70px var(--ember-wash); }
.win-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.win-over { position: absolute; inset: 0; pointer-events: none; }
.win-dim { position: absolute; top: 0; bottom: 0; background: rgba(8,9,10,.72); }
.win-rg { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--cool); border-right: 2px solid var(--cool); }
.win-ph { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--playhead); box-shadow: 0 0 10px var(--playhead); }
.win-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: var(--sp-3) 0; }
.win-t { display: flex; gap: var(--sp-2); align-items: center; padding: 5px 7px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-2);
background: var(--glass); color: var(--fg); font: inherit; cursor: pointer; min-width: 0; box-shadow: var(--gloss); }
.win-t:hover { border-color: var(--accent-2); }
.win-t.on { border-color: var(--live); background: var(--ember-wash); box-shadow: 0 0 0 1px var(--live-ember), 0 0 18px var(--live-ember); }
.win-t.sent { box-shadow: inset 0 0 0 1px var(--accent-2); }
.win-t:disabled { opacity: .4; cursor: default; }
.win-t .k.tile { width: 34px; height: 34px; border-width: 1.5px; cursor: inherit; } .win-t .k.tile b { font-size: 16px; }
.win-t .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.win-t .nm small { display: block; color: var(--accent-2); font: var(--t-xs) var(--mono); }
/* Metadata sheet, roster, film, plate, sleeve */
.sheetview { display: flex; gap: var(--sp-4); align-items: flex-start; }
.roster { width: 17rem; flex: none; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--glass); max-height: min(34rem, 72vh); overflow: auto; position: sticky; top: var(--sp-4); }
.roster .rhead { position: sticky; top: 0; background: var(--panel); z-index: 1; border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; }
.roster .r { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.roster .r:hover { background: var(--ember-wash); }
.roster .r.on { background: var(--ember-wash); box-shadow: inset 3px 0 0 var(--accent), 0 0 16px var(--ember-soft); }
.roster .r img, .cover, label.art img { width: 34px; height: 34px; border-radius: var(--r-1); object-fit: cover; border: 1px solid var(--line); }
.roster .r .nm b { display: block; font-size: var(--t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster .r .nm span, .roster .rhead .c2 { color: var(--dim); font: var(--t-xs) var(--mono); }
.roster .r .st2 { color: var(--gold); font-size: var(--t-xs); letter-spacing: .06em; } .roster .r .st2 .off, .sheet .stars .off { color: var(--line); }
.sheetwrap { flex: 1; min-width: 0; }
.sheet .plate { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-4); background: var(--glass); position: relative; overflow: hidden; box-shadow: var(--gloss); }
.sheet .plate::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--accent), transparent); }
.sheet .portrait { width: 108px; height: 108px; flex: none; border-radius: var(--r-2); border: 1px solid var(--line); object-fit: cover; background: linear-gradient(135deg, var(--line), var(--bg-deep)); }
.sheet .whoblock .name { font-size: var(--t-lg); font-weight: 700; margin: 0 0 2px; }
.sheet .sub2 { color: var(--dim); font: var(--t-sm) var(--mono); margin: 0 0 var(--sp-2); } .sheet .sub2 b { color: var(--accent-2); }
.sheet .tagline { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 5px; }
.sheet .tagline .t { font: 600 var(--t-xs) var(--mono); padding: 2px 7px; border-radius: var(--r-1); border: 1px solid var(--line); color: var(--dim); }
.sheet .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2px var(--sp-5); margin: var(--sp-3) 0 0; }
.sheet .stat { display: grid; grid-template-columns: 6.6rem 1fr 4.6rem; gap: var(--sp-2); align-items: center; padding: 3px 0; }
.sheet .stat .k { color: var(--dim); font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.sheet .stat .v { font: var(--t-sm) var(--mono); color: var(--fg); text-align: right; }
.sheet .track { position: relative; height: 7px; background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: 4px; }
.sheet .track .band { position: absolute; top: 0; bottom: 0; background: var(--ember-soft); }
.sheet .track .pip { position: absolute; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--ember); }
.sheet .grouphead { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.sheet .grouphead h5 { margin: 0; font: 600 var(--t-xs) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.sheet .grouphead .rule { flex: 1; height: 1px; background: var(--line); } .sheet .grouphead .n { color: var(--dim); font: var(--t-xs) var(--mono); }
.sheet .fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2px var(--sp-5); }
.sheet .f { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-2); align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.sheet .f .k { color: var(--dim); font-size: var(--t-sm); font-weight: 400; font-family: var(--font); display: flex; align-items: center; gap: 5px; }
.sheet .f input, .sheet .f textarea, .sheet .f select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 3px 2px; font-size: var(--t-sm); }
.sheet .f input:focus, .sheet .f textarea:focus, .sheet .f select:focus { border-bottom-color: var(--accent); background: var(--panel-2); box-shadow: none; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--line); }
.dot.file { background: var(--note-sky); } .dot.analysed { background: var(--ok); } .dot.edited { background: var(--accent); }
.film { display: flex; gap: 3px; align-items: stretch; }
.film-blk { position: relative; min-width: 3rem; }
.film-blk .strip { display: block; width: 100%; height: 44px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-1); }
.film-blk.open .strip { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--bad) 18%, transparent), color-mix(in oklab, var(--bad) 18%, transparent) 6px, transparent 6px, transparent 12px); }
.film-blk .win { position: absolute; top: 3px; left: 5px; font: 600 var(--t-sm) var(--mono); color: var(--accent); text-shadow: 0 0 4px #000; }
.film-blk.open .win { color: var(--bad); }
.film-blk .cap { font-size: var(--t-xs); color: var(--dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-5); align-items: start; margin: 0 0 var(--sp-5); }
.plate .art { width: 150px; height: 150px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--bg-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; font-size: var(--t-sm); color: var(--dim); }
.rbar, .heldbar { height: 6px; background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; margin: 6px 0 3px; max-width: 34rem; }
.rbar i, .heldbar i { display: block; height: 100%; background: var(--ok); box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 50%, transparent); }
.held.tight .heldbar i { background: var(--accent); }
.rdot { width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--line); border: 1px solid var(--faint); box-shadow: none; }
.rdot.on { background: var(--ok); border-color: var(--ok); } .rdot.hand { background: var(--accent); border-color: var(--accent); }
.reltitle { margin: 0; font-size: var(--t-2xl); letter-spacing: .02em; font-weight: 700; text-transform: uppercase; }
.relby { color: var(--dim); margin: 4px 0 var(--sp-5); }
.tracklist { list-style: none; counter-reset: trk; margin: 0; padding: 0; }
.tracklist li { counter-increment: trk; display: flex; align-items: baseline; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.tracklist li::before { content: counter(trk, decimal-leading-zero); color: var(--faint); font: 600 var(--t-sm) var(--mono); flex: 0 0 1.7rem; }
.tracklist li.rdy::before { color: var(--ok); } .tracklist li.hand::before { color: var(--accent); }
.tracklist .nm { color: var(--faint); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tracklist li.rdy .nm { color: var(--fg); }
.tracklist .waiting { color: var(--faint); font-size: var(--t-xs); flex: 1 1 auto; } .tracklist li.rdy .waiting { display: none; }
.tracklist .num { margin-left: auto; padding-left: var(--sp-3); }
.smallprint { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--sp-3); color: var(--faint); font: var(--t-xs) var(--mono); display: flex; flex-wrap: wrap; gap: 4px var(--sp-5); align-items: baseline; }
/* Uploads, drafts, records */
.making { border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); background: var(--glass); }
/* Scoped to the library's upload box since 2026-09-10 (owner: "narrow the
rule"): bare `.file` also caught the two "of 6:03" spans, the edit summary's
and the transport's, and drew each as a bordered grid block. */
.files .file { display: grid; grid-template-columns: 1fr 6rem 11rem; gap: var(--sp-3); align-items: center; padding: 5px 7px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.file .sz, .file .st { font-family: var(--mono); color: var(--dim); font-size: var(--t-xs); }
.file .st.ok { color: var(--ok); } .file .st.up { color: var(--accent-2); } .file .st.bad { color: var(--bad); }
/* Cancel a file not yet up (2026-09-20): quiet until the row is hovered. */
.files .file { grid-template-columns: 1fr 6rem 11rem auto; }
.file .cancel { background: none; border: 0; padding: 0 4px; font: var(--t-xs) var(--mono); color: var(--faint); cursor: pointer; box-shadow: none; opacity: .55; }
.file:hover .cancel, .file .cancel:focus-visible { opacity: 1; color: var(--bad); }
/* The upload file's progress line. Scoped to .file since 2026-09-04: as a bare
`.bar` it also matched the six toolbars that use that class, clipping every
one of them to three pixels from b224bb9 (the Design round) onward. Those
toolbars now say .toolbar, which is what they always meant. */
.file .bar { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.file .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width var(--dur); box-shadow: 0 0 8px var(--ember); }
.record { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.record .prefilled { color: var(--ok); font: var(--t-xs) var(--mono); margin-left: 6px; }
/* Spark field and stack pool: unchanged mechanics. */
.sparkfield { position: absolute; pointer-events: none; z-index: 31; display: block; }
.stack-pool { position: absolute; left: -20000px; top: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 900px) { .lane { grid-template-columns: 44px 200px 1fr; } .tstatus .cond { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 700px) { main { padding: var(--sp-3) var(--sp-3) var(--sp-7); } header { padding: var(--sp-3); } .transport-wrap { height: calc(var(--transport-h, 124px) + 26px); } }
@media (max-width: 640px) {
.lane, .lane.off { grid-template-columns: 44px 1fr; grid-template-areas: "tile hd" "wv wv"; gap: 5px 10px; }
.lane .k.tile { grid-area: tile; } .lane .lanehead { grid-area: hd; } .lane .lanewave { grid-area: wv; }
.lane.off .lanewave { display: none; } .lanewave .rowwave { min-height: 48px; } .lanenums { grid-column: 1 / -1; }
.win-tiles { grid-template-columns: 1fr 1fr; } .win-badge { margin-left: 0; flex-basis: 100%; } .win-wave { height: 140px; }
}
/* ---------- 3b. Glass chrome (only under html[data-look="glass"]) ---------- */
html[data-look="glass"] body { background: radial-gradient(900px 420px at 15% -10%, #2b1030, #120f16 50%, #0c1210) fixed; }
html[data-look="glass"] header h1 { background: linear-gradient(90deg, #ff7ab3, #d4ff5a); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: lowercase; letter-spacing: .02em; font-weight: 800; }
html[data-look="glass"] .tb, html[data-look="glass"] button.ghost { font-weight: 700; padding: 8px 16px; }
html[data-look="glass"] .tb.on, html[data-look="glass"] .tb.toggle.on, html[data-look="glass"] .theight .tb.on, html[data-look="glass"] .waveh .tb.on,
html[data-look="glass"] #btn-hideout.on, html[data-look="glass"] #btn-note.on {
background: linear-gradient(180deg, rgba(184,255,60,.3), rgba(184,255,60,.12)); color: var(--live-2); border-color: rgba(184,255,60,.5);
box-shadow: 0 0 18px rgba(184,255,60,.25), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-look="glass"] button:not([class]):not(.look-sheet button):not(.film-blk button), html[data-look="glass"] button.compact, html[data-look="glass"] #btn-note {
background: var(--glass-accent); color: var(--on-accent); font-weight: 800; border: 0;
box-shadow: 0 0 22px rgba(255,61,138,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.2); }
html[data-look="glass"] .k.tile, html[data-look="glass"] .tstatus .k.tile.now { border-radius: 18px; }
html[data-look="glass"] .k.tile.in, html[data-look="glass"] .tstatus .k.tile.now, html[data-look="glass"] .lanehead .rot:not(.off) {
background: var(--glass-live); color: var(--on-live); border-color: transparent;
box-shadow: 0 0 24px rgba(184,255,60,.45), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.2); }
html[data-look="glass"] .k.tile.in:hover, html[data-look="glass"] .lanehead .rot:not(.off):hover { background: linear-gradient(180deg, #f0ffa0, #d4ff5a 40%, #9be32a); }
html[data-look="glass"] .chip.on { background: var(--glass-accent); border-color: transparent; box-shadow: 0 0 12px rgba(255,61,138,.4), inset 0 1px 0 rgba(255,255,255,.5); }
html[data-look="glass"] .chip, html[data-look="glass"] .chip2, html[data-look="glass"] .pill, html[data-look="glass"] kbd { border-radius: 999px; }
html[data-look="glass"] .tstatus, html[data-look="glass"] .lane, html[data-look="glass"] .panel, html[data-look="glass"] .look-sheet, html[data-look="glass"] .rrow {
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-look="glass"] .tstatus { border-radius: 22px; }
html[data-look="glass"] .lane { border-radius: 20px; }
html[data-look="glass"] .lane.active { background: linear-gradient(180deg, rgba(184,255,60,.14), rgba(184,255,60,.05)); border-color: rgba(184,255,60,.5);
box-shadow: 0 0 34px rgba(184,255,60,.15), inset 0 1px 0 rgba(255,255,255,.2); }
html[data-look="glass"] .transport-wrap { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 100px rgba(255,61,138,.12), inset 0 1px 0 rgba(255,255,255,.1); }
html[data-look="glass"] .badge { color: #ffb3d1; border-color: rgba(255,61,138,.6); background: linear-gradient(180deg, rgba(255,61,138,.28), rgba(255,61,138,.12));
box-shadow: 0 0 20px rgba(255,61,138,.3), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-look="glass"] .clockstrip .pos { background: linear-gradient(180deg, #fff, #ffb3d1); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-look="glass"] .hiddenfold { border-radius: 16px; border-color: rgba(255,255,255,.14); }
html[data-look="glass"] .notecard { background: linear-gradient(180deg, rgba(95,211,200,.18), rgba(95,211,200,.06)); border-color: rgba(95,211,200,.55); border-radius: 16px;
box-shadow: 0 0 18px rgba(95,211,200,.18), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-look="glass"] .clearmarks { border-radius: 999px; }
html[data-look="glass"] .stars .star.on { color: #ffd166; text-shadow: 0 0 8px rgba(255,209,102,.6); }
html[data-look="glass"] .lanehead .rot.off { border-radius: 999px; }
/* The pink lamp lives in the band, behind the badge and the state line (owner's pick, 2026-09-03):
the light stays with what you are hearing and scrolls away with it. */
html[data-look="glass"] .tstatus { background: radial-gradient(560px 180px at 86% 50%, rgba(255,61,138,.42), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 90px rgba(255,61,138,.22), inset 0 1px 0 rgba(255,255,255,.14); }
/* A floating sheet must never be see-through: the glass gradients of Melon, Comfy
and Glass sit on the panel colour, whatever the shorthand above reset it to. */
.look-sheet, html[data-look="glass"] .look-sheet { background-color: var(--panel); }
/* ---------- 4. Carried from the live sheet ----------
Rules the four-look sheet does not name (tournament, roster, the metadata sheet,
the labs, saved regions, the album pass, layout mechanics). Colours re-tokenised;
nothing here names a hex the looks do not own. ---------- */
.wave { display:block; width:100%; height:44px; background:var(--bg-deep);
border:1px solid var(--line); border-radius:2px; }
.err { color:var(--bad); font-family:var(--mono); font-size:.8rem; }
.form input:focus, .form textarea:focus, .form select:focus {
outline:none; border-color:var(--accent); }
.form .apply { display:block; margin-top:.3rem; font-size:.78rem; color:var(--dim); }
.form .apply input { display:inline; width:auto; margin:0 .3rem 0 0; }
.keys { color:var(--dim); font-size:.82rem; line-height:1.9; margin:.8rem 0 1.6rem; }
.state.ready { color:var(--ok); }
.state.fetching, .state.decoding { color:var(--accent-2); }
.state.waiting { color:var(--dim); }
.state.failed { color:var(--bad); }
.tourney-pair { display:flex; gap:.6rem; max-width:52rem; }
.tourney-pair .tb { flex:1; display:flex; align-items:center; justify-content:center;
gap:.7rem; padding:1.1rem; font-size:1rem; }
.tourney-pair .tb.playing { border-color:var(--accent); color:var(--accent);
background:var(--ember-wash); }
.tourney-pair .bk { font-family:var(--mono); color:var(--accent);
font-weight:600; }
.tourney-pair .alias { font-size:1.3rem; font-weight:600; }
#tourney-standing { margin-top:.9rem; max-width:52rem; }
.stand { display:flex; gap:.8rem; align-items:baseline; padding:.35rem .6rem;
border-bottom:1px solid var(--line); font-size:.85rem; }
.stand .who { flex:1; }
.stand .tally { font-family:var(--mono); color:var(--dim); }
.stand .bar { height:6px; background:var(--accent); border-radius:2px; min-width:1px; }
#results { max-width:52rem; }
.res { margin:0 0 1.1rem; }
.res h4 { margin:0 0 .25rem; font-size:.85rem; color:var(--accent-2);
font-family:var(--mono); }
.res .n { color:var(--dim); font-weight:400; }
.res .row { display:flex; gap:.7rem; align-items:baseline; padding:.28rem .5rem;
border-bottom:1px solid var(--line); font-size:.85rem; }
.res .row.top td, .res .row.top { background:var(--ember-wash); }
.res .pos { font-family:var(--mono); color:var(--accent);
min-width:1.6rem; }
.res .who { flex:1; }
.res .sc { font-family:var(--mono); color:var(--dim); }
#running-order { display:flex; flex-wrap:wrap; gap:.3rem; max-width:60rem;
margin:0 0 1rem; }
.ro { font:600 .72rem var(--mono); padding:.2rem .45rem;
border:1px solid var(--line); border-radius:3px; color:var(--dim);
background:var(--panel); }
.ro.placed { border-color:var(--accent); color:var(--accent); }
.ro.next { border-color:var(--accent-2); color:var(--accent-2);
background:var(--ember-wash); }
.bar input[type=search] { background:var(--panel-2); color:var(--fg);
border:1px solid var(--line); border-radius:3px; padding:.35rem .55rem;
font:inherit; font-size:.82rem; width:14rem; }
.bar input[type=search]:focus { outline:none; border-color:var(--accent); }
.dot.empty { background:var(--line); }
.drift { color:var(--bad); font-weight:700; margin-left:.25rem; }
.preview { white-space:pre-wrap; background:var(--bg-deep); border:1px solid var(--line);
border-radius:3px; padding:.45rem .55rem; margin:.6rem 0 0;
font-family:var(--mono); font-size:.72rem; color:var(--dim);
max-height:9rem; overflow:auto; }
.preview.bad { color:var(--bad); border-color:#5c2f2f; }
#art { max-width:72rem; margin:0 0 1rem; padding:.7rem .9rem;
background:var(--panel); border:1px solid var(--accent); border-radius:4px; }
#art .sub { margin:0 0 .5rem; }
#art-list { display:grid; gap:.3rem; max-height:20rem; overflow:auto;
grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); }
label.art { display:flex; gap:.6rem; align-items:center; padding:.25rem .35rem;
border:1px solid var(--line); border-radius:3px; font-size:.8rem;
cursor:pointer; }
label.art:hover { border-color:var(--accent-2); }
label.art input { width:auto; }
label.art .noart { width:34px; height:34px; border:1px dashed var(--line);
border-radius:3px; color:var(--dim); font-size:.6rem;
display:flex; align-items:center; justify-content:center; }
label.art .who { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
label.art .dims { color:var(--dim); font-family:var(--mono);
font-size:.7rem; white-space:nowrap; }
label.tb { cursor:pointer; }
#sidecar { max-width:72rem; margin:0 0 1rem; padding:.7rem .9rem;
background:var(--panel); border:1px solid var(--accent);
border-radius:4px; }
#sidecar .sub { margin:0 0 .5rem; }
#sidecar-list { max-height:16rem; overflow:auto; }
label.sc { display:flex; gap:.6rem; align-items:baseline; padding:.22rem .3rem;
border-bottom:1px solid var(--line); font-size:.8rem; cursor:pointer; }
label.sc:hover { background:var(--ember-wash); }
label.sc input { width:auto; }
label.sc .act { font:600 .66rem var(--mono); min-width:3.4rem;
text-transform:uppercase; }
label.sc .act.add { color:var(--ok); }
label.sc .act.change { color:var(--accent-2); }
label.sc .who { color:var(--dim); min-width:12rem; }
label.sc .fld { font-family:var(--mono); min-width:7rem; color:var(--accent); }
label.sc .was { color:var(--dim); flex:1; }
label.sc .arrow { color:var(--dim); }
label.sc .now { flex:1; }
table.meta { max-width:70rem; }
table.meta td { vertical-align:top; font-size:.85rem; }
table.meta td.k { white-space:nowrap; }
.metaval { white-space:pre-wrap; background:var(--bg-deep); border:1px solid var(--line);
border-radius:3px; padding:.6rem .8rem; margin:.4rem 0 0;
font-family:var(--mono); font-size:.78rem; color:var(--fg);
max-height:28rem; overflow:auto; }
table.meta summary { cursor:pointer; color:var(--accent-2); }
#plan { max-width:72rem; }
.film-blk .chips { display:flex; gap:2px; margin-top:.25rem; flex-wrap:wrap; }
.film-blk .chips button { background:var(--panel-2); border:1px solid var(--line);
color:var(--dim); border-radius:2px; font:inherit; font-size:.68rem;
padding:0 .3rem; cursor:pointer; font-family:var(--mono); }
.film-blk .chips button:hover { border-color:var(--accent-2); color:var(--fg); }
.film-blk .chips button.on { color:var(--accent); border-color:var(--accent); }
.film-total { font-family:var(--mono); font-size:.8rem;
color:var(--fg); margin:.5rem 0 0; }
a.tb { text-decoration:none; display:inline-block; }
a.tb:hover { text-decoration:none; }
#section-vocab { margin:.2rem 0 .6rem; }
#section-derived b { color:var(--accent-2); font-family:var(--mono); }
.ref { color:var(--accent-2); }
#note-body { width:100%; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
border-radius:3px; padding:.5rem .6rem; font:inherit; }
#note-body:focus { outline:none; border-color:var(--accent); }
#note-tags { margin-top:.5rem; }
#blind-panel { margin:.9rem 0 1.2rem; }
.tb:disabled:hover { border-color:var(--line); color:var(--fg); }
.note-actions { margin-top:.6rem; display:flex; gap:.4rem; }
.c-sync-cell { white-space:nowrap; font-family:var(--mono); text-align:right; }
tbody tr { cursor:pointer; }
.formview { max-width: 62rem; }
.formview .cardnav { display:flex; align-items:center; gap:.5rem; margin:0 0 .8rem; }
.formview .cardnav .who { font-family:var(--mono); font-size:.9rem;
color:var(--fg); }
.formview .cardhead { display:flex; gap:1rem; align-items:flex-start;
margin:0 0 .9rem; }
.formview .cardhead img { border:1px solid var(--line); border-radius:4px;
object-fit:cover; background:var(--panel); }
.formview .cardhead .meta { color:var(--dim); font-size:.8rem;
font-family:var(--mono); margin:.2rem 0 0; }
.formview .fields { display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
.formview .grp { grid-column:1/-1; font-size:.72rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--accent); margin:.9rem 0 .45rem; }
.formview .grp:first-child { margin-top:0; }
.formview .field { margin:0 0 .65rem; }
.formview .field label { display:flex; align-items:baseline; gap:.6rem;
font-size:.78rem; color:var(--dim); margin:0 0 .2rem; }
.formview .field input[type=text], .formview .field textarea,
.formview .field select {
display:block; width:100%; box-sizing:border-box; background:var(--panel-2);
color:var(--fg); border:1px solid var(--line); border-radius:3px;
padding:.4rem .55rem; font:inherit; font-size:.85rem; }
.formview .field input:focus, .formview .field textarea:focus,
.formview .field select:focus { outline:none; border-color:var(--accent); }
.formview .field.is-edited input, .formview .field.is-edited textarea,
.formview .field.is-edited select { border-color:var(--accent); }
.formview .field textarea { grid-column:1/-1; }
.formview .field .allbtn, .formview .field .vary {
background:none; border:none; color:var(--accent-2); font-size:.72rem;
cursor:pointer; padding:0; font-family:inherit; }
.formview .field .allbtn:hover, .formview .field .vary:hover {
text-decoration:underline; }
.formview .drifted { color:var(--accent-2); font-size:.74rem; margin:.2rem 0 0; }
.formview .field:has(textarea) { grid-column:1/-1; }
.formview.pass .zone { border:1px solid var(--line); border-radius:4px;
background:var(--panel); padding:.8rem 1rem; margin:0 0 1rem; }
.formview.pass .zonehead { font-size:.86rem; color:var(--fg); margin:0 0 .15rem; }
.formview.pass .zonewhy { font-size:.78rem; color:var(--dim); margin:0 0 .7rem; }
.formview.pass .setgrid { display:grid; grid-template-columns:repeat(3, 1fr);
gap:0 1.5rem; }
.formview.pass .perrow { display:flex; gap:.6rem; align-items:center;
margin:.25rem 0 0; }
.formview.pass .perrow .who, .formview.pass .pertable .who {
font-family:var(--mono); font-size:.76rem; color:var(--dim);
width:15rem; flex:none; }
.formview.pass .unify { margin:0 0 .35rem; }
.formview.pass .pertable { border-collapse:collapse; width:100%; }
.formview.pass .pertable th { font-size:.76rem; }
.formview.pass .pertable td { border-bottom:none; padding:.2rem .5rem .2rem 0; }
.formview.pass .pertable input[type=text], .formview.pass .pertable textarea {
width:100%; box-sizing:border-box; background:var(--panel-2); color:var(--fg);
border:1px solid var(--line); border-radius:3px; padding:.3rem .5rem;
font:inherit; font-size:.8rem; }
.formview.pass .pertable textarea { height:2.1rem; }
.making h4 { margin:0 0 .1rem; font-size:.95rem; }
.making .sub { margin-bottom:.6rem; }
.draft-actions { display:flex; gap:.8rem; align-items:center; }
.draft-into { color: var(--dim); font-size: var(--t-sm); display:inline-flex; gap:.4rem; align-items:center; margin:0; }
.draft-into-note { margin:.3rem 0 0; }
.record input[readonly], .record textarea[readonly] { opacity:.7; }
.drop .small { font-size:.8rem; margin:0; max-width:46rem; margin-inline:auto; }
.making .files { margin:.4rem 0 .6rem; }
.file .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record h4 { margin:0 0 .2rem; font-size:.9rem; }
.drop-covers { margin:.6rem 0 .2rem; }
.drop-covers h4 { margin:0 0 .2rem; font-size:.9rem; }
.dcovers { display:flex; gap:.7rem; flex-wrap:wrap; margin:.4rem 0 .6rem; }
.dcover { margin:0; text-align:center; font-size:.72rem; color:var(--dim); cursor:pointer; max-width:150px; }
.dcover img { width:150px; height:150px; border-radius:var(--r-2); border:2px solid var(--line); object-fit:cover; display:block; margin:0 auto .2rem; }
.dcover:hover img { border-color:var(--accent-2); }
.dcover.on img { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 14px var(--ember-soft); }
.dcover figcaption { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcover.on figcaption::after { content:" - the set's"; color:var(--accent-2); }
/* display, padding and border undo the notes list's `.note`, which drew two
empty boxes after "or add to" (session 024). */
.record .note { color:var(--dim); font-size:.8rem; display:inline; padding:0; border:0; }
.discard { margin-top:.6rem; }
.roster #roster-list:focus { outline:none; }
.roster .r .nm { flex:1; min-width:0; }
.sheet .portrait.stack { box-shadow:4px 4px 0 -1px var(--bg-deep), 4px 4px 0 0 var(--line),
8px 8px 0 -1px var(--bg-deep), 8px 8px 0 0 var(--line); }
.sheet .whoblock { flex:1; min-width:0; }
.sheet .whoblock .name input { width:100%; background:transparent; border:0; padding:0;
border-bottom:1px dashed transparent; color:inherit; font:inherit; }
.sheet .whoblock .name input:hover { border-bottom-color:var(--line); }
.sheet .whoblock .name input:focus { outline:none; border-bottom-color:var(--accent); }
.sheet .stars { color:var(--gold); font-size:.9rem; letter-spacing:.1em; }
.sheet .track .pip.ghost { background:var(--faint); box-shadow:none; width:5px; height:5px;
margin:-3px 0 0 -2.5px; }
.sheet .statnote { color:var(--dim); font-size:.72rem; margin:.5rem 0 0;
font-family:var(--mono); }
.sheet .groups { margin-top:1rem; }
.sheet .f .k button.dot { appearance:none; background:transparent; border:0;
padding:0; margin:0 -3px; flex:none; cursor:pointer; border-radius:50%;
/* A fixed box rather than shrink-to-fit: the dot is 4px, which is far
too small to click, so the button is a 14px target with the dot
centred in it. */
width:14px; height:14px; min-width:14px; display:flex;
align-items:center; justify-content:center; }
.sheet .f .k button.dot::before { content:""; display:block; width:4px; height:4px;
border-radius:50%; background:var(--line); transition:transform .1s; }
.sheet .f .k button.dot.file::before { background:#5a7fb8; }
.sheet .f .k button.dot.analysed::before { background:var(--ok); }
.sheet .f .k button.dot.edited::before { background:var(--accent); }
.sheet .f .k button.dot:hover { background:var(--ember-wash); }
.sheet .f .k button.dot:hover::before { transform:scale(1.6); }
.sheet .f .k button.dot:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
.sheet .fieldgrid.dim .f { opacity:.6; }
.sheet .fieldgrid.dim .f:hover { opacity:1; }
.sheet .grouphead.hiddenhead h5 { color:var(--dim); }
.sheet .f input:hover, .sheet .f textarea:hover, .sheet .f select:hover {
border-bottom-color:var(--line); background:var(--panel); }
.sheet .f.ro .v { color:var(--dim); font:.76rem var(--mono);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet .f .varies { display:flex; gap:.25rem; align-items:center; flex-wrap:wrap; }
.sheet .f .varies .lab2 { color:var(--accent-2); font:600 .68rem var(--mono); }
.sheet .f .varies .c { background:var(--panel-2); border:1px solid var(--line); color:var(--dim);
border-radius:2px; font:.68rem var(--mono); padding:.05rem .3rem;
cursor:pointer; font-weight:400; }
.sheet .f .varies .c:hover { border-color:var(--accent); color:var(--fg); background:var(--panel-2); }
.sheet .f .varies .c.more2 { cursor:default; }
.sheet .more { background:transparent; border:1px dashed var(--line); color:var(--dim);
font-weight:500; font-size:.76rem; padding:.3rem .8rem; border-radius:3px;
margin-top:.5rem; }
.sheet .more:hover { background:transparent; color:var(--fg); border-color:var(--dim); }
.sheet .f .ctl { display:flex; align-items:baseline; gap:.35rem; min-width:0; }
.sheet .f .ctl > :first-child { flex:1; min-width:0; }
.sheet .f .unit, .sheet .f.ro .v .unit { color:var(--dim); font:.72rem var(--mono); }
.sheet .copy { background:var(--panel-2); border:1px solid var(--line); color:var(--dim);
border-radius:2px; font:.66rem var(--mono); padding:.05rem .35rem;
cursor:pointer; font-weight:400; margin-left:.35rem; }
.sheet .copy:hover { background:var(--panel-2); border-color:var(--accent); color:var(--fg); }
.sheet .sub2 .idbit b { color:var(--fg); font-weight:500; }
.bulkhead { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.bulkhead select { background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
border-radius:3px; padding:.3rem .5rem; font:inherit; font-size:.82rem; margin-left:.3rem; }
.bulkhead .modes { display:flex; gap:.25rem; }
.pane { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.3rem 0; }
.pane input[type=text], .pane input:not([type]) { background:var(--panel-2); color:var(--fg);
border:1px solid var(--line); border-radius:3px; padding:.35rem .5rem; font:inherit;
font-size:.82rem; min-width:16rem; }
.pane input:focus { outline:none; border-color:var(--accent); }
.pane .muted { font-size:.78rem; }
.artwell { position:relative; flex:none; cursor:pointer; border-radius:3px; }
.artwell .arthint { position:absolute; inset:auto 0 0 0; text-align:center; font:600 .62rem var(--mono);
color:var(--fg); background:rgba(0,0,0,.55); padding:.15rem 0; border-radius:0 0 3px 3px;
opacity:0; transition:opacity .12s; pointer-events:none; }
.artwell:hover .arthint, .artwell.over .arthint { opacity:1; }
.artwell.over .portrait { border-color:var(--accent); box-shadow:0 0 0 2px var(--ember); }
.sheet .filesays { color:var(--dim); font:.7rem var(--mono); margin-left:.4rem;
display:inline-flex; gap:.3rem; align-items:center; }
.newrel { display:flex; gap:.6rem; margin:0 0 1rem; max-width:40rem; }
/* The releases' toolbar, above their cards: Re-arrange (owner pick A,
2026-09-19), the size and the two ticks. */
.relorder { margin: -.4rem 0 .6rem; }
.newrel input { flex:1; }
.newrel input:focus, .newrel select:focus { outline:none; border-color:var(--accent); }
.plate .art img { width:100%; height:100%; object-fit:cover; }
.plate .art.over { border-color:var(--accent); }
.plateline { display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap;
margin-bottom:.5rem; }
.fields { display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; margin-top:.9rem;
max-width:62rem; }
.fields input:focus, .fields select:focus { outline:none; border-color:var(--accent); }
table.roster td { vertical-align:middle; }
table.roster tr.dragging { opacity:.35; }
table.roster .grip { color:var(--faint); cursor:grab; font-family:var(--mono);
font-weight:600; width:1.4rem; }
.picklist { max-height:22rem; overflow:auto; border:1px solid var(--line);
border-radius:3px; background:var(--bg-deep); }
.pickrow { display:flex; align-items:center; gap:.7rem; padding:.35rem .6rem;
border-bottom:1px solid var(--line); cursor:pointer; }
.pickrow:last-child { border-bottom:0; }
.pickrow:hover { background:var(--ember-wash); }
.pickrow .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pickrow input { width:auto; margin:0; }
.tracklist li:last-child { border-bottom:0; }
input.cell::placeholder { color:var(--faint); font-style:italic; }
input.cell.disc { width:3.2rem; min-width:0; text-align:right;
font-family:var(--mono); }
input.cell.isrc { width:9rem; min-width:0; font-family:var(--mono);
font-size:.78rem; text-transform:uppercase; }
.discmark { color:var(--dim); font:600 .72rem var(--mono);
text-transform:uppercase; letter-spacing:.09em; margin:1.1rem 0 .3rem; }
.discmark:first-child { margin-top:0; }
#bulk-preview { margin-top:.5rem; color:var(--accent-2); font-family:var(--mono);
font-size:.76rem; }
table.roster .rowpick { width:auto; margin:0; cursor:pointer; }
table.roster tr:has(.rowpick:checked) td { background:var(--ember-wash); }
/* A release's tracks on a phone (owner's pick A, 2026-10-09): the 13-column
table was 1,084 px and laid the whole page out 1,101 px wide, so each track
becomes its own block with everything kept: pick, grip, number, dot and
remove; the title on its own line with its notes; disc and ISRC; where it
is from; format, key, BPM and time. The table also carries .roster, the set
page's sidebar class, whose height and scrolling would box the blocks in. */
@media (max-width: 640px) {
table.roster, table.roster tbody, table.roster td { display:block; }
table.roster { width:auto; max-height:none; overflow:visible; position:static; border:0; border-radius:0; background:none; }
table.roster thead { display:none; }
table.roster tbody tr { display:grid; grid-template-columns:auto auto auto auto 1fr auto; gap:8px 10px; align-items:center;
padding:12px 4px; border-bottom:1px solid var(--line);
grid-template-areas:"pick grip num dot . rm" "title title title title title title" "disc disc isrc isrc isrc isrc"
"from from from from from from" "fmt key bpm time . ."; }
table.roster tr:has(.rowpick:checked) { background:var(--ember-wash); }
table.roster td { padding:0; border:0; background:none; }
table.roster td:nth-child(1) { grid-area:pick; }
table.roster td:nth-child(2) { grid-area:grip; font-size:18px; padding:4px 8px; }
table.roster td:nth-child(3) { grid-area:disc; display:flex; align-items:center; gap:6px; }
table.roster td:nth-child(3)::before { content:"disc"; color:var(--dim); font-size:12px; }
table.roster td:nth-child(4) { grid-area:num; font-weight:700; }
table.roster td:nth-child(4)::before { content:"#"; color:var(--dim); }
table.roster td:nth-child(5) { grid-area:dot; }
/* The ready dot, too small for a finger at 11 px (his ask, 2026-10-09): a
22 px dot pressed anywhere in 44 px around it. */
table.roster .rdot { width:22px; height:22px; position:relative; }
table.roster .rdot::after { content:""; position:absolute; inset:-11px; border-radius:50%; }
table.roster td:nth-child(6) { grid-area:title; min-width:0; }
table.roster td:nth-child(6) input { width:100%; box-sizing:border-box; }
table.roster td:nth-child(7) { grid-area:isrc; display:flex; align-items:center; gap:6px; min-width:0; }
table.roster td:nth-child(7)::before { content:"ISRC"; color:var(--dim); font-size:12px; }
table.roster td:nth-child(7) input.cell.isrc { flex:1; width:auto; }
table.roster td:nth-child(8) { grid-area:from; }
table.roster td:nth-child(8)::before { content:"from "; color:var(--dim); }
table.roster td:nth-child(9) { grid-area:fmt; } table.roster td:nth-child(10) { grid-area:key; }
table.roster td:nth-child(11) { grid-area:bpm; } table.roster td:nth-child(11):not(:empty)::after { content:" BPM"; color:var(--dim); }
table.roster td:nth-child(12) { grid-area:time; }
table.roster td:nth-child(13) { grid-area:rm; }
}
.held { margin:0 0 1rem; max-width:44rem; }
.held.tight .tiny { color:var(--accent-2); }
.tracklist li.gone .nm { text-decoration:line-through; text-decoration-color:var(--faint); }
.regionshead { margin:2rem 0 .2rem; font-size:1rem; }
.rlist { border:1px solid var(--line); border-radius:4px; background:var(--bg-deep); max-width:64rem; }
.rrow { display:flex; align-items:center; gap:.8rem; padding:.45rem .7rem;
border-bottom:1px solid var(--line); }
.rrow:last-child { border-bottom:0; }
.rrow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rrow .t { font-family:var(--mono); color:var(--dim); font-size:.8rem; }
.rrow .copy { font:.74rem var(--mono); color:var(--dim); background:var(--bg-deep);
border:1px solid var(--line); border-radius:3px; padding:.3rem .5rem; cursor:pointer; }
.rrow .copy:hover { border-color:var(--accent-2); color:var(--accent-2); }
.rlist .tiny { padding:.6rem .7rem; margin:0; }
.look-pick { width:34px; height:16px; padding:0; border:0; background:none; cursor:pointer; }
#transport .toolbar { gap:.9rem; align-items:flex-end; }
.tstatus .k.tile.now:hover { background:var(--accent); border-color:var(--accent); }
.tstatus .k.tile.now b { font-size:1.1rem; color:var(--on-accent); }
.tstatus .k.tile.now small { color:var(--on-accent); }
.clearmarks.yes:hover { background:#ff8585; }
.clearmarks.keep:hover { border-color:var(--fg); color:var(--fg); background:transparent; }
.lanehead .asking { grid-column:1 / -1; justify-self:start; }
.lanehead .lane-clear { grid-column:1 / -1; justify-self:start; }
.lane.off .lane-clear { display:none; }
.lane.off .stars .star { color:var(--faint); }
.k.tile.nokey:hover { background:var(--ember-wash); }
.lanechips .c-ready { font-size:.68rem; }
.lanechips .c-ready.waiting { display:none; }
.lanehead .stars .star { background:none; border:none; cursor:pointer; font-size:.95rem;
padding:0 .04rem; color:var(--faint); line-height:1; }
.lanehead .stars .star.on { color:var(--gold); }
.lanehead .stars:hover .star { color:var(--gold); opacity:.7; }
.lanehead .vox .chip { margin:0; }
.lanenums .c-sync-cell { text-align:left; }
.takeout { display:inline-flex; gap:.4rem; align-items:center; flex-wrap:wrap; font-size:.8rem; }
.takeout select { background:var(--panel-2); color:var(--fg); border:1px solid var(--line); border-radius:3px;
padding:.3rem .4rem; font:inherit; font-size:.8rem; margin-left:.3rem; }
body.waveh-s .lane:not(.off) { grid-template-columns:44px 1fr; grid-template-areas:"tile hd" "tile wv";
gap:.25rem .7rem; }
body.waveh-s .lane:not(.off) .k.tile { grid-area:tile; }
body.waveh-s .lane:not(.off) .lanehead { grid-area:hd; display:flex; flex-wrap:wrap; gap:.15rem .8rem;
align-items:center; }
body.waveh-s .lane:not(.off) .lanewho { flex:0 1 auto; }
body.waveh-s .lane:not(.off) .lanewave { grid-area:wv; }
body.waveh-s .lane:not(.off) .lanenums { grid-column:2; }
.editstrip .fade:hover { background:repeating-linear-gradient(90deg, color-mix(in oklab, var(--note-yellow) 45%, transparent) 0 3px, transparent 3px 6px); }
.editstrip .h:hover { filter:brightness(1.2); }
.cv canvas { display:block; }
.editsum .clear:hover { border-color:var(--accent-2); color:var(--accent-2); }
.editsum a.dl { text-decoration:none; }
.transport-wrap.resizing { user-select:none; }
.tb.toggle.on, .theight .tb.on, .waveh .tb.on, .mkx-bar .tb.on {
box-shadow:0 0 0 1px var(--ember), 0 0 18px var(--ember), inset 0 1px 0 rgba(255,255,255,.18); }
.k.tile.in:hover { box-shadow:0 0 0 1px var(--ember), 0 0 26px var(--ember), inset 0 1px 0 rgba(255,255,255,.22); }
.lanehead .rot:not(.off) { box-shadow:0 0 0 1px var(--ember), 0 0 14px var(--ember-soft), inset 0 1px 0 rgba(255,255,255,.18); }
.win-t.on.sent { box-shadow:inset 0 0 0 1px var(--accent-2), 0 0 0 1px var(--ember), 0 0 18px var(--ember); }
.roster .r.on, .blind-row.active, .tourney-pair .tb.playing, .ro.placed, .res .row.top {
box-shadow:0 0 16px var(--ember-soft); }
.win-play:hover { background:radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent-2) 60%, var(--accent-2)); }
/* ---------- 5. The library page ----------
The landing page never had rules of its own: it ran on the shared components
plus whatever section 4 carried over from the old sheet. Session 010, every
value his pick off a served mockup on the real page. Live was kept for the
quota bar's housing, the drop region and the cards; what follows is only what
he asked to change on top of Live, plus two fixes and one responsive break.
`.cards`, `.drop` and `.newrel` appear on the library and nowhere else. */
/* The quota meter: 6px/34rem became 11px/53.125rem, and the glow is real now.
`.rbar, .heldbar` above sets `overflow: hidden`, which was CLIPPING the fill's
box-shadow to the inside of the frame - three layers of glow painting into the
black of the unfilled track and nowhere else, which is why tuning the shadow
could never have fixed it. Unclipping is the fix. The fill then needs its own
radius, because the clip was what rounded it, and the track takes the same
radius so the two agree at a full disc. `.rbar` keeps the shared rule: it
lives inside a card, where none of this applies. */
.heldbar { height: 11px; max-width: 53.125rem; overflow: visible; border-radius: var(--r-pill); }
.heldbar i { border-radius: var(--r-pill);
box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 95%, transparent),
0 0 20px color-mix(in oklab, var(--ok) 70%, transparent),
0 0 44px color-mix(in oklab, var(--ok) 40%, transparent); }
/* Tight keeps its own colour, so the glow follows the accent rather than staying
green over a hot bar. */
.held.tight .heldbar i {
box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 95%, transparent),
0 0 20px color-mix(in oklab, var(--accent) 70%, transparent),
0 0 44px color-mix(in oklab, var(--accent) 40%, transparent); }
/* The drop region breathes: a very subtle bloom at the centre in the Start it
colour, slow. It sits under the copy, and the region clips it so the dashed
shape stays exact. */
.drop { position: relative; overflow: hidden; }
.drop > * { position: relative; z-index: 1; }
.drop::after { content: ""; position: absolute; left: 50%; top: 50%;
width: 40rem; height: 15rem; border-radius: 50%;
background: radial-gradient(closest-side,
color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%);
filter: blur(20px); pointer-events: none; z-index: 0;
animation: drop-breathe 7s ease-in-out infinite; }
@keyframes drop-breathe {
0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.9); }
50% { opacity: .64; transform: translate(-50%, -50%) scale(1.06); }
}
/* A viewer who has asked the system for less motion gets the bloom held still
rather than removed, so the region still reads the same. */
@media (prefers-reduced-motion: reduce) {
.drop::after { animation: none; opacity: .45; transform: translate(-50%, -50%); }
}
/* The bloom rests, paused where it is, while the region is off the screen
(upload.js sets the class). Running, it kept a phone re-layering the whole
page every frame, even scrolled far down among the releases (owner pick C,
2026-10-15). */
.drop.drop-rest::after { animation-play-state: paused; }
/* The library's two headings were picking up the set page's section-lane ROW
component: display:flex, weight 400, indented out of line with everything
else, and lighting up on hover. `main >` reaches only these two: the set
page's rows are built into #sections-list by player.js, never as a direct
child of main. */
main > .sec { display: block; padding: 0 0 var(--sp-2); margin: var(--sp-6) 0 var(--sp-3);
border-bottom: 1px solid var(--line);
font: 600 var(--t-xs) var(--mono); letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--faint); }
main > .sec:hover { background: none; }
/* The library's Sets section folds away whole (owner, 2026-10-08): its
heading is the button, and lookboot.js sets data-sets-fold before paint. */
.secfold { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; border-radius: 0;
background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; }
.secfold:hover { color: var(--fg); }
.secfold-chev { width: 16px; height: 16px; fill: currentColor; flex: none; transition: transform .15s; }
.secfold-say { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.secfold-shut { display: none; }
html[data-sets-fold="shut"] #sets-body, html[data-sets-fold="shut"] .secfold-open { display: none; }
html[data-sets-fold="shut"] .secfold-shut { display: inline; }
html[data-sets-fold="shut"] .secfold-chev { transform: rotate(-90deg); }
/* Responsive. Measured at 390, 768 and 1024: no horizontal scroll at any of
them, so the page was broadly responsive already. The one real break was the
Start it button - `.newrel` is a nowrap flex row and the button had no flex
floor, so it was squeezed under its own label and broke onto two lines. */
.newrel button { flex: none; white-space: nowrap; }
@media (max-width: 700px) {
/* 32px each side on a 366px column left the copy in a 302px gutter. */
.drop { padding: var(--sp-5) var(--sp-4); }
}
/* Rejoining an existing set. A draft whose files carry ids that already belong
to a set says so before Create is pressed, because the moment to choose is
before the second set exists (owner's pick C, 2026-09-03). Matching is on the
generator's own source id and never on the title (DECISIONS 025). */
.rejoin { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: var(--r-2); background: var(--ember-wash); }
.rejoin .rejoin-line { flex: 1 1 22rem; min-width: 0; }
.rejoin b { display: block; color: var(--fg-strong); }
.rejoin .rejoin-why { color: var(--dim); font-size: var(--t-sm); }
.rejoin .rejoin-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* ---------- The space sheet ----------
Clicking the quota block opens a breakdown of what is holding the space, and
removes a file from it (DECISIONS 025). Prefix `qs-` because `.sheet`,
`.panel`, `.note` and `.bar` are all taken. Every column is a FIXED track and
nothing wraps: sized from content, a long chip in one row moved that row's
columns out of line with every other row, because each row is its own grid.
The whole `.held` block is the target, not the 11px bar alone: an 11px-tall
hit area is a defect, and the sentence under it is part of the same thought. */
/* A cursor and a hover wash are only visible once the mouse is already there,
so the block says what it is before you get to it (owner's pick, 2026-09-03).
Wide enough that the 53.125rem meter inside keeps its full width. */
.held { cursor: pointer; max-width: 56rem; margin: 0 0 var(--sp-5);
padding: var(--sp-3) var(--sp-4); border-radius: var(--r-3);
background: var(--glass); background-color: var(--panel);
border: 1px solid var(--line); box-shadow: var(--gloss);
transition: border-color var(--dur) var(--ease); }
.held:hover { border-color: var(--accent-2); }
.held .qhint { display: block; margin-top: 2px; color: var(--accent-2); font-size: var(--t-sm); }
.held:hover .qhint { text-decoration: underline; }
.qsheet { position: fixed; inset: 0; z-index: 60; display: flex;
align-items: center; justify-content: center; padding: var(--sp-5); }
.qs-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.qs-panel { position: relative; display: flex; flex-direction: column;
width: min(70rem, 96vw); max-height: 88vh;
background: var(--glass); background-color: var(--panel);
border: 1px solid var(--line); border-radius: var(--r-4);
box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--gloss); }
.qs-head { display: flex; align-items: baseline; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.qs-head h3 { margin: 0; font-size: var(--t-lg); color: var(--fg-strong); }
.qs-head .qs-of { color: var(--dim); font: var(--t-sm) var(--mono); }
.qs-head .qs-close { margin-left: auto; }
.qs-meter { height: 11px; border-radius: var(--r-pill); background: var(--bg-deep);
border: 1px solid var(--line); margin: 0 var(--sp-5) var(--sp-3); overflow: visible; }
.qs-meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ok);
box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 95%, transparent),
0 0 20px color-mix(in oklab, var(--ok) 70%, transparent),
0 0 44px color-mix(in oklab, var(--ok) 40%, transparent); }
/* Where the space actually goes, in one line. Ten lossless files being four
fifths of a disc is not something any per-row reading makes obvious. */
.qs-split { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
margin: 0 var(--sp-5) var(--sp-3); font: var(--t-sm) var(--mono); color: var(--dim); }
.qs-split b { color: var(--fg-strong); }
.qs-split .qs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: 0; }
.qs-split .qs-dot.lossless { background: var(--ok); }
.qs-split .qs-dot.lossy { background: var(--faint); }
.qs-verdict { margin: 0 var(--sp-5) var(--sp-4); padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: var(--r-2); background: var(--ember-wash); color: var(--fg); font-size: var(--t-sm); }
.qs-verdict b { color: var(--fg-strong); }
.qs-verdict .qs-why { display: block; color: var(--dim); margin-top: var(--sp-1); }
.qs-verdict.qs-clear { border-left-color: var(--ok);
background: color-mix(in oklab, var(--ok) 7%, transparent); }
.qs-rows { overflow-y: auto; overflow-x: hidden; padding: 0 var(--sp-5) var(--sp-3); }
/* The set carries its own totals once, instead of on every row. Sticky, so it
stays true while its rows scroll. */
.qs-set { position: sticky; top: 0; z-index: 1; padding: var(--sp-3) 0 var(--sp-2);
background-color: var(--panel); border-bottom: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline; }
.qs-set b { font-size: var(--t-md); color: var(--fg-strong); }
.qs-set .qs-setnums { font: var(--t-sm) var(--mono); color: var(--dim); }
.qs-row { display: grid; gap: var(--sp-3); align-items: center;
grid-template-columns: minmax(10rem, 1fr) 5rem 7.5rem 6rem 5rem 5.5rem 3.6rem 8.5rem;
padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); }
.qs-row > * { min-width: 0; white-space: nowrap; }
.qs-row:last-child { border-bottom: 0; }
.qs-nm b { display: block; color: var(--fg); font-weight: 600; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; }
.qs-nm .qs-sub { color: var(--faint); font: var(--t-xs) var(--mono); line-height: 1.2; }
.qs-size { text-align: right; }
.qs-size b { font: 700 var(--t-sm) var(--mono); color: var(--fg-strong); }
.qs-share { height: 3px; border-radius: var(--r-pill); background: var(--line-soft); margin-top: 4px; }
.qs-share i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent);
box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 60%, transparent); }
.qs-fmt { font: 600 var(--t-xs) var(--mono); border: 1px solid var(--line); color: var(--dim);
border-radius: var(--r-1); padding: 1px 6px; text-align: center; }
.qs-fmt.qs-lossless { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.qs-rot, .qs-marks { font: var(--t-xs) var(--mono); color: var(--dim);
overflow: hidden; text-overflow: ellipsis; }
.qs-rot.qs-in { color: var(--ok); }
.qs-stars { font-size: var(--t-sm); color: var(--line); letter-spacing: .04em; white-space: nowrap; }
.qs-stars .on { color: var(--gold); }
.qs-marks .p { color: var(--ok); font-weight: 700; }
.qs-marks .m { color: var(--bad); font-weight: 700; }
.qs-marks .z { color: var(--faint); }
.qs-held { font: 700 var(--t-xs) var(--mono); border-radius: var(--r-1); padding: 1px 6px;
text-align: center; background: var(--accent); color: var(--on-accent); }
.qs-act { text-align: right; }
.qs-act .tb { padding: 4px 10px; font-size: var(--t-xs); }
.qs-act .asking { display: inline-flex; gap: var(--sp-1); align-items: center; }
.qs-row[data-state="gone"] { opacity: .5; }
.qs-row[data-state="gone"] .qs-nm b { text-decoration: line-through;
text-decoration-color: var(--faint); }
.qs-foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); }
.qs-foot .qs-note { color: var(--faint); font-size: var(--t-xs); flex: 1 1 16rem; }
.qs-foot .qs-freed { color: var(--ok); font: 600 var(--t-sm) var(--mono); }
@media (max-width: 820px) {
.qs-panel { width: 100%; max-height: 92vh; }
.qs-row { grid-template-columns: 1fr 5rem 7.5rem 8.5rem; row-gap: var(--sp-1); }
.qs-nm { grid-column: 1 / -1; }
.qs-head, .qs-verdict, .qs-rows, .qs-foot, .qs-split { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.qs-meter { margin-left: var(--sp-4); margin-right: var(--sp-4); }
}
/* The Load button is the one thing you came to the set page to press, and at
190x30 in 12px it did not look like it (owner, 2026-09-03). Larger only: the
blue was served beside it and not taken, so it keeps the look's own accent
and no sixth look-independent colour was introduced. */
#start { font-size: var(--t-lg); padding: var(--sp-4) var(--sp-7);
border-radius: var(--r-4); letter-spacing: .01em; }
/* Glass paints the primary fill at weight 800 on a bright gradient. At this
size the label shouted, so it is lighter under that look alone (owner). */
html[data-look="glass"] #start { font-weight: 600; }
/* ---------- The note menu ----------
Right-click a note, in the strip or in the list (owner's pick B, 2026-09-04).
`.menu` belongs to the look control, so this is `.notemenu` and everything
under it is namespaced `nm`. The items carry a class, so the primary fill
(`button:not([class])`) never reaches them and the hover has to be stated
here, above the bare button rule it would otherwise lose to. */
.notemenu { position: fixed; z-index: 40; min-width: 13rem; padding: 4px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3);
box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.notemenu .nmhead { padding: var(--sp-1) var(--sp-2) 6px; margin-bottom: 4px;
border-bottom: 1px solid var(--line-soft); }
.notemenu .nmhead .at { font: 600 var(--t-sm) var(--mono); color: var(--cool); margin-right: var(--sp-2); }
.notemenu .nmhead .who { color: var(--dim); font-size: var(--t-xs); }
.notemenu .nmhead .body { display: block; margin-top: 2px; color: var(--fg); font-size: var(--t-sm);
max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notemenu .nmitem { display: block; width: 100%; text-align: left; background: transparent;
border: 1px solid transparent; border-radius: var(--r-1); color: var(--fg);
font: 500 var(--t-sm)/1.2 var(--font); padding: 6px var(--sp-2); box-shadow: none; }
.notemenu .nmitem:hover:not(:disabled) { background: var(--ember-wash); border-color: var(--line);
color: var(--fg); box-shadow: none; }
.notemenu .nmitem:disabled { opacity: .4; cursor: default; }
.notemenu .nmitem.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad);
background: rgba(255,107,107,.10); }
.notemenu .nmsep { height: 1px; background: var(--line-soft); margin: 4px 2px; }
.notemenu .asking { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 4px var(--sp-2); }
html[data-look="glass"] .notemenu { border-radius: 16px; }
/* -- accounts (DECISIONS 028; mockups/accounts.html, his picks A/A/A) -------- */
.waitfor { color: var(--accent-2); font-family: var(--mono); }
.joinpanel { border: 1px solid var(--accent); border-radius: 6px; padding: .8rem 1rem; margin-top: 1rem; background: var(--panel); max-width: 56rem; }
.joinform { display: flex; gap: .6rem; align-items: end; max-width: none; }
.joinform label { flex: 1; margin: 0; }
.fear { border-left: 3px solid var(--accent); padding: .4rem .8rem; margin: .8rem 0 0; color: var(--fg); font-size: .88rem; line-height: 1.5; }
.pp { font: 600 1.15rem var(--mono); color: var(--fg-strong); letter-spacing: .02em; padding: .7rem .9rem; border: 1px solid var(--accent); border-radius: var(--r-2); background: var(--panel-2); user-select: all; }
.acct h4 { margin: 1.2rem 0 .3rem; font-size: .9rem; }
.acct .row { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; font-size: .85rem; }
.acct .row label { margin: 0; }
.acct .row input { width: 18rem; }
.del-ask { margin-top: .5rem; border: 1px solid var(--bad); border-radius: 6px; padding: .7rem .9rem; background: var(--panel-2); }
/* A judge is not offered what only the set's owner may do (audit B5.1). */
body.role-judge .owner-only { display: none !important; }
.invites { border-collapse: collapse; font-size: .82rem; max-width: 56rem; width: 100%; margin-top: .6rem; }
.invites td, .invites th { border-bottom: 1px solid var(--line-soft); padding: .3rem .5rem; text-align: left; vertical-align: middle; }
.invites th { color: var(--dim); font-weight: 600; font-size: .76rem; }
.invites tr.running td { color: var(--accent-2); }
/* -- the header's own controls (owner pick C, 2026-09-04; header.js) ---------- */
.hdracts { margin-left: auto; align-self: center; display: flex; gap: 8px; font-size: var(--t-sm); }
.hdracts + .lookctl { margin-left: 0; }
.sharewrap { position: relative; display: inline-block; }
.whopill { display: inline-flex; align-items: center; gap: 8px; }
.whopill i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.whomenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; padding: 6px; border-radius: var(--r-3);
background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.6), var(--gloss); display: flex; flex-direction: column; gap: 2px; }
.whomenu[hidden] { display: none; }
.whomenu a, .whomenu button { display: flex; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--fg);
padding: 7px 10px; border-radius: var(--r-2); font: 600 var(--t-sm) var(--font); cursor: pointer; box-shadow: none; text-decoration: none; }
.whomenu a:hover, .whomenu button:hover { background: var(--ember-wash); border-color: var(--line); }
.sharepop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 30rem; max-width: 90vw; padding: .7rem .8rem .8rem; border-radius: var(--r-3);
background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.6), var(--gloss); text-align: left; }
.sharepop[hidden] { display: none; }
.sharepop .lnk { font: 600 .9rem var(--mono); color: var(--fg-strong); padding: .5rem .6rem; border: 1px solid var(--accent); border-radius: var(--r-2);
background: var(--panel-2); user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sharepop .row { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.sharepop .row input { flex: 1; margin: 0; }
.sharepop .tiny { margin: .4rem 0 0; }
html[data-look="glass"] .whomenu, html[data-look="glass"] .sharepop { border-radius: 16px; }
body.role-judge .editstrip { display: none; } /* trim and fades are the owner's */
body.role-judge .rowlane { pointer-events: none; } /* the boundary handles too */
body.role-judge .sec .del { display: none; } /* and deleting a section */
.stars.ro .star { cursor: default; }
.rot.ro { cursor: default; }
body.role-judge #btn-sidecar, body.role-judge #bulk, body.role-judge #btn-bulk { display: none; } /* the sheet writing tools */
/* who a set is shared with, in words (owner pick A, 2026-09-04), and the
strip it sits in along a library card's foot (owner pick B, same day) */
.who-line { color: var(--dim); font-size: var(--t-sm); margin: .35rem 0 0; }
.who-line b { color: var(--fg); font-weight: 600; }
.who-line .open { color: var(--accent-2); }
.sub + .who-line { margin: -.4rem 0 var(--sp-4); }
.pill.rel { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2) 45%, transparent); }
/* A render into a release, from its lane (owner pick A, 2026-09-04) */
.torel { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.lanehead .torel { grid-column: 1 / -1; } /* its own row: the grid cell folded the labels */
.torel .tb { font-size: .7rem; padding: 1px .45rem; line-height: 1.3; white-space: nowrap; } /* one line each (owner, 2026-09-06) */
.torel-said { color: var(--ok); font-size: .75rem; }
.torel-said a { color: var(--ok); text-decoration: underline; }
.relmenu { position: absolute; z-index: 40; min-width: 16rem; padding: 6px; border-radius: var(--r-3);
background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.6), var(--gloss);
display: flex; flex-direction: column; gap: 2px; }
.relmenu[hidden] { display: none; }
.relmenu .hd { padding: .25rem .5rem .4rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
color: var(--dim); font-size: var(--t-xs); }
.relmenu button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: transparent;
border: 1px solid transparent; color: var(--fg); padding: 6px 9px; border-radius: var(--r-2);
font: 600 var(--t-sm) var(--font); cursor: pointer; box-shadow: none; }
.relmenu button:hover { background: var(--ember-wash); border-color: var(--line); }
.relmenu button.on { color: var(--ok); }
.relmenu button .sub2 { margin-left: auto; color: var(--dim); font-weight: 400; font-size: var(--t-xs); }
.relmenu .sep { height: 1px; background: var(--line-soft); margin: 4px 2px; }
.picklist .stars2 { color: var(--accent); letter-spacing: 1px; font-size: .8rem; }
.picklist .stars2 .off { color: var(--faint); }
.picklist .pickrow.gone { opacity: .5; }
/* ---------- The Cover Lab and the share page (DECISIONS 029) ---------- */
/* .cover is a 34px thumb elsewhere, so the stage is stg-, the Lab cl-, the share page sh-. */
.stg-covers { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: var(--sp-4) 0; }
.stg-covers.n1 { grid-template-columns: minmax(220px, 520px); }
.stg-covers.n2 { grid-template-columns: repeat(2, minmax(220px, 420px)); }
.stg-cover { margin: 0; position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.stg-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--panel-2); display: block;
box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.stg-cover.mine img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 12px 30px rgba(0,0,0,.45), 0 0 26px var(--ember-soft); }
.stg-cover.chosen img { border-color: var(--ok); }
.stg-cover figcaption { color: var(--dim); visibility: hidden; }
.stg-cover figcaption.seen { visibility: visible; }
.stg-cover .stg-chosen { color: var(--ok); font-weight: 600; }
.stg-pick { align-self: flex-start; }
.stg-cover.mine .stg-pick { border-color: var(--accent); color: var(--accent); }
.stg-tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* Crop a cover (owner pick A, 2026-09-20): the sheet under the stage. */
.crop-sheet { border: 1px solid var(--line); border-radius: var(--r-4); background: var(--glass); padding: var(--sp-5); max-width: 64rem; margin: var(--sp-4) 0; box-shadow: var(--gloss), 0 20px 50px rgba(0,0,0,.45); }
.crop-sheet h4 { margin: 0 0 .5rem; }
.crop { display: grid; grid-template-columns: minmax(280px, 520px) 220px; gap: var(--sp-5); align-items: start; }
.crop-frame { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: var(--r-3); border: 1px solid var(--accent); background: var(--panel-2); cursor: grab; touch-action: none;
box-shadow: 0 0 0 2px var(--accent), 0 12px 30px rgba(0,0,0,.45); }
.crop-frame.dragging { cursor: grabbing; }
.crop-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crop-frame .thirds { position: absolute; inset: 0; pointer-events: none; background:
linear-gradient(to right, transparent 33.3%, rgba(255,255,255,.18) 33.3%, rgba(255,255,255,.18) calc(33.3% + 1px), transparent calc(33.3% + 1px), transparent 66.6%, rgba(255,255,255,.18) 66.6%, rgba(255,255,255,.18) calc(66.6% + 1px), transparent calc(66.6% + 1px)),
linear-gradient(to bottom, transparent 33.3%, rgba(255,255,255,.18) 33.3%, rgba(255,255,255,.18) calc(33.3% + 1px), transparent calc(33.3% + 1px), transparent 66.6%, rgba(255,255,255,.18) 66.6%, rgba(255,255,255,.18) calc(66.6% + 1px), transparent calc(66.6% + 1px)); }
.crop-side { display: flex; flex-direction: column; gap: .6rem; }
.crop-side label { font: var(--t-xs) var(--mono); color: var(--dim); display: block; }
.crop-side input[type=range] { width: 100%; }
.crop-side .preview { width: 150px; height: 150px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--panel-2); display: block; }
.crop-side .readout { font: var(--t-xs) var(--mono); color: var(--dim); line-height: 1.6; } .crop-side .readout b { color: var(--fg); }
.crop-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 50rem) { .crop { grid-template-columns: 1fr; } }
.stg-add { aspect-ratio: 1; border: 1px dashed var(--line); border-radius: var(--r-3); display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-1); color: var(--dim); cursor: pointer; text-align: center; }
.stg-add:hover, .cl-stage.over .stg-add { border-color: var(--accent); color: var(--accent); }
.stg-add .big { font-size: 2rem; line-height: 1; }
.cl-stage { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-4); padding: var(--sp-6); max-width: 64rem; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.cl-stage.over { border-color: var(--accent); }
.cl-track select { margin-left: var(--sp-2); background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-2); padding: 4px 6px; }
.cl-share { max-width: 64rem; margin-top: var(--sp-5); }
.cl-share h4 { margin: 0 0 var(--sp-2); }
.cl-make input { flex: 1 1 16rem; }
.cl-shares { margin-top: var(--sp-4); } .cl-shares tr.gone td { color: var(--faint); }
.sh-player { margin-top: var(--sp-5); }
/* The release page's player (owner pick A, 2026-09-18): the same player,
between the plate and the tracks, on a shorter wave; a row is a pick. */
.tracklist li[data-listen] { cursor: pointer; } .tracklist li[data-listen]:hover .nm { color: var(--accent-2); }
.tracklist li.now .nm, .tracklist li.now::before { color: var(--accent); }
/* Share this release (2026-09-20): the Lab's maker, under the sleeve. */
.relshare { max-width: 64rem; margin-top: var(--sp-5); }
.relshare .rs-make { display: flex; gap: .6rem; align-items: center; } .relshare .rs-make input { flex: 1; }
.relshare #rs-link { margin-top: .6rem; }
/* Dressing a link (owner pick B, 2026-10-03): the box holds two frames side by
side in the page, the share's player (sharepreview.js) and the controls
(sharedress.js), never one inside the other (Firefox refuses a nested
frame's files under the page's policy). The controls' frame is see-through,
so the box shows through it; each sizes itself to what it holds. */
.relshare .rs-dress { display: block; width: 100%; height: 110px; border: 0; margin: 0; background: transparent; }
.relshare .rs-redress { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .7rem 0;
border: 1px dashed var(--accent); border-radius: var(--r-4); padding: .5rem .8rem; font-size: var(--t-sm); }
body.dressframe { background: transparent; }
/* flow-root keeps the last row's margin inside #dress, where the frame measures it. */
.dressframe #dress { display: flow-root; }
.relshare .rs-prev { display: block; width: 100%; height: 272px; border: 1px solid var(--line); border-radius: var(--r-4); box-sizing: border-box; }
.dressframe .rs-row, .relshare .rs-row { position: relative; display: flex; gap: .6rem .8rem; align-items: center; flex-wrap: wrap; margin: .7rem 0; }
.dressframe .rs-lab, .relshare .rs-lab { font: 600 var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--dim); min-width: 9.5rem; }
.dressframe .rs-view { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
/* The sheet hangs from its row, not its button, so on a phone it fits the frame. */
.dressframe .look-pop { position: static; }
.dressframe .look-sheet { left: 0; width: min(430px, 100%); box-sizing: border-box; }
body.previewframe { margin: 0; padding: 16px 20px; }
.relshare #rs-shares td .tb { white-space: nowrap; }
@media (max-width: 600px) { .dressframe .rs-lab, .relshare .rs-lab { flex-basis: 100%; } }
.invites tr.gone td { color: var(--faint); }
.sh-wave { height: 140px; cursor: pointer; }
body.sharepage main.sh-main { max-width: 64rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-8); }
body.sharepage .relby { margin-bottom: var(--sp-3); }
.sh-foot { margin-top: var(--sp-7); }
/* ---------- The sleeve, front and center (owner picks D and C, 2026-09-29) ---------- */
/* One layout at two widths, on the release page and its share alike: the
spine (D) on a screen 1000 px or wider, the poster (C) below that. One DOM
for both, because the player's ids must be unique; the width only moves and
hides parts. The label shows once in each form: above the title in D, in
the hairline credit line in C. rv- was unused when this was written. */
.rv-sleeve { display: grid; grid-template-columns: minmax(280px, 560px) 58px minmax(0, 1fr); grid-template-rows: auto 1fr;
gap: 0 var(--sp-6); align-items: start; max-width: 1500px; }
.rv-sleeve .rv-cover { grid-row: 1; position: relative; border-radius: var(--r-2); overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.rv-sleeve .rv-cover img { display: block; width: 100%; height: auto; }
.rv-sleeve .rv-cover.rv-none { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--dim); font-size: var(--t-sm); }
.rv-sleeve .rv-cover.over { border-color: var(--accent); }
.rv-spine { grid-row: 1; align-self: stretch; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--panel-2);
writing-mode: vertical-rl; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; overflow: hidden;
font: 600 var(--t-sm) var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.rv-spine .rv-sp-cat { color: var(--accent); }
.rv-face { grid-row: 1 / 3; grid-column: 3; position: relative; min-width: 0; }
.rv-ghost { position: absolute; top: -18px; right: 0; font: 700 clamp(70px, 10vw, 180px) var(--mono); letter-spacing: -.02em; line-height: 1;
color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; white-space: nowrap; }
.rv-toplabel { position: relative; font-size: var(--t-md); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); min-height: 1.2em; }
/* The title never breaks inside a word: ui/fittitle.js steps the size down until the longest word fits. */
.rv-title { position: relative; margin: 70px 0 12px; font-size: clamp(40px, 5vw, 88px); font-weight: 800; text-transform: uppercase;
letter-spacing: .01em; line-height: .98; color: var(--fg-strong); overflow-wrap: normal; }
.rv-artist { position: relative; margin: 0; font-size: clamp(20px, 2vw, 30px); font-weight: 600; color: var(--fg); }
.rv-line { position: relative; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.rv-idline .rv-label { display: none; }
.rv-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rv-cat { display: inline-block; font: 600 var(--t-md) var(--mono); letter-spacing: .08em; color: var(--accent);
border: 1px solid var(--accent); border-radius: var(--r-1); padding: 3px 10px; }
.rv-cat.rv-missing { color: var(--faint); border-color: var(--line); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: var(--t-sm); }
.rv-eyebrow { color: var(--dim); font: 600 var(--t-sm) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rv-edit { font: var(--t-xs) var(--mono); }
.rv-body .rel-player { margin: var(--sp-5) 0 var(--sp-4); } .rv-body .rel-player .win-wave { height: 120px; }
.rv-body .rbar { margin-top: 1rem; max-width: none; }
.rv-body .smallprint { margin-top: var(--sp-5); }
.rv-warn { margin: var(--sp-4) 0 0; }
.rv-sleeve .fromtr { color: var(--dim); } .rv-sleeve .fromtr small, .rv-sleeve .facts small { font-size: .72rem; color: var(--faint); margin-left: .3rem; }
.rv-sleeve .use { color: var(--accent-2); font-size: .78rem; margin-left: .3rem; }
.rv-sleeve .fromtracks { border-top: 1px solid var(--line-soft); margin-top: .8rem; padding-top: .2rem; }
.rv-sleeve .fromtracks .lbl { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; display: block; margin: .6rem 0 .3rem; }
.rv-sleeve .facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .3rem 0 0; font-size: .82rem; }
.rv-sleeve .facts dt { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: .2em; } .rv-sleeve .facts dd { margin: 0; }
.rv-after { margin-top: var(--sp-6); }
/* The quiet toolbar (owner pick, 2026-09-29): the same buttons in one row; the three that act on the whole release sit right. */
.toolbar.rv-quiet { gap: 6px; align-items: center; }
.toolbar.rv-quiet .tb { padding: 4px 11px; font-size: var(--t-sm); }
.toolbar.rv-quiet .rv-push { margin-left: auto; }
/* The share page is as wide as the release page now, so a laptop sees the whole spine. */
body.sharepage main.sh-main.rv-main { max-width: 1500px; }
@media (max-width: 999px) {
.rv-sleeve { display: block; max-width: 780px; margin: 0 auto; text-align: center; }
.rv-sleeve .rv-cover { width: min(620px, 100%); margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 90px var(--ember-wash); }
.rv-spine, .rv-ghost, .rv-toplabel { display: none; }
.rv-title { margin: 36px 0 12px; font-size: clamp(34px, 6vw, 96px); }
.rv-artist { font-size: clamp(20px, 2.2vw, 30px); }
.rv-line { display: block; margin-top: 26px; }
.rv-idline { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 620px; margin: 0 auto 8px; }
.rv-idline::before, .rv-idline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rv-idline .rv-label { display: inline; text-transform: uppercase; letter-spacing: .12em; font-size: var(--t-sm); font-weight: 600; color: var(--fg); }
.rv-meta { justify-content: center; gap: 8px; }
.rv-eyebrow { font: var(--t-sm) var(--font); letter-spacing: 0; text-transform: none; }
.rv-body { text-align: left; margin-top: var(--sp-6); }
}
/* ---------- Order: the lanes fold while they are sorted (owner pick B, 2026-09-04) ---------- */
/* .grip is the roster's (table.roster .grip); the lane's own is .lanegrip so neither rule leaks. */
.lanegrip, .lanearrows { display: none; }
body.ordering .lane { grid-template-columns: auto 44px 1fr auto; align-items: center; padding: 3px 8px; }
body.ordering .lanegrip { display: block; color: var(--faint); cursor: grab; font: 600 14px var(--mono); padding: 0 4px; }
body.ordering .lane.dragging { opacity: .35; }
body.ordering .lanewave, body.ordering .lanenums, body.ordering .lanechips .torel-open, body.ordering .lane-clear, body.ordering .editsum { display: none !important; }
body.ordering .lanearrows { display: flex; flex-direction: column; gap: 2px; }
body.ordering .lanearrows .tb { padding: 0 6px; font-size: 10px; line-height: 16px; }
body.ordering .lane .k.tile { width: 28px; height: 28px; } body.ordering .lane .k.tile b { font-size: 12px; }
/* Out-of-rotation lanes stay out of the list (owner, 2026-09-04): they keep
their place among the others and are posted with it, unseen. */
body.ordering .lane.off { display: none; }
/* Move (DECISIONS 035, 2026-09-20): Re-arrange's fold with a tick box each. */
.movepick { display: none; }
body.movemode .lane { grid-template-columns: auto auto 44px 1fr auto; align-items: center; padding: 3px 8px; }
body.movemode .lanegrip { display: none; }
body.movemode .movepick { display: inline-block; width: 16px; height: 16px; accent-color: var(--accent); }
body.movemode .lane.picked { background: color-mix(in oklab, var(--accent) 10%, transparent); }
body.movemode .lanewave, body.movemode .lanenums, body.movemode .lanechips, body.movemode .laneclock, body.movemode .torel, body.movemode .lane-clear, body.movemode .editsum, body.movemode .lanearrows, body.movemode .vox, body.movemode .lanewho .cover { display: none !important; }
body.movemode .lanewho { display: flex !important; min-width: 12rem; } body.movemode .lanename { display: inline !important; }
body.movemode .lanehead { display: flex; align-items: center; gap: var(--sp-3); }
body.movemode .rating-cell .rot { display: none; }
body.movemode .lane .k.tile { width: 28px; height: 28px; } body.movemode .lane .k.tile b { font-size: 12px; }
.movedest { display: inline-flex; gap: .8rem; align-items: center; flex-wrap: wrap; font: var(--t-xs) var(--mono); color: var(--dim); }
.movedest input[type=text] { width: 12rem; }
.lane.leaving { opacity: .55; }
.relmenu.setmenu .new { display: flex; gap: .4rem; padding: .3rem 0 0; } .relmenu.setmenu .new input { flex: 1; }
/* ---------- Keybinds (owner pick A, 2026-09-04): the header button and its popover ---------- */
/* .k, .key, .kb and kbd are taken elsewhere, so everything here is kbd-. */
/* The sheet is centred under its button and kept on the window; keybinds.js
sets the left on open, against the header as the positioning box (owner,
2026-09-07). Anchoring it to the button's right edge ran it off the window
once Docs and Admin pushed the button to mid-header. */
.kbd-home { position: static; align-self: center; font-size: var(--t-sm); margin-left: auto; }
.hdracts + .kbd-home { margin-left: 0; } .kbd-home + .lookctl { margin-left: 0; }
.kbd-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-4);
padding: 14px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5); width: max-content; max-width: min(96vw, 1300px); }
.kbd-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; } .kbd-head b { font-size: .95rem; }
.kbd-body { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.kbd-wrap { display: flex; gap: 12px; align-items: flex-end; }
.kbd-board { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-deep); }
.kbd-row { display: flex; gap: 5px; } .kbd-row.fn { margin-bottom: 6px; } .kbd-row.fn .kbd-key { height: 28px; font-size: 11px; }
.kbd-row.fn .kbd-key:first-child { margin-right: 25px; }
.kbd-key { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); display: flex; flex-direction: column; align-items: center; justify-content: center;
font: 600 13px var(--mono); color: var(--fg); }
.kbd-key small { font: 9px var(--font); color: var(--faint); line-height: 1; margin-top: 2px; text-align: center; max-width: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbd-key.mod, .kbd-key.dim { color: var(--dim); font-weight: 500; font-size: 11px; } .kbd-key.blank { border-color: transparent; background: transparent; }
.kbd-key.on { border-color: var(--accent); color: var(--fg-strong); background: var(--ember-wash); box-shadow: 0 0 10px var(--ember-soft); font-size: 13px; font-weight: 600; } .kbd-key.on small { color: var(--accent-2); }
.kbd-key.render { border-color: var(--ok); } .kbd-key.render small { color: var(--ok); }
.kbd-key.varies { border-style: dashed; }
.kbd-board.arrows { display: grid; grid-template-columns: repeat(3, 40px); grid-auto-rows: 40px; gap: 5px; }
.kbd-board.arrows .kbd-key { width: auto; height: auto; }
.kbd-board.numpad { display: grid; grid-template-columns: repeat(4, 40px); grid-auto-rows: 40px; gap: 5px; }
.kbd-board.numpad .kbd-key { width: auto; height: auto; } .kbd-board.numpad .kbd-key.tall { grid-row: span 2; } .kbd-board.numpad .kbd-key.zero { grid-column: span 2; }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: .8rem; align-content: start; min-width: 18rem; }
.kbd-list .grp { grid-column: 1 / -1; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: .5rem; }
.kbd-list kbd { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: var(--fg-strong); white-space: nowrap; }
.kbd-note { max-width: 48rem; margin: .6rem 0 0; }
/* ---------- Docs (owner pick A, 2026-09-04) ---------- */
.doc { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:2rem; max-width:64rem; }
@media (max-width: 720px) { .doc { grid-template-columns: 1fr; } .doc nav { position: static; } }
.doc nav { position:sticky; top:1rem; align-self:start; font-size:.85rem; }
.doc nav a { display:block; padding:.25rem 0; color:var(--dim); } .doc nav a.on, .doc nav a:hover { color:var(--accent-2); }
.doc nav .grp { color:var(--faint); font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin:.9rem 0 .2rem; }
.doc h3 { margin:1.6rem 0 .4rem; font-size:1.1rem; } .doc h3:first-child { margin-top:0; }
.doc h4 { margin:1.2rem 0 .3rem; font-size:.95rem; color:var(--accent-2); }
.doc p, .doc li { line-height:1.6; font-size:.9rem; max-width:60rem; } .doc ol li { margin:.35rem 0; }
.doc kbd { font:600 11px var(--mono); padding:1px 6px; border:1px solid var(--line); border-radius:4px; background:var(--panel-2); }
.doc .lead { font-size:1.05rem; color:var(--fg-strong); }
.feat { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.8rem; margin:.6rem 0 0; }
.feat .f { border:1px solid var(--line); border-radius:var(--r-3); padding:.7rem .9rem; background:var(--glass); }
.feat .f b { display:block; margin-bottom:.2rem; } .feat .f span { font-size:.82rem; color:var(--dim); line-height:1.5; }
.feat .f small { display:block; margin-top:.3rem; color:var(--faint); font:600 9.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.hdrdocs { align-self: center; font-size: var(--t-sm); }
.kbd-home + .hdrdocs + .lookctl { margin-left: 0; }
/* ---------- The wait after Create (owner, 2026-09-04) ---------- */
.analysing { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); font-size: var(--t-md); font-weight: 600;
color: var(--ok); border: 1px solid var(--ok); border-radius: var(--r-3); background: color-mix(in oklab, var(--ok) 10%, transparent); box-shadow: 0 0 22px color-mix(in oklab, var(--ok) 25%, transparent); }
.analysing .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; animation: analysing-pulse 1.6s ease-in-out infinite; }
@keyframes analysing-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
/* ---------- Placeholder lanes while the worker reads the files (owner, 2026-09-04) ---------- */
.lane.placeholder { opacity: .55; border-style: dashed; }
.lane.placeholder .lanename { color: var(--dim); }
.jobsaid { margin: 0 0 var(--sp-3); }
/* /admin (2026-09-05): the accounts table, the two numbers per account, the pages. */
.adm .invites td { vertical-align: middle; }
.adm-in { width: 4.6rem; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 6px; font: var(--t-sm) var(--mono); text-align: right; }
.adm-acts { white-space: nowrap; } .adm-acts form { display: inline; margin: 0 0 0 .3rem; }
.tb.adm-bad { border-color: var(--bad); color: var(--bad); }
.adm-bar { display: inline-block; width: 6rem; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: .3rem; }
.adm-bar i { display: block; height: 100%; background: var(--accent-2); }
.adm-pages { columns: 3; column-gap: 2rem; font: var(--t-sm) var(--mono); }
.adm-pages div { break-inside: avoid; margin-bottom: .9rem; }
.adm-pages b { display: block; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
.adm-pages a { display: block; color: var(--fg); text-decoration: none; padding: 1px 0; }
.adm-pages a:hover { color: var(--accent); } .adm-pages small { color: var(--dim); }
/* Filters (DECISIONS 032, 033; session 018): a filter on the edit strip, the
summary line under the lane, and the sheet. Every class is flt- so nothing
here shares a look with anything else (.band, .grp and .foot are taken). */
.filtstrip { position: relative; height: 14px; margin-top: 3px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-1); cursor: crosshair; }
.filtstrip.refused { border-color: var(--bad); }
.filtstrip .flt.moving { cursor: grabbing; }
.lane.off .filtstrip, body.role-judge .filtstrip { display: none; } /* as the edit strip: the owner's */
.filtstrip .flt { position: absolute; top: 0; bottom: 0; overflow: hidden; z-index: 1; cursor: grab;
--fill: calc(45% * var(--flt-a, 1)); background: color-mix(in oklab, var(--flt) var(--fill), transparent);
border-left: 2px solid var(--flt-lite); border-right: 2px solid var(--flt-lite); }
.filtstrip .flt.sel { --fill: calc(68% * var(--flt-a, 1)); }
/* S2 as the mockup drew it (owner, 2026-09-09, "the filter strip does not
look like S2"): a 2px tick, 4px at the top and 4px at the bottom with the
middle left clear. The first attempt let the existing 8px grab bar stand in
for it, which is a different shape - a fat bar, not a bracket.
The ELEMENT stays 8px wide and full height so there is still something to
grab; only its paint is the tick. */
.filtstrip .flt-fh { position: absolute; top: 0; bottom: 0; width: 8px; margin-left: -4px; z-index: 2;
background: none; cursor: ew-resize; }
.filtstrip .flt-fh::before, .filtstrip .flt-fh::after {
content: ""; position: absolute; left: 3px; width: 2px; height: 4px; background: var(--flt-lite); }
.filtstrip .flt-fh::before { top: 0; }
.filtstrip .flt-fh::after { bottom: 0; }
.filtstrip .flt-fh:hover::before, .filtstrip .flt-fh:hover::after { height: 6px; filter: brightness(1.25); }
/* The name is a child of the STRIP, not of the span (owner, 2026-09-08: "I
have to be able to read the text behind the handles"). Inside the span it
was inside a z-index:1 stacking context while both kinds of handle are
siblings at z-index:2, so no z-index on the name could ever have lifted it.
Out here it sits above them, and its own dark plate carries it over the
fill, the ramp and a handle alike - the lime measured 3.3:1 on the lighter
violet, which is not enough for 8px type. */
.filtstrip .flt-name { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3;
font: 600 8px var(--mono); color: var(--live); letter-spacing: .06em;
text-transform: uppercase; white-space: nowrap; pointer-events: none;
background: rgba(8, 9, 10, .74); padding: 1px 3px; border-radius: 2px;
overflow: hidden; text-overflow: clip; }
.filtstrip .flt-h { position: absolute; top: -1px; bottom: -1px; width: 8px; margin-left: -4px; cursor: ew-resize; z-index: 2;
background: var(--flt-lite); border-radius: 2px; }
.filtstrip .flt-draw { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
background: color-mix(in oklab, var(--flt) 18%, transparent);
border-left: 1px dashed var(--flt); border-right: 1px dashed var(--flt); }
/* The work-space under the transport (owner, 2026-09-08): the same two strips
the lane has, at the picture's width, for the render being heard. Hidden in
stack view, where the axis is the longest render and not this one. */
.wsstrips { margin-top: 4px; }
.wsstrips .editstrip { margin-top: 0; }
/* Away in blind for the same reason .fade-cond is: the length of a fade names
which render this is (player.js). */
body.blind .wsstrips { display: none; }
.filtsum { grid-column: 1 / -1; font: var(--t-xs) var(--mono); color: var(--live); }
.filtsum:empty { display: none; }
.filtsum .clear { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: var(--r-1);
font: var(--t-xs) var(--mono); padding: 0 5px; cursor: pointer; margin-left: 5px; box-shadow: none; }
.filtsum .clear:hover { border-color: var(--accent-2); color: var(--accent-2); }
body.blind .filtsum, body.blind .filter-cond { visibility: hidden; }
body.role-judge .filtsum { display: none; }
.flt-sheet { position: fixed; z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-4);
padding: 12px 14px 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); width: 54rem; max-width: 96vw;
max-height: calc(100vh - 24px); overflow-y: auto; }
.flt-sheet .flt-head { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .4rem; margin-bottom: .55rem; }
.flt-sheet .flt-head b { font-size: .9rem; }
.flt-sheet .flt-head .flt-span { font: var(--t-xs) var(--mono); color: var(--accent-2); }
.flt-sheet .flt-head .flt-said { font: var(--t-xs) var(--mono); color: var(--dim); margin-left: auto; text-align: right; max-width: 16rem; }
/* Your presets (DECISIONS 033's Words clause; owner 2026-09-08: on the
account, above the built-ins, no digit keys). Dashed and in the look's own
lime so yours are never mistaken for the eight that ship. NOT .chip: that
is taken, and its .on paints an accent background under an accent label. */
.flt-sheet .flt-yours { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.flt-sheet .flt-cap { width: 100%; font: 600 9px var(--mono); color: var(--faint);
letter-spacing: .09em; text-transform: uppercase; }
.flt-sheet .flt-you { position: relative; font: var(--t-xs) var(--mono); background: none;
border: 1px dashed var(--live); color: var(--live); border-radius: var(--r-1);
padding: .2rem 1.3rem .2rem .45rem; cursor: pointer; box-shadow: none; }
.flt-sheet .flt-you:hover { border-style: solid; }
.flt-sheet .flt-forget { position: absolute; top: 1px; right: 4px; font: 600 10px var(--mono); color: var(--dim); }
.flt-sheet .flt-forget:hover { color: var(--bad); }
.flt-sheet .flt-namer { display: flex; gap: .35rem; align-items: center; margin-bottom: .55rem; }
.flt-sheet .flt-namer input { font: var(--t-xs) var(--mono); width: 11rem; }
.flt-sheet .flt-save { font: var(--t-xs) var(--mono); background: none; border: 1px solid var(--line);
color: var(--dim); border-radius: var(--r-1); padding: .22rem .5rem;
cursor: pointer; box-shadow: none; }
.flt-sheet .flt-save:hover:not(:disabled) { border-color: var(--live); color: var(--live); }
/* Copy, and the strips waiting to be pasted into. */
.flt-sheet .flt-copy { font: var(--t-xs) var(--mono); background: none; border: 1px solid var(--line);
color: var(--dim); border-radius: var(--r-1); padding: .25rem .5rem;
cursor: pointer; box-shadow: none; }
.flt-sheet .flt-copy:hover { border-color: var(--live); color: var(--live); }
.flt-sheet .flt-copy.on { border-color: var(--live); color: var(--live); }
.filtstrip.pasting { outline: 1px dashed var(--live); outline-offset: 2px; cursor: copy; }
.flt-sheet .flt-presets { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.flt-sheet .flt-presets button { position: relative; font: var(--t-xs) var(--mono); background: none; border: 1px solid var(--line); color: var(--fg);
border-radius: var(--r-1); padding: .2rem 1.2rem .2rem .45rem; cursor: pointer; box-shadow: none; }
.flt-sheet .flt-presets button kbd { position: absolute; top: 2px; right: 4px; font: 600 8px var(--mono); color: var(--dim); }
.flt-sheet .flt-presets button:hover { border-color: var(--accent-2); color: var(--accent-2); }
.flt-sheet .flt-presets button.on { border-color: var(--accent); color: var(--accent); }
.flt-sheet .flt-dial { display: grid; grid-template-columns: 7.5rem 1fr 4.4rem; align-items: center; gap: .5rem; margin: .25rem 0; }
.flt-sheet .flt-dial label { font: var(--t-xs) var(--mono); color: var(--dim); }
.flt-sheet .flt-dial input[type=range] { width: 100%; }
/* UX 24 (owner, 2026-09-10): the bar runs from the dial's own neutral (--a
to --b, set by filters.js) rather than from the left edge, so a dial at
"off" shows an empty track. A pitch or width dial (.place) is a position,
not an amount, and shows the thumb on a bare track. The native fill is
turned off in both engines; the track is the input's own background. */
.flt-sheet .flt-dial input[type=range] { appearance: none; -webkit-appearance: none; height: 14px; margin: 0; background: transparent; cursor: pointer;
--a: 0%; --b: 0%;
background: linear-gradient(to right, var(--line-soft) 0, var(--line-soft) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--line-soft) var(--b), var(--line-soft) 100%) no-repeat center / 100% 4px; border-radius: 2px; }
.flt-sheet .flt-dial input[type=range].place { background-image: linear-gradient(var(--line-soft), var(--line-soft)); }
.flt-sheet .flt-dial input[type=range]::-webkit-slider-runnable-track { height: 14px; background: transparent; }
.flt-sheet .flt-dial input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-deep); box-shadow: 0 0 0 1px var(--line); }
.flt-sheet .flt-dial input[type=range]::-moz-range-track { height: 4px; background: transparent; }
.flt-sheet .flt-dial input[type=range]::-moz-range-progress { background: transparent; }
.flt-sheet .flt-dial input[type=range]::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-deep); box-shadow: 0 0 0 1px var(--line); }
.flt-sheet .flt-dial input[type=range]:focus-visible { outline: 1px solid var(--accent-2); outline-offset: 2px; }
.flt-sheet .flt-dial .flt-val { font: 600 var(--t-xs) var(--mono); color: var(--fg); text-align: right; }
.flt-sheet .flt-dial .flt-val.off { color: var(--faint); font-weight: 400; }
.flt-sheet .flt-expl { font: var(--t-xs) var(--mono); color: var(--faint); margin: -.1rem 0 .3rem; line-height: 1.45; }
.flt-sheet details { margin-top: .5rem; border-top: 1px solid var(--line-soft); padding-top: .4rem; }
.flt-sheet summary { font: var(--t-xs) var(--mono); color: var(--dim); cursor: pointer; }
/* Two columns under the fold (owner, 2026-09-08). Each dial and its explainer
are one cell, so an explainer can never end up beside a different dial. At
one column the 18 dials stood 990px tall, which is off the bottom of a
913px window; in two they fit. */
.flt-sheet .flt-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.flt-sheet .flt-cell { min-width: 0; }
@media (max-width: 60rem) { .flt-sheet .flt-more { grid-template-columns: 1fr; } }
.flt-sheet .flt-x { margin-left: .5rem; align-self: center; background: none; border: 1px solid var(--line);
color: var(--dim); border-radius: var(--r-1); font: 600 var(--t-xs) var(--mono);
line-height: 1; padding: .2rem .42rem; cursor: pointer; box-shadow: none; }
.flt-sheet .flt-x:hover { border-color: var(--bad); color: var(--bad); }
.flt-sheet .flt-mid { display: flex; align-items: center; gap: .4rem; font: var(--t-xs) var(--mono); color: var(--dim); margin: .4rem 0 .2rem; }
.flt-sheet .flt-fades { display: flex; gap: .8rem; align-items: center; font: var(--t-xs) var(--mono); color: var(--dim); margin: .3rem 0; }
.flt-sheet .flt-fades input { width: 4.2rem; font: var(--t-xs) var(--mono); }
.flt-sheet .flt-foot { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; border-top: 1px solid var(--line-soft); padding-top: .5rem; }
.flt-sheet .flt-raw { font: 600 var(--t-xs) var(--mono); background: none; border: 1px solid var(--accent-2); color: var(--accent-2);
border-radius: var(--r-1); padding: .25rem .5rem; cursor: pointer; box-shadow: none; user-select: none; }
.flt-sheet .flt-raw.down { background: var(--accent-2); color: var(--on-accent); }
.flt-sheet .flt-none { font: var(--t-xs) var(--mono); background: none; border: 1px solid var(--line); color: var(--dim);
border-radius: var(--r-1); padding: .25rem .5rem; cursor: pointer; box-shadow: none; margin-left: auto; }
.flt-sheet .flt-none:hover { border-color: var(--bad); color: var(--bad); }
.flt-sheet .flt-state { font: var(--t-xs) var(--mono); color: var(--ok); }
.flt-sheet .flt-state.bad { color: var(--bad); }
/* The sets' toolbar, above their cards: the size and the two ticks
(DECISIONS 037). The fold these rules once served went with 037. */
.foldtools { margin: 0 0 var(--sp-3); }
/* The S/M/L segment: in the toolbars and at the foot of the Look menu. */
.seg { display: inline-flex; }
.seg .tb { border-radius: 0; padding: 3px 10px; min-width: 2.2rem; font-size: var(--t-xs); }
.seg .tb:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.seg .tb:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.seg .tb.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.lookctl .menu .cardsize { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; font-size: var(--t-sm); color: var(--dim); }
.lookctl .menu .cardsize:first-of-type { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.lookctl .menu .cardsize .seg { margin-left: auto; }
/* The filter sheet's curve (DECISIONS 033 amended 2026-09-28, owner pick T4;
ui/filtercurve.js): the filter's own response, dragged by its points. */
.flt-sheet .flt-curve canvas { display: block; width: 100%; height: 170px; background: var(--bg-deep);
border: 1px solid var(--line-soft); border-radius: var(--r-2); touch-action: none; }
.flt-sheet .flt-curvesay { margin: .25rem 0 .45rem; }
.flt-sheet .flt-towardrow { display: flex; align-items: center; gap: .6rem; margin: -.2rem 0 .55rem; }
.flt-sheet .flt-towardrow .flt-expl { margin: 0; }
.flt-sheet .flt-toward { font: var(--t-xs) var(--mono); background: none; border: 1px solid var(--line); color: var(--fg);
border-radius: var(--r-1); padding: 2px 8px; box-shadow: none; white-space: nowrap; }
.flt-sheet .flt-toward:hover:not(:disabled) { border-color: var(--live); color: var(--live); }
.flt-sheet .flt-toward:disabled { color: var(--faint); cursor: default; }
/* The de-esser in the filter sheet (033 amended 2026-09-29, owner pick V3;
ui/deessview.js): a switch, the scope with its threshold line, three dials. */
.flt-sheet .flt-deess { margin: .5rem 0 .2rem; padding-top: .5rem; border-top: 1px solid var(--line-soft); }
.flt-sheet .flt-dehead { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.flt-sheet .flt-dehead b { font-size: .86rem; }
.flt-sheet .flt-detaken { margin-left: auto; font: 600 var(--t-xs) var(--mono); color: var(--faint); min-width: 5rem; text-align: right; }
.flt-sheet .flt-detaken.on { color: var(--flt-lite); }
.flt-sheet .flt-desw { position: relative; width: 30px; height: 16px; border-radius: 8px; padding: 0; flex: none; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--line); box-shadow: none; }
.flt-sheet .flt-desw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); transition: left .12s; }
.flt-sheet .flt-desw.on { background: color-mix(in oklab, var(--live) 30%, var(--panel-2)); border-color: var(--live); }
.flt-sheet .flt-desw.on::after { left: 16px; background: var(--live); }
.flt-sheet .flt-descope { display: block; width: 100%; height: 120px; background: var(--bg-deep);
border: 1px solid var(--line-soft); border-radius: var(--r-2); touch-action: none; }
.flt-sheet .flt-deess.off .flt-descope { height: 40px; }
.flt-sheet .flt-derow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.2rem; margin-top: .4rem; }
.flt-sheet .flt-derow .flt-dial { grid-template-columns: 4.6rem 1fr 3.8rem; }
.flt-sheet .flt-deess.off .flt-derow { opacity: .45; }
.flt-sheet .flt-denote { margin: .3rem 0 0; }
.flt-sheet .flt-denote:empty { display: none; }
/* A render's speed (DECISIONS 036; ui/speed.js): the chip on the lane beside
the filter line, outlined while as recorded and filled once sped, and its
popover. Away in blind, for the reason the fade and filter lines are. */
.spdline { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.spdline .filtsum { flex: 0 1 auto; }
.spdchip { font: 600 var(--t-xs) var(--mono); padding: 0 7px; border-radius: 99px; line-height: 1.6; cursor: pointer;
background: none; border: 1px solid var(--spd); color: var(--spd); box-shadow: none; white-space: nowrap; }
.spdchip:hover:not(:disabled) { background: color-mix(in oklab, var(--spd) 16%, transparent); }
.spdchip.set { background: var(--spd); color: var(--on-spd); }
.spdchip.set:hover:not(:disabled) { background: color-mix(in oklab, var(--spd) 80%, white); }
.spdchip:disabled { cursor: default; }
.spdchip.refused { border-color: var(--bad); color: var(--bad); }
body.role-judge .spdchip:not(.set) { display: none; }
.lane.off .spdchip { display: none; }
body.blind .spdchip, body.blind .speed-cond { visibility: hidden; }
.spd-pop { position: fixed; z-index: 45; width: 22rem; background: var(--panel); border: 1px solid var(--spd); border-radius: var(--r-4);
padding: 10px 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.spd-pop .spd-head { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .35rem; margin-bottom: .45rem; }
.spd-pop .spd-head b { font-size: .88rem; color: var(--spd); }
.spd-pop .spd-name { font: var(--t-xs) var(--mono); color: var(--dim); margin-left: auto; }
.spd-pop .spd-row { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: .5rem; align-items: center; }
.spd-pop label { font: var(--t-xs) var(--mono); color: var(--dim); }
.spd-pop input[type=range] { width: 100%; accent-color: var(--spd); }
.spd-pop .spd-val { font: 600 var(--t-xs) var(--mono); color: var(--fg); text-align: right; }
.spd-pop .spd-words { font: var(--t-xs) var(--mono); color: var(--fg); margin: .4rem 0 0; line-height: 1.5; }
.spd-pop .spd-hint { font: var(--t-xs) var(--mono); color: var(--faint); margin: .15rem 0 0; }
.spd-pop .spd-foot { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.spd-pop .spd-foot .tb { font: var(--t-xs) var(--mono); padding: 2px 9px; }
.spd-pop .spd-state { font: var(--t-xs) var(--mono); color: var(--dim); margin-left: auto; }
/* ---------- Library cards (DECISIONS 037) ----------
Cover | spine | words, the card lit by its own cover blurred behind it.
The size sets the cover and the cover sets the card: every card of a size
is the same size, set or release, linked or not. The words fill fixed slots
(a two-line title, one status line, the bar, the fact rows the size allows,
the links at the foot); the column is at least 190 px, the narrowest that
fits every title in two lines at 11 px or more (measured 2026-09-30). */
html { --art-hue: 0deg; }
/* The placeholder is drawn in Melon's pink and lime; the other looks turn it
so its lime lands on their accent (owner, 2026-09-29; measured against
Chromium's hue-rotate). */
html[data-look="lantern"] { --art-hue: 296deg; }
html[data-look="velvet"] { --art-hue: 275deg; }
html[data-look="comfy"] { --art-hue: 147deg; }
.lcgrid { --lc-cov: 150px; --lc-tfs: 15px; --lc-kid: 36px; --lc-words: 190px;
display: grid; gap: var(--sp-3); align-items: start; margin: 0 0 var(--sp-5); }
/* Written against the ids, and so above the old cards' own M and S grid rules
for #set-cards and #release-cards, which go when the old cards' rules do. */
.lcgrid, html[data-cards-sets] #set-cards.lcgrid, html[data-cards-rels] #release-cards.lcgrid {
grid-template-columns: repeat(auto-fill, minmax(calc(var(--lc-cov) + 26px + 44px + var(--lc-words)), 1fr)); gap: var(--sp-3); }
html[data-cards-sets="m"] #set-cards, html[data-cards-rels="m"] #release-cards { --lc-cov: 124px; --lc-tfs: 14px; --lc-kid: 30px; }
html[data-cards-sets="s"] #set-cards, html[data-cards-rels="s"] #release-cards { --lc-cov: 100px; --lc-tfs: 13px; --lc-kid: 24px; }
/* Plain cards, the size is the density (owner pick P1, 2026-10-01): the cover
and the words column shrink together, so at 1400 px L, M and S hold 3, 4
and 5 to a row. The "Jewel cases" tick takes them too on a computer (Z1,
below the ticks). At S a title may step below 11 px (owner), to 7:
ui/cardfit.js reads --lc-tmin. */
html[data-jc-sets="off"][data-cards-sets="m"] #set-cards, html[data-jc-rels="off"][data-cards-rels="m"] #release-cards { --lc-cov: 108px; --lc-words: 145px; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards { --lc-cov: 80px; --lc-words: 100px; --lc-kid: 20px; }
html[data-cards-sets="s"] #set-cards, html[data-cards-rels="s"] #release-cards { --lc-tmin: 7px; }
.lc-kidname { display: none; }
.lcard { position: relative; display: grid; grid-template-columns: var(--lc-cov) 26px minmax(0, 1fr); gap: 0 12px;
height: calc(var(--lc-cov) + 20px); padding: 10px; border: 1px solid var(--line); border-radius: var(--r-3);
overflow: hidden; isolation: isolate; background: var(--panel-2); box-shadow: var(--gloss); }
.lcard:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.lcard.making { border-color: var(--accent); }
.lcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(90deg, transparent 15%, color-mix(in oklab, var(--bg) 60%, transparent)); }
.lc-glow { position: absolute; inset: -30%; z-index: -2; pointer-events: none; background-size: cover; background-position: center;
filter: blur(34px) saturate(1.4); opacity: .5; }
.lc-glow.lc-none { filter: blur(34px) saturate(1.4) hue-rotate(var(--art-hue)); opacity: .32; background-size: 70%; background-repeat: no-repeat; }
.lc-cover { display: block; align-self: center; position: relative; }
.lc-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-deep); border-radius: var(--r-2);
border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.lc-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The glow under the small copy while it loads (owner pick C, session 027). */
.lc-art { background-size: cover; background-position: center; }
.lc-art.lc-none > img { object-fit: contain; filter: hue-rotate(var(--art-hue)); }
.lc-from { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.72); color: #fff; padding: 2px 6px; border-radius: 4px; }
.lc-mark { position: absolute; right: 6px; bottom: 6px; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 4px; }
.lc-spine { writing-mode: vertical-rl; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--r-1); background: color-mix(in oklab, var(--panel-2) 70%, transparent);
font: 600 var(--t-xs) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.lc-spine b { color: var(--accent); font-weight: 600; }
/* Three across, the spine holds one thing: a release's catalogue number, a set's render count. */
.lc-spine > span { display: none; } .lc-spine { justify-content: center; }
.lc-words { display: flex; flex-direction: column; gap: 5px; min-width: 0; height: var(--lc-cov); overflow: hidden; }
/* Mono is the titles' default (DECISIONS 037, point 4). */
.lcard h3 { flex: none; margin: 0; min-height: 2.1em; font: 700 var(--lc-tfs)/1.05 'JetBrains Mono', var(--mono);
letter-spacing: .06em; text-transform: uppercase; overflow-wrap: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard h3 a { color: var(--fg-strong); }
/* The whole card is its title's link; what sits above it (the links' small
covers, remove) is raised over it. The words' column is not positioned, so
the link reaches the card's edges. */
.lcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.lc-line { flex: none; color: var(--dim); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-line .sep { color: var(--faint); }
.lc-bar { flex: none; height: 3px; background: var(--bg-deep); border-radius: 2px; overflow: hidden; }
.lc-bar i { display: block; height: 100%; background: var(--ok); }
.lc-slot { visibility: hidden; }
.lc-facts { flex: none; display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; margin: 0; font-size: var(--t-sm); }
.lc-facts dt { color: var(--dim); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: .2em; }
.lc-facts dd { margin: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* One fact row at L, none at S (nor at M, below and on a phone): the same count on every card of a size. */
.lc-facts dt:nth-of-type(n+2), .lc-facts dd:nth-of-type(n+2) { display: none; }
html[data-cards-sets="s"] #set-cards .lc-facts, html[data-cards-rels="s"] #release-cards .lc-facts { display: none; }
/* The words fill a column as tall as the cover, and on a computer the denser
M and S (P1, Z1) left the links' small covers cut: M needed 120 px of 108,
S 84 of 80. M drops its fact row too, as a phone's M does, and S closes its
gaps to 3 px (owner pick A, session 025). Card sizes are unchanged. */
@media (min-width: 641px) {
html[data-cards-sets="m"] #set-cards .lc-facts, html[data-cards-rels="m"] #release-cards .lc-facts { display: none; }
html:not([data-jc-sets="only"])[data-cards-sets="s"] #set-cards .lc-words, html:not([data-jc-rels="only"])[data-cards-rels="s"] #release-cards .lc-words { gap: 3px; }
}
.lc-foot { flex: none; margin-top: auto; min-width: 0; }
.lc-kids { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; }
.lc-kids > span { flex: none; margin-right: 2px; color: var(--dim); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lc-kid { position: relative; z-index: 3; flex: none; width: var(--lc-kid); }
.lc-kid .lc-art { border-radius: var(--r-1); box-shadow: none; }
.lc-kid:hover .lc-art, .lc-kid:focus-visible .lc-art { box-shadow: 0 0 0 2px var(--accent); }
.lc-nolink { color: var(--faint); font-style: italic; font-size: var(--t-sm); }
/* Remove shows on hover at the cover's lower left, clear of the "from" tag. */
.lcard .cardrm { position: absolute; z-index: 3; left: 16px; bottom: 16px; opacity: 0; transition: opacity var(--dur);
font: 600 var(--t-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; box-shadow: none;
background: rgba(0,0,0,.66); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-1); padding: 2px 7px; }
.lcard:hover .cardrm, .lcard:focus-within .cardrm { opacity: 1; }
.lcard .cardrm:hover { color: var(--bad); border-color: var(--bad); background: rgba(0,0,0,.8); }
.lcard .asking { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px;
display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; justify-content: flex-end;
padding: var(--sp-2); border-radius: var(--r-2); background-color: var(--panel); border: 1px solid var(--line); box-shadow: var(--gloss); }
.lcard .asking .tiny { flex: 1 1 8rem; text-align: left; white-space: normal; }
.lcard .cardrm-said { position: relative; z-index: 3; }
.lcgrid.ordering .lcard { cursor: grab; outline: 1px dashed var(--line); }
.lcgrid.ordering .lcard.dragging { opacity: .35; }
.lcgrid.ordering .lcard a, .lcgrid.ordering .lcard .cardrm { pointer-events: none; }
.lcgrid.ordering .lcard .cardrm { display: none; }
/* ---------- The two ticks (DECISIONS 037, point 1) ----------
"Jewel cases" (R4): the same card, its cover in a jewel case with the disc's
edge showing. "Jewel cases only" (R3): jewel cases standing in their own
light, the words under each. Chosen for the sets and the releases apart,
set on the html element before paint (ui/lookboot.js). Every card carries
the case and the disc; the plain card (R1) keeps them out of sight. */
.lc-sleeve { position: relative; }
.lc-disc, .lc-cat { display: none; }
html[data-jc-sets="on"] #set-cards .lc-disc, html[data-jc-rels="on"] #release-cards .lc-disc, html[data-jc-sets="only"] #set-cards .lc-disc, html[data-jc-rels="only"] #release-cards .lc-disc { display: block; position: absolute; aspect-ratio: 1; border-radius: 50%; transition: transform .45s var(--ease);
background:
radial-gradient(circle, transparent 0 16.5%, rgba(255,255,255,.55) 16.8% 17.4%, rgba(210,214,220,.9) 17.6% 22%, rgba(0,0,0,.18) 22.2% 22.8%, transparent 23%),
radial-gradient(circle, transparent 0 46.5%, color-mix(in oklab, var(--accent) 70%, transparent) 46.8% 47.6%, transparent 48%),
radial-gradient(circle, transparent 0 97.5%, rgba(255,255,255,.35) 98% 100%),
conic-gradient(from 20deg, #c9ced6, #f4f6f8 8%, #a9d8ff 16%, #d6b3ff 24%, #fff2a8 31%, #c9ced6 40%, #eef1f4 52%, #b8f0e0 62%, #ffc7e0 72%, #f4f6f8 84%, #c9ced6);
-webkit-mask: radial-gradient(circle, transparent 0 6.5%, #000 6.8%); mask: radial-gradient(circle, transparent 0 6.5%, #000 6.8%);
box-shadow: 0 4px 18px rgba(0,0,0,.55); }
html[data-jc-sets="on"] #set-cards .lc-case, html[data-jc-rels="on"] #release-cards .lc-case, html[data-jc-sets="only"] #set-cards .lc-case, html[data-jc-rels="only"] #release-cards .lc-case { position: relative; z-index: 1; padding: 3.5% 3.5% 3.5% 10%; border-radius: 3px;
background: linear-gradient(90deg, rgba(255,255,255,.16) 0 7.5%, rgba(0,0,0,.35) 7.5% 8.3%, rgba(255,255,255,.05) 8.3%), #0c0c0e;
box-shadow: 0 10px 28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
html[data-jc-sets="on"] #set-cards .lc-case::before, html[data-jc-rels="on"] #release-cards .lc-case::before, html[data-jc-sets="only"] #set-cards .lc-case::before, html[data-jc-rels="only"] #release-cards .lc-case::before { content: ""; position: absolute; left: 1.8%; top: 4%; bottom: 4%; width: 3.5%; pointer-events: none; border-radius: 2px;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 2px, transparent 2px 6px); }
html[data-jc-sets="on"] #set-cards .lc-case::after, html[data-jc-rels="on"] #release-cards .lc-case::after, html[data-jc-sets="only"] #set-cards .lc-case::after, html[data-jc-rels="only"] #release-cards .lc-case::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 3px;
background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 28%, transparent 42%, transparent 70%, rgba(255,255,255,.06) 86%, transparent); }
html[data-jc-sets="on"] #set-cards .lc-case .lc-art, html[data-jc-rels="on"] #release-cards .lc-case .lc-art, html[data-jc-sets="only"] #set-cards .lc-case .lc-art, html[data-jc-rels="only"] #release-cards .lc-case .lc-art { border-radius: 1px; border: 0; box-shadow: none; }
html[data-jc-sets="on"] #set-cards .lcard:hover .lc-case, html[data-jc-rels="on"] #release-cards .lcard:hover .lc-case, html[data-jc-sets="only"] #set-cards .lcard:hover .lc-case, html[data-jc-rels="only"] #release-cards .lcard:hover .lc-case { box-shadow: 0 12px 34px rgba(0,0,0,.65), inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, #fff); }
/* R4: the case's column is wider by the disc's edge; everything else is R1. */
html[data-jc-sets="on"] #set-cards.lcgrid, html[data-jc-rels="on"] #release-cards.lcgrid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--lc-cov) * 1.14 + 26px + 44px + var(--lc-words)), 1fr)); }
html[data-jc-sets="on"] #set-cards .lcard, html[data-jc-rels="on"] #release-cards .lcard { grid-template-columns: calc(var(--lc-cov) * 1.14) 26px minmax(0, 1fr); }
html[data-jc-sets="on"] #set-cards .lc-sleeve, html[data-jc-rels="on"] #release-cards .lc-sleeve { padding-right: 12%; }
html[data-jc-sets="on"] #set-cards .lc-disc, html[data-jc-rels="on"] #release-cards .lc-disc { top: 5%; bottom: 5%; right: 0; }
html[data-jc-sets="on"] #set-cards .lcard:hover .lc-disc, html[data-jc-rels="on"] #release-cards .lcard:hover .lc-disc { transform: rotate(160deg); }
/* R3: tiles, a case in its own light, the words under it at a fixed height. */
html[data-jc-sets="only"] #set-cards.lcgrid, html[data-jc-rels="only"] #release-cards.lcgrid { --lc-tile: 230px; --lc-kid: 56px; --lc-bh: 156px; grid-template-columns: repeat(auto-fill, minmax(var(--lc-tile), 1fr));
gap: var(--sp-7) calc(var(--lc-tile) * .34); padding-right: calc(var(--lc-tile) * .3); }
html[data-jc-sets="only"][data-cards-sets="m"] #set-cards, html[data-jc-rels="only"][data-cards-rels="m"] #release-cards { --lc-tile: 190px; --lc-kid: 46px; --lc-bh: 144px; }
html[data-jc-sets="only"][data-cards-sets="s"] #set-cards, html[data-jc-rels="only"][data-cards-rels="s"] #release-cards { --lc-tile: 150px; --lc-kid: 38px; --lc-bh: 134px; }
html[data-jc-sets="only"] #set-cards .lcard, html[data-jc-rels="only"] #release-cards .lcard { display: block; height: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-jc-sets="only"] #set-cards .lcard::before, html[data-jc-rels="only"] #release-cards .lcard::before, html[data-jc-sets="only"] #set-cards .lc-spine, html[data-jc-rels="only"] #release-cards .lc-spine, html[data-jc-sets="only"] #set-cards .lc-facts, html[data-jc-rels="only"] #release-cards .lc-facts { display: none; }
html[data-jc-sets="only"] #set-cards .lc-glow, html[data-jc-rels="only"] #release-cards .lc-glow { inset: -12% -18% 20% -18%; opacity: .55; filter: blur(40px) saturate(1.5); }
html[data-jc-sets="only"] #set-cards .lc-glow.lc-none, html[data-jc-rels="only"] #release-cards .lc-glow.lc-none { filter: blur(40px) saturate(1.5) hue-rotate(var(--art-hue)); opacity: .4; }
html[data-jc-sets="only"] #set-cards .lc-disc, html[data-jc-rels="only"] #release-cards .lc-disc { top: 4%; bottom: 4%; right: 0; transform: translateX(16%); }
html[data-jc-sets="only"] #set-cards .lcard:hover .lc-disc, html[data-jc-rels="only"] #release-cards .lcard:hover .lc-disc { transform: translateX(42%) rotate(120deg); }
html[data-jc-sets="only"] #set-cards .lc-words, html[data-jc-rels="only"] #release-cards .lc-words { height: var(--lc-bh); padding-top: 12px; } /* measured on his library 2026-09-30: 155, 142, 132 needed */
html[data-jc-sets="only"] #set-cards .lc-cat, html[data-jc-rels="only"] #release-cards .lc-cat { display: block; flex: none; font: 600 var(--t-xs) var(--mono); letter-spacing: .08em; color: var(--accent); }
html[data-jc-sets="only"] #set-cards .cardrm, html[data-jc-rels="only"] #release-cards .cardrm { left: auto; right: 8px; bottom: auto; top: 8px; }
/* The same sizes with or without jewel cases, on a computer (owner pick Z1,
session 025): his "sizes should be roughly the same". A "Jewel cases" card
is the plain card exactly, its case in the cover's own column, so the art
is about a quarter smaller; Jewel cases only moves up one tile size. All
three hold 5, 4 and 3 to a row at 1400 px. A phone keeps its own rulings. */
@media (min-width: 641px) {
html[data-jc-sets="on"][data-cards-sets="m"] #set-cards, html[data-jc-rels="on"][data-cards-rels="m"] #release-cards { --lc-cov: 108px; --lc-words: 145px; }
html[data-jc-sets="on"][data-cards-sets="s"] #set-cards, html[data-jc-rels="on"][data-cards-rels="s"] #release-cards { --lc-cov: 80px; --lc-words: 100px; --lc-kid: 20px; }
html[data-jc-sets="on"] #set-cards.lcgrid, html[data-jc-rels="on"] #release-cards.lcgrid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--lc-cov) + 26px + 44px + var(--lc-words)), 1fr)); }
html[data-jc-sets="on"] #set-cards .lcard, html[data-jc-rels="on"] #release-cards .lcard { grid-template-columns: var(--lc-cov) 26px minmax(0, 1fr); }
html[data-jc-sets="only"] #set-cards.lcgrid, html[data-jc-rels="only"] #release-cards.lcgrid { --lc-tile: 290px; --lc-kid: 64px; --lc-bh: 170px; }
html[data-jc-sets="only"][data-cards-sets="m"] #set-cards, html[data-jc-rels="only"][data-cards-rels="m"] #release-cards { --lc-tile: 230px; --lc-kid: 56px; --lc-bh: 156px; }
html[data-jc-sets="only"][data-cards-sets="s"] #set-cards, html[data-jc-rels="only"][data-cards-rels="s"] #release-cards { --lc-tile: 190px; --lc-kid: 46px; --lc-bh: 144px; }
}
/* The ticks themselves, in a section's toolbar and under each kind in the Look menu. */
.caseticks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.caseticks label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--fg); cursor: pointer; user-select: none; }
.caseticks input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.lookctl .menu .cardsize.caserow { padding-top: 0; }
.lookctl .menu .cardsize.caserow .caseticks label { color: var(--dim); }
/* Card titles (DECISIONS 037, point 4): Mono is the default; "Look" gives a
card's title the look's own font, heavy capitals on a spine card and mixed
case under a jewel case, as mocked. Chosen in the Look menu, remembered in
the browser, set before paint (lookboot.js). The title still shrinks to fit
its two lines (cardfit.js), whichever font it is in. */
html[data-card-titles="look"] .lcard h3 { font-family: var(--font); font-weight: 800; letter-spacing: .01em; }
html[data-card-titles="look"][data-jc-sets="only"] #set-cards .lcard h3,
html[data-card-titles="look"][data-jc-rels="only"] #release-cards .lcard h3 { font-weight: 700; text-transform: none; letter-spacing: 0; }
.lookctl .menu .cardsize > span:first-child { white-space: nowrap; }
/* The rename pen (DECISIONS 037, point 7): after every title, a released
release's too. The title's row is NOT positioned, or it would trap the
card-wide link (.lcard h3 a::after) inside itself; only a field being edited
is lifted above the link. */
.lc-tt { display: flex; align-items: flex-start; gap: 4px; min-width: 0; flex: none; }
.lcard .lc-tt h3 { flex: 0 1 auto; min-width: 0; }
.lc-pen { position: relative; z-index: 3; flex: none; width: 22px; height: 22px; padding: 3px; margin-top: -1px; cursor: pointer;
border: 1px solid transparent; border-radius: var(--r-1); background: none; box-shadow: none; color: var(--faint); opacity: .75;
transition: color var(--dur), opacity var(--dur), border-color var(--dur); }
.lc-pen svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lcard:hover .lc-pen { opacity: 1; color: var(--dim); }
.lc-pen:hover, .lc-pen:focus-visible { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: none; opacity: 1; }
.lc-tt.editing { position: relative; z-index: 4; }
.lc-rename { flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 700; color: var(--fg-strong); background: var(--bg-deep);
border: 1px solid var(--accent); border-radius: var(--r-1); padding: 2px 6px; outline: none; box-shadow: 0 0 0 3px var(--ember-soft); }
.lc-rnote { position: absolute; z-index: 5; left: 0; top: calc(100% + 3px); white-space: nowrap; font: var(--t-xs) var(--mono); color: var(--dim);
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 6px; }
.lc-rnote.bad { color: var(--bad); }
/* ---------- On a phone, and on a touch screen (DECISIONS 037, point 8) ----------
Everything below is scoped to a touch screen or to a width of 640 px or
less, so a desktop page is exactly what it was. No horizontal scrolling on
a phone is a standing rule (owner, 2026-09-30). */
.hdr-menu, .hdr-nav { display: none; }
.tapcopy-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
/* A touch screen has no keyboard to use the keys with. */
#keybinds-home { display: none; }
/* It cannot drag files, and it has no hover to reveal what hover reveals. */
.tapcopy-mouse { display: none; } .tapcopy-touch { display: inline; }
.lcard .cardrm { opacity: .9; }
.lc-pen { opacity: 1; }
/* T1 (owner, 2026-09-30): only a card's title and cover open it, so a thumb
can scroll anywhere else on the card without opening a set by mistake. */
.lcard h3 a::after { display: none; }
}
@media (max-width: 640px) {
/* H1: Tuneoff, the page, Look and Menu on one row; the rest is in Menu. */
header { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 12px 16px; }
header .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header #keybinds-home, header .hdrdocs, #hdr-acts .sharewrap:has(.whopill) { display: none; }
header .hdr-menu { display: inline-flex; order: 3; flex: none; }
header #look-pill { flex: none; }
header #look-pill > .tb { font-size: 0; gap: 8px; }
header #look-pill > .tb::after { content: "Look"; font-size: var(--t-sm); }
header .hdr-nav:not([hidden]) { display: grid; position: absolute; z-index: 70; right: 16px; top: calc(100% + 6px);
width: min(260px, calc(100vw - 32px)); gap: 2px; padding: 6px; border-radius: var(--r-3);
background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.hdr-nav a, .hdr-nav button { display: block; text-align: left; padding: 11px 12px; border-radius: var(--r-2); color: var(--fg);
background: none; border: 0; font: inherit; box-shadow: none; cursor: pointer; }
.hdr-nav a:hover, .hdr-nav button:hover { background: var(--ember-wash); }
.hdr-nav .who { padding: 8px 12px 10px; color: var(--dim); font-size: var(--t-sm); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.hdr-nav .who b { color: var(--fg); }
main { padding: 16px 16px 48px; }
.newrel { flex-wrap: wrap; } .newrel input { flex: 1 1 100%; min-width: 0; }
/* The cards: one spine card per row, covers 130, 100 and 90 px, the words'
column 150 px (140 beside R4's case at L); the fewest fact rows fit. */
.lcgrid { --lc-cov: 130px; --lc-kid: 30px; --lc-words: 150px; }
html[data-cards-sets="m"] #set-cards, html[data-cards-rels="m"] #release-cards { --lc-cov: 100px; --lc-kid: 26px; }
html[data-cards-sets="s"] #set-cards, html[data-cards-rels="s"] #release-cards { --lc-cov: 90px; --lc-kid: 22px; }
html[data-jc-sets="on"][data-cards-sets="l"] #set-cards, html[data-jc-rels="on"][data-cards-rels="l"] #release-cards { --lc-words: 140px; }
/* An L card needs 350 px (plain) or 358 (Jewel cases), and a 360 px phone
has 328 inside its gutters, so the page scrolled sideways. On a phone
narrower than the card (382 px, 390 px), the cover and the words share
the shortfall, scaled to the screen: at 360 px plain 118/140, Jewel cases
a 133 px case and 125 px words, no title cut (owner, session 025). Wider
phones are untouched. The share stops at 360 px's: below it titles would
be cut and L's cover fall under M's, so 320 px still scrolls sideways
until it has its own look (open-work). */
html[data-jc-sets="off"][data-cards-sets="l"] #set-cards, html[data-jc-rels="off"][data-cards-rels="l"] #release-cards {
--lc-cov: calc(130px - clamp(0px, 382px - 100vw, 22px) * .55); --lc-words: calc(150px - clamp(0px, 382px - 100vw, 22px) * .45); }
html[data-jc-sets="on"][data-cards-sets="l"] #set-cards, html[data-jc-rels="on"][data-cards-rels="l"] #release-cards {
--lc-cov: calc(130px - clamp(0px, 390.2px - 100vw, 30.2px) * .5 / 1.14); --lc-words: calc(140px - clamp(0px, 390.2px - 100vw, 30.2px) * .5); }
html[data-cards-sets="m"] #set-cards .lc-facts, html[data-cards-rels="m"] #release-cards .lc-facts { display: none; }
/* R3: two jewel cases per row at every size (three at S cut titles). */
html[data-jc-sets="only"] #set-cards.lcgrid, html[data-jc-rels="only"] #release-cards.lcgrid { --lc-tile: 150px; --lc-kid: 34px; gap: var(--sp-5) 22px; padding-right: 18px; }
html[data-jc-sets="only"][data-cards-sets="m"] #set-cards, html[data-jc-rels="only"][data-cards-rels="m"] #release-cards { --lc-tile: 130px; --lc-kid: 30px; }
html[data-jc-sets="only"][data-cards-sets="s"] #set-cards, html[data-jc-rels="only"][data-cards-rels="s"] #release-cards { --lc-tile: 120px; --lc-kid: 24px; }
/* Two per row on every phone (session 024): auto-fill dropped to one column
under about 372 px, and that one card's disc and glow ran 22 px off a
360 px screen. The two columns shrink instead. */
html[data-jc-sets="only"] #set-cards.lcgrid, html[data-jc-rels="only"] #release-cards.lcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Jewel cases only at S: three to a row (owner pick 3A, 2026-10-01). */
html[data-jc-sets="only"][data-cards-sets="s"] #set-cards.lcgrid, html[data-jc-rels="only"][data-cards-rels="s"] #release-cards.lcgrid {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) 14px; --lc-kid: 20px; }
/* Plain cards on a phone (owner, 2026-10-01): M as it was; S is a list
(pick P2): a small cover, the title, one line, and what the set feeds or
the release draws from in words, each still a link; Remove at the row's
end, since the cover is smaller than it. */
html[data-jc-sets="off"][data-cards-sets="m"] #set-cards, html[data-jc-rels="off"][data-cards-rels="m"] #release-cards { --lc-cov: 100px; --lc-words: 150px; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards { --lc-cov: 44px; --lc-words: 150px; --lc-kid: 0px; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-spine, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-spine,
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-slot, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-slot,
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-facts, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-facts,
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-kid .lc-art, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-kid .lc-art { display: none; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lcard, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lcard {
grid-template-columns: var(--lc-cov) minmax(0, 1fr); height: auto; min-height: calc(var(--lc-cov) + 20px); align-items: center; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-words, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-words {
height: auto; gap: 2px; justify-content: center; padding-right: 76px; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lcard h3, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lcard h3 { min-height: 0; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-foot, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-foot { margin-top: 2px; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-kids, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-kids {
flex-wrap: wrap; gap: 2px 8px; overflow: visible; font-size: var(--t-xs); }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-kid, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-kid { width: auto; color: var(--accent); }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-kidname, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-kidname { display: inline; }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lc-kid + .lc-kid::before, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lc-kid + .lc-kid::before { content: "\00b7\00a0"; color: var(--dim); }
html[data-jc-sets="off"][data-cards-sets="s"] #set-cards .lcard .cardrm, html[data-jc-rels="off"][data-cards-rels="s"] #release-cards .lcard .cardrm {
left: auto; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); }
/* The space sheet: the whole screen, and a file on two lines, not eight columns. */
.qsheet { padding: 0; align-items: stretch; }
.qs-panel { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
.qs-head { padding: 14px 16px 10px; flex-wrap: wrap; }
.qs-head .qs-close { padding: 8px 14px; }
.qs-meter, .qs-split, .qs-verdict { margin-left: 16px; margin-right: 16px; }
.qs-rows { padding: 0 16px 24px; }
.qs-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 0; }
.qs-row > * { order: 2; }
.qs-row > .qs-nm { flex: 1 1 55%; order: 0; }
.qs-row > .qs-size { flex: none; order: 1; }
.qs-row > .qs-act { order: 9; margin-left: auto; }
.qs-act .tb { min-height: 40px; padding: 8px 16px; font-size: var(--t-sm); }
/* Docs: the contents fold into a Contents box above the text (docs.js). */
.doc { display: block; }
.doc-toc { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel-2); }
.doc-toc > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--fg); }
.doc-toc nav { position: static; columns: 2; column-gap: 16px; padding: 0 14px 12px; }
.doc-toc nav .grp { column-span: all; }
.doc nav a { padding: .4rem 0; break-inside: avoid; }
.feat { grid-template-columns: 1fr; }
/* Admin: a row becomes a card, each value with its column's name. */
.adm .invites, .adm .invites tbody, .adm .invites tr, .adm .invites td { display: block; width: 100%; }
.adm .invites tr:has(th) { display: none; }
.adm .invites tr { border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; margin: 0 0 10px; background: var(--panel-2); }
.adm .invites td { border: 0; padding: 4px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.adm .invites td[data-label]::before { content: attr(data-label); min-width: 7.5rem; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.adm .invites td:empty { display: none; }
.adm-in { width: 6rem; padding: 7px 8px; }
.adm-acts .tb { min-height: 40px; padding: 8px 16px; }
.adm-pages { columns: 1; }
.adm-pages a { padding: 6px 0; }
/* The upload form (session 024): a file row's name got 0 px beside its size
and state, and a cancel pushed the row 12 px off the screen. The whole name
on its own line, never cut (two renders often differ only at the end),
then size, state and cancel; the failed state is the retry. */
.making .files .file { grid-template-columns: auto 1fr auto; grid-template-areas: "nm nm nm" "sz st x"; gap: 4px 12px; padding: 8px 4px; }
.making .file .nm { grid-area: nm; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.making .file .nm .bar { margin-top: 6px; overflow: hidden; }
.making .file .sz { grid-area: sz; }
.making .file .st { grid-area: st; }
.making .file .st.bad { cursor: pointer; text-decoration: underline; padding: 6px 0; }
.making .file .cancel { grid-area: x; padding: 6px 4px 6px 12px; opacity: 1; }
/* Create set across the panel, then "or add to" beside its list. */
.draft-actions { flex-wrap: wrap; gap: 10px; }
.draft-actions > button { flex: 1 1 100%; white-space: nowrap; min-height: 44px; }
.draft-actions .draft-into { flex: 1 1 100%; }
.draft-actions .draft-into select { flex: 1; min-width: 0; }
/* 16 px in every field of the upload form and Account: under 16 px an
iPhone zooms the page when a field is tapped and leaves it zoomed. The
:not()s match the base field rule, which would otherwise outrank this. */
.making input:not([type=checkbox]):not([type=radio]):not([type=range]), .making select, .making textarea,
.acct input:not([type=checkbox]):not([type=radio]):not([type=range]), .acct select, .acct textarea { font-size: 16px; }
/* Account: a row of Downloads, Invites or Shares becomes a card, each value
with its column's name (data-label). A block, not flex: flex split
"expired, never joined" and put a gap before the comma. */
.acct .row input { width: 100%; }
.acct .row label { flex: 1 1 100%; }
.acct .invites, .acct .invites thead, .acct .invites tbody, .acct .invites tr, .acct .invites td { display: block; width: 100%; }
.acct .invites tr:has(th) { display: none; }
.acct .invites tr { border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; margin: 0 0 10px; background: var(--panel-2); }
.acct .invites td { border: 0; padding: 4px 0 4px 6.5rem; position: relative; }
.acct .invites td:not([data-label]) { padding-left: 0; }
.acct .invites td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 7px; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.acct .invites td:empty { display: none; }
.acct .invites td form { margin: 0; }
}
/* ---------- The set page on a touch screen and a phone (session 024, owner 2026-10-01) ----------
Four parts: touch drags (A), touch wording (A), the dock (B), and the page
made compact on a phone (C). Nothing here applies to a mouse. */
/* A: a sideways drag on a picture is a loop, an up-or-down one scrolls; the
grips take a finger. The listeners are pointer events (ui/player.js,
ui/edits.js; ui/filters.js already was). */
@media (hover: none) and (pointer: coarse) {
#transport-overlay, .rowwave, .rowlane, .filtstrip, .editstrip { touch-action: pan-y; }
.editstrip .h, .editstrip .fade, .filtstrip .flt-h, .filtstrip .flt-fh { touch-action: none; }
/* The edit strip 30 px tall; each trim and fade end 28 px wide to the
touch while it still looks 12 px. */
.editstrip { height: 30px; }
.editstrip .h::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: -8px; right: -8px; }
}
/* A: the keys' legend is for a keyboard; a touch screen gets its own line. */
.touchhelp { display: none; }
@media (hover: none) and (pointer: coarse) {
.legend { display: none; }
.touchhelp { display: block; margin: var(--sp-2) 0 var(--sp-3); color: var(--dim); font-size: var(--t-sm); line-height: 1.55; }
.touchhelp b { color: var(--fg); font-weight: 600; }
}
/* B: the dock (ui/dock.js). Fixed to the bottom where the thumb is: what you
hear and where, play, the marks and the pick, and a tile per render in the
rotation; twelve on two rows of six, more on two rows of seven. */
.tdock { display: none; }
@media (hover: none) and (pointer: coarse) {
body.has-tdock { padding-bottom: var(--tdock-h, 170px); }
.tdock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-deep, var(--bg));
border-top: 1px solid var(--line); box-shadow: 0 -12px 30px rgba(0,0,0,.45); }
.tdock[hidden] { display: none; }
.tdock .td-line { display: flex; gap: 10px; align-items: baseline; font: 12px var(--mono); color: var(--dim); margin: 0 2px 6px; white-space: nowrap; overflow: hidden; }
.tdock .td-line b { color: var(--fg); font-weight: 600; }
.tdock .td-line .td-say { margin-left: auto; color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; }
.tdock .td-acts { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 6px; margin-bottom: 6px; }
.tdock .td-acts button { min-height: 44px; padding: 0 6px; font-size: var(--t-sm); }
.tdock .td-tiles { display: grid; grid-template-columns: repeat(var(--td-cols, 6), 1fr); gap: 6px; }
.tdock .td-tile { height: 44px; padding: 0; border-radius: var(--r-2); font: 700 18px var(--mono);
background: transparent; color: var(--live); border: 2px solid var(--live); box-shadow: none; }
.tdock .td-tile.now { background: var(--live); color: var(--on-live); }
.tdock .td-tile.nokey { border-style: dashed; font-size: 15px; }
.tdock.tourney .td-tiles { opacity: .35; pointer-events: none; }
}
/* C: the set page made compact on a phone. */
@media (max-width: 640px) {
/* The header: "Share" on one line, so the page's name has room again. */
header .sharewrap > .tb { font-size: 0; padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; }
header .sharewrap > .tb::after { content: "Share"; font-size: var(--t-sm); }
/* After Load and play the picture comes first: what you hear, where, the
badge, the picture and its strips; the note and section entries stay
under it; the four toolbars follow. The band is not pinned on a phone:
the dock does what the pinning did. */
#transport:not([hidden]) { display: flex; flex-direction: column; }
#transport > .toolbar { order: 4; margin-top: var(--sp-2); }
#transport > .touchhelp, #transport > .legend { order: 5; }
.pinned, body.transport-tall .pinned { position: static; padding-top: 0; }
/* The status: the name beside its tile, the clock smaller, the condition
line in two short lines. The badge stays in full (DECISIONS 002). */
.tstatus { gap: 6px 10px; font-size: var(--t-base); margin-bottom: var(--sp-2); }
.tstatus .k.tile.now { width: 36px; height: 36px; }
.tstatus .k.tile.now b { font-size: 17px; }
.clockstrip { flex-basis: 100%; gap: 12px; }
.clockstrip .pos { font-size: 26px; }
.tstatus .cond { font-size: 11.5px; line-height: 1.5; }
/* The picture at a phone's size: S, M and L stay three heights, smaller
(95, 122 and 200 px for the 110, 164 and 320 a computer draws). */
.transport-wrap { height: calc(var(--transport-h, 164px) * .5 + 40px + 26px); }
/* Buttons for a thumb on this page: the toolbars, the lane bar and a lane's
own controls. */
#transport .toolbar .tb, .lanebar .tb, .lanebar select, .takeaway #btn-edits { min-height: 40px; }
.lanehead .vox .chip { min-width: 28px; min-height: 30px; }
.lanehead .rot { min-height: 32px; }
.lanehead .stars .star { font-size: 24px; padding: 2px 3px; } /* .lanehead outranks a bare .stars */
.lanehead .torel .tb { min-height: 36px; }
.spdchip { min-height: 30px; padding-left: 10px; padding-right: 10px; }
/* The small ones that appear once there is something to undo: a lane's
"clear", the fade previews, Clear marks, and a note's or section's x. */
.editsum .clear, .lanehead .clearmarks { min-height: 30px; padding: 4px 10px; }
.cv-row .fplay { min-width: 34px; min-height: 34px; }
.sec .del, .note .del { min-width: 34px; min-height: 34px; padding: 0 8px; }
/* A lane, shorter: its numbers and format line wait for Details: on, and the
fade shapes show on the lane you are hearing, which is the one the
transport's own strips edit. */
body:not(.details) .lane .lanechips { display: none; }
.lane:not(.active) .cv-row { display: none; }
}
/* Narrow phones, under 400 px (owner, 2026-10-02): the set page scrolled
sideways by 4 px at 360. The header's crumb is squeezed to nothing there but
kept its gap, so the gaps close up; and a lane's four vocal chips need
118 px where the head's second column has 86 to 116, so the rotation
button wraps instead (owner pick B). */
@media (max-width: 399px) {
header { gap: 6px; }
.lanehead .vox { min-width: max-content; }
.lanehead .rot { white-space: normal; }
}
/* ---------- The cards' glows, made small ahead of time (session 024, owner pick 1B) ----------
A glow marked "pre" is its cover's 64 px copy, blurred and saturated once by
worker/glows.py, so the browser only stretches a picture: measured, the
live blur and the placeholder's hue filter had doubled the painting work of
every scroll on a phone. The placeholder's glow is tinted per look ahead of
time (public/img/glow-art-.jpg). A glow not made yet keeps the blur. */
.lc-glow.pre, html[data-jc-sets="only"] #set-cards .lc-glow.pre, html[data-jc-rels="only"] #release-cards .lc-glow.pre { filter: none; }
.lc-glow.lc-none.pre { background-image: url(/img/glow-art-0.jpg); }
html[data-look="lantern"] .lc-glow.lc-none.pre { background-image: url(/img/glow-art-296.jpg); }
html[data-look="velvet"] .lc-glow.lc-none.pre { background-image: url(/img/glow-art-275.jpg); }
html[data-look="comfy"] .lc-glow.lc-none.pre { background-image: url(/img/glow-art-147.jpg); }
/* Jewel cases only lets its glow spill past the card, and a picture's edge is
hard where a blur's fades: each case stood on a hard-edged rectangle (owner,
2026-10-01). The edge fades through a mask instead (pick G1, session 025),
over the old box widened by the 40 px the old blur spread. */
html[data-jc-sets="only"] #set-cards .lc-glow.pre, html[data-jc-rels="only"] #release-cards .lc-glow.pre {
inset: calc(-12% - 50px) calc(-18% - 50px) calc(20% - 50px) calc(-18% - 50px); opacity: .6;
background-size: cover; background-repeat: no-repeat;
-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
html[data-jc-sets="only"] #set-cards .lc-glow.lc-none.pre, html[data-jc-rels="only"] #release-cards .lc-glow.lc-none.pre { opacity: .45; }
/* The widened box counts toward the page's width where a blur never did, so
while a section shows jewel cases only, the library's main clips sideways at
the screen's edge. Not for every mode: at 360 px an L card is itself wider
than the screen (open-work), and a clip would cut it rather than show it. */
html[data-jc-sets="only"] main:has(> #set-cards), html[data-jc-rels="only"] main:has(> #release-cards) { overflow-x: clip; }
/* ---------- A release's Metadata Lab (migration 044; owner, 2026-10-01) ----------
app/templates/release_lab.html, ui/releaselab.js. All names start ml-. */
.ml { max-width: 78rem; }
.ml-crumb { color: var(--dim); font-size: var(--t-sm); margin: 0 0 6px; }
.ml-crumb a { color: var(--dim); }
.ml h2 { margin: 0 0 4px; }
.ml-lede { color: var(--dim); font-size: var(--t-sm); line-height: 1.6; max-width: 60rem; margin: 6px 0 18px; }
.ml-lede b { color: var(--fg); }
.ml-lock { border: 1px solid var(--accent-2); border-radius: var(--r-3); padding: 12px 16px; margin: 0 0 18px; background: var(--panel-2); }
.ml-lock p { margin: 0 0 10px; font-size: var(--t-sm); color: var(--dim); line-height: 1.6; }
.ml-lock b { color: var(--fg); }
.ml-sec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.ml-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ml-head h3 { margin: 0; font-size: var(--t-md); }
.ml-head .tb { margin-left: auto; }
.ml-hint { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ml-note { color: var(--dim); font-size: var(--t-sm); margin: 4px 0 12px; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px 16px; }
.ml-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 16px; }
.ml-track { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--panel); }
.ml-track header { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; }
.ml-track header .ml-n { font: 700 18px var(--mono); color: var(--accent); }
.ml-track header .ml-from { display: block; color: var(--dim); font-size: var(--t-xs); margin-top: 2px; }
.ml-track .ml-grid { grid-template-columns: 1fr 1fr; }
.ml-f { display: block; margin: 0; color: var(--dim); font-size: var(--t-sm); min-width: 0; }
.ml-f.wide { grid-column: 1 / -1; }
.ml-f .ml-frame { color: var(--faint); font: 9.5px var(--mono); margin-left: 4px; }
.ml-f input, .ml-f textarea { display: block; width: 100%; margin-top: 4px; }
.ml-f textarea { min-height: 6rem; }
.ml-f .ml-fixed { display: block; margin-top: 4px; padding: 7px 10px; color: var(--fg); font-family: var(--mono); border: 1px dashed var(--line); border-radius: var(--r-2); }
.ml-sug { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; }
.ml-sug .ml-v { color: var(--accent-2); font-family: var(--mono); }
.ml-sug a { margin-right: 4px; color: var(--accent); font-weight: 600; }
.ml details { margin-top: 10px; }
.ml details summary { cursor: pointer; color: var(--dim); font-size: var(--t-sm); padding: 6px 0; }
.ml-carry { margin: 6px 0 0; padding: 8px 10px; background: var(--bg-deep, var(--bg)); border-radius: var(--r-2); font: 11.5px/1.6 var(--mono); color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.ml-carry b { color: var(--fg); font-weight: 600; }
@media (max-width: 640px) {
.ml-tracks { grid-template-columns: 1fr; }
.ml-track .ml-grid, .ml-grid { grid-template-columns: 1fr; }
.ml-f input, .ml-f textarea { font-size: 16px; }
.ml-head .tb { margin-left: 0; min-height: 40px; }
}
.ml-suno { display: inline-block; padding: 0 5px; border: 1px solid var(--accent-2); border-radius: var(--r-1); color: var(--accent-2); font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ml-note a { color: var(--accent); }
.ml-say { position: fixed; left: 12px; right: 12px; bottom: 16px; max-width: 34rem; margin: 0 auto; padding: 10px 12px; border-radius: var(--r-2);
background: var(--panel); border: 1px solid var(--line); color: var(--fg); font-size: var(--t-sm); z-index: 50; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.ml-say.bad { border-color: var(--bad); color: var(--bad); }
/* -- The Art Lab (DECISIONS 039, session 026): admin-only cover art, layout A
from pages/mockups/artlab/. Every name starts alb-. ----------------------- */
.alb { max-width: 92rem; margin: 0 auto; }
.alb h2 { margin: 0 0 4px; }
.alb-lede { color: var(--dim); font-size: var(--t-sm); line-height: 1.6; max-width: 60rem; margin: 6px 0 18px; }
.alb-err { color: var(--bad); font-size: var(--t-sm); margin: 0 0 12px; }
.alb-note { color: var(--dim); font-size: var(--t-xs); line-height: 1.55; margin: 2px 0 8px; }
.alb-f { display: block; color: var(--fg); font-size: var(--t-sm); font-weight: 600; margin: 14px 0 4px; }
.alb-opt { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.alb-fixed { display: inline-block; padding: 3px 10px; font: var(--t-xs) var(--mono); color: var(--dim); border: 1px dashed var(--line); border-radius: var(--r-2); }
.alb-body { display: grid; grid-template-columns: minmax(20rem, 26rem) 1fr; gap: 28px; align-items: start; }
.alb-make { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; background: var(--panel); min-width: 0; }
.alb-prompt { display: block; width: 100%; box-sizing: border-box; min-height: 8rem; resize: vertical; }
.alb-words { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alb-words select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.alb-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.alb-row .seg { flex-wrap: wrap; }
.alb-month { font-size: var(--t-sm); color: var(--dim); }
.alb-month b { color: var(--fg); font-family: var(--mono); }
.alb-meter { display: block; height: 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 4px; }
.alb-meter i { display: block; height: 100%; background: var(--accent); }
.alb-meter.full i { background: var(--bad); }
.alb-refs { display: flex; flex-wrap: wrap; gap: 6px; border-radius: var(--r-2); }
.alb-refs.over { outline: 2px dashed var(--accent); outline-offset: 3px; }
.alb-ref { position: relative; width: 56px; height: 56px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--panel-2); cursor: pointer; }
.alb-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-ref.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.alb-ref.on::after { content: "on"; position: absolute; right: 2px; bottom: 2px; font: 700 9px var(--mono); background: var(--accent); color: var(--on-accent); padding: 0 3px; border-radius: 3px; }
.alb-ref.add { border-style: dashed; color: var(--dim); font: 600 10.5px/1.25 system-ui; text-align: center; }
.alb-ref.gen::before { content: "yours"; position: absolute; left: 2px; top: 2px; font: 700 8.5px var(--mono); background: rgba(0,0,0,.7); color: #fff; padding: 0 3px; border-radius: 3px; }
.alb-attached { margin-top: 6px; }
.alb-est { margin: 16px 0 8px; padding: 10px 12px; border-radius: var(--r-2); background: var(--panel-2); font-size: var(--t-sm); color: var(--dim); line-height: 1.55; }
.alb-est b { color: var(--fg); font: 700 var(--t-md) var(--mono); }
.alb-est .alb-src { display: block; font-size: var(--t-xs); color: var(--faint); margin-top: 4px; }
.alb-go { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.alb-why { font-size: var(--t-xs); color: var(--dim); }
.alb-why.bad { color: var(--bad); }
.alb-hist { min-width: 0; }
.alb-hhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.alb-hhead h3 { margin: 0; font-size: var(--t-md); }
.alb-hsum { font-size: var(--t-xs); color: var(--dim); }
.alb-empty { color: var(--dim); font-size: var(--t-sm); border: 1px dashed var(--line); border-radius: var(--r-3); padding: 28px 18px; text-align: center; line-height: 1.6; }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 16px; }
.alb-gen { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.alb-pic { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: var(--panel-2); cursor: zoom-in; overflow: hidden; }
.alb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-pic.none { cursor: default; display: grid; place-items: center; color: var(--dim); font-size: var(--t-xs); text-align: center; padding: 14px; line-height: 1.5; box-sizing: border-box; overflow-wrap: anywhere; }
.alb-pic.run { cursor: default; display: grid; place-items: center; }
.alb-pulse { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: alb-spin 1.1s linear infinite; }
@keyframes alb-spin { to { transform: rotate(1turn); } }
.alb-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); color: var(--dim); flex: 1; }
.alb-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.alb-top .alb-cost { margin-left: auto; color: var(--fg); font: 700 var(--t-sm) var(--mono); }
.alb-chip { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 6px; }
.alb-chip.bad { color: var(--bad); }
.alb-chip.ok { color: var(--ok); }
.alb-ptext { color: var(--fg); font-size: var(--t-xs); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.alb-minis { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.alb-minis img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }
.alb-side { display: contents; }
.alb-used { color: var(--ok); }
.alb-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.alb-acts .tb { font-size: var(--t-xs); padding: 3px 8px; text-decoration: none; }
.alb-acts .tb.alb-rm { margin-left: auto; }
.alb-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 50; display: grid; place-items: center; padding: 16px; overflow: auto; }
.alb-scrim[hidden] { display: none; }
.alb-dlg { background-color: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 18px; width: min(46rem, 100%); box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; }
.alb-dlg h3 { margin: 0 0 8px; font-size: var(--t-md); }
.alb-dlg.big { width: min(72rem, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.alb-dlg.big .alb-bigpic img { width: 100%; height: auto; display: block; border-radius: var(--r-2); }
.alb-dlg dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; font-size: var(--t-xs); }
.alb-dlg dt { color: var(--dim); }
.alb-dlg dd { margin: 0; color: var(--fg); font-family: var(--mono); overflow-wrap: anywhere; }
.alb-dlg .alb-full { white-space: pre-wrap; font-size: var(--t-sm); color: var(--fg); line-height: 1.55; margin: 6px 0 10px; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.alb-dlg select { max-width: 100%; }
.alb-choice { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.alb-choice > label { font-size: var(--t-sm); display: flex; gap: 8px; align-items: baseline; }
.alb-sub { margin: 4px 0 10px 24px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); color: var(--dim); }
.alb-sub[hidden] { display: none; }
.alb-rlist { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.alb-rlist label { color: var(--fg); white-space: nowrap; }
.alb-dlgacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; grid-column: 1 / -1; }
.alb-dlgacts a.tb { text-decoration: none; }
.alb-flash { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background-color: var(--bg); border: 1px solid var(--accent); color: var(--fg); padding: 8px 14px; border-radius: var(--r-2); font-size: var(--t-sm); z-index: 60; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
.alb-flash.bad { border-color: var(--bad); color: var(--bad); }
@media (max-width: 900px) {
.alb-body { grid-template-columns: 1fr; }
.alb-make { position: static; }
.alb-dlg.big { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.alb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.alb-grid .alb-ptext { -webkit-line-clamp: 2; }
.alb-grid .alb-acts .tb { flex: 1 1 auto; text-align: center; }
.alb-acts .tb.alb-rm { margin-left: 0; }
.alb-sub { margin-left: 0; }
}
@media (max-width: 400px) { .alb-grid { grid-template-columns: 1fr; } }
/* The Art Lab, round 2 (owner, 2026-10-02): a tick box on every picture (A),
"Added to" chips under it (2) with an x to take it back, an x on each
reference, and a removed reference dimmed where a generation used it. */
.alb-picwrap { position: relative; }
.alb-tick { position: absolute; left: 8px; top: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 6px; border: 2px solid #fff;
background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.alb-tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; opacity: 0; }
.alb-gen.sel .alb-tick { background: var(--accent); border-color: var(--accent); }
.alb-gen.sel .alb-tick svg { opacity: 1; }
.alb-gen.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.alb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.alb-added { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box; font: 600 10.5px system-ui;
color: var(--fg); background: var(--panel-2); border: 1px solid var(--ok); border-radius: var(--r-pill); padding: 2px 4px 2px 8px; }
.alb-added > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alb-added.armed { border-color: var(--bad); background: var(--bad); color: #fff; }
.alb-added.armed > span { white-space: normal; }
.alb-x { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: inherit;
display: grid; place-items: center; cursor: pointer; }
.alb-x svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.alb-reftile { position: relative; display: inline-block; }
.alb-reftile > .alb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background-color: var(--bg); border: 1px solid var(--line); color: var(--dim); z-index: 2; }
.alb-reftile > .alb-x:hover { color: var(--bad); border-color: var(--bad); }
.alb-reftile.armed > .alb-x { background: var(--bad); border-color: var(--bad); color: #fff; }
.alb-reftile.armed .alb-ref { border-color: var(--bad); }
@media (hover: hover) and (pointer: fine) {
.alb-reftile > .alb-x { opacity: 0; }
.alb-reftile:hover > .alb-x, .alb-reftile > .alb-x:focus-visible, .alb-reftile.armed > .alb-x { opacity: 1; }
}
.alb-minis img.gone { opacity: .35; outline: 1px dashed var(--faint); outline-offset: -1px; }
.alb-selbar { position: sticky; bottom: 12px; z-index: 40; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--r-3); background-color: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: var(--t-sm); }
.alb-selbar[hidden] { display: none; }
.alb-selbar b { font-family: var(--mono); }
.alb-selbar select { flex: 1 1 14rem; min-width: 0; max-width: 100%; }
.alb-selbar .alb-why { flex-basis: 100%; }
/* The space sheet's groups fold, folded by default (owner, 2026-10-02): the
set's header is the summary, with a plus that turns to a minus. */
.qs-group > summary.qs-set { cursor: pointer; list-style: none; }
.qs-group > summary.qs-set::-webkit-details-marker { display: none; }
.qs-group > summary.qs-set::before { content: "+"; display: inline-block; width: 1.1em; font: 700 var(--t-md) var(--mono); color: var(--accent); }
.qs-group[open] > summary.qs-set::before { content: "-"; }
.qs-group > summary.qs-set:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qs-split .qs-dot.qs-refdot { background: var(--accent-2); }
/* Who a release is by, under its title (owner, 2026-10-02, pick A round 2). Last
in the file so it outranks the card rules above it at equal weight. A
card had no room for the line (measured: 2-23 px free where it needs 21-24),
so a release card grows by it rather than push its draws-from row out. */
#release-cards .lc-by { flex: none; min-width: 0; font-size: var(--t-sm); color: var(--fg); }
#release-cards .lc-by > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#release-cards .lc-by-lab { color: var(--dim); }
#release-cards .lc-by-none { position: relative; z-index: 3; color: var(--dim); font-style: italic;
text-decoration: underline dotted; text-underline-offset: 2px; }
html:not([data-jc-rels="only"]) #release-cards .lcard { height: auto; min-height: calc(var(--lc-cov) + 20px); }
html:not([data-jc-rels="only"]) #release-cards .lc-words { height: auto; min-height: var(--lc-cov); }
html[data-jc-rels="only"] #release-cards .lc-words { height: auto; min-height: var(--lc-bh); }
/* On a computer a little bigger, and centred between the title's own text and
the status line: the byline takes the room between them, and the title no
longer holds a second line it does not use. S's column is 99 px and Syne is
wide ("by: Mosekonen" needed 101 at 14), so S takes 13. On a phone, as above. */
@media (min-width: 641px) {
#release-cards .lc-by { flex: 1 0 auto; display: flex; align-items: center; font-size: var(--t-base); }
#release-cards .lcard h3 { min-height: 0; }
html[data-cards-rels="s"] #release-cards .lc-by { font-size: 13px; }
}
/* -- The streaming catalog's control on a release card's cover (DECISIONS 040, way A; session 029).
Placed on the picture by streamtick.js; round on a cover under 124 px. Above the stretched title
link (z-index 2) and nothing else; gone while the cards are being re-arranged. */
.lcard .st-cov { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill);
padding: 4px 10px 4px 7px; font: 700 11.5px/1.2 var(--font); cursor: pointer; white-space: nowrap;
background: rgba(0,0,0,.78); color: #fff; border: 1px solid rgba(255,255,255,.25); }
/* No backdrop blur behind the chip (owner pick A, 2026-10-15): 25 of them made
scrolling the releases on a phone measurably slower, and behind a near-black
pill the blur barely showed; the pill went from 72% to 78% black instead. */
.lcard .st-cov .st-ic { width: 14px; height: 14px; fill: currentColor; flex: none; }
.lcard .st-cov .st-short { display: none; }
.lcard .st-cov.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--ember), 0 0 14px var(--ember); }
.lcard .st-cov.making, .lcard .st-cov.failed { background: rgba(0,0,0,.8); color: var(--accent-2); border-color: var(--accent); }
.lcard .st-cov.failed { color: var(--bad); border-color: var(--bad); }
.lcard .st-cov.none { opacity: .7; }
.lcard .st-cov.st-small { width: 30px; height: 30px; padding: 0; justify-content: center; gap: 0; }
.lcard .st-cov.st-small .st-words { display: none; }
.lcard .st-cov.st-small.making .st-short, .lcard .st-cov.st-small.failed .st-short { display: inline; font-size: 10px; }
.lcard .st-cov.st-small.none::after { content: "-"; font-size: 14px; }
.lcgrid.ordering .lcard .st-cov, .lcgrid.ordering .lcard .st-confirm, .lcgrid.ordering .lcard .st-note { display: none; }
.lcard .st-confirm, .lcard .st-note { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 8px; padding: 10px 12px;
border-radius: var(--r-2); background: var(--bg-deep); border: 1px solid var(--accent);
box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 12.5px; line-height: 1.5; color: var(--fg); }
.lcard .st-note { border-color: var(--line); }
.lcard .st-confirm > div, .lcard .st-note > div { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lcard .st-btn { border: 1px solid var(--line); background: var(--glass); color: var(--fg); border-radius: var(--r-pill);
padding: 6px 12px; font: 700 12px/1.2 var(--font); cursor: pointer; min-height: 32px; }
.lcard .st-btn.warn { border-color: var(--bad); color: var(--bad); }
.qs-split .qs-dot.qs-copydot { background: var(--live); }
@media (max-width: 640px) {
.lcard .st-cov:not(.st-small) { padding: 6px 11px 6px 8px; font-size: 12px; }
.lcard .st-cov.st-small { width: 34px; height: 34px; }
.lcard .st-btn { min-height: 40px; }
}
/* -- The streaming page (DECISIONS 040; workbench A on a computer, layout 2 below 1200 px; session 029). sm-. */
.sm-page { max-width: 1520px; }
.sm-page button { font: inherit; color: inherit; }
.sm-pagehead { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; }
.sm-pagehead h2 { font-size: 20px; margin: 0; color: var(--fg-strong); }
.sm-pagehead p { margin: 0; color: var(--dim); font-size: 13px; }
.sm-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel-2); color: var(--fg); font-size: 13px; }
.sm-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px; box-sizing: border-box; min-width: 0; }
.sm-panel h3 { margin: 0 0 4px; font-size: 15px; color: var(--fg-strong); }
.sm-sub { color: var(--dim); font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
.sm-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--glass); color: var(--fg);
border-radius: var(--r-pill); padding: 6px 12px; font-size: 12.5px; font-weight: 700; min-height: 32px; cursor: pointer; }
.sm-btn:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
.sm-btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px var(--ember), 0 0 14px var(--ember-soft); }
.sm-btn.go:hover:not(:disabled) { background: var(--accent-2); color: var(--on-accent); }
.sm-btn.warn { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); color: var(--bad); }
.sm-btn.small { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.sm-quiet { background: none; border: 0; color: var(--dim); text-decoration: underline; cursor: pointer; padding: 2px 4px; font-size: 12.5px; }
.sm-quiet:hover { color: var(--accent-2); }
.sm-links { display: flex; flex-direction: column; gap: 8px; }
.sm-link { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; background: var(--panel-2); cursor: pointer; min-width: 0; }
.sm-link.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--ember), 0 0 18px var(--ember-soft); }
.sm-link.gone { opacity: .6; }
.sm-link-top { display: flex; align-items: center; gap: 8px; }
.sm-link-title { font-weight: 700; color: var(--fg-strong); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-badge { font-size: 11px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; color: var(--dim); white-space: nowrap; }
.sm-badge.pw { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.sm-link-note { color: var(--dim); font-size: 12.5px; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-link-facts { color: var(--dim); font-size: 12px; margin: 6px 0 0; }
.sm-nums { display: flex; gap: 14px; margin: 8px 0 0; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.sm-nums b { color: var(--fg); font-size: 15px; display: block; font-variant-numeric: tabular-nums; }
.sm-addr { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.sm-addr code { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--fg); background: var(--bg-deep); border: 1px solid var(--line-soft);
border-radius: var(--r-1); padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; align-items: center; }
.sm-confirm { font-size: 12.5px; color: var(--fg); margin: 10px 0 0; line-height: 1.5; }
.sm-fold { margin-top: 10px; } .sm-fold summary { cursor: pointer; color: var(--dim); font-size: 12.5px; } .sm-fold .sm-links { margin-top: 8px; }
.sm-stamp { font-size: 12px; color: var(--live); margin: 8px 0 0; }
.sm-err { color: var(--bad); font-size: 12.5px; margin: 8px 0 0; }
.sm-cat { display: flex; flex-direction: column; gap: 10px; }
.sm-rel { border: 1px solid var(--line-soft); border-radius: var(--r-2); padding: 10px; background: var(--panel-2); }
.sm-rel-top { display: flex; gap: 10px; align-items: center; }
.sm-rel-top img, .sm-noart { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex: none; background: var(--line); }
.sm-rel-name { flex: 1; min-width: 0; }
.sm-rel-name b { display: block; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-rel-name small { color: var(--dim); font-size: 12px; }
.sm-songs { list-style: none; margin: 8px 0 0; padding: 0; }
.sm-song { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--line-soft); }
.sm-song label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.sm-song label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-song input, .sm-rel-top input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; margin: 0; }
.sm-len { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.sm-copy { font-size: 11px; color: var(--dim); white-space: nowrap; }
.sm-copy.sm-making { color: var(--accent-2); }
.sm-form { display: flex; flex-direction: column; gap: 14px; }
.sm-field label, .sm-field .sm-lab { display: block; font-size: 12.5px; color: var(--dim); margin: 0 0 5px; font-weight: 600; }
.sm-field .sm-in { width: 100%; box-sizing: border-box; }
.sm-field textarea.sm-in { min-height: 64px; font-family: var(--font); font-size: var(--t-base); resize: vertical; }
.sm-field .sm-hint { font-size: 11.5px; color: var(--faint); margin: 5px 0 0; line-height: 1.5; }
.sm-order { list-style: none; margin: 0; padding: 0; }
.sm-order li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--line-soft); }
.sm-order li:first-child { border-top: 0; }
.sm-order li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-order li small { color: var(--dim); }
.sm-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); display: grid; place-items: center; cursor: pointer; padding: 0; }
.sm-arrow:disabled { opacity: .3; cursor: default; }
.sm-arrow svg { width: 14px; height: 14px; fill: currentColor; }
.sm-pw { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.sm-pw label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; color: var(--fg); font-size: 13px; margin: 0; font-weight: 400; }
.sm-made { border: 1px solid color-mix(in srgb, var(--live) 50%, var(--line)); border-radius: var(--r-2); padding: 12px; background: var(--panel-2); }
.sm-made p { margin: 0; font-size: 13px; color: var(--fg); }
.sm-formacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sm-dress { width: 100%; height: 110px; border: 0; display: block; background: transparent; }
.sm-prev { position: sticky; top: 16px; }
.sm-prev p { margin: 0 0 6px; font-size: 12.5px; color: var(--dim); }
.sm-frame { width: 375px; height: 720px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-deep); display: block; }
.sm-a { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.sm-a .sm-side { position: sticky; top: 16px; }
.sm-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .sm-side-head h3 { flex: 1; margin: 0; }
.sm-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) 377px; gap: 18px; align-items: start; }
/* Layout 2, below 1200 px: the list, then a link on its own screen. Touch sizes; 16 px fields so an iPhone does not zoom. */
.sm-ph { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } .sm-ph h3 { flex: 1; margin: 0; font-size: 16px; color: var(--fg-strong); }
.sm-ptop { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 0;
background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.sm-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent-2); font-weight: 700; min-height: 44px; padding: 0 6px 0 0; cursor: pointer; }
.sm-back svg { width: 24px; height: 24px; fill: currentColor; }
.sm-ptitle { flex: 1; min-width: 0; font-weight: 700; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-tabs { display: flex; gap: 4px; margin: 6px 0 14px; border-bottom: 1px solid var(--line); }
.sm-tab { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 14px; font-weight: 700; font-size: 13.5px; color: var(--dim); cursor: pointer; margin-bottom: -1px; border-radius: 0; min-height: 44px; }
.sm-tab[aria-selected="true"] { color: var(--fg-strong); border-bottom-color: var(--accent); }
.sm-ptabs .sm-tab { flex: 1; padding: 8px 2px; font-size: 13px; white-space: nowrap; }
.sm-pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 6px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.sm-pbar .sm-err, .sm-pbar .sm-stamp { margin: 0; }
.sm-prow { display: flex; gap: 8px; } .sm-prow .sm-btn { flex: 1; justify-content: center; min-height: 46px; }
.sm-pprev { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; padding: 0 12px; }
.sm-pframe { flex: 1; width: 100%; border: 0; display: block; background: var(--bg); }
/* A link's Stats tab (the round 3 ruling): tabs over the work, six counts, visitors per day, the songs, Still listening. */
.sm-right { min-width: 0; }
.sm-work[hidden], .sm-stats[hidden] { display: none; }
.sm-tabnote { margin-left: auto; align-self: center; font-size: 12.5px; color: var(--dim); }
.sm-stats { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sm-stats-head h3 { font-size: 18px; margin: 0 0 4px; color: var(--fg-strong); }
.sm-stats-empty { padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-3); }
.sm-stats-empty h3 { margin: 0 0 6px; color: var(--fg-strong); font-size: 16px; }
.sm-def { font-size: 12.5px; color: var(--dim); }
.sm-def summary { cursor: pointer; color: var(--accent-2); }
.sm-def p { line-height: 1.7; margin: 6px 0 0; } .sm-def b { color: var(--fg); }
.sm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sm-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 14px; min-width: 0; }
.sm-kpi span { display: block; font-size: 12.5px; color: var(--dim); }
.sm-kpi b { display: block; font-size: 26px; font-weight: 700; color: var(--fg-strong); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sm-kpi small { display: block; font-size: 11.5px; color: var(--dim); }
.sm-chartcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px 16px; min-width: 0; }
.sm-chart-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.sm-chart-top h4 { margin: 0; font-size: 14.5px; color: var(--fg-strong); min-width: 0; overflow-wrap: anywhere; }
.sm-chart-top .sm-quiet { margin-left: auto; }
.sm-sub.sm-flat { margin: 0; } .sm-sub.sm-after { margin: 8px 0 0; }
.sm-chart { position: relative; }
.sm-svg { display: block; overflow: visible; }
.sm-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.sm-base { stroke: var(--dim); stroke-opacity: .5; stroke-width: 1; shape-rendering: crispEdges; }
.sm-axis { fill: var(--dim); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.sm-label { fill: var(--fg); font: 600 12px var(--font); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.sm-mark { fill: var(--accent); }
.sm-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sm-wash { fill: var(--accent); fill-opacity: .1; stroke: none; }
.sm-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.sm-waveback { fill: var(--line); fill-opacity: .55; } /* context, never competing with the data */
.sm-mark30 { stroke: var(--dim); stroke-opacity: .55; stroke-width: 1; shape-rendering: crispEdges; }
.sm-cross { stroke: var(--fg); stroke-opacity: .6; stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.sm-hit { fill: transparent; cursor: crosshair; outline: none; }
.sm-hit.on, .sm-hit:focus-visible { fill: var(--fg); fill-opacity: .05; }
.sm-sec { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; } .sm-sec.alt { fill: var(--bg-deep); }
.sm-sec-name { fill: var(--fg); font: 600 11px var(--font); }
.sm-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-1);
padding: 6px 10px; font-size: 12px; color: var(--dim); white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.sm-tip p { margin: 0; line-height: 1.5; } .sm-tip b { color: var(--fg-strong); font-size: 13px; }
.sm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sm-table th { text-align: right; font-weight: 600; color: var(--dim); font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.sm-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; color: var(--fg); }
.sm-table th:nth-child(-n+2), .sm-table td:nth-child(-n+2) { text-align: left; }
.sm-table.sm-tight th:nth-child(2), .sm-table.sm-tight td:nth-child(2) { text-align: right; }
.sm-table td b { display: block; color: var(--fg-strong); font-weight: 600; }
.sm-table td small { color: var(--dim); font-size: 11.5px; }
.sm-table tbody tr[data-song-row] { cursor: pointer; }
.sm-table tbody tr[data-song-row]:hover td { background: var(--ember-wash); }
.sm-table tbody tr.on td { background: var(--ember-wash); }
.sm-table tbody tr.on td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.sm-table.sm-tight { max-width: 620px; }
.sm-slist { list-style: none; margin: 0; padding: 0; }
.sm-slist li { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); cursor: pointer; border-radius: 6px; }
.sm-slist li.on { background: var(--ember-wash); box-shadow: inset 2px 0 0 var(--accent); }
.sm-slist b { display: block; color: var(--fg-strong); font-weight: 600; font-size: 14px; }
.sm-slist small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
@media (max-width: 1199px) {
.sm-page { padding-bottom: 120px; }
.sm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-kpi { padding: 10px; } .sm-kpi b { font-size: 21px; }
.sm-chartcard { padding: 12px 12px 14px; }
.sm-stats-head h3 { font-size: 16px; }
.sm-page .sm-quiet { padding: 8px 4px; }
.sm-table.sm-tight { font-size: 12px; } .sm-table.sm-tight th, .sm-table.sm-tight td { padding: 6px 6px; }
.sm-page .sm-btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
.sm-page .sm-btn.small { min-height: 36px; }
.sm-page .sm-arrow { width: 38px; height: 38px; }
.sm-page .sm-song { padding: 7px 0; font-size: 14px; }
.sm-page .sm-song input, .sm-page .sm-rel-top input, .sm-page .sm-pw input { width: 20px; height: 20px; }
body .sm-page .sm-field .sm-in.sm-in { font-size: 16px; padding: 10px 12px; } /* (0,4,1): beats the site's input rule */
}
/* -- A link's page for its listeners (DECISIONS 040; round 1's rulings). lp-; page-wide rules only under body.listenpage. */
body.listenpage { margin: 0; min-height: 100vh; font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
.lp-page { padding: 0 16px 96px; max-width: 560px; margin: 0 auto; }
.lp-song-main, .lp-tile, .lp-mini-open, .lp-icon, .lp-add, .lp-rm, .lp-quiet, .lp-ghost, .lp-primary, .lp-mine-btn, .lp-view { font: inherit; color: inherit; }
.lp-icon svg, .lp-ic svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.lp-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 10px 16px;
background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.lp-bar-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mine-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--glass); border-radius: var(--r-pill); padding: 7px 12px; font-size: 13px; font-weight: 700; min-height: 36px; cursor: pointer; }
.lp-mine-btn .lp-ic svg { width: 18px; height: 18px; }
.lp-count { background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 0 7px; font-size: 12px; min-width: 20px; text-align: center; }
.lp-count.zero { background: var(--line); color: var(--dim); }
.lp-head { padding: 20px 0 6px; }
.lp-title { font-size: 26px; line-height: 1.15; margin: 0 0 8px; color: var(--fg-strong); overflow-wrap: anywhere; }
.lp-intro { color: var(--fg); margin: 0 0 14px; }
.lp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-pill);
padding: 10px 18px 10px 14px; font-weight: 700; font-size: 15px; min-height: 44px; cursor: pointer; box-shadow: 0 0 0 1px var(--ember), 0 0 16px var(--ember-soft); }
.lp-primary .lp-ic svg { width: 20px; height: 20px; }
.lp-sum { color: var(--dim); font-size: 13px; }
.lp-views { display: flex; gap: 2px; margin: 16px 0 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel-2); width: fit-content; max-width: 100%; }
.lp-view { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: var(--r-pill); padding: 6px 14px 6px 10px; font-size: 13px; font-weight: 700; color: var(--dim); min-height: 38px; cursor: pointer; }
.lp-view .lp-ic svg { width: 18px; height: 18px; }
.lp-view[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.lp-hint { color: var(--dim); font-size: 13px; margin: 12px 0 0; } .lp-hint b { color: var(--fg); font-weight: 700; }
.lp-songs { list-style: none; margin: 0; padding: 0; }
.lp-song { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.lp-song:last-child { border-bottom: 0; }
.lp-song-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; text-align: left; padding: 10px 0; min-height: 52px; border-radius: 0; cursor: pointer; }
.lp-n { width: 22px; flex: none; text-align: right; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-n svg { width: 18px; height: 18px; fill: var(--accent); display: inline-block; vertical-align: middle; }
.lp-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.lp-noart { display: block; background: var(--line); }
.lp-t { flex: 1; min-width: 0; }
.lp-t b { display: block; font-weight: 600; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-t small { display: block; color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-len { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.lp-song.is-on .lp-t b { color: var(--accent-2); }
.lp-add { flex: none; width: 44px; height: 44px; margin-left: 4px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--fg); cursor: pointer; }
.lp-add svg { width: 20px; height: 20px; fill: currentColor; }
.lp-add.in { background: var(--live); border-color: var(--live); color: var(--on-live); }
.lp-sleeve { margin: 26px 0 0; }
.lp-sleeve > img, .lp-sleeve > .lp-noart { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-3); display: block; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.lp-rel-title { font-size: 21px; margin: 14px 0 2px; color: var(--fg-strong); overflow-wrap: anywhere; }
.lp-rel-meta { color: var(--dim); font-size: 13px; margin: 0 0 8px; }
.lp-rel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--glass); border-radius: var(--r-pill); padding: 7px 14px 7px 10px; font-weight: 700; font-size: 13px; min-height: 40px; cursor: pointer; }
.lp-ghost .lp-ic svg { width: 18px; height: 18px; }
.lp-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 22px; }
.lp-tile { background: none; border: 0; padding: 0; text-align: left; border-radius: 0; min-width: 0; align-self: start; cursor: pointer; } /* a stretched button centres its content */
.lp-tile img, .lp-tile .lp-noart { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2); display: block; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
.lp-tile b { display: block; margin-top: 8px; font-weight: 700; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tile small { display: block; color: var(--dim); font-size: 12.5px; }
.lp-tile.is-on img { box-shadow: 0 0 0 2px var(--accent), 0 8px 26px var(--ember); }
.lp-list { margin-top: 18px; }
.lp-mini { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 12; display: flex; flex-direction: column; gap: 6px; padding: 8px;
border-radius: var(--r-3); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden; max-width: 544px; margin: 0 auto; }
.lp-mini[hidden] { display: none; }
.lp-mini-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* The copy's merged picture (pick W2), in the small player as a strip to tap or drag (pick B1) and in Now playing.
What is still to come lies under a veil of the surface; the playhead marks now. */
.lp-wavebox { position: relative; touch-action: none; cursor: pointer; overflow: hidden; outline: none; }
.lp-wavebox canvas { display: block; width: 100%; height: 100%; }
.lp-wave-rest { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; background: color-mix(in srgb, var(--bg) 62%, transparent); pointer-events: none; }
.lp-wave-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--fg-strong); pointer-events: none; }
.lp-wavebox:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.lp-mini-strip { height: 38px; border-radius: 6px; }
.lp-mini .lp-wave-rest { background: color-mix(in srgb, var(--panel) 62%, transparent); }
.lp-mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; border-radius: 0; cursor: pointer; }
.lp-mini-art img, .lp-mini-art .lp-noart { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; display: block; }
.lp-mini-open > span:last-child { min-width: 0; }
.lp-mini-open b { display: block; font-weight: 700; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mini-open small { display: block; color: var(--dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-wake { display: flex; align-items: flex-start; gap: 6px; padding: 8px 4px 8px 10px; border-radius: var(--r-2); color: var(--fg-strong); font-size: 13px; line-height: 1.35;
background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-wake[hidden] { display: none; }
.lp-wake > span { flex: 1; min-width: 0; padding-top: 3px; } /* the music stopped while locked: the phone's setting (2026-10-07) */
.lp-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--fg); cursor: pointer; }
.lp-icon.big { width: 64px; height: 64px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px var(--ember), 0 0 24px var(--ember-soft); }
.lp-icon.big svg { width: 30px; height: 30px; }
.lp-veil { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10; }
.lp-veil[hidden], .lp-sheet[hidden] { display: none; }
.lp-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 6%; z-index: 11; background: var(--bg); border-top: 1px solid var(--line);
border-radius: var(--r-4) var(--r-4) 0 0; display: flex; flex-direction: column; overflow: hidden; max-width: 560px; margin: 0 auto; }
body.lp-has-mini .lp-mine, body.lp-has-mini .lp-rel-sheet { bottom: 124px; border-radius: var(--r-4); border-bottom: 1px solid var(--line); }
.lp-now { z-index: 13; }
.lp-sheet-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line-soft); }
.lp-sheet-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 16px; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-sheet-head h3 small { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 6px; }
.lp-sheet-body { flex: 1; overflow-y: auto; padding: 0 16px 24px; -webkit-overflow-scrolling: touch; }
.lp-sheet-foot { display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); align-items: center; flex-wrap: wrap; }
.lp-now .lp-sheet-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
touch-action: pan-y; overscroll-behavior: contain; } /* sideways is a swipe to another song; up and down move nothing behind it */
/* Now playing fits the screen with no scrolling (the owner, 2026-10-05): every part keeps its height but the
covers' row, which gives up height on a short screen, and the cover is sized to that row's height (cqh),
never more than it was; on a tall one the spare height is shared above and below the whole. A clipping child would otherwise shrink to nothing in the column and the title ride over the cover. */
.lp-now .lp-sheet-body > * { flex-shrink: 0; }
.lp-now .lp-sheet-body > .lp-now-deck { flex: 0 1 auto; height: calc(min(70vw, 300px) + 16px); min-height: 96px; } /* the cover's height, less on a short screen */
.lp-now .lp-now-from { color: var(--dim); font-size: 12.5px; margin: 0 0 4px; }
.lp-now-art img, .lp-now-art .lp-noart { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-3); box-shadow: 0 14px 50px rgba(0,0,0,.5); display: block; }
/* The covers in a row (the owner, 2026-10-05): the song's in the middle, a glimpse of the previous and next at the
sheet's edges, so a swipe reads at a glance; the row follows the finger. The padding is room for the shadow. */
.lp-now-deck { align-self: stretch; margin: 0 -16px; overflow: hidden; container-type: size; display: flex; align-items: center; }
.lp-now-track { display: flex; gap: 12px; width: max-content; margin-left: 50%; transform: translateX(calc(-50% + var(--dx, 0px))); }
.lp-now-track > span { flex: none; width: min(70vw, 300px); width: min(70vw, 300px, calc(100cqh - 16px)); } /* the room left, at most 70vw: about 30 px of each neighbour shows */
.lp-now-peek { opacity: .45; transform: scale(.9); }
.lp-now-peek img, .lp-now-peek .lp-noart { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-3); display: block; }
/* A bigger collapse button in Now playing (the owner, 2026-10-05). */
.lp-now .lp-sheet-head .lp-icon { width: 56px; height: 56px; }
.lp-now .lp-sheet-head .lp-icon svg { width: 36px; height: 36px; }
.lp-now h2 { margin: 12px 0 2px; font-size: 22px; line-height: 1.2; color: var(--fg-strong); overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* two lines at most */
.lp-now p { margin: 0; color: var(--dim); }
.lp-now-wave { width: 100%; height: 56px; margin: 4px 0 2px; } /* under the controls, as on the small player (the owner, 2026-10-05) */
.lp-times { width: 100%; display: flex; justify-content: space-between; color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lp-ctl { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0 6px; }
.lp-ctl .lp-icon svg { width: 28px; height: 28px; }
.lp-now-add { margin-top: 10px; }
.lp-note { color: var(--dim); font-size: 13px; margin: 12px 0 6px; }
.lp-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.lp-row.drag { background: var(--panel); box-shadow: 0 6px 20px rgba(0,0,0,.5); position: relative; z-index: 2; }
.lp-grip { flex: none; width: 40px; height: 52px; display: grid; place-items: center; color: var(--faint); touch-action: none; cursor: grab; }
.lp-grip svg { width: 22px; height: 22px; fill: currentColor; }
.lp-row .lp-song-main { padding: 6px 0; }
.lp-rm { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--dim); border-radius: 50%; cursor: pointer; }
.lp-rm svg { width: 20px; height: 20px; fill: currentColor; }
.lp-empty { color: var(--dim); text-align: center; margin: 48px 12px; }
.lp-quiet { background: none; border: 0; color: var(--dim); text-decoration: underline; padding: 8px 4px; font-size: 13px; cursor: pointer; }
.lp-confirm { color: var(--fg); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-confirm .lp-ghost { min-height: 36px; }
.lp-rel-sheet .lp-rel-top { display: flex; gap: 14px; align-items: flex-end; padding: 16px 0 6px; }
.lp-rel-sheet .lp-rel-top img, .lp-rel-sheet .lp-rel-top .lp-noart { width: 112px; height: 112px; border-radius: var(--r-2); object-fit: cover; flex: none; }
.lp-rel-sheet .lp-rel-title { margin-top: 0; }
/* In front of a link's songs: its password, withdrawn, or no link (the round 1 mockup's gate, 040). */
.lp-gate { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 32px 22px 60px; max-width: 420px; margin: 0 auto; }
.lp-gate .lp-kicker { color: var(--dim); font-size: 13px; margin: 0 0 6px; }
.lp-gate h1 { font-size: 24px; line-height: 1.2; margin: 0 0 12px; color: var(--fg-strong); overflow-wrap: anywhere; }
.lp-gate p { margin: 0 0 14px; }
.lp-gate label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 6px; }
/* (0,4,1): the site's input rule has three :not() tests (0,3,1), which beat a plainer selector to 14 px. */
.lp-gate .lp-form input.lp-pw[type] { width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 14px; min-height: 48px; border-radius: var(--r-2); }
.lp-gate .lp-primary { width: 100%; justify-content: center; margin-top: 12px; }
.lp-gate .lp-primary:disabled { opacity: .5; }
.lp-err { color: var(--bad); font-size: 14px; margin: 10px 0 0 !important; }
.lp-gate .lp-small { color: var(--dim); font-size: 13px; margin-top: 18px; }
/* A song that would not play, said in the small player in place of its release. */
.lp-mini-open small.lp-mini-err { color: var(--bad); }
body.lp-has-mini .lp-page { padding-bottom: 140px; } /* the small player, strip and row, never covers the last song */