/* Stanzai dev styles 17 — HOME NOIR "stage light" treatment (2026-06-12). New surface file appended
   per styles/README.md rule. Scope: the Nocturne home only (body.on-home / .nocturne-home).

   The candlelit room photos are retired (founder call: the photo read as a different era next to
   the noir sessions). Home's atmosphere is now fully procedural: one warm pool of light falls from
   above onto the wordmark — "the room is open," an empty stage before the show — and everything
   falls away to the locked ink below. The existing gold particle / ember / aurora layers drift
   through it unchanged. Doors and entry cards wear the ink-glass pane from the session family;
   gold stays in accent words and arrows.

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

/* ── SESSION NOIR SWATCH — derived from the live session theme ──
   Founder call (2026-06-12): the session colors ARE the palette.
   MIGRATION 2026-06-19: the --stz-* swatch is now defined ONCE, canonically, in
   01-tokens.css (Blue Hour spec, single source of truth). The duplicate :root
   block that lived here was removed so no file carries its own copy. If the
   session theme shifts, change the values in 01-tokens.css. */

/* Film grain — same emulsion the session wears, so home and session feel
   like one continuous building. Static, click-through. */
body.on-home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  /* Stronger than the session emulsion on purpose: home's procedural stage
     has no smoke plate carrying texture, and the previous ~2.2% effective
     grain died inside OLED black crush (founder device report). ~5%
     effective survives the crush and reads as film. */
  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;
}

/* THE STAGE LIGHT — warm pool from above onto the wordmark, cool ink floor.
   Full specificity + !important-free: later file beats the .nocturne-home
   base background in 13-responsive-home-overlays.css at equal specificity. */
body.on-home .nocturne-home {
  background-image:
    /* candle gold — a tight crown of light catching the top edge, per the
       palette sheet rule: edge light, never a background color */
    radial-gradient(ellipse 64% 22% at 50% -5%, rgba(var(--gold-rgb), 0.12), transparent 62%),
    /* green haze (--stz-haze) — the actual atmosphere */
    radial-gradient(ellipse 120% 55% at 50% -12%, rgba(19, 42, 45, 0.40), rgba(6, 13, 15, 0.20) 45%, transparent 68%),
    /* petrol-haze texture removed 2026-06-14 — it read as "smoke" on mobile and
       washed out the top half (founder call). Slot kept as a transparent layer so
       the background-size / position / blend-mode lists below stay aligned. */
    linear-gradient(transparent, transparent),
    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-size: auto, auto, cover, auto, auto;
  background-position: center, center, center top, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, screen, normal, normal;
}
/* The mobile photo-veil gradient served the retired room photo — without the
   photo it just dims the stage light unevenly. Flatten it. */
#s-home .nocturne-home::before { background: none; }

/* Doors join the ink-glass family — dark-center pane, cream hairline with a
   brighter top edge, deep lift. Gold stays in the accent words and arrows. */
:where(body.on-home) .nocturne-home .nh-door {
  background: linear-gradient(180deg, rgba(26, 33, 35, 0.55) 0%, rgba(3, 13, 15, 0.82) 40%, rgba(2, 9, 11, 0.86) 70%, rgba(10, 19, 21, 0.62) 100%);
  border: 1px solid rgba(var(--ivory-rgb), 0.15);
  border-top-color: rgba(216, 178, 102, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.06),
    inset 0 -16px 24px -16px rgba(0, 0, 0, 0.60),
    0 18px 40px -14px rgba(0, 0, 0, 0.70);
}
:where(body.on-home) .nocturne-home .nh-door.secondary {
  background: linear-gradient(180deg, rgba(20, 26, 28, 0.45) 0%, rgba(3, 10, 12, 0.70) 45%, rgba(8, 15, 17, 0.52) 100%);
  border-color: rgba(var(--ivory-rgb), 0.10);
}
:where(body.on-home) .nh-sd-pill {
  background: rgba(3, 11, 13, 0.60);
  border-color: rgba(var(--ivory-rgb), 0.12);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Desktop entry cards take the same pane */
body.on-home #s-home .stz-entry-card {
  background: linear-gradient(180deg, rgba(26, 33, 35, 0.52) 0%, rgba(3, 13, 15, 0.82) 45%, rgba(10, 19, 21, 0.60) 100%);
  border: 1px solid rgba(var(--ivory-rgb), 0.13);
  border-top-color: rgba(216, 178, 102, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.06),
    0 18px 40px -14px rgba(0, 0, 0, 0.70);
}
:where(body.on-home) .stz-sound-chip {
  background: rgba(3, 11, 13, 0.60);
  border-color: rgba(var(--ivory-rgb), 0.12);
}

