/* Narya design layer. The rules live in design/SYSTEM.md; this file loads after app.css.
   Organised by component. Keep ids and classes: this changes the look, never the structure. */

/* ───────────── Tokens ───────────── */
:root {
  /* Fills are translucent, so they sit correctly on any background */
  --fill-1: rgba(255, 255, 255, .045);
  --fill-2: rgba(255, 255, 255, .08);
  --fill-3: rgba(255, 255, 255, .13);
  --sep: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .1);
  /* Materials: whatever floats over content */
  --bg-rgb: 7 9 13;
  --hair: inset 0 0 0 .5px rgba(255, 255, 255, .12);
  --glass: rgba(34, 34, 38, .64);
  --glass-strong: rgba(30, 30, 34, .82);
  --glass-bar: rgba(9, 11, 15, .72);
  --glass-fx: blur(32px) saturate(1.8);
  /* Depth: soft black, never coloured */
  --lift-1: 0 2px 10px rgba(0, 0, 0, .24);
  --lift-2: 0 12px 36px rgba(0, 0, 0, .42);
  --lift-3: 0 28px 80px rgba(0, 0, 0, .58);
  --shadow: var(--lift-2);
  --r-xs: 6px;
  --r-xl: 22px;
  /* Motion: arrive on a spring, leave on a settle */
  --enter: cubic-bezier(.16, 1, .3, 1);
  --settle: cubic-bezier(.4, 0, .6, 1);
  --t-fast: .14s;
  --t-med: .24s;
  --t-slow: .46s;
  /* Buttons are flat: no coloured glow */
  --btn-lift: inset 0 .5px 0 rgba(255, 255, 255, .16);
  --btn-tonal: var(--fill-2);
  --btn-tonal-h: var(--fill-3);
  --btn-hair: none;
  /* The floating player */
  --dock-h: 76px;
  --dock-gap: 12px;
}

/* ───────────── Capsule: every temporary message ─────────────
   One line, top centre, glass. Comes down on a spring, fades up and away by itself.
   translate centres it, so the entrance animation is free to use transform. */
