/* ═════════════════════════════════════════════════════════════════════════════════════════════
   New releases — the week triage page and the home page's week tiles.
   Uses the tokens on :root in site.css. Glyphs are generated PNGs (img/marks/ic-nr-*.png), tinted
   with a mask so one image serves every ink; each PNG is cropped to its own ink, so each icon carries
   its own optical size and offset below.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

body.page-new-releases {
    --nr-btn: 36px;
    --nr-btn-hit: 44px;
    --nr-glyph: 18px;
    --nr-inset: 6px;
    --nr-gap: 20px;
    --nr-panel-w: 380px;
    --nr-dock-bar: 56px;
    --nr-chip-h: 20px;
}

body.page-new-releases .app-main,
body.page-new-releases.has-mini-player .app-main {
    padding-bottom: calc(var(--nr-player-h, 0px) + var(--nr-dock-h, 0px) + 36px);
}

/* ── glyphs ── */
.nr-icon {
    display: block;
    width: var(--nr-glyph, 18px);
    height: var(--nr-glyph, 18px);
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--nr-mask) center / contain no-repeat;
    mask: var(--nr-mask) center / contain no-repeat;
}
.nr-icon--dismiss { --nr-mask: url("../img/marks/ic-nr-dismiss.png"); width: calc(var(--nr-glyph, 18px) * 0.8); height: calc(var(--nr-glyph, 18px) * 0.8); }
.nr-icon--heart { --nr-mask: url("../img/marks/ic-nr-heart.png"); transform: translateY(1px); }
.nr-icon--heart-filled { --nr-mask: url("../img/marks/ic-nr-heart-filled.png"); transform: translateY(1px); }
.nr-icon--preview { --nr-mask: url("../img/marks/ic-nr-preview.png"); transform: translateX(1px); }
.nr-icon--play { --nr-mask: url("../img/marks/ic-nr-play.png"); transform: translateX(1.5px); }
.nr-icon--pause { --nr-mask: url("../img/marks/ic-nr-pause.png"); width: calc(var(--nr-glyph, 18px) * 0.85); height: calc(var(--nr-glyph, 18px) * 0.85); }
.nr-icon--next { --nr-mask: url("../img/marks/ic-nr-next.png"); width: calc(var(--nr-glyph, 18px) * 0.85); height: calc(var(--nr-glyph, 18px) * 0.85); }
.nr-icon--listen { --nr-mask: url("../img/marks/ic-nr-listen.png"); }
.nr-icon--up,
.nr-icon--down,
.nr-icon--left,
.nr-icon--right { --nr-mask: url("../img/marks/ic-nr-up.png"); width: calc(var(--nr-glyph, 18px) * 0.8); height: calc(var(--nr-glyph, 18px) * 0.8); }
.nr-icon--down { --nr-mask: url("../img/marks/ic-nr-down.png"); }
.nr-icon--left { transform: rotate(-90deg); }
.nr-icon--right { transform: rotate(90deg); }

/* ── page shell and header ── */
.nr-page {
    width: min(1400px, 100%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: clip;
    transition: padding-right 220ms var(--ease-rise);
}

.nr-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nr-week {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.nr-week__nav {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, transform 60ms;
}
.nr-week__nav:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.nr-week__nav:active { transform: scale(0.93); }
.nr-week__nav.is-disabled { opacity: 0.35; pointer-events: none; }
.nr-week__nav:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.nr-week__title {
    margin: 0 0 0 8px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nr-week__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.nr-week__meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.nr-week__meta strong { color: var(--text); font-weight: 600; }
.nr-week__done { color: var(--state-collection); font-weight: 600; }

.nr-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.nr-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.nr-toggle__track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    transition: background 140ms ease;
    flex-shrink: 0;
}
.nr-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text);
    transition: transform 140ms ease;
}
.nr-toggle__input:checked + .nr-toggle__track { background: var(--accent); }
.nr-toggle__input:checked + .nr-toggle__track::after { transform: translateX(16px); }
.nr-toggle:has(.nr-toggle__input:checked) { color: var(--text); }
.nr-toggle__input:focus-visible + .nr-toggle__track { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.nr-keys {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.nr-keys kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 5px;
    margin-right: 2px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    font: 600 0.7rem var(--font-body);
    text-align: center;
    color: var(--text);
}
@media (hover: none) {
    .nr-keys { display: none; }
}

.nr-save-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--warning);
}
.nr-save-note[hidden] { display: none; }

