/* james.com - the Safety night: song page, lyrics reader and lyrics index (css/ss-pages/song-lyrics.css).
   Loaded by modules/safety_site/head.nvx when the page sets INFO["ss_css"] = "song-lyrics" (song.nvx, lyrics.nvx).
   Served byte for byte from css/ss-pages/ (no minifier). Every selector is ss-sl- prefixed and stays inside
   the page content; the shared components are extended, never restyled. No data URIs. */

/* 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-song-layout { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .ss-song-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
}
.ss-rail { display: grid; gap: 16px; }
.ss-preview { display: inline-flex; align-items: center; gap: 16px; margin: 22px 0; }
.ss-preview-btn {
  position: relative;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-btn-grad);
  color: var(--ss-btn-ink);
  box-shadow: 0 10px 30px -8px rgba(224, 164, 88, 0.6);
}
.ss-preview-btn .ss-ico { width: 20px; height: 20px; }
.ss-preview-btn .ss-ico-play { margin-left: 0; } /* fix-1005 F4: the sprite's play glyph is already optically centred */
.ss-preview-btn .ss-ico-pause, .ss-preview-btn[aria-pressed="true"] .ss-ico-play { display: none; }
.ss-preview-btn[aria-pressed="true"] .ss-ico-pause { display: inline-block; }
.ss-ring { position: absolute; inset: -5px; width: 66px; height: 66px; transform: rotate(-90deg); pointer-events: none; }
.ss-ring circle { fill: none; stroke-width: 2; }
.ss-ring .ss-ring-bg { stroke: rgba(243, 233, 210, 0.12); }
.ss-ring .ss-ring-fg { stroke: var(--ss-release); stroke-linecap: round; stroke-dasharray: 194.8; stroke-dashoffset: calc(194.8 * (1 - var(--ss-progress, 0))); }
.ss-preview-label { display: grid; gap: 2px; }
.ss-preview-label b { color: var(--ss-cream); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.ss-preview-time { color: var(--ss-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ss-lyrics {
  max-width: 36ch;
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--ss-cream);
  white-space: pre-line;
  text-align: left;
  hyphens: none;
}
.ss-lyrics::before { content: ""; display: block; width: 64px; height: 1px; margin: 0 0 22px; background: var(--ss-amber); }
.ss-lyrics p { margin: 0 0 1.1em; }
.ss-lyrics-empty { font-family: var(--ss-serif); font-style: italic; font-size: 22px; color: var(--ss-muted); }
@media (max-width: 760px) {
  .ss-lyrics-panel { margin: 0 calc(var(--ss-gutter) * -0.5); padding: 22px calc(var(--ss-gutter) * 0.5 + 6px); border-radius: 16px; background: rgba(6, 11, 23, 0.6); }
}
.ss-search { position: relative; max-width: 640px; }
.ss-search .ss-input { min-height: 56px; padding-left: 50px; }
.ss-search > .ss-ico { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ss-amber-hi); pointer-events: none; }
.ss-search .ss-label + .ss-ico, .ss-search-box > .ss-ico { top: auto; bottom: 18px; margin-top: 0; }
.ss-search-box { position: relative; }
.ss-search-box > .ss-ico { position: absolute; z-index: 1; left: 18px; width: 20px; height: 20px; color: var(--ss-amber-hi); pointer-events: none; }
.ss-listbox {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  top: calc(100% + 8px);
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border-radius: 16px;
  background: rgba(9, 15, 30, 0.96);
  border: 1px solid var(--ss-line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95);
}
.ss-listbox li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--ss-ink); cursor: pointer; }
.ss-listbox li img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.ss-listbox li[aria-selected="true"], .ss-listbox li:hover { background: rgba(242, 201, 135, 0.12); color: var(--ss-cream); }
.ss-songlist { display: grid; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .ss-songlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ss-songlist a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--ss-line-2);
  background: rgba(16, 27, 51, 0.45);
  color: var(--ss-ink);
  text-decoration: none;
  transition: border-color 0.25s, background-color 0.25s;
}
.ss-songlist a:hover { border-color: rgba(242, 201, 135, 0.3); background: rgba(26, 42, 74, 0.6); color: var(--ss-cream); }
.ss-songlist img, .ss-songlist .ss-cover-fallback { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.ss-songlist .ss-ico { width: 18px; height: 18px; color: var(--ss-amber-hi); }
.ss-songlist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ss-accordion { border-top: 1px solid var(--ss-line-2); }
.ss-accordion details { border-bottom: 1px solid var(--ss-line-2); }
.ss-accordion summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.ss-accordion summary::-webkit-details-marker { display: none; }
.ss-accordion summary img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.ss-accordion summary b { display: block; font-family: var(--ss-serif); font-size: clamp(21px, 2vw, 25px); font-weight: 600; line-height: 1.15; color: var(--ss-cream); }
.ss-accordion summary small { color: var(--ss-muted-2); font-size: 12.5px; }
.ss-accordion summary::after {
  content: "+";
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ss-line);
  color: var(--ss-amber-hi);
  font-family: var(--ss-sans);
  font-size: 18px;
  transition: transform 0.35s var(--ss-ease-out);
}
.ss-accordion details[open] summary::after { transform: rotate(45deg); }
.ss-accordion details > div, .ss-accordion details > ol, .ss-accordion details > ul { padding: 0 0 18px 68px; }
@media (max-width: 520px) {
  .ss-accordion details > div, .ss-accordion details > ol, .ss-accordion details > ul { padding-left: 0; }
}
.ss-accordion ol { margin: 0; list-style: none; display: grid; gap: 2px; }
.ss-accordion ol a { display: flex; align-items: center; min-height: 40px; color: var(--ss-ink); text-decoration: none; }
.ss-accordion ol a:hover { color: var(--ss-amber-hi); }
/* end of the rules moved from the core */