/* Everything at the top keeps its own place, in one fixed order, whichever of them are showing */
body { --top: calc(var(--safe-t) + 12px); --h-upd: 0px; --h-imp: 0px; --h-off: 0px; }
body:has(#updBar) { --h-upd: 52px; }
body:has(.impbar.on) { --h-imp: 68px; }
body.is-offline { --h-off: 44px; }
body:has(#np.open) { --top: calc(var(--safe-t) + 56px); --h-imp: 0px; --h-off: 0px; } /* neither shows over Now Playing */
.impbar { top: calc(var(--top) + var(--h-upd)); }
.offline-pill { top: calc(var(--top) + var(--h-upd) + var(--h-imp)); }
.toasts {
  position: fixed; z-index: 96; top: calc(var(--top) + var(--h-upd) + var(--h-imp) + var(--h-off)); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100vw - 24px);
}
.toast, .upd-bar, .offline-pill, .jam-chip {
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  box-shadow: var(--hair), var(--lift-2); color: var(--text);
  font-size: 14px; font-weight: 500; letter-spacing: -.006em; line-height: 1.3;
}
.toast {
  display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: min(460px, calc(100vw - 24px));
  padding: 11px 20px; border-radius: var(--r-xl); cursor: default;
  overflow-wrap: anywhere;
  animation: capsule-in var(--t-slow) var(--enter) both;
}
.toast.err { background: var(--glass-strong); }
.toast.err::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.6v5.2' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='1.15' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toast.has-act { gap: 8px; padding: 0 8px 0 20px; }
.toast-act { flex: none; min-height: 44px; padding: 0 12px; border-radius: 16px; color: var(--accent-2); font-size: 14px; font-weight: 600; transition: opacity var(--t-fast); }
.toast-act:hover { opacity: .78; }
.toast-act:active { background: none; opacity: .55; }
.toast.out, .upd-bar.out { animation: capsule-out .26s var(--settle) both; pointer-events: none; }
@keyframes capsule-in { from { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes capsule-out { to { opacity: 0; transform: translateY(-8px) scale(.97); } }

.upd-bar {
  position: fixed; z-index: 97; top: var(--top); left: 50%; transform: none; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); min-height: 44px;
  padding: 0 20px 0 15px; border: 0; border-radius: var(--r-xl); pointer-events: auto;
  animation: capsule-in var(--t-slow) var(--enter) both;
}
.upd-bar:has(.upd-action:not([hidden])) { padding-right: 6px; }
.upd-ic { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--accent-2); }
.upd-ic svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.upd-ic svg + svg, .upd-bar[data-state="done"] .upd-ic svg:first-child, .upd-bar[data-state="busy"] .upd-ic svg { display: none; }
.upd-bar[data-state="done"] .upd-ic svg + svg { display: block; }
.upd-bar[data-state="busy"] .upd-ic::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--fill-3); border-top-color: var(--text); animation: capsule-spin .8s linear infinite; }
@keyframes capsule-spin { to { transform: rotate(360deg); } }
.upd-copy { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; } /* a capsule is one line */
.upd-copy b { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.upd-copy small { flex: none; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.upd-copy small[hidden], .upd-action[hidden] { display: none; }
@media (max-width: 340px) { .upd-ic { display: none; } .upd-bar { padding-left: 18px; } } /* the words go first */
.upd-action { flex: none; min-height: 44px; padding: 0 12px; border-radius: 16px; background: none; color: var(--accent-2); font-size: 14px; font-weight: 600; transition: opacity var(--t-fast); }
.upd-action:hover { filter: none; opacity: .78; }
.upd-action:active { opacity: .55; }

/* Offline says one word while it lasts. Hidden for real, since the stack can move it below the top edge. */
.offline-pill { min-height: 36px; padding: 0 16px 0 12px; border-radius: 18px; visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
.is-offline .offline-pill { visibility: visible; }
.offline-pill svg { color: var(--text-2); }

/* Standing bars above the player: same material, a calmer shape */
.impbar, .pvbar-in, .getbar-in { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-2); border-radius: 18px; }
.impbar { overflow: hidden; }
.impbar-ic, .impbar-ic.ok { background: var(--fill-2); color: var(--text); }
.impbar-p { height: 2px; background: none; }
.impbar-p::after { background: var(--accent-2); }

/* The one-time hints: small, quiet, gone once understood */
.jam-tip { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-2); border-radius: 14px; font-size: 13px; }
.jam-tip::after { display: none; }

/* ───────────── Shell: one continuous surface ───────────── */
.side { background: transparent; border-right: 0; padding: 16px 10px 12px; }
.side .brand { gap: 10px; padding: 4px 10px 20px; font-size: 16px; font-weight: 600; }
.side .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.side .brand small { display: none; }
.nav-item { height: 36px; gap: 11px; margin: 1px 0; padding: 0 10px; border-radius: var(--r-s); font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); }
.nav-item svg { width: 19px; height: 19px; color: inherit; transition: color var(--t-fast); }
.nav-item:hover { background: var(--fill-1); color: var(--text); }
.nav-item.on { background: var(--fill-2); color: var(--text); }
.nav-item.on svg { color: var(--accent-2); }
.nav-sep { height: 0; margin: 9px 0; background: none; }
.nav-head { padding: 2px 2px 2px 10px; font-size: 12.5px; color: var(--text-3); }
.nav-head .icon-btn { width: 28px; height: 28px; color: var(--text-3); }
.nav-head .icon-btn:hover { color: var(--text); }
.nav-pl { height: 32px; font-size: 14px; color: var(--text-2); }
.side-user { padding: 4px 2px 4px 10px; font-size: 13.5px; color: var(--text-2); }
.side-user .avatar { width: 26px; height: 26px; font-size: 12px; }
.side-user .icon-btn { width: 32px; height: 32px; }

