/* Stanzai dev styles 18 — VAULT NOIR treatment (2026-06-12). New surface file appended per
   styles/README.md rule. Numbered 18 (not 17) on purpose: the home lane (PR #472, in flight)
   holds 17-home-noir.css — parallel lanes taking the same number caused the 15-collision.

   Scope: the Vault screen only (#s-hub descendants — no body class needed, the ID scopes it).
   Colors only: session-swatch stage, glass cards, ink filters. Values mirror the session theme
   (16-freeform-noir.css); consolidate onto the shared --stz-* tokens once the home lane merges.

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

/* ── STAGE — session ramp + smoke plate + grain, all in the background stack
   (#s-hub is a fixed viewport-sized scroll container like #s-session; the
   blend-mode-in-stack technique is the iOS-proven one). */
#s-hub {
  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;
}

/* ── SUMMARY STAT CARDS — the renderer writes inline borders, hence the
   !important pair (inline styles outrank everything else). */
#s-hub #hubSummary > div {
  background:
    linear-gradient(165deg, rgba(244, 236, 212, 0.045), transparent 36%),
    linear-gradient(180deg, rgba(20, 33, 35, 0.58), rgba(7, 15, 17, 0.70));
  border: 1px solid rgba(var(--ivory-rgb), 0.12) !important;
  border-top-color: rgba(216, 178, 102, 0.24) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(244, 236, 212, 0.08), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

/* ── SAVED CARDS — concepts / prompts / presets join the glass family.
   :where keeps base specificity so :hover/:active/.active states survive. */
:where(#s-hub) .clib-card {
  /* premium glass — lighter pane, more frost, a diagonal sheen catching the
     top-left corner; depth comes from the lift, not from darkness */
  background:
    linear-gradient(165deg, rgba(244, 236, 212, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(22, 36, 38, 0.62) 0%, rgba(9, 19, 21, 0.72) 45%, rgba(5, 12, 14, 0.76) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  border-top-color: rgba(216, 178, 102, 0.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.09),
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 22px 44px -18px rgba(0, 0, 0, 0.65);
}
:where(#s-hub) .clib-card-title {
  color: var(--stz-ivory);
  font-size: 18px;
}
:where(#s-hub) .clib-card-body { color: rgba(var(--ivory-rgb), 0.62); }

/* ── FILTER CHIPS — ink pills; .active keeps its gold (higher specificity) */
:where(#s-hub) .clib-filter {
  background: rgba(3, 11, 13, 0.60);
  border-color: rgba(var(--ivory-rgb), 0.10);
  color: rgba(var(--ivory-rgb), 0.55);
}

/* ── TAGS — the brand's three voices: gold / ivory / teal. The mood tag's
   base dusk-purple was the one off-palette accent on this screen. */
:where(#s-hub) .clib-card-tag.mood {
  background: rgba(var(--ivory-rgb), 0.07);
  border-color: rgba(var(--ivory-rgb), 0.22);
  color: #d9d0b6;
}
:where(#s-hub) .clib-card-tag.genre { border-color: rgba(var(--gold-rgb), 0.30); }
:where(#s-hub) .clib-card-tag.energy { border-color: rgba(var(--teal-rgb), 0.30); }

/* ── DESKTOP — wide screens get the landscape smoke plate (the portrait
   plate cover-stretches past ~1024px). Mirrors the session theme's
   desktop swap; same stack otherwise. */
@media (min-width: 1024px) {
  #s-hub {
    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%);
  }
}