/* Stanzai dev styles 23 — SOUND DESIGNER NOIR (2026-06-12). New surface file appended per
   styles/README.md rule. Scope: the Sound Designer only (#s-styler).

   The last big surface joins the blue-hour family: session smoke stage, the live stage
   card as edge-lit ink glass (the screen's hero), workspace panel + inner wells in ink,
   the dock as glass chrome, chips in the ink wash. Includes the proven gap fix (the
   header owns the safe-area inset; scroller padding-top drops).

   Plain static CSS — no prompts, no schemas, no model-facing content. */

/* ── STAGE ── */
#s-styler {
  --sd-navh: calc(54px + max(env(safe-area-inset-top), 12px));
  padding-top: 0;
  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"),
    radial-gradient(circle at 34% 10%, rgba(19, 42, 45, 0.30), transparent 34%),
    url('/img/stanzai-smoke-mobile.webp'),
    linear-gradient(180deg, var(--stz-petrol) 0%, var(--stz-void) 48%, #040708 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;
  background-blend-mode: normal, normal, screen, normal;
}
@media (min-width: 1024px) {
  #s-styler {
    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"),
      radial-gradient(circle at 34% 10%, rgba(19, 42, 45, 0.30), transparent 34%),
      url('/img/stanzai-smoke-desktop.webp'),
      linear-gradient(180deg, var(--stz-petrol) 0%, var(--stz-void) 48%, #040708 100%);
  }
}