@media (prefers-reduced-transparency: reduce) {
  :where(body.on-home) .nocturne-home .nh-door,
  :where(body.on-home) .nocturne-home .nh-door.secondary,
  body.on-home #s-home .stz-entry-card {
    background: #0a161a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.on-home::after { opacity: 0.25; }
}

/* ── BOTTOM NAV — faint teal-glass lift so the bar stops reading flatter
   than the stage above it. Hairline of session teal catching the top edge,
   a soft haze rising off it, and the bar itself goes translucent glass.
   PROMOTED app-wide (founder, 2026-06-12, profile lane) — every tab screen
   wears it; sessions keep their own composer chrome. */
.tabbar {
  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 -1px 0 rgba(19, 42, 45, 0.35),
    0 -18px 32px -18px rgba(19, 42, 45, 0.30);
}

/* ── 18 · ENTRY-CARD DEPTH — deeper layered shadow + crisper top bevel + a small
   hover lift so the home entry cards lift off the stage. Keeps the existing gold
   edge, glass fill, and blur untouched. Depth from light + shadow, never a
   lighter surface. Sandbox-designed, founder request 2026-06-14. */
body.on-home .nocturne-home .nh-door,
body.on-home #s-home .stz-entry-card {
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.12),
    inset 0 -22px 32px -22px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 30px 60px -20px rgba(0, 0, 0, 0.85);
}
body.on-home .nocturne-home .nh-door:hover,
body.on-home #s-home .stz-entry-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.16),
    inset 0 -22px 32px -22px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 42px 76px -20px rgba(0, 0, 0, 0.92);
}

/* ── 19 · BOTTOM NAV restyle (founder design via the theme sandbox, 2026-06-14).
   MOBILE bottom-bar only — desktop (>=1024px) uses .tabbar as a left rail and is
   intentionally left untouched. Gold fade-hairline top edge, frosted gradient
   backdrop, active = faint white inset + gold-hi text, and a gold-bordered
   glowing center "new" button. Layout and button sizes unchanged. Uses ::after
   (not ::before) so the desktop left-rail "stanzai" wordmark ::before is safe. */
@media (max-width: 1023px) {
  .tabbar {
    background: linear-gradient(180deg, rgba(2, 8, 10, 0.55), rgba(2, 8, 10, 0.95));
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-top-color: transparent;
    box-shadow: 0 -18px 44px -22px rgba(0, 0, 0, 0.60);
  }
  .tabbar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.42), transparent);
    pointer-events: none;
  }
  .tabbar .tab.on .tabicon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--stz-gold-hi);
    box-shadow: inset 0 1px 0 rgba(232, 192, 112, 0.18);
  }
  .tabbar .tab.on .tablabel { color: var(--stz-gold-hi); }
  .tabbar #tab-new .tabicon {
    background: linear-gradient(180deg, #0a1618, #02080a);
    box-shadow: 0 14px 30px -16px rgba(var(--gold-rgb), 0.50), inset 0 1px 0 rgba(232, 192, 112, 0.25);
  }
}

/* ── 20 · DESKTOP TOP BAR (app shell) — size bump + the mobile-nav love
   (founder design via the theme sandbox, 2026-06-14). DESKTOP (>=1024px),
   app-shell surfaces ONLY: home + library / vault / start. The SESSION studio
   top bar (body.session-active, styled in 24-desktop-studio.css) is left
   UNTOUCHED on purpose — that petrol bar is the Blue Hour studio look.

   Bar height stays 64px — content offsets are hardcoded to it elsewhere (e.g.
   10-library-songbrain-rails.css `calc(100vh - 116px)`), so presence comes from
   bigger type, not a taller bar: a noir teal-black frosted backdrop (replacing
   the old charcoal on library/vault and the flat transparent on home), a gold
   fade-hairline along the bottom edge, and gold-hi active — mirroring the mobile
   bottom nav (section 19). Selectors mirror 12-desktop.css's state rules so they
   win by source order at equal specificity. ::after only; no !important. */
