/* james.com - Safety design: discography and album pages (css/ss-pages/discography-album.css).
   Loaded by INFO["ss_css"] = "discography-album" (discography.nvx, album.nvx). Extends the core
   components in safety-site.css; every selector starts with ss- and stays inside .ss-main.
   The home page includes the discography section with its own partial, so nothing here is required
   for that section to look right: these rules only refine it. Served byte for byte (css/ss-pages). */

/* moved from the core (css/ss-pages/safety-site.css) by RD/tools/css_split.py, review 2026-10-05:
   the rules below are used only by the pages that load this partial; they keep their core order */
.ss-grid-releases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 400px) {
  .ss-grid-releases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ss-tracklist { margin: 0; padding: 0; list-style: none; border-radius: var(--ss-radius); background: var(--ss-card); border: 1px solid var(--ss-line-2); overflow: hidden; }
.ss-track {
  position: relative;
  display: grid;
  grid-template-columns: 2.4ch minmax(0, 1fr) auto 5ch;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 18px 8px 16px;
  border-bottom: 1px solid var(--ss-line-2);
  border-left: 2px solid transparent;
}
.ss-track:last-child { border-bottom: 0; }
.ss-track-n { color: var(--ss-muted); font-family: var(--ss-serif); font-weight: 600; font-size: 18px; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
/* fonts-1006: centred in the row, Brygada's number sat 1.8px above the Ysabeau title's baseline; this puts them on one line */
.ss-track-n > .ss-track-num { position: relative; top: 0.1em; }
.ss-track-title { min-width: 0; color: var(--ss-ink); font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ss-track-title { text-decoration: none; }
a.ss-track-title:hover { color: var(--ss-amber-hi); }
.ss-badge-e { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; border: 1px solid var(--ss-muted-2); border-radius: 4px; color: var(--ss-muted); font-size: 10px; font-weight: 700; vertical-align: 0.1em; }
.ss-track-dur { color: var(--ss-muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.ss-track .ss-btn-icon { width: 40px; height: 40px; }
.ss-track .ss-btn-icon .ss-ico { width: 15px; height: 15px; }
.ss-track.is-playing { border-left-color: var(--ss-release); background: linear-gradient(90deg, rgba(242, 201, 135, 0.06), rgba(242, 201, 135, 0)); }
.ss-track.is-playing .ss-track-title { color: var(--ss-cream); }
.ss-track::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--ss-release);
  transform-origin: 0 50%;
  transform: scaleX(var(--ss-progress, 0));
  opacity: 0;
}
.ss-track.is-playing::after { opacity: 0.8; }
.ss-eq { display: none; justify-content: flex-end; align-items: flex-end; gap: 2px; height: 16px; }
.ss-eq i { width: 3px; height: 100%; background: var(--ss-release); transform-origin: 50% 100%; animation: ss-eq 0.9s ease-in-out infinite alternate; }
.ss-eq i:nth-child(2) { animation-delay: -0.3s; }
.ss-eq i:nth-child(3) { animation-delay: -0.6s; }
.ss-track.is-playing .ss-eq { display: flex; }
.ss-track.is-playing .ss-track-n > span:not(.ss-eq) { display: none; }
@media (max-width: 520px) {
  .ss-track { grid-template-columns: 2.2ch minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; }
  .ss-track-dur { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-eq i { transform: scaleY(0.6); }
}
@media (pointer: coarse) {
  .ss-track .ss-btn-icon, .ss-main .ss-track-nopv { width: 44px; height: 44px; }
}
@keyframes ss-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
/* end of the rules moved from the core */

/* ---------- discography ---------- */
.ss-main .ss-disco-jump { margin-top: 28px; }
.ss-main .ss-disco-jump a.ss-chip {
  min-height: 36px;
  padding: 6px 14px;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.ss-main .ss-disco-jump a.ss-chip:hover { border-color: var(--ss-amber-hi); color: var(--ss-amber-hi); }
.ss-main .ss-disco-jump .ss-num { color: var(--ss-amber); font-family: var(--ss-sans); font-size: 12px; font-weight: 700; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
/* the page heads: the core seam (::after, navy 0 -> 0.6) ends in a hard line where the section below starts;
   these heads fade out instead (the album's blurred cover band is masked to nothing at its bottom edge) */
.ss-main .ss-disco-head::after, .ss-main .ss-album-top::after { background: none; }
.ss-main .ss-album-top[data-cover]::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.ss-main .ss-disco-intro { max-width: 62ch; margin: -12px 0 28px; }
.ss-main .ss-disco-sec + .ss-disco-sec { border-top: 1px solid var(--ss-line-2); }
.ss-main .ss-disco-sec .ss-section-head .ss-meta { margin: 0 0 6px; }
.ss-main .ss-disco-home .ss-disco-sub { margin: clamp(40px, 6vw, 64px) 0 10px; }
.ss-main .ss-disco-home .ss-disco-intro { margin: 0 0 24px; }
.ss-main .ss-disco-empty .ss-glass { text-align: center; }
.ss-main .ss-disco-empty .ss-body-2 { margin: 8px 0 0; }
.ss-main .ss-disco-empty-row { justify-content: center; margin-top: 22px; }
.ss-main .ss-disco-admin .ss-h3 { margin-bottom: 18px; }
.ss-main .ss-input.ss-file { padding: 10px 12px; font-size: 14px; }
.ss-main .ss-input.ss-file::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(242, 201, 135, 0.5);
  background: transparent;
  color: var(--ss-amber-hi);
  font: 600 12px var(--ss-sans);
  cursor: pointer;
}

/* ---------- album ---------- */
.ss-main .ss-album-top { padding-bottom: clamp(20px, 3vw, 40px); }
.ss-main .ss-album-head .ss-stagelight { width: 100%; max-width: 440px; margin: 0 auto; }
.ss-main .ss-album-head .ss-cover { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(243, 233, 210, 0.08), 0 0 70px -24px var(--ss-release-glow); }
.ss-main .ss-album-title { font-size: clamp(40px, 6vw, 84px); overflow-wrap: anywhere; }
.ss-main .ss-album-meta { margin-top: 20px; }
.ss-main .ss-album-actions { margin-top: 26px; }
.ss-main .ss-album-listen { margin: 28px 0 10px; }
.ss-main [data-ss-play-first].is-playing { box-shadow: 0 0 0 4px rgba(242, 201, 135, 0.18), 0 10px 30px -8px rgba(224, 164, 88, 0.6); }
@media (max-width: 899px) {
  .ss-main .ss-album-head .ss-stagelight { max-width: min(360px, 86%); }
}

/* the tracklist: amber preview buttons (the mockup), the play / pause glyph swap, the playing row */
.ss-main .ss-track-play { border-color: rgba(242, 201, 135, 0.55); background: rgba(6, 11, 23, 0.35); color: var(--ss-amber-hi); }
.ss-main .ss-track-play:hover { background: var(--ss-amber-hi); border-color: var(--ss-amber-hi); color: var(--ss-navy); }
.ss-main .ss-track-play[aria-pressed="true"] { background: var(--ss-amber); border-color: var(--ss-amber); color: var(--ss-btn-ink); box-shadow: 0 0 24px -6px rgba(224, 164, 88, 0.7); }
.ss-main .ss-track-play .ss-ico-pause,
.ss-main .ss-track-play[aria-pressed="true"] .ss-ico-play { display: none; }
.ss-main .ss-track-play[aria-pressed="true"] .ss-ico-pause { display: inline-block; }
.ss-main .ss-track-nopv { display: block; width: 40px; height: 40px; }
.ss-main .ss-track:hover { background: rgba(243, 233, 210, 0.025); }
.ss-main .ss-track.is-playing:hover { background: linear-gradient(90deg, rgba(242, 201, 135, 0.08), rgba(242, 201, 135, 0.01)); }
/* the core rule ".ss-track.is-playing .ss-track-n span" also hides the equalizer span: show it again */
.ss-main .ss-track.is-playing .ss-track-n .ss-eq { display: flex; }
.ss-main .ss-track.is-playing .ss-track-n .ss-track-num { display: none; }

/* more albums strip */
.ss-main .ss-album-strip { margin: 0; padding: 0 0 10px; list-style: none; }
.ss-main .ss-album-strip > li { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .ss-main .ss-disco-jump a.ss-chip { transition: none; }
}

/* touch: the section chips are 44 px tall too (review 2026-10-05) */
@media (pointer: coarse) { .ss-main .ss-disco-jump a.ss-chip { min-height: 44px; } }

/* ---------- release colours (2026-10-06) ----------
   The album view prints the cover's palette as custom properties on :root (one <style> before the content, no
   JavaScript): computed in the background by the james.com task catalogue_refresh, read through
   modules/safety_site/release_palette.nvx. The coloured block carries data-ss-pal; inside it the Safety amber tokens
   take the release's accent, so the eyebrows, buttons, links, chips and the playing track follow the artwork.
   The night, the top bar and the footer never change. No palette, or a cover without a clear hue: no data-ss-pal,
   the amber stays. --ss-rel-deep (the cover's mood) washes the head band whenever the cover has one. */
.ss-main [data-ss-pal] {
  --ss-amber: var(--ss-rel-accent);
  --ss-amber-hi: var(--ss-rel-accent-hi);
  --ss-gold: var(--ss-rel-accent);
  --ss-btn-grad: linear-gradient(180deg, var(--ss-rel-accent-hi) 0%, var(--ss-rel-accent) 55%, var(--ss-rel-accent-lo) 100%);
  --ss-btn-ink: var(--ss-rel-on-accent);
  --ss-line: var(--ss-rel-hair);
}
.ss-main .ss-album-top { background: linear-gradient(180deg, var(--ss-rel-deep, rgba(6, 11, 23, 0)) 0%, var(--ss-rel-deep-2, rgba(6, 11, 23, 0)) 62%, rgba(6, 11, 23, 0) 100%); }
.ss-main [data-ss-pal] .ss-btn-primary { box-shadow: 0 10px 30px -8px var(--ss-rel-line), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.ss-main [data-ss-pal] .ss-btn-primary:hover { box-shadow: 0 16px 40px -8px var(--ss-rel-line), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.ss-main [data-ss-pal] .ss-btn-outline { border-color: var(--ss-rel-line); }
.ss-main [data-ss-pal] [data-ss-play-first].is-playing { box-shadow: 0 0 0 4px var(--ss-rel-wash), 0 10px 30px -8px var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-tracklist { border-color: var(--ss-rel-hair); }
.ss-main [data-ss-pal] .ss-track-play { border-color: var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-track-play[aria-pressed="true"] { box-shadow: 0 0 24px -6px var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-track.is-playing,
.ss-main [data-ss-pal] .ss-track.is-playing:hover { background: linear-gradient(90deg, var(--ss-rel-wash), rgba(6, 11, 23, 0)); }
.ss-main [data-ss-pal] .ss-badge-e { border-color: var(--ss-rel-line); color: var(--ss-rel-accent-hi); }
/* the head eyebrow sits over the blurred cover and the sky: the brighter amber-hi (the release accent-hi inside data-ss-pal), as the core already does on phones; plain amber measured 3.8-5.5:1 there on desktop */
.ss-main .ss-album-top .ss-kicker { color: var(--ss-amber-hi); }
/* finish-1006 A: the card meta ("2026 / Single") over the bright twilight sky of the grid pages: the core muted measured 4.1:1 median, 3.4:1 at the 5th percentile behind the worst card on desktop; this lighter grey-blue keeps it under the cream title and above AA */
.ss-main .ss-grid-releases .ss-release-meta { color: #cdd3df; }
/* finish-1006 A close (review R9): the discography head eyebrow and the section counts ("12 singles") over the same
   bright sky, measured on desktop at the 5th percentile of the backdrop behind the text: the eyebrow in amber 3.99:1,
   the counts in muted-2 2.20:1. The eyebrow takes amber-hi as on the album head (5.59:1; the core already does this
   on phones), the counts the card meta's grey-blue (5.06:1) */
.ss-main .ss-disco-head .ss-kicker { color: var(--ss-amber-hi); }
.ss-main .ss-disco-sec .ss-section-head .ss-meta { color: #cdd3df; }

/* ---------- the album trailer (trailers-1007) ----------
   An album with a trailer shows it between the head and the tracklist, with the shared player (modules/safety_site/
   video_player.nvx + album_trailers.nvx: the same frame, sources, script and css/ss-pages/videos.css as /music-videos
   and the song pages), and a chip in the head that jumps to it. A trailer whose files are not here yet shows its
   poster as a "Watch on YouTube" link (.ss-al-tyt). Only the album-page layout and the release colours live here. */
.ss-al-trailer { padding-top: clamp(4px, 1.5vw, 20px); padding-bottom: clamp(8px, 2vw, 24px); scroll-margin-top: calc(var(--ss-topbar-h) + 8px); }
.ss-al-trailer:focus { outline: none; }
.ss-al-thead { margin-bottom: clamp(14px, 2vw, 22px); }
.ss-al-thead .ss-h2 { margin: 0; }
.ss-al-tlen { font-variant-numeric: tabular-nums; }
.ss-al-tlinks { justify-content: flex-end; margin-top: clamp(14px, 2vw, 20px); }
.ss-al-tlinks .ss-ico { width: 16px; height: 16px; }
.ss-al-tlinks .ss-btn-outline .ss-ico { margin-left: 2px; }
.ss-al-tchip a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.ss-al-tchip .ss-ico { width: 12px; height: 12px; color: var(--ss-amber-hi); }
.ss-al-tchip:hover, .ss-al-tchip:focus-within { border-color: var(--ss-amber); color: var(--ss-cream); }
@media (max-width: 520px) { .ss-al-tlinks { justify-content: flex-start; } }
/* after the chip's jump the whole player fits under the bar (on a wide, short screen its width follows the height) */
.ss-al-trailer .ss-vplayer, .ss-al-tyt { max-width: max(480px, calc((100svh - var(--ss-topbar-h) - 220px) * 16 / 9)); margin-inline: auto; }
/* the link-only trailer: its poster, the round play mark and a "YouTube" label (no player, no embed) */
a.ss-al-tyt { color: var(--ss-cream); text-decoration: none; }
.ss-al-tyt-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(6, 11, 23, 0.66); font-size: 13.5px; line-height: 1.2; }
.ss-al-tyt-label .ss-ico { width: 16px; height: 16px; }
.ss-al-tyt:focus-visible { outline: 2px solid var(--ss-amber-hi); outline-offset: 3px; }
@media (max-width: 520px) { .ss-al-tyt-label { left: 10px; bottom: 10px; font-size: 12.5px; padding: 6px 11px; } }
/* the player in the release colours (inside data-ss-pal; without a palette the shared amber stays) */
.ss-main [data-ss-pal] .ss-vplayer, .ss-main [data-ss-pal] .ss-al-tyt { box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--ss-rel-hair), 0 0 80px -30px var(--ss-release-glow); }
.ss-main [data-ss-pal] .ss-play { box-shadow: 0 0 0 10px rgba(243, 233, 210, 0.06), 0 0 60px var(--ss-release-glow); }
.ss-main [data-ss-pal] .ss-frame:hover .ss-play, .ss-main [data-ss-pal] .ss-play:focus-visible { background: var(--ss-rel-accent); color: var(--ss-rel-on-accent); }
.ss-main [data-ss-pal] .ss-vplayer.is-loading .ss-play::after { border-color: var(--ss-rel-tint); border-top-color: var(--ss-amber-hi); }
.ss-main [data-ss-pal] .ss-range::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ss-rel-tint); }
.ss-main [data-ss-pal] .ss-vpeek { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), 0 0 30px -12px var(--ss-release-glow); }
@media print { .ss-al-trailer, .ss-al-tchip { display: none !important; } }