/* ── CHROME — header owns the inset (gap-fix recipe); serif title ── */
:where(#s-styler) .topnav {
  height: var(--sd-navh);
  box-sizing: border-box;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(4, 9, 11, 0.97) 0%, rgba(4, 9, 11, 0.88) 70%, rgba(4, 9, 11, 0.60) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:where(#s-styler) .navtitle {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: var(--stz-ivory);
}

/* ── LIVE STAGE — the hero pane: edge-lit ink glass ── */
:where(#s-styler) .sd-stage {
  background:
    linear-gradient(180deg, rgba(236, 231, 218, 0.055) 0%, rgba(236, 231, 218, 0.016) 9%, transparent 18%),
    linear-gradient(180deg, rgba(2, 12, 14, 0.90), rgba(1, 6, 8, 0.94));
  border: 1px solid rgba(var(--gold-rgb), 0.26);
  border-top-color: rgba(236, 224, 196, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.09),
    0 6px 16px rgba(0, 0, 0, 0.40),
    0 26px 52px -16px rgba(0, 0, 0, 0.75);
}
:where(#s-styler) .sd-stage-prompt { color: var(--stz-ivory); text-shadow: 0 0 16px rgba(232, 210, 160, 0.10); }

/* ── WORKSPACE + RESULT — ink panes ── */
:where(#s-styler) .sd-workspace,
:where(#s-styler) .sd-result-wrap {
  background: linear-gradient(180deg, rgba(10, 19, 21, 0.55), rgba(2, 9, 11, 0.78));
  border: 1px solid rgba(var(--ivory-rgb), 0.10);
  border-top-color: rgba(var(--ivory-rgb), 0.16);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.05),
    0 12px 28px -12px rgba(0, 0, 0, 0.60);
}

/* ── INNER WELLS — search, vocal matrix, segments, diagnosis ── */
:where(#s-styler) .sd-search,
:where(#s-styler) .sd-vocal-box,
:where(#s-styler) .sd-seg,
:where(#s-styler) .sd-diagnosis {
  background: rgba(2, 8, 10, 0.55);
  border-color: rgba(var(--ivory-rgb), 0.09);
}

/* ── CHIPS & PICKERS — the ink wash; selected states keep their gold ── */
:where(#s-styler) .gchip,
:where(#s-styler) .stchip,
:where(#s-styler) .soundchip,
:where(#s-styler) .sd-era-btn {
  background: rgba(6, 14, 16, 0.55);
  border-color: rgba(var(--ivory-rgb), 0.10);
}
:where(#s-styler) .sd-loadrow { border-color: rgba(var(--gold-rgb), 0.28); color: rgba(216, 182, 118, 0.70); }

/* ── DOCK — glass chrome like the tab bar ── */
:where(#s-styler) .sd-dock {
  background: linear-gradient(180deg, rgba(6, 13, 15, 0.78) 0%, rgba(3, 8, 10, 0.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(var(--teal-rgb), 0.14);
  box-shadow: 0 -18px 32px -18px rgba(19, 42, 45, 0.30);
}

/* ── MODE TAB BAR (Build it / From lyrics / Reference / Fix it) ──
   The sticky wrap carried an inline background:var(--bg) (the black-band
   disease) and inline top:0 (slides under the sealed topnav) — hence the
   !importants. The segment container goes ink; the active tab takes the
   library's premium rounded gold pill. */
#s-styler .sd-modes {
  background: linear-gradient(180deg, rgba(4, 9, 11, 0.94), rgba(4, 9, 11, 0.70)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  top: var(--sd-navh) !important;
}
#s-styler .sd-modes > div {
  background: rgba(3, 9, 11, 0.55) !important;
  border: 1px solid rgba(var(--ivory-rgb), 0.14) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#s-styler .styler-tab { color: rgba(var(--ivory-rgb), 0.55); }
#s-styler .styler-tab.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);
  border-bottom-color: 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;
}

/* ── VIBE PRESET CARDS — edge-lit ink panes; each vibe keeps its colored
   corner glow as the card's personality, toned to the room ── */
:where(#s-styler) .sd-vibe {
  background:
    linear-gradient(180deg, rgba(236, 231, 218, 0.050) 0%, rgba(236, 231, 218, 0.015) 10%, transparent 20%),
    linear-gradient(180deg, rgba(8, 16, 18, 0.72), rgba(2, 9, 11, 0.86));
  border: 1px solid rgba(var(--ivory-rgb), 0.12);
  border-top-color: rgba(236, 224, 196, 0.30);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.06),
    0 10px 24px -10px rgba(0, 0, 0, 0.60);
}
:where(#s-styler) .sd-vibe::before { opacity: 0.42; }
:where(#s-styler) .sd-vibe-glyph { color: rgba(216, 182, 118, 0.55); }
:where(#s-styler) .sd-vibe-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--stz-ivory);
}
:where(#s-styler) .sd-vibe-desc { color: rgba(var(--ivory-rgb), 0.45); }

/* ── CATEGORY RAIL (Genre · Mood · Vocals · Production) — the workspace's
   own tab strip drops its grey browser-tab look: rail goes transparent
   over the ink pane with a gold hairline rule; the active tab takes a
   quiet inset gold pill (browser-tab ::after underline retires). */
#s-styler .sd-catrail {
  background: transparent;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.14);
  padding: 8px 8px 8px;
  gap: 4px;
}
#s-styler .sd-catbtn {
  border-radius: 999px;
  padding: 9px 13px;
  color: rgba(var(--ivory-rgb), 0.55);
}
#s-styler .sd-catbtn.on {
  color: #ecd9a0;
  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);
}
#s-styler .sd-catbtn.on::after { display: none; }
#s-styler .sd-catbtn-n { color: rgba(var(--ivory-rgb), 0.35); }

/* ── TEXT INPUTS — the grey bricks become dark-center glass wells (the
   composer's voice): faint top sheen, near-black middle, cream hairline,
   teal focus. Covers every mode pane's inputs/textareas + the paste box. */
:where(#s-styler) .styler-input,
:where(#s-styler) .styler-textarea {
  background: linear-gradient(180deg, rgba(22, 29, 31, 0.55) 0%, rgba(4, 9, 11, 0.80) 40%, rgba(3, 7, 9, 0.84) 70%, rgba(10, 16, 18, 0.62) 100%);
  border: 1px solid rgba(var(--ivory-rgb), 0.13);
  border-top-color: rgba(var(--ivory-rgb), 0.20);
  color: var(--stz-ivory);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.05),
    inset 0 -14px 22px -14px rgba(0, 0, 0, 0.60);
}
:where(#s-styler) .styler-input:focus,
:where(#s-styler) .styler-textarea:focus {
  border-color: rgba(var(--teal-rgb), 0.38);
}
:where(#s-styler) .styler-input::placeholder,
:where(#s-styler) .styler-textarea::placeholder { color: rgba(var(--ivory-rgb), 0.34); }

/* The paste/result box (mono prompt text) joins as a dark well */
:where(#s-styler) .pbox {
  background: rgba(2, 8, 10, 0.62);
  border-color: rgba(var(--ivory-rgb), 0.10);
  color: #d9d2bf;
}