/* Stanzai dev styles 22 — CHROME NOIR (2026-06-12). New surface file appended per
   styles/README.md rule. Scope: app-wide overlay chrome (the + New slide-up sheet;
   future modals/sheets join here). Values mirror the session swatch.

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

/* ── + NEW SHEET — the slide-up joins the glass family ── */
.nss-panel {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(19, 42, 45, 0.30), transparent 70%),
    linear-gradient(180deg, rgba(8, 16, 18, 0.97), rgba(3, 8, 10, 0.99));
  border-top: 1px solid rgba(236, 224, 196, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.80);
}
.nss-row {
  background: linear-gradient(180deg, rgba(14, 24, 26, 0.55), rgba(3, 11, 13, 0.75));
  border: 1px solid rgba(var(--ivory-rgb), 0.10);
  border-top-color: rgba(var(--ivory-rgb), 0.16);
  box-shadow: inset 0 1px 0 rgba(244, 236, 212, 0.05);
}
.nss-row--gold {
  background: linear-gradient(180deg, rgba(24, 22, 13, 0.60), rgba(8, 10, 8, 0.78));
  border: 1px solid rgba(var(--gold-rgb), 0.34);
  border-top-color: rgba(236, 224, 196, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.08),
    0 0 18px rgba(var(--gold-rgb), 0.07);
}

/* ── ONBOARDING OVERLAY — first thing a new writer ever sees; it wears the
   home stage-light so stepping inside is seamless. Particles, type, and the
   gold primary were already in the language. */
.ob-overlay {
  background:
    radial-gradient(ellipse 64% 22% at 50% -5%, rgba(var(--gold-rgb), 0.14), transparent 62%),
    radial-gradient(ellipse 125% 60% at 50% -10%, rgba(19, 42, 45, 0.55), rgba(6, 13, 15, 0.22) 52%, transparent 72%),
    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) 52%, var(--stz-void) 100%);
}
/* Step inside — dark-center under the gold frame, per the family */
.ob-primary {
  background:
    linear-gradient(180deg, rgba(24, 31, 33, 0.55) 0%, rgba(6, 10, 12, 0.80) 45%, rgba(10, 16, 18, 0.62) 100%);
  border-color: rgba(var(--gold-rgb), 0.55);
  color: #e2cd96;
  box-shadow:
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(var(--gold-rgb), 0.07);
}
.ob-primary:hover {
  background:
    linear-gradient(180deg, rgba(28, 36, 38, 0.60) 0%, rgba(8, 13, 15, 0.82) 45%, rgba(12, 19, 21, 0.66) 100%);
}

/* ── AUTH MODALS — sign in / account / recovery / username all share
   .auth-overlay/.auth-card. The card becomes the family's glass pane with
   the edge light; inputs take the dark-center well; the gold CTA keeps its
   solid commitment (the one filled-gold button in the app — signing in IS
   the commitment). ── */
.auth-overlay {
  background: rgba(2, 6, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-card {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(19, 42, 45, 0.30), transparent 70%),
    linear-gradient(180deg, rgba(236, 231, 218, 0.050) 0%, rgba(236, 231, 218, 0.015) 9%, transparent 18%),
    linear-gradient(180deg, rgba(6, 14, 16, 0.97), rgba(2, 8, 10, 0.99));
  border: 1px solid rgba(var(--gold-rgb), 0.24);
  border-top-color: rgba(236, 224, 196, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(244, 236, 212, 0.08),
    0 30px 80px -20px rgba(0, 0, 0, 0.85);
}
.auth-card-title { color: #ece4cd; }
.auth-card-title em { color: var(--gold); }
.auth-card-sub { color: rgba(var(--ivory-rgb), 0.48); }
.auth-input {
  background: linear-gradient(180deg, rgba(22, 29, 31, 0.55) 0%, rgba(4, 9, 11, 0.80) 45%, 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 -12px 18px -12px rgba(0, 0, 0, 0.55);
}
.auth-input:focus { border-color: rgba(var(--teal-rgb), 0.38); }
.auth-input::placeholder { color: rgba(var(--ivory-rgb), 0.34); }
.auth-tabs { border-color: rgba(var(--ivory-rgb), 0.14); }
.auth-tab { background: rgba(3, 9, 11, 0.55); color: rgba(var(--ivory-rgb), 0.50); }
.auth-tab.active {
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.85), rgba(168, 130, 60, 0.85));
  color: #0a0a08;
}