/* ── grid and tile ── */
.nr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--nr-gap, 20px);
    align-items: stretch;
}

.nr-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    cursor: pointer;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

@media (hover: hover) {
    .nr-tile:hover:not(.is-dismissed) {
        transform: translateY(-4px);
        border-color: rgba(140,106,88,0.45);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
}

.nr-tile:active:not(:has(.nr-btn:active)) {
    transform: scale(0.97);
    transition-duration: 60ms;
}

.nr-tile:focus { outline: none; }
.nr-tile:focus-visible,
.nr-tile.is-open {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--accent-soft);
    border-color: rgba(168,128,106,0.6);
}

.nr-tile.is-dismissing {
    animation: nr-tile-out 180ms ease-in forwards;
    pointer-events: none;
}
@keyframes nr-tile-out {
    to { opacity: 0; transform: scale(0.92); }
}

.nr-tile.is-dismissed { opacity: 0.45; }
.nr-tile.is-dismissed .nr-tile__cover img { filter: grayscale(0.85); }

.nr-tile__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--panel-alt);
}
.nr-tile__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nr-tile__info {
    display: grid;
    grid-template-rows: 2.47em auto auto;
    gap: 4px;
    min-width: 0;
}
.nr-tile__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    height: 2.47em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nr-tile__artist {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nr-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: calc(var(--nr-chip-h, 20px) * 2 + 4px);
    overflow: hidden;
    margin-top: 2px;
}

/* The "this one is playing" mark, bottom-left on the cover (the free corner). */
.nr-tile__playing {
    position: absolute;
    left: var(--nr-inset, 6px);
    bottom: var(--nr-inset, 6px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--scrim-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.nr-tile__playing i,
.nr-pulse i {
    width: 3px;
    height: 5px;
    border-radius: 2px;
    background: var(--accent-light);
    animation: player-bar-pulse 950ms ease-in-out infinite;
}
.nr-tile__playing i:nth-child(2),
.nr-pulse i:nth-child(2) { animation-delay: 180ms; }
.nr-tile__playing i:nth-child(3),
.nr-pulse i:nth-child(3) { animation-delay: 360ms; }
.nr-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 12px;
}

/* ── the three cover buttons: one size, one weight ── */
.nr-btn {
    position: absolute;
    width: var(--nr-btn, 36px);
    height: var(--nr-btn, 36px);
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--scrim-dark);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 60ms, opacity 140ms ease;
}
.nr-btn::before {
    content: '';
    position: absolute;
    inset: calc((var(--nr-btn, 36px) - var(--nr-btn-hit, 44px)) / 2);
}
.nr-btn:active { transform: scale(0.90); }
.nr-btn:focus-visible { outline: 2px solid var(--ink-bright); outline-offset: 2px; }
.nr-btn:disabled { opacity: 0.4; cursor: default; }

.nr-btn--dismiss { top: var(--nr-inset, 6px); left: var(--nr-inset, 6px); }
.nr-btn--preview { top: var(--nr-inset, 6px); right: var(--nr-inset, 6px); }
.nr-btn--wishlist { bottom: var(--nr-inset, 6px); right: var(--nr-inset, 6px); }