/* Nothing sticks to the top: the header scrolls away with the page */
.topbar, .topbar.stuck { position: relative; top: auto; background: none; box-shadow: none; transition: none; }
.topbar .title-sm { display: none; }
.search-field { height: 36px; border-radius: 10px; background: var(--fill-2); box-shadow: none; transition: background var(--t-fast), box-shadow var(--t-fast); }
.search-field:hover { background: var(--fill-3); }
.search-field:focus-within { background: var(--fill-2); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .32); }
.search-field svg { width: 17px; height: 17px; }
.search-field input { font-size: 14.5px; }
.search-field kbd { border: 0; background: var(--fill-2); color: var(--text-3); font-weight: 500; }
.home-edit-button.btn-tonal { background: none; color: var(--text-2); }
.home-edit-button.btn-tonal:hover { background: var(--fill-1); color: var(--text); }
.home-edit-button.btn-tonal svg { color: inherit; }

/* ───────────── Desktop: the player floats over the page ───────────── */
@media (min-width: 761px) {
  :root { --bar-h: calc(var(--dock-h) + var(--dock-gap) * 2 + var(--safe-b)); }
  .app { position: relative; grid-template-rows: minmax(0, 1fr); }
  .player {
    position: absolute; grid-column: auto; grid-row: auto; z-index: 20; height: var(--dock-h); padding: 0 16px;
    left: calc(var(--side-w) + var(--dock-gap)); right: max(var(--dock-gap), env(safe-area-inset-right)); bottom: calc(var(--dock-gap) + var(--safe-b));
    /* Equal sides, so the controls stay centred and never shift between songs; the middle gives way to keep them wide enough */
    grid-template-columns: minmax(0, 1fr) minmax(260px, min(560px, calc(100% - 700px))) minmax(0, 1fr);
    border-top: 0; border-radius: 20px; background: var(--glass);
    -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-2);
  }
  .side { padding-left: max(10px, env(safe-area-inset-left)); padding-bottom: calc(12px + var(--safe-b)); }
  /* The page itself fades as it nears the edges: nothing is painted over it, so no band can stop at the side menu */
  .main {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 112px), rgb(0 0 0 / .22) calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 112px), rgb(0 0 0 / .22) calc(100% - 26px), transparent);
    scroll-padding: 12px 0 calc(var(--bar-h) + 8px);
  }
  .main:has(.pl-order-tools.editing) { /* the sticky toolbar sits at the very top, so no top fade while reordering */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), rgb(0 0 0 / .22) calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), rgb(0 0 0 / .22) calc(100% - 26px), transparent);
  }
  .main::-webkit-scrollbar-track { margin-bottom: var(--bar-h); } /* the scrollbar stays reachable above the player */
  .build-foot { padding-bottom: calc(var(--bar-h) + 18px); }
  .p-now .art-hit { width: 52px; }
  .p-now .art { border-radius: var(--r-s); box-shadow: var(--lift-1); }
  .p-now .t { font-size: 14.5px; }
  .p-now .a { font-size: 13px; }
  .p-mid { gap: 2px; }
  .p-ctrls { gap: 12px; }
  .p-ctrls .pp { width: 40px; height: 40px; }
  .p-ctrls .pp svg { width: 27px; height: 27px; }
  /* Temporary messages centre over the page, not the window. Signed out there's no side menu to allow for. */
  body:not(:has(.signed-out)) :is(.toasts, .upd-bar, .offline-pill) { left: calc(50% + var(--side-w) / 2); }
  body:has(#np.open) :is(.toasts, .upd-bar) { left: 50%; }
}
.bar .track { background: var(--fill-3); }
.bar .buf { background: var(--fill-2); }

