/* Phones use a bottom record tray; desktop has its own right-hand stack. */
.quick-save { height:36px; border-radius:18px; gap:5px; font-size:11px; padding:0 13px; background:#fff9; }
.quick-save > span { font-size:16px; line-height:1; }
.saved-records { position:relative; width:min(520px,calc(100% - 32px)); height:118px; flex:0 0 118px; margin:5px auto 0; display:grid; grid-template-columns:minmax(110px,1fr) 218px 74px; align-items:center; gap:14px; border-top:1px solid #dfdcd7; }
.records-heading { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.records-heading h2 { margin:0; font-size:11px; font-weight:600; letter-spacing:-.2px; }
.records-heading h2 span { color:#858585; font-size:10px; margin-left:4px; }
.records-heading button { border:0; padding:5px 0; font-size:9px; color:#6b6b6b; background:transparent; }
.record-crate { --record-step:32px; height:104px; width:218px; position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.saved-record { position:absolute; left:0; top:5px; height:100px; width:100px; border:1px solid #c8c5bf; border-radius:4px; overflow:hidden; padding:0; background:#f5f3ef; box-shadow:0 3px 7px #201a1412; transform-origin:50% 100%; transform:translateX(calc(var(--depth) * var(--record-step))) rotate(calc(var(--depth) * 2deg)); transition:transform .22s ease,box-shadow .22s ease; text-align:left; }
/* Only the pointed-to cover moves. The surrounding stack never expands. */
.saved-record.is-peek, .saved-record:focus-visible { z-index:10000 !important; transform:translateX(calc(var(--depth) * var(--record-step) - 14px)) translateY(-7px) rotate(-7deg); box-shadow:0 8px 14px #201a1424; }
.saved-record:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.record-tab { height:12px; display:flex; align-items:center; gap:8px; padding:0 5px; background:var(--record-color); color:var(--record-ink); font:7px monospace; }
.record-tab > span { display:none; }
.record-art { display:block; height:72px; overflow:hidden; background:#f6f5f8; }
.record-art img { display:block; width:100%; height:100%; object-fit:contain; }
.record-art.legacy-art img { width:200%; max-width:none; }
.record-label { display:flex; justify-content:space-between; gap:5px; padding:2px 5px; font-size:6px; line-height:10px; border-top:1px solid #e3e0da; }
.record-label > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-record[aria-pressed=true] .record-label { color:#b64509; }
.record-browser { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; }
.record-browser button { border:1px solid #d9d7d3; border-radius:50%; background:#fff8; width:28px; height:28px; font-size:19px; }
.record-browser p { order:3; width:100%; text-align:center; margin:2px 0 0; font:9px monospace; color:#707070; }
.record-browser button:disabled { opacity:.35; }
.record-storage { position:absolute; left:0; bottom:9px; color:#8b8883; font-size:7px; }
.records-empty { font-size:10px; line-height:1.5; color:#85817a; margin:0; text-align:right; }
.saved-records.is-empty { height:48px; flex-basis:48px; display:flex; justify-content:space-between; }
.is-empty .record-crate, .is-empty .record-storage { display:none; }
.record-browser[hidden], .records-empty[hidden], .records-heading button[hidden] { display:none; }
.layout.editing .saved-records { display:none; }
.shuffle-bar { gap:7px; }
@media(max-width:650px) {
 .saved-records { height:110px; flex-basis:110px; grid-template-columns:minmax(90px,1fr) 178px 28px; gap:10px; }
 .record-crate { --record-step:28px; width:178px; height:96px; }
 .saved-record { width:88px; height:88px; }
 .record-art { height:60px; }
 .record-browser { flex-direction:column; flex-wrap:nowrap; gap:4px; }
 .record-browser button { width:26px; height:26px; }
 .record-browser p { order:0; width:auto; margin:0; }
 .quick-save { padding:0 10px; font-size:10px; }
}
@media(max-width:380px) {
 .saved-records { grid-template-columns:minmax(70px,1fr) 162px 26px; gap:6px; }
 .record-crate { --record-step:23px; width:162px; }
 .records-heading h2 { font-size:10px; }
 .shuffle-bar { gap:4px; }
 .btn.shuffle { padding:0 10px; }
 .quick-save { padding:0 8px; }
}
@media(max-height:650px) and (min-width:651px) and (max-width:900px) {
 .saved-records { height:94px; flex-basis:94px; }
 .record-crate { height:90px; }
 .saved-record { height:82px; width:82px; }
 .record-art { height:54px; }
 .record-storage { display:none; }
}
@media(prefers-reduced-motion:reduce) { .saved-record { transition:none; } }

/* Desktop keeps the full preview height. The collection never enters its flex flow. */
@media(min-width:901px) {
 body { overflow-y:auto; }
 .layout { min-height:600px; }
 .saved-records { position:absolute; z-index:3; right:24px; top:max(206px,calc(50% - 124px)); width:208px; height:auto; margin:0; border:0; display:flex; flex-direction:column; gap:12px; }
 .records-heading { width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:6px; }
 .record-crate { --record-step:10px; --record-axis:vertical; width:208px; height:228px; }
 .saved-record { top:32px; left:0; width:190px; height:190px; transform:translate(calc(var(--depth) * 5px),calc(var(--depth) * -1 * var(--record-step))); }
 .saved-record.is-peek, .saved-record:focus-visible { transform:translate(calc(var(--depth) * 5px - 32px),calc(var(--depth) * -1 * var(--record-step))) rotate(-6deg); }
 .record-tab { height:18px; padding:0 8px; font-size:8px; }
 .record-tab > span { display:inline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; }
 .record-art { height:148px; }
 .record-label { font-size:8px; line-height:17px; padding:2px 8px; }
 .record-browser { flex-wrap:nowrap; gap:16px; }
 .record-browser p { order:0; width:auto; margin:0; }
 .record-storage { position:static; font-size:8px; }
 .saved-records.is-empty { height:auto; display:flex; align-items:flex-start; }
 .records-empty { text-align:left; }
 .layout:not(.editing) .canvas-wrap { margin-left:230px; margin-right:230px; }
}

/* Oct 21 2026: controls with their own light surface keep dark text on every backdrop.
   The Night backdrop sets a light text color on .stage, which these white controls used to inherit. */
.btn.ghost, .icon-btn.round, .dd-btn, .dd-list { color:var(--ink); }
.icon-btn.round svg, .dd-caret { color:var(--ink-2); border-color:var(--ink-2); }
.quick-save { color:var(--ink); background:rgba(255,255,255,.94); }