@media (hover: hover) {
    .nr-btn { opacity: 0.85; }
    .nr-tile:hover .nr-btn,
    .nr-tile:focus-within .nr-btn,
    .nr-btn[data-state="queued"],
    .nr-btn[data-state="saved"],
    .nr-btn[data-state="saving"] { opacity: 1; }

    .nr-btn--dismiss:hover { background: var(--state-danger); border-color: var(--state-danger); }
    .nr-btn--preview[data-state="off"]:hover { background: var(--state-preview-tint); border-color: var(--state-preview); }
    .nr-btn--wishlist[data-state="off"]:hover { background: var(--state-wishlist-tint); border-color: var(--state-wishlist); color: var(--state-wishlist); }
}

/* Dismissed (shown via the toggle): tap to restore. */
.nr-btn--dismiss[data-state="on"] { background: var(--text); color: var(--state-on-ink); border-color: var(--text); }

/* On the preview playlist. */
.nr-btn--preview[data-state="queued"] {
    background: linear-gradient(145deg, var(--accent-light), var(--accent));
    border-color: var(--accent-light);
    color: var(--ink-bright);
    box-shadow: 0 0 0 3px var(--state-preview-tint);
}

/* Wishlist: saving is an outlined heart under a spinning arc — never the filled look of saved. */
.nr-btn--wishlist[data-state="saving"] {
    color: var(--state-wishlist);
    pointer-events: none;
}
.nr-btn--wishlist[data-state="saving"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--state-wishlist);
    border-right-color: var(--state-wishlist);
    animation: nr-spin 800ms linear infinite;
}
.nr-btn--wishlist[data-state="saved"] {
    background: var(--state-wishlist);
    border-color: var(--state-wishlist);
    color: var(--state-on-ink);
    box-shadow: 0 0 0 3px var(--state-wishlist-tint);
}
.nr-btn--wishlist.is-confirmed { animation: nr-pop 220ms ease-out; }
.nr-btn.is-failed,
.nr-action.is-failed {
    animation: nr-shake 240ms ease-in-out;
    box-shadow: 0 0 0 3px var(--state-danger-tint);
}

@keyframes nr-spin { to { transform: rotate(360deg); } }
@keyframes nr-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes nr-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* ── chips and badges ── */
.nr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--nr-chip-h, 20px);
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}
.nr-chip--genre { background: rgba(255,255,255,0.06); color: var(--text-muted); font-weight: 500; }
.nr-badge--artist { color: var(--state-collection); background: var(--state-collection-soft); border-color: rgba(194,124,85,0.40); }
.nr-badge--pick { color: var(--accent-light); background: var(--accent-soft); border-color: rgba(168,128,106,0.40); }
.nr-badge--chart { color: var(--text); background: rgba(255,255,255,0.08); font-variant-numeric: tabular-nums; }
.nr-badge--unavailable { color: var(--warning); background: var(--warning-soft); border: 1px dashed rgba(224,166,58,0.45); }

/* ── side panel (a bottom sheet on a phone) ── */
.nr-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    /* The panel runs down to the player bar; the dock moves aside for it (below) instead of shortening it. */
    bottom: calc(var(--nr-player-h, 0px) + 12px);
    width: min(var(--nr-panel-w, 380px), calc(100vw - 32px));
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
    z-index: 95;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.nr-panel[hidden] { display: none; }
.nr-panel.is-open {
    opacity: 1;
    transform: none;
    transition: opacity 220ms var(--ease-rise), transform 220ms var(--ease-rise);
}

@media (min-width: 1280px) {
    .nr-page.has-panel { padding-right: calc(var(--nr-panel-w, 380px) + 24px); }
}

.nr-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px 0 20px;
    flex-shrink: 0;
}
.nr-panel__head .eyebrow { margin: 0; }
.nr-panel__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.nr-panel__close:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.nr-panel__close:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.nr-panel__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.nr-panel__body .eyebrow { margin: 4px 0 8px; }
.nr-panel__hero { display: flex; flex-direction: column; gap: 14px; }
.nr-panel__cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    background: var(--panel-alt);
    display: block;
}
.nr-panel__heading { min-width: 0; }
.nr-panel__title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.nr-panel__artist { margin: 4px 0 0; font-size: 1rem; font-weight: 600; color: var(--accent-light); }
.nr-panel__meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nr-sep { color: rgba(255,250,245,0.30); margin: 0 6px; }
.nr-panel__genres { display: flex; flex-wrap: wrap; gap: 4px; }
.nr-panel__note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--warning-soft);
    border: 1px dashed rgba(224,166,58,0.45);
    color: var(--text);
    font-size: 0.85rem;
}

