/* 26-song-view-noir.css — Song View · mobile · Blue Hour pass
   ─────────────────────────────────────────────────────────────────────
   Founder ask (2026-06-15): the mobile Song View never got the Blue Hour
   treatment. Three deterministic moves, each reusing a surface we already
   like (no new look invented):
     1) screen background  → the home stage          (17-home-noir.css)
     2) summary card        → dialed-back metallic edge (.v9-final-lyrics)
     3) lyrics card         → the final-lyrics frame  (.v9-final-lyrics)
   Scope: mobile only (<1024px). The desktop song-view track is untouched.
   Loads LAST in the <link> order, so it wins over 04/05 at equal
   specificity — no !important needed.
   Plain static CSS — no prompts, schemas, or model-facing content
   (CLAUDE.md client-side rule). */

@media (max-width: 1023px){

  /* ── 1 · BACKGROUND — the home Blue Hour stage ─────────────────────────
     Values mirror body.on-home (17-home-noir.css): a candle-gold crown +
     a blue-green petrol haze over the cool ink ramp, plus the ~5% film
     grain. The ramp references the session swatch tokens directly
     (--stz-smoke-teal → --stz-obsidian → --stz-void) so it matches home's pixels
     exactly. Painted on the .sv-bg-texture layer already present (unused) in
     the markup, pinned (fixed) behind content so it reads identical to home
     and never scrolls. Home's transparent petrol-texture slot + its screen
     blend are no-ops, so they're omitted — visually identical. */
  #s-song-view{ background:var(--stz-void); }
  #s-song-view .sv-bg-texture{
    display:block;
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:
      radial-gradient(ellipse 64% 22% at 50% -5%, rgba(var(--gold-rgb),0.12), transparent 62%),
      radial-gradient(ellipse 120% 55% at 50% -12%, rgba(19, 42, 45,0.40), rgba(6, 13, 15,0.20) 45%, transparent 68%),
      radial-gradient(ellipse 130% 60% at 50% 115%, rgba(6, 13, 15,0.55), transparent 60%),
      linear-gradient(180deg, var(--stz-smoke-teal) 0%, var(--stz-obsidian) 38%, var(--stz-void) 100%);
    background-repeat:no-repeat;
    background-position:center;
  }
  /* Film grain — matches home's body.on-home::after (~5% effective, 0.35 alpha).
     Sits above the gradient but behind content (calmer than home's
     over-everything grain — safer over lyric text). Flip to a top layer
     later if it should read more present. */
  #s-song-view .sv-bg-texture::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.065 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity:0.35;
  }

  /* ── 2 · SUMMARY CARD — gold metallic edge, dialed back ~25% ───────────
     Founder revision (2026-06-15): give the summary card the same metallic
     gold gradient EDGE as the lyrics card / .v9-final-lyrics — the look that
     was too intense on the recommendation card — but ~25% softer (each gold
     alpha ×0.75), and KEEP its near-transparent background (no ink fill).
     The edge is a mask-composite ::before ring, so the element's own border
     is dropped. Base .sva-card is position:relative + overflow:hidden (04),
     so the ring inherits the 18px radius and clips cleanly. */
  #s-song-view .sva-card{
    background:rgba(var(--gold-rgb),0.02);   /* keep the current transparent tint */
    border:0;
    isolation:isolate;
  }
  #s-song-view .sva-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(155deg,rgba(232,200,136,0.41) 0%,rgba(var(--gold-rgb),0.22) 18%,rgba(var(--gold-rgb),0.06) 45%,rgba(140,106,46,0.14) 70%,rgba(232,200,136,0.30) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
    /* iOS Safari first-paint fix (see #525): promote the masked pseudo to its
       own compositor layer so the mask rasterizes up front instead of
       flashing a full gold fill until a repaint. */
    -webkit-transform:translateZ(0); transform:translateZ(0);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }

  /* ── 3 · LYRICS CARD — adopt the final-lyrics card frame ───────────────
     .svt-lyrics-card was a flat light-overlay panel. Give it the
     .v9-final-lyrics frame: a deep ink gradient + a real gold metallic edge
     (gradient border via mask-composite) + a faint top-edge highlight. The
     gold edge IS the ::before mask, so the element's own border is dropped.
     Inner lyric text (#songTabLyrics) keeps its current Cormorant rendering. */
  #s-song-view .svt-lyrics-card{
    position:relative;
    background:linear-gradient(180deg,#0c0a07 0%,#08060a 50%,#060507 100%);
    border:0;
    border-radius:22px;
    padding:30px 18px 22px;
    box-shadow:none;
    isolation:isolate;
  }
  #s-song-view .svt-lyrics-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(155deg,rgba(232,200,136,0.55) 0%,rgba(var(--gold-rgb),0.30) 18%,rgba(var(--gold-rgb),0.08) 45%,rgba(140,106,46,0.18) 70%,rgba(232,200,136,0.40) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
    /* iOS Safari first-paint fix (see #525): promote the masked pseudo to its
       own compositor layer so the mask rasterizes up front instead of flashing
       a full gold fill until a repaint. The source .v9-final-lyrics is still
       the un-fixed instance — this new instance ships fixed. */
    -webkit-transform:translateZ(0); transform:translateZ(0);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  #s-song-view .svt-lyrics-card::after{
    content:""; position:absolute; left:14%; right:14%; top:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,200,136,0.55),transparent);
    pointer-events:none;
  }
}