@media (min-width: 1024px) {
  /* Bigger wordmark + nav for presence — bar height unchanged */
  body:not(.session-active) #dtTopBar .dt-topbar-mark { font-size: 26px; }
  body:not(.session-active) #dtTopBar .dt-topbar-mark .mark-dot { width: 7px; height: 7px; }
  body:not(.session-active) #dtTopBar .dt-nav-item { font-size: 12px; letter-spacing: 0.2em; }

  /* Noir teal-black frosted backdrop on the shell bar (home + non-session) */
  body.on-home #dtTopBar,
  body:not(.on-home):not(.session-active) #dtTopBar {
    background: linear-gradient(180deg, rgba(4, 10, 12, 0.82), rgba(4, 10, 12, 0.42));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom-color: transparent;
  }

  /* Gold fade-hairline along the bottom edge — light catching an edge */
  body:not(.session-active) #dtTopBar::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.42), transparent);
    pointer-events: none;
  }

  /* Active nav = gold-hi (brighter), matching the mobile active treatment */
  body:not(.session-active) #dtTopBar .dt-nav-item.active { color: var(--stz-gold-hi); }
  body:not(.session-active) #dtTopBar .dt-nav-item.active::after { background: var(--stz-gold-hi); }
}

/* ── 21 · HOME MASTHEAD — sizing/coherency + desktop tagline readability
   (founder design, 2026-06-14). Two scoped fixes, no structure change.

   MOBILE (<1024px): the masthead read as three disconnected pieces — a modest
   42px wordmark, a near-invisible 9px/0.55 eyebrow, then a 28px void, then an
   18px line that competed with the small logo ("on an island, larger than the
   header"). Fix = clear hierarchy — the wordmark dominates (42->58px), the line
   becomes subordinate (18->15px) and tucks up under it (gap 28->12px), and the
   eyebrow is strengthened just enough to bridge them (9->10px, 0.55->0.72).
   Overrides the base rules in 13-responsive-home-overlays.css (same specificity,
   later source order); wrapped in a mobile query so desktop is untouched.

   DESKTOP (>=1024px): the tagline was cream@0.55 — elegant but hard to read.
   Nudged to 0.80: comfortably legible, still soft (not white); the gold
   "with you." em is untouched. Beats 12-desktop.css's two #s-home .nh-tagline
   color decls by source order at equal specificity. No !important. */
@media (max-width: 1023px) {
  .nocturne-home .nh-wordmark { font-size: 58px; }
  .nocturne-home .nh-eyebrow-mobile { font-size: 10px; opacity: 0.72; margin-top: 16px; }
  .nocturne-home .nh-line { font-size: 15px; margin-top: 12px; }
}
@media (min-width: 1024px) {
  #s-home .nh-tagline { color: rgba(224, 220, 208, 0.80); }
}

/* ── 22 · HOME — DESKTOP "SCALE TO FIT" (founder design, 2026-06-14).
   The desktop home is a fixed, non-scrolling full-screen panel (#s-home
   .nh-layout, grid auto/1fr/auto). Its content stack is ~940px tall, so on any
   viewport SHORTER than that the elastic 1fr row collapses to zero — the
   masthead jams onto the entry cards and the Sound Designer pill spills below
   the fold. (Tall monitors have the headroom, which is why it only bites
   laptops.) Founder call: keep it one screen, scale to fit.

   Fix = height-gated shrink of the wasteful fixed bits so the stack always fits
   with a comfortable gap, letting the existing align-self:center re-balance it.
   Gated by max-height so TALL screens (>1100px) keep the original design exactly
   — verified untouched (wordmark 130, panel margin 180, padding 90, centered).
   The masthead's 90px top padding, the wordmark, the rule margins, and the
   entry-panel's 180px bottom margin (mostly dead space below the cards) all ease
   down with viewport height; a tighter tier kicks in under 680px. Verified live
   across 640 / 768 / 900 / 1080 / 1140 — fits + clears the top bar + a 53–90px
   tagline→cards gap at every height. No structure/markup change, no !important. */
@media (min-width: 1024px) and (max-height: 1100px) {
  #s-home .nh-layout { padding-top: clamp(56px, 7vh, 80px); padding-bottom: clamp(28px, 4vh, 56px); }
  #s-home .nh-masthead { padding-top: clamp(24px, 4.5vh, 90px); }
  #s-home .nocturne-home .nh-wordmark { font-size: clamp(66px, 10vh, 126px); }
  #s-home .nh-rule { margin-top: clamp(10px, 2vh, 24px); margin-bottom: clamp(8px, 1.5vh, 18px); }
  #s-home .nh-bottom .stz-entry-panel { margin-bottom: clamp(28px, calc(100vh - 880px), 180px); }
}
@media (min-width: 1024px) and (max-height: 680px) {
  #s-home .nh-layout { padding-top: 40px; padding-bottom: 24px; }
  #s-home .nh-masthead { padding-top: 16px; }
}