.nr-reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.nr-reasons li { position: relative; padding-left: 16px; font-size: 0.9rem; color: var(--text); }
.nr-reasons li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-light);
}
.nr-owned {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--state-collection-soft);
    border: 1px solid rgba(194,124,85,0.35);
    font-size: 0.9rem;
}
.nr-owned strong { color: var(--state-collection); }

/* Two half-width actions are grid columns, so their widths never come from their labels. */
.nr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nr-action {
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 0 10px;
    font: 600 0.85rem var(--font-body);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 60ms;
}
.nr-action > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-action:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.nr-action:active:not(:disabled) { transform: scale(0.97); }
.nr-action:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.nr-action:disabled { cursor: default; opacity: 0.55; }

.nr-action--preview {
    grid-column: 1 / -1;
    background: linear-gradient(145deg, var(--accent-light), var(--accent));
    color: var(--ink-bright);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.nr-action--preview:hover:not(:disabled) { background: linear-gradient(145deg, var(--accent-light), var(--accent)); filter: brightness(1.06); }
.nr-action--preview[data-state="queued"] { box-shadow: 0 0 0 3px var(--state-preview-tint); }
.nr-action--wishlist[data-state="saving"] { border-color: var(--state-wishlist); color: var(--state-wishlist); pointer-events: none; }
.nr-action--wishlist[data-state="saving"] .nr-icon { animation: nr-breathe 800ms ease-in-out infinite alternate; }
.nr-action--wishlist[data-state="saved"] { background: var(--state-wishlist); border-color: var(--state-wishlist); color: var(--state-on-ink); }
.nr-action--wishlist[data-state="saved"]:hover:not(:disabled) { background: var(--state-wishlist); filter: brightness(1.06); }
.nr-action--queue[data-state="on"] { background: var(--state-listen-queue); border-color: var(--state-listen-queue); color: #fff; opacity: 1; }
@keyframes nr-breathe { from { opacity: 1; } to { opacity: 0.4; } }

.nr-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nr-links a {
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease;
}
.nr-links a:hover { color: var(--text); border-color: rgba(168,128,106,0.45); }
.nr-links a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

.nr-tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-track {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    font-size: 0.875rem;
}
.nr-track__no { color: var(--text-muted); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.nr-track__title { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-track__end { display: inline-flex; align-items: baseline; gap: 8px; }
.nr-track__dur { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nr-track__tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-light); }
.nr-track.is-preview { background: rgba(168,128,106,0.12); box-shadow: inset 3px 0 0 var(--accent-light); }
.nr-track.is-preview .nr-track__title { font-weight: 600; }

.nr-scrim { display: none; }

/* ── preview playlist dock ── */
.nr-dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 32px));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 92;
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: nr-dock-rise 240ms var(--ease-rise);
}
body.has-mini-player .nr-dock { bottom: calc(var(--nr-player-h, 0px) + 12px); }
.nr-dock[hidden] { display: none; }
@keyframes nr-dock-rise {
    from { transform: translate(-50%, 24px); opacity: 0; }
    to { transform: translateX(-50%); opacity: 1; }
}