/* ---------- page head (song and lyrics modes) ---------- */
.ss-sl-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 0 14px;
  color: var(--ss-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.ss-sl-back .ss-ico { width: 18px; height: 18px; color: var(--ss-amber-hi); transition: transform 0.3s var(--ss-ease-out); }
.ss-sl-back:hover { color: var(--ss-cream); }
.ss-sl-back:hover .ss-ico { transform: translate3d(-3px, 0, 0); }
.ss-sl-head-grid { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
@media (min-width: 760px) { .ss-sl-head-grid { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); } }
@media (min-width: 1100px) { .ss-sl-head-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.ss-sl-cover { width: 100%; max-width: 360px; }
@media (max-width: 759px) { .ss-sl-cover { max-width: 250px; } }
.ss-sl-cover .ss-cover { border-radius: 16px; }
.ss-sl-head.is-lyrics .ss-sl-cover { max-width: 220px; }
@media (min-width: 760px) { .ss-sl-head.is-lyrics .ss-sl-head-grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
@media (max-width: 759px) { .ss-sl-head.is-lyrics .ss-sl-cover { max-width: 168px; } }
.ss-sl-head-text { min-width: 0; }
.ss-sl-title { font-size: clamp(42px, 6.2vw, 88px); overflow-wrap: anywhere; }
.ss-sl-head.is-lyrics .ss-sl-title { font-size: clamp(40px, 5.6vw, 80px); }
.ss-sl-head .ss-kicker a { color: var(--ss-amber-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ss-sl-head .ss-kicker a:hover { color: var(--ss-cream); }
.ss-sl-chips { margin-top: 20px; }
.ss-sl-head .ss-preview { margin: 26px 0 4px; }
.ss-sl-listen { margin-top: 22px; }
.ss-sl-listen .ss-label { margin-bottom: 10px; }

/* ---------- body: the lyrics reader and the rail ---------- */
.ss-sl-body { padding-top: clamp(8px, 2vw, 28px); }
.ss-sl-lyrics { min-width: 0; }
@media (min-width: 761px) {
  .ss-sl-lyrics {
    padding: clamp(30px, 4vw, 60px);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(16, 27, 51, 0.62), rgba(11, 20, 38, 0.46));
    border: 1px solid var(--ss-line-2);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
  }
}
.ss-sl-lyrics .ss-h3 { margin-bottom: 26px; }
.ss-sl-head.is-lyrics + .ss-sl-body .ss-lyrics::before { margin-top: 4px; }
.ss-sl-lyrics .ss-lyrics { max-width: 46ch; }
.ss-sl-lyrics .ss-lyrics p:last-child { margin-bottom: 0; }
.ss-sl-full { margin: 30px 0 0; }
.ss-sl-full .ss-ico { width: 15px; height: 15px; margin-left: 8px; }
.ss-sl-lnote { margin: 26px 0 0; max-width: 46ch; color: var(--ss-muted); font-size: 13.5px; font-style: italic; line-height: 1.5; }

.ss-sl-rail { min-width: 0; }
.ss-main .ss-sl-card:hover { transform: none; }
.ss-sl-card .ss-card-title { margin-bottom: 12px; }
.ss-sl-bio p { margin: 0 0 0.85em; color: var(--ss-ink); font-size: 15.5px; line-height: 1.65; }
.ss-sl-bio p:last-child { margin-bottom: 0; }
.ss-sl-bio .ss-sl-bio-first { font-family: var(--ss-serif); font-size: 21px; font-weight: 500; line-height: 1.42; color: var(--ss-cream); }
.ss-sl-note { margin: -4px 0 14px; color: var(--ss-muted); font-size: 14px; }
.ss-sl-facts { display: grid; margin: 0; }
.ss-sl-facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--ss-line-2); }
.ss-sl-facts div:last-child { border-bottom: 0; }
.ss-sl-facts dt { color: var(--ss-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ss-sl-facts dd { margin: 0; color: var(--ss-ink); font-size: 15px; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.ss-sl-facts a { color: var(--ss-amber-hi); text-decoration: none; }
.ss-sl-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-sl-songlink { margin: 10px 0 0; }
.ss-sl-songlink a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ss-amber-hi); font-size: 14px; font-weight: 600; text-decoration: none; }
.ss-sl-songlink a:hover { color: var(--ss-cream); }
.ss-sl-songlink .ss-ico { width: 16px; height: 16px; }

.ss-sl-more-list { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.ss-sl-more-list a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 60px;
  padding: 6px 8px;
  border-radius: 12px;
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 0.25s;
}
.ss-sl-more-list a:hover { background: rgba(242, 201, 135, 0.08); }
.ss-sl-more-list .ss-sl-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--ss-line-2); }
.ss-sl-more-list span { min-width: 0; }
.ss-sl-more-list b { display: block; overflow: hidden; color: var(--ss-cream); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ss-sl-more-list small { color: var(--ss-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- lyrics index ---------- */
.ss-sl-search { margin-top: 30px; }
/* the search glyph sits inside the field (the shared rule only positions a direct child of .ss-search) */
.ss-sl-search .ss-search-box > .ss-ico { position: absolute; z-index: 1; left: 18px; top: 50%; bottom: auto; width: 20px; height: 20px; margin-top: -10px; color: var(--ss-amber-hi); pointer-events: none; }
.ss-sl-search .ss-listbox li { overflow-wrap: anywhere; }
.ss-sl-qstatus { min-height: 1.4em; margin: 10px 0 0; }
.ss-sl-index .ss-section-head .ss-meta { margin: 0; }
.ss-sl-albums-head { margin-top: clamp(52px, 7vw, 96px); }
.ss-sl-albums summary .ss-sl-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--ss-line-2); }
.ss-sl-albums summary small { color: var(--ss-muted); }
.ss-sl-albums ol { counter-reset: ss-sl-n; }
.ss-sl-albums ol li { counter-increment: ss-sl-n; }
.ss-sl-albums ol a { gap: 14px; }
.ss-sl-albums ol a::before { content: counter(ss-sl-n); min-width: 2ch; color: var(--ss-muted); font-family: var(--ss-serif); font-size: 17px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.ss-sl-singles .ss-sl-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .ss-sl-back .ss-ico, .ss-sl-more-list a { transition: none; }
  .ss-sl-back:hover .ss-ico { transform: none; }
}
@media print {
  .ss-sl-back, .ss-sl-cover, .ss-sl-chips, .ss-sl-listen, .ss-sl-rail, .ss-sl-full, .ss-sl-search, .ss-sl-head .ss-kicker { display: none !important; }
  .ss-sl-head-grid { display: block; }
  .ss-sl-lyrics { padding: 0; background: none; border: 0; box-shadow: none; }
}

/* ---------- release colours (2026-10-06) ----------
   The song view (song and lyrics modes) 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 page head and the body carry data-ss-pal; inside them the Safety amber
   tokens take the release's accent, so the eyebrows, the preview button and ring, links, chips, the lyrics rule and
   the card edges 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. */
.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-sl-head { 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-preview-btn { box-shadow: 0 10px 30px -8px var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-btn-outline { border-color: var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-chip.is-amber { border-color: var(--ss-rel-line); }
.ss-main [data-ss-pal] .ss-sl-more-list a:hover { background: var(--ss-rel-wash); }
@media (min-width: 761px) {
  .ss-main .ss-sl-body[data-ss-pal] .ss-sl-lyrics { border-color: var(--ss-rel-hair); }
}
/* 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-sl-head .ss-kicker { color: var(--ss-amber-hi); }


/* ---------- the music video (song-video-1006) ----------
   A song with a music video shows it between the head and the lyrics, with the shared player
   (modules/safety_site/video_player.nvx: the same frame, sources, script and css/ss-pages/videos.css as /music-videos).
   Only the song-page layout and the release colours of the player live here. */
.ss-sl-video { padding-top: clamp(4px, 1.5vw, 20px); padding-bottom: clamp(8px, 2vw, 24px); scroll-margin-top: calc(var(--ss-topbar-h) + 8px); }
.ss-sl-vhead { margin-bottom: clamp(14px, 2vw, 22px); }
.ss-sl-vhead .ss-h2 { margin: 0; }
.ss-sl-vlen { font-variant-numeric: tabular-nums; }
.ss-sl-vlinks { justify-content: flex-end; margin-top: clamp(14px, 2vw, 20px); }
.ss-sl-vlinks .ss-ico { width: 16px; height: 16px; }
.ss-sl-vlinks .ss-btn-outline .ss-ico { margin-left: 2px; }
.ss-sl-vchip a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.ss-sl-vchip .ss-ico { width: 12px; height: 12px; color: var(--ss-amber-hi); }
.ss-sl-vchip:hover, .ss-sl-vchip:focus-within { border-color: var(--ss-amber); color: var(--ss-cream); }
@media (max-width: 520px) { .ss-sl-vlinks { justify-content: flex-start; } }
/* close (L7): the chip's jump focuses the section (tabindex -1, so a screen reader follows it) without a focus ring,
   and the player fits the screen under the bar after the jump (on a wide, short screen its width follows the height) */
.ss-sl-video:focus { outline: none; }
.ss-sl-video .ss-vplayer { max-width: max(480px, calc((100svh - var(--ss-topbar-h) - 220px) * 16 / 9)); margin-inline: auto; }
/* the player in the release colours (inside data-ss-pal; without a palette the shared amber stays) */
.ss-main [data-ss-pal] .ss-vplayer { 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-sl-video, .ss-sl-vchip { display: none !important; } }