/* Stanzai dev styles 19 — LIBRARY NOIR treatment (2026-06-12). New surface file appended per
   styles/README.md rule. Scope: the Library screen only (#s-library descendants).

   Founder mockup direction (the "Vault" shelf): room-plate stage, serif row titles, glass card
   rows, monogram tiles standing in for missing Suno cover art, the 2x2 stat grid recomposed as a
   horizontal filter-pill shelf (same elements, same tap handlers — CSS recomposition only).
   Values mirror the session swatch; consolidate onto --stz-* tokens in a later pass.

   Plain static CSS — no prompts, no schemas, no model-facing content (CLAUDE.md client-side rule). */

/* ── STAGE — founder room plates (warm lamp pockets in a teal room) ── */
#s-library {
  background-color: var(--stz-obsidian);
  background-image:
    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.38 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(3, 8, 10, 0.30) 0%, rgba(3, 8, 10, 0.34) 70%, rgba(2, 6, 8, 0.58) 100%),
    url('/img/library-room-mobile.webp'),
    linear-gradient(180deg, var(--stz-smoke-teal) 0%, var(--stz-obsidian) 52%, var(--stz-void) 100%);
  background-size: 180px 180px, auto, cover, auto;
  background-position: top left, center, center top, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
@media (min-width: 1024px) {
  #s-library {
    background-image:
      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.38 0 0 0 0 0.58 0 0 0 0 0.64 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
      linear-gradient(180deg, rgba(3, 8, 10, 0.30) 0%, rgba(3, 8, 10, 0.34) 70%, rgba(2, 6, 8, 0.58) 100%),
      url('/img/library-room-desktop.webp'),
      linear-gradient(180deg, var(--stz-smoke-teal) 0%, var(--stz-obsidian) 52%, var(--stz-void) 100%);
  }
}

/* ── TOP SHELF — sticky nav melts into the stage; title takes the masthead
   serif (the markup's inline background/font-size need the !important pair) */
#s-library .lib-topnav {
  background: linear-gradient(180deg, rgba(4, 9, 11, 0.92), rgba(4, 9, 11, 0.66) 75%, rgba(4, 9, 11, 0.0)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(var(--gold-rgb), 0.10) !important;
}
#s-library .lib-topnav > div > div:first-child {
  font-size: 30px !important;
  color: var(--stz-ivory) !important;
}

/* ── FILTER SHELF — the 2x2 stat grid recomposes into one horizontal pill
   row per the mockup. Same four elements, same libCatFilter() taps. */
#s-library #libStatGrid {
  display: flex !important;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px var(--sp-page) 12px !important;
}
#s-library #libStatGrid::-webkit-scrollbar { display: none; }
:where(#s-library) .lib-stat-card {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(3, 11, 13, 0.60);
  border: 1px solid rgba(var(--ivory-rgb), 0.12);
  border-top-color: rgba(var(--ivory-rgb), 0.12);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
:where(#s-library) .lib-stat-card.active {
  border-color: rgba(var(--gold-rgb), 0.45);
  background: rgba(8, 16, 16, 0.66);
}
:where(#s-library) .lib-stat-num {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--gold);
}
:where(#s-library) .lib-stat-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ivory-rgb), 0.55);
  white-space: nowrap;
}

/* ── SHELF ROWS — list items become quiet glass cards; serif titles ── */
:where(#s-library) .lib-song-card {
  background: linear-gradient(180deg, rgba(14, 24, 26, 0.50) 0%, rgba(3, 11, 13, 0.72) 50%, rgba(2, 8, 10, 0.74) 100%);
  border: 1px solid rgba(var(--ivory-rgb), 0.10);
  border-top-color: rgba(var(--ivory-rgb), 0.16);
  border-radius: 14px;
  margin-bottom: 8px;
  padding: 12px 12px 12px 14px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.05),
    0 10px 24px -12px rgba(0, 0, 0, 0.60);
}
:where(#s-library) .lib-song-name {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--stz-ivory);
  margin-bottom: 2px;
}
:where(#s-library) .lib-song-sub { color: rgba(var(--ivory-rgb), 0.45); font-size: 12.5px; }

/* Monogram tile — stands in when no Suno cover art exists. The status color
   rides the left edge so the old 4px bar's signal survives. */
:where(#s-library) .lib-row-mono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(216, 182, 118, 0.80);
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(19, 42, 45, 0.55), transparent 70%),
    linear-gradient(180deg, #081113 0%, var(--stz-obsidian) 100%);
  border: 1px solid rgba(var(--ivory-rgb), 0.12);
  text-shadow: 0 0 14px rgba(232, 200, 136, 0.18);
}
:where(#s-library) .lib-row-thumb { border-radius: 10px; }

/* ── SEGMENTED TAB SHELF — All / Songs / Drafts / Sessions / Archived.
   One rounded container, active segment takes the warm tint (mockup). */
#s-library .lib-seg-wrap {
  display: flex;
  margin: 8px var(--sp-page) 14px;
  border: 1px solid rgba(var(--ivory-rgb), 0.14);
  border-radius: 999px;
  background: rgba(3, 9, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
#s-library .lib-seg {
  flex: 1 1 0;
  text-align: center;
  padding: 11px 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(var(--ivory-rgb), 0.55);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, color 0.18s ease;
}
#s-library .lib-seg { margin: 3px; border-radius: 999px; }
#s-library .lib-seg.active {
  background:
    linear-gradient(165deg, rgba(244, 236, 212, 0.06), transparent 40%),
    linear-gradient(180deg, rgba(var(--gold-rgb), 0.13), rgba(120, 95, 50, 0.07));
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.10),
    0 4px 12px -4px rgba(0, 0, 0, 0.50);
  color: #ecd9a0;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── RECENT header + View all ── */
#s-library .lib-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2px 2px 10px;
}
#s-library .lib-recent-lbl {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(var(--ivory-rgb), 0.50);
}
#s-library .lib-recent-viewall {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── ROW TYPE TAG + TIME ── */
:where(#s-library) .lib-row-type {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ivory-rgb), 0.18);
  background: rgba(4, 10, 12, 0.55);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: rgba(var(--ivory-rgb), 0.60);
  vertical-align: 1px;
}
:where(#s-library) .lib-row-type--song { border-color: rgba(var(--gold-rgb), 0.35); color: rgba(216, 182, 118, 0.80); }
:where(#s-library) .lib-row-type--session { border-color: rgba(var(--teal-rgb), 0.30); color: rgba(127, 192, 180, 0.70); }
:where(#s-library) .lib-row-time {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(var(--ivory-rgb), 0.38);
  white-space: nowrap;
}

/* Old sort row retires — the RECENT header label is the sort trigger now */
#s-library #libSortRow { display: none !important; } /* inline display:flex on the row */
#s-library .lib-recent-lbl { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ── MASTHEAD — wordmark + Library header + subtitle (founder mockup) ── */
#s-library .lib-mast-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: rgba(216, 182, 118, 0.85);
  margin-bottom: 10px;
}
#s-library .lib-mast-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.1;
  color: #ece4cd;
}
#s-library .lib-mast-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(var(--ivory-rgb), 0.45);
  margin-top: 4px;
}

/* ── GAP FIX (same recipe proven on the DNA screens, PR #484): sticky
   headers + scroller padding-top cannot coexist — the header owns the
   safe-area inset. Mobile only; the desktop gallery has its own shell. */
@media (max-width: 1023px) {
  #s-library { padding-top: 0; }
  #s-library .lib-topnav {
    padding-top: max(env(safe-area-inset-top), 12px) !important; /* inline padding on the markup */
  }
}