.nr-dock__status {
    margin: 0;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.nr-dock__status.is-error {
    color: var(--warning);
    background: var(--warning-soft);
    border-bottom-color: rgba(224,166,58,0.25);
}
.nr-dock__status:empty { display: none; }

.nr-dock__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 4px;
    height: var(--nr-dock-bar, 56px);
    padding: 0 8px 0 14px;
}
.nr-dock__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}
.nr-dock__count {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nr-dock__now {
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nr-dock__now.is-idle { color: var(--text-muted); font-weight: 500; }

/* Play, next and expand: the same size, always. */
.nr-dock__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 60ms, opacity 140ms ease;
}
.nr-dock__btn:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.07); }
.nr-dock__btn:active:not(:disabled) { transform: scale(0.92); }
.nr-dock__btn:disabled { opacity: 0.35; cursor: default; }
.nr-dock__btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.nr-dock__play {
    background: linear-gradient(145deg, var(--accent-light), var(--accent));
    color: var(--ink-bright);
}
.nr-dock__play:hover:not(:disabled) { background: linear-gradient(145deg, var(--accent-light), var(--accent)); color: var(--ink-bright); filter: brightness(1.08); }
.nr-dock__expand .nr-icon { transition: transform 180ms ease; }
.nr-dock.is-expanded .nr-dock__expand .nr-icon { transform: rotate(180deg); }

.nr-dock__drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms var(--ease-rise);
}
.nr-dock.is-expanded .nr-dock__drawer { grid-template-rows: 1fr; }
.nr-dock__inner { min-height: 0; overflow: hidden; }
.nr-dock.is-expanded .nr-dock__inner {
    overflow-y: auto;
    max-height: min(50vh, 420px);
    overscroll-behavior: contain;
    border-top: 1px solid var(--border);
}

.nr-dock__room {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--accent-light);
    font: 600 0.8rem var(--font-body);
    text-align: left;
    cursor: pointer;
}
.nr-dock__room[hidden] { display: none; }
.nr-dock__room:hover { background: rgba(255,255,255,0.04); }

.nr-dock__list { list-style: none; margin: 0; padding: 0; }
.nr-dock__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 36px 36px 36px;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 8px 4px 8px 12px;
    cursor: pointer;
    transition: background 140ms ease;
}
.nr-dock__row:hover { background: rgba(255,255,255,0.04); }
.nr-dock__art { position: relative; width: 40px; height: 40px; }
.nr-dock__cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: block; background: var(--panel-alt); }
.nr-dock__pulse {
    position: absolute;
    inset: 0;
    height: auto;
    border-radius: 6px;
    background: var(--scrim-dark);
}
.nr-dock__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 4px; }
.nr-dock__title { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-dock__sub { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-dock__warn { color: var(--warning); font-size: 0.75rem; }
.nr-dock__row.is-playing { background: rgba(168,128,106,0.14); box-shadow: inset 3px 0 0 var(--accent-light); }
.nr-dock__row.is-playing .nr-dock__title { color: var(--ink-bright); }
.nr-dock__row.is-unavailable { cursor: default; }
.nr-dock__row.is-unavailable .nr-dock__cover { filter: grayscale(1); opacity: 0.5; }
.nr-dock__row.is-unavailable .nr-dock__title { opacity: 0.5; }

.nr-dock__mini {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    --nr-glyph: 16px;
    transition: background 140ms ease, color 140ms ease;
}
.nr-dock__mini::before { content: ''; position: absolute; inset: -4px; }
.nr-dock__mini:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: var(--text); }
.nr-dock__mini--remove:hover:not(:disabled) { color: var(--state-danger); }
.nr-dock__mini:disabled { opacity: 0.25; cursor: default; }
.nr-dock__mini:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; }

/* ── undo toast ── */
.nr-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nr-player-h, 0px) + var(--nr-dock-h, 0px) + 16px + env(safe-area-inset-bottom));
    transform: translate(-50%, 12px);
    opacity: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    max-width: min(480px, calc(100vw - 32px));
    padding: 6px 16px;
    border-radius: 14px;
    background: rgba(20,16,13,0.96);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    overflow: hidden;
    transition: opacity 140ms ease, transform 140ms ease;
}
.nr-toast.has-undo { padding-right: 6px; }
.nr-toast[hidden] { display: none; }
.nr-toast.is-visible { opacity: 1; transform: translate(-50%, 0); transition-duration: 180ms; }
.nr-toast__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-toast__undo {
    position: relative;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--accent-light);
    font: 700 0.85rem var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.nr-toast__undo::before { content: ''; position: absolute; inset: -4px; }
.nr-toast__undo:hover,
.nr-toast__undo:active { background: var(--accent-soft); }
.nr-toast.has-undo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent-light);
    transform-origin: left;
    animation: nr-toast-timer 6000ms linear forwards;
}
@keyframes nr-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── empty states ── */
.nr-empty {
    max-width: 480px;
    margin: 48px auto;
    padding: 40px 24px;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
}
.nr-empty[hidden] { display: none; }
.nr-empty__title { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; }
.nr-empty__body { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.nr-empty__actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* ── home page week tiles ── */
.nr-weeks__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.nr-week-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.nr-week-card:hover {
    transform: translateY(-4px);
    border-color: rgba(140,106,88,0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.nr-week-card:active { transform: scale(0.97); transition-duration: 60ms; }
.nr-week-card.is-current { border-color: rgba(168,128,106,0.55); }
.nr-week-card__collage {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: var(--panel-alt);
}
.nr-week-card__collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nr-week-card__blank { background: rgba(255,255,255,0.03); }
.nr-week-card__pill {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: var(--text);
    color: var(--state-on-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.nr-week-card__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nr-week-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nr-week-card__meta { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nr-week-card__meta strong { color: var(--text); font-weight: 600; }

/* ── phone ── */
@media (max-width: 640px) {
    body.page-new-releases { --nr-gap: 12px; }
    body.page-new-releases .app-main,
    body.page-new-releases.has-mini-player .app-main {
        padding: 12px 16px calc(var(--nr-player-h, 0px) + var(--nr-dock-h, 0px) + 36px);
    }

    .nr-week__nav { width: 44px; height: 44px; }
    .nr-week__title { font-size: 1.375rem; margin-left: 4px; }
    .nr-grid,
    .nr-weeks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .nr-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: calc(100dvh - 48px - env(safe-area-inset-top));
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 101;
        transform: translateY(100%);
        opacity: 1;
        transition: transform 200ms ease-in;
    }
    .nr-panel.is-open { transform: none; transition: transform 280ms var(--ease-rise); }
    .nr-panel::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 5px;
        margin-left: -18px;
        border-radius: 3px;
        background: rgba(255,255,255,0.25);
    }
    .nr-panel__close { width: 44px; height: 44px; }
    .nr-panel__hero { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: end; }
    .nr-panel__title { font-size: 1.125rem; }
    .nr-links a { height: 44px; }

    .nr-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 100;
    }
    .nr-scrim[hidden] { display: none; }
    body.nr-panel-open { overflow: hidden; }

    .nr-dock__btn { width: 44px; height: 44px; }
    .nr-dock__row { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .nr-tile, .nr-btn, .nr-panel, .nr-panel.is-open, .nr-toast, .nr-dock__drawer, .nr-page { transition-duration: 0s !important; }
    .nr-tile.is-dismissing, .nr-btn--wishlist.is-confirmed, .nr-btn.is-failed, .nr-action.is-failed, .nr-dock { animation: none; }
    .nr-tile.is-dismissing { opacity: 0; }
    .nr-btn--wishlist[data-state="saving"]::after { animation: none; border: 2px dashed var(--state-wishlist); }
    .nr-tile__playing i, .nr-pulse i { animation: none; height: 8px; }
}

/* The tap is answered on the tile itself, on the frame the finger lands: the page that follows can take
   a moment on a phone, and the 2px progress bar at the top was easy to miss. */
.nr-week-card.is-opening { border-color: var(--accent-light); box-shadow: 0 0 0 3px var(--accent-soft); }
.nr-week-card.is-opening .nr-week-card__collage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20,16,13,0.55);
}
.nr-week-card.is-opening .nr-week-card__collage::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: var(--ink-bright);
    animation: nr-spin 800ms linear infinite;
}

/* ── genre filter ── */
.nr-week__controls {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
}
.nr-genre-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    font: 600 0.85rem var(--font-body);
    cursor: pointer;
    position: relative;
    transition: background 140ms ease, border-color 140ms ease;
}
.nr-genre-button::before { content: ''; position: absolute; inset: -4px; }
.nr-genre-button:hover { background: rgba(255,255,255,0.08); }
.nr-genre-button:active { transform: scale(0.97); }
.nr-genre-button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.nr-genre-button[aria-expanded="true"] { border-color: rgba(168,128,106,0.55); background: var(--accent-soft); }
.nr-genre-button.is-filtering { border-color: var(--accent-light); }
.nr-genre-button__count {
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: var(--ink-bright);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nr-genre-button__count[hidden] { display: none; }

.nr-genre-tray {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
}
.nr-genre-tray[hidden] { display: none; }
.nr-genre-tray__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nr-genre-tray__hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.nr-genre-tray__reset {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--accent-light);
    font: 600 0.8rem var(--font-body);
    cursor: pointer;
    padding: 6px 4px;
}
.nr-genre-tray__reset[hidden] { display: none; }
.nr-genre-tray__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Shown = filled; hidden = hollow, muted and struck through. State reads at a glance, not by colour alone. */
.nr-genre-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(168,128,106,0.45);
    background: var(--accent-soft);
    color: var(--text);
    font: 600 0.8rem var(--font-body);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 60ms;
}
.nr-genre-chip:active { transform: scale(0.96); }
.nr-genre-chip:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.nr-genre-chip__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.10);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}
.nr-genre-chip[aria-pressed="false"] {
    background: transparent;
    border: 1px dashed rgba(255,250,245,0.30);
    color: var(--text-muted);
}
.nr-genre-chip[aria-pressed="false"] .nr-genre-chip__label { text-decoration: line-through; text-decoration-color: rgba(255,250,245,0.45); }
.nr-genre-chip[aria-pressed="false"] .nr-genre-chip__count { background: transparent; }
@media (hover: hover) {
    .nr-genre-chip:hover { border-color: var(--accent-light); }
}