/* ───────────── Buttons: sizes live in app.css's .btn so that every variant still beats them ───────────── */
.icon-btn:hover { background: var(--fill-2); }
/* A permanent action never wears the calm accent */
.btn-primary.danger { background: var(--danger); color: #fff; }

/* ───────────── Lists: space, not lines ───────────── */
.t-head { position: static; height: 32px; font-size: 12px; color: var(--text-3); border-bottom: 0; background: none; box-shadow: inset 0 -.5px 0 var(--sep); }
@media (min-width: 761px) { .t-sub { font-size: 13px; } .t-alb, .t-date, .t-dur { font-size: 13.5px; } }
.t-row .t-more { color: var(--text-2); }
.t-row .t-more:hover { color: var(--text); }
@media (min-width: 761px) { .t-row::after { display: none; } }

/* Quality: quiet text, and only what's unusual. Lossless is the rule here, so it needs no mark in a list. */
.q { height: auto; padding: 0; border-radius: 0; box-shadow: none; font: 500 11.5px/1.3 var(--font); letter-spacing: 0; color: var(--text-3); }
.q svg { width: 12px; height: 12px; opacity: .8; }
.q.hr { color: var(--text-2); box-shadow: none; }
.t-q .q:not(.hr, .lossy) { opacity: 0; transition: opacity var(--t-fast); }
.t-row:hover .t-q .q { opacity: 1; }

.tile { background: var(--fill-1); }
.tile:hover { background: var(--fill-2); }
.acct-row + .acct-row::before { background: var(--sep); }

/* ───────────── Menus, sheets, dialogs ───────────── */
.scrim.dim { background: rgba(0, 0, 0, .42); }
.menu {
  padding: 5px; border-radius: 14px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-3);
  animation: pop .18s var(--enter) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.menu-h { border-bottom: 0; padding: 7px 9px 9px; margin-bottom: 0; }
.menu-h .t { font-size: 14px; }
.menu button { height: 34px; gap: 10px; padding: 0 9px; border-radius: 9px; font-size: 14px; transition: background .08s; }
.menu button:hover { background: var(--fill-2); }
.menu button svg { width: 17px; height: 17px; }
.menu .sep { background: var(--sep); margin: 5px 9px; }
.menu .sub-h { padding: 7px 9px 3px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.menu :focus-visible { outline-offset: -2px; }
.modal {
  border-radius: 20px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-3);
}
.modal h3 { font-weight: 600; letter-spacing: -.012em; }
.field input { background: var(--fill-2); box-shadow: none; height: 44px; transition: box-shadow var(--t-fast); }
.field input:focus { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .32); }
@media (max-width: 760px) {
  .menu.sheet { border-radius: 18px; }
  .menu.sheet button { border-radius: 11px; }
  .modal { border-radius: 22px 22px 0 0; }
}

/* ───────────── Phone: glass bars ───────────── */
@media (max-width: 760px) {
  .tabbar { background: var(--glass-bar); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); border-top: 0; box-shadow: inset 0 .5px 0 var(--sep); }
  .mini { background: var(--glass); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-2); border-radius: 16px; }
  .mini .mini-x::before { background: var(--sep); }
}

/* ───────────── Sign in: quiet, and independent of any colour choice ───────────── */
.login-card .btn-primary { background: var(--text); color: #000; }
.login-card .btn { height: 46px; border-radius: 23px; }


/* ───────────── Colour from the music and from the page ─────────────
   The playing cover tints the whole surface, and an open album, artist or playlist lends it stronger colour, under
   the side menu and the page alike. That shared light is what joins them. Calm by rule: no shapes, no beat. */
@property --wash0 { syntax: "<color>"; inherits: false; initial-value: rgb(0 0 0 / 0); }
@property --wash1 { syntax: "<color>"; inherits: false; initial-value: rgb(0 0 0 / 0); }
.wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(84vw 74vh at 14% -14%, var(--wash0, transparent), transparent 74%),
    radial-gradient(64vw 58vh at 96% -10%, var(--wash1, transparent), transparent 74%),
    radial-gradient(72vw 56vh at 6% -8%, rgb(var(--glow0, 0 0 0) / .13), transparent 72%),
    radial-gradient(56vw 46vh at 100% -6%, rgb(var(--glow1, 0 0 0) / .09), transparent 72%);
  transition: --wash0 .9s var(--settle), --wash1 .9s var(--settle);
}
.app.signed-out .wash { display: none; }
.side, .main { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .app { position: relative; }
  .main { scroll-padding: calc(var(--safe-t) + 12px) 0 calc(var(--tab-h) + var(--safe-b) + 80px); }
  /* Page content blurs away under the clock. Blur, not a band, so the colours above stay one surface. */
  .app::after {
    content: ""; position: fixed; z-index: 4; top: 0; left: 0; right: 0; height: calc(var(--safe-t) + 12px); pointer-events: none;
    background: rgb(var(--bg-rgb) / .34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), transparent); mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
    display: none;
  }
  @supports (top: env(safe-area-inset-top)) { @media (display-mode: standalone) { .app::after { display: block; } } }
}

/* ───────────── Rows that scroll sideways ─────────────
   An edge fades only where there is more to see, so the first card is never cut. */
.shelf-wrap:has(.shelf-nav.r:not([hidden])) .shelf { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.shelf-wrap:has(.shelf-nav.l:not([hidden])) .shelf { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px); mask-image: linear-gradient(90deg, transparent, #000 72px); }
.shelf-wrap:has(.shelf-nav.l:not([hidden])):has(.shelf-nav.r:not([hidden])) .shelf { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
.shelf-nav { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-1); width: 36px; height: 36px; }
@media (hover: none), (max-width: 760px) { .shelf-nav { display: none; } }

/* ───────────── Now Playing: room for the title ───────────── */
.np-titlerow { gap: 2px; }
.np-titlerow .grow { margin-right: 8px; }
.np-titlerow .icon-btn { width: 38px; height: 38px; background: none; color: rgba(255, 255, 255, .78); }
.np-titlerow .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.np-titlerow .icon-btn svg { width: 21px; height: 21px; }
@media (min-width: 761px) { .np-titlerow .icon-btn.on { background: rgba(255, 255, 255, .92); color: #111; } }

/* ───────────── Hints ───────────── */
.mini-tip { justify-content: center; padding: 10px 16px; border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-2); font-size: 13px; color: var(--text); text-align: center; }
.mini-tip span { flex: none; }
.ag-tip { background: none; box-shadow: none; padding: 0; max-width: none; font-size: 13.5px; }
.install-banner { border: 0; background: var(--fill-1); }
.install-kicker { display: none; }
.install-emblem .brand-mark { border: 0; }
.ly-note { background: var(--fill-2); }
@media (max-width: 760px) {
  #discNote { display: none; }
  .ag-tip { flex-wrap: nowrap; align-items: flex-start; }
  .ag-tip p { flex: 1 1 auto; flex-basis: auto; }
}
.ag-tip p { flex: 0 1 auto; }

/* ───────────── Small things that add up ───────────── */
.fav-art { background: linear-gradient(150deg, rgb(var(--accent-rgb) / .55), rgb(var(--accent-rgb) / .14) 64%), var(--s2); }
.fav-art svg { width: 34%; height: 34%; color: #fff; }
.qart.fav-art svg { color: #fff; }
.eyebrow { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.wn-group h3, .wn-day h3 { text-transform: none; letter-spacing: 0; color: var(--text-3); }
.switch:checked { background: var(--accent); }
.switch:checked::after { background: #1c1c1e; }
.search-big { background: var(--fill-2); box-shadow: none; transition: box-shadow var(--t-fast); }
.search-big:focus-within { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .32); }
.nav-item:active { transform: scale(.98); }
.nav-item { transition: background var(--t-fast), color var(--t-fast), transform .18s var(--spring); }
@media (prefers-reduced-motion: reduce) {
  .toast, .upd-bar { animation: fade .2s both; }
  .toast.out, .upd-bar.out { animation: capsule-fade .2s both; }
  .nav-item:active { transform: none; }
}
@keyframes capsule-fade { to { opacity: 0; } }

/* One control for one choice: the Replay periods are a segmented control, always on a single line */
#rpChips { display: flex; flex-wrap: nowrap; gap: 2px; width: max-content; max-width: 100%; padding: 2px; border-radius: 11px; background: var(--fill-2); }
#rpChips .chip { flex: 1; height: 32px; padding: 0 14px; border-radius: 9px; background: none; color: var(--text-2); white-space: nowrap; justify-content: center; }
#rpChips .chip:hover { color: var(--text); }
#rpChips .chip.on { background: var(--fill-3); color: var(--text); box-shadow: var(--lift-1); }
@media (max-width: 760px) { #rpChips { width: 100%; } #rpChips .chip { padding: 0 6px; font-size: 13px; } }

/* iPad width beside the side menu: the album header keeps every button inside the page */
@media (min-width: 761px) and (max-width: 1100px) {
  .coll { gap: 22px; }
  .coll > .art, .coll > .art-hit { width: 176px; }
  .coll h1 { font-size: 30px; }
  .coll-actions { flex-wrap: wrap; gap: 10px; }
  .coll-actions .btn { min-width: 100px; padding: 0 18px; }
}

/* The player gives up its secondary controls as space runs out; all of them stay in Now Playing */
.p-empty { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) and (max-width: 1720px) { #pQ { display: none; } }
@media (min-width: 761px) and (max-width: 1380px) { .p-ctrls .jump { display: none; } .vol .bar { width: 76px; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .player { grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) minmax(0, 1fr); gap: 14px; }
  .p-ctrls { gap: 6px; }
  .vol { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .player { grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) auto; padding: 0 12px; gap: 10px; }
  .p-ctrls .mode { display: none; }
  .p-prog .tm { width: 38px; font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 860px) { .p-right [data-tab="lyrics"] { display: none; } }
@media (max-width: 340px) { #rpChips .chip { padding: 0 2px; font-size: 12.5px; } }

/* Glass is a treat, not a requirement: solid surfaces where it can't or shouldn't be used */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(34, 34, 38, .97); --glass-strong: rgba(30, 30, 34, .98); --glass-bar: rgba(9, 11, 15, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #222226; --glass-strong: #1e1e22; --glass-bar: #090b0f; --glass-fx: none; }
}

/* ───────────── Artwork: real objects on the surface ───────────── */
.card .art { box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 24px -12px rgba(0, 0, 0, .55); }
.card-play {
  width: 40px; height: 40px; background: rgba(20, 20, 24, .46); color: #fff;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2), var(--lift-1);
}
/* Glass only while the button can be seen: at rest it is transparent, and a blur under nothing still costs a layer and a pass per frame */
.card:hover .card-play, .card:focus-within .card-play { -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.card-play svg { width: 18px; height: 18px; }
.card-play:hover { background: rgba(20, 20, 24, .68); }

/* The cover in flight */
.art-flight { position: fixed; z-index: 15; overflow: hidden; pointer-events: none; transform-origin: 0 0; box-shadow: var(--lift-2); will-change: transform; }
.art-flight .art { border-radius: inherit; }
.page.flying.page-enter { animation-name: page-fade; }
@keyframes page-fade { from { opacity: 0; } }

/* ───────────── Collection pages: the cover is the event ───────────── */
@media (min-width: 1101px) { .coll { gap: 32px; padding: 12px 0 30px; } .coll-artist { font-size: 20px; } .coll-line { font-size: 14px; } }
.coll .art { box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 60px -22px rgba(0, 0, 0, .75); }
.coll-artist { color: var(--text); }
.coll-actions .btn-primary { background: var(--text); color: #000; }
.coll-actions .btn-primary:hover { filter: none; background: #fff; }
.coll-actions .btn-tonal, .coll-actions .icon-btn { background: rgba(255, 255, 255, .11); }
.coll-actions .btn-tonal:hover, .coll-actions .icon-btn:hover { background: rgba(255, 255, 255, .17); }

/* ───────────── Search belongs to the side menu ─────────────
   The link is drawn as the field it leads to, first in the menu, and the page header stays clear. */
@media (min-width: 761px) {
  .nav-item[data-nav="search"] { height: 34px; margin: 0 0 12px; gap: 9px; border-radius: 10px; background: var(--fill-2); font-size: 14px; font-weight: 400; color: var(--text-2); }
  .nav-item[data-nav="search"] svg { width: 16px; height: 16px; }
  .nav-item[data-nav="search"]::after { content: "/"; margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--fill-2); font-size: 11.5px; color: var(--text-3); }
  .nav-item[data-nav="search"]:hover { background: var(--fill-3); }
  .nav-item[data-nav="search"].on { background: var(--fill-3); color: var(--text); }
  .nav-item[data-nav="search"].on svg { color: inherit; }
  .topbar .search-field { display: none; }
}

/* Home opens on the greeting. The library's totals live on Songs. */
#page:has(#homeSections) > .page-sub { display: none; }

/* Quiet surfaces on the remaining pages */
.rp-tile { background: var(--fill-1); }
.rp-meter { background: var(--fill-2); }
.rp-row:hover { background: var(--fill-1); }
.hint-row { background: var(--fill-1); }
.switch-row { background: var(--fill-1); }

/* ───────────── The three-dots menu: you first, Admin apart, sign out last ───────────── */
.menu .menu-me { height: auto; min-height: 54px; gap: 11px; padding: 7px 8px; border-radius: 10px; }
.menu-me .avatar { width: 38px; height: 38px; font-size: 15px; }
.menu-me .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-me b { font-size: 14.5px; font-weight: 600; }
.menu-me small { font-size: 12.5px; color: var(--text-2); }
.menu .menu-me > svg.i { width: 13px; height: 13px; color: var(--text-3); }
.menu button .grow { flex: 1; min-width: 0; }
.menu-sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--fill-3); transition: background var(--t-med); }
.menu-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform var(--t-med) var(--spring); }
.menu [aria-checked="true"] .menu-sw { background: var(--accent); }
.menu [aria-checked="true"] .menu-sw::after { transform: translateX(12px); background: #1c1c1e; }

/* ───────────── Your account: you, your week, then the settings ───────────── */
.acct-hero { gap: 26px; margin: 2px 0 30px; }
.acct-photo .avatar { width: 128px; height: 128px; font-size: 52px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 26px 50px -22px rgba(0, 0, 0, .75); }
.acct-cam { right: 2px; bottom: 2px; width: 32px; height: 32px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); box-shadow: var(--hair), var(--lift-1); }
.acct-id h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.acct-sub { gap: 6px 10px; margin-top: 8px; font-size: 14px; }
.acct-since { margin: 0; font-size: 14px; color: var(--text-2); }
.acct-week { max-width: none; margin: 0 0 34px; }
.acct-stats { display: flex; gap: 44px; margin-bottom: 30px; }
.acct-stat { min-height: 0; padding: 0; border-radius: 0; background: none; }
.acct-stat.skel { width: 96px; height: 50px; border-radius: var(--r-s); background: var(--fill-1); }
.acct-stat b { font-size: 26px; letter-spacing: -.02em; }
.acct-week > .acct-h { margin: 0 0 12px; font: 650 20px/1.2 var(--font-d); letter-spacing: -.015em; color: var(--text); max-width: none; }
.acct-top { gap: 16px; max-width: 1000px; }
.acct-tile { gap: 8px; font-size: 13px; }
.acct-tile .art { box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 24px -12px rgba(0, 0, 0, .55); }
.acct-sections { columns: 2; column-gap: 28px; max-width: 1000px; }
.acct-sec { break-inside: avoid; padding-bottom: 26px; }
.acct-sec .acct-h { margin: 0 0 8px 2px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.acct-group { border-radius: 14px; background: var(--fill-1); }
.acct-sec .acct-group { max-width: none; margin: 0; }
.acct-sec .acct-row { min-height: 54px; gap: 12px; padding: 8px 12px; }
.acct-sec .acct-row + .acct-row::before { left: 54px; background: var(--sep); }
.acct-sec .acct-row > .i:first-child { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--fill-2); color: var(--text); }
.acct-sec .acct-row .grow b { font-size: 15px; font-weight: 500; }
.acct-sec .acct-row .grow small { margin-top: 1px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 640px; padding-top: 6px; }
.acct-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.acct-note:empty { display: none; }
@media (max-width: 1100px) { .acct-sections { columns: 1; } }
@media (max-width: 760px) {
  .acct-hero { flex-direction: column; gap: 14px; margin: 4px 0 24px; text-align: center; }
  .acct-photo .avatar { width: 112px; height: 112px; font-size: 46px; }
  .acct-sub { justify-content: center; }
  .acct-stats { justify-content: space-around; gap: 12px; margin-bottom: 26px; text-align: center; }
  .acct-foot { align-items: stretch; }
  .acct-sec .acct-row .grow small { white-space: normal; }
  .acct-foot .btn { width: 100%; }
}

/* Silver leaves no room for a colour-only state: what's on gets a soft fill, what's current gets weight */
.p-ctrls .mode.on, .player .icon-btn.on { background: var(--fill-3); color: #fff; }
.deck-card.on .dc-t, .cat-card:has(.pv-btn.on) .card-t { color: #fff; font-weight: 650; }
.top-result .card-play { background: var(--accent); color: var(--accent-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.top-result .card-play:hover { background: #fff; }