/* ── the album's song vs the whole album, and clearing the playlist ── */
.nr-action--whole { grid-column: 1 / -1; }
.nr-action--whole[data-state="queued"] {
    border-color: var(--accent-light);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--state-preview-tint);
}
.nr-actions__note {
    grid-column: 1 / -1;
    margin: -2px 2px 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.nr-actions__note strong { color: var(--text); font-weight: 600; }

.nr-dock__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.nr-dock__tools .nr-dock__room { border-bottom: none; width: auto; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-dock__clear {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: 600 0.8rem var(--font-body);
    cursor: pointer;
    transition: color 140ms ease;
}
.nr-dock__clear:hover { color: var(--state-danger); }
.nr-dock__clear:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }

/* ── panel and dock share the screen instead of stacking ──
   With the album panel open, the playlist dock sits in the space LEFT of the panel, centred there,
   and the panel keeps its full height down to the player bar. They used to overlap: the dock floated
   across the middle and the panel was shortened to clear it, which left a stub of a panel above an
   expanded playlist. On a phone the panel is a bottom sheet over everything, so this does not apply. */
.nr-icon--flip { transform: scaleX(-1); }

@media (min-width: 641px) {
    body.nr-panel-open .nr-dock {
        left: 16px;
        right: calc(min(var(--nr-panel-w, 380px), calc(100vw - 32px)) + 24px);
        width: auto;
        max-width: 720px;
        margin-inline: auto;
        transform: none;
        animation: none;
    }
    body.nr-panel-open .nr-toast {
        left: calc((100vw - min(var(--nr-panel-w, 380px), calc(100vw - 32px)) - 24px) / 2);
    }
}