/* Stanzai dev styles 21 — PROFILE NOIR (2026-06-12). New surface file appended per
   styles/README.md rule. Scope: the Profile screen only (#s-profile).

   Founder profile plates: lamp out of frame top-left, teal smoke low. Stat cards
   and settings rows join the ink family. Values mirror the session swatch.

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

/* ── STAGE — profile room plates ── */
#s-profile {
  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.28) 0%, rgba(3, 8, 10, 0.32) 70%, rgba(2, 6, 8, 0.55) 100%),
    url('/img/profile-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-profile {
    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.28) 0%, rgba(3, 8, 10, 0.32) 70%, rgba(2, 6, 8, 0.55) 100%),
      url('/img/profile-room-desktop.webp'),
      linear-gradient(180deg, var(--stz-smoke-teal) 0%, var(--stz-obsidian) 52%, var(--stz-void) 100%);
  }
}

/* ── HEADER — wordmark stays serif; sub in ash; auth chip dark-center ── */
:where(#s-profile) .profname { color: #ece4cd; }
:where(#s-profile) .profsub { color: rgba(var(--ivory-rgb), 0.50); }
:where(#s-profile) .auth-chip {
  background: rgba(3, 11, 13, 0.60);
  border-color: rgba(var(--gold-rgb), 0.32);
  color: rgba(216, 182, 118, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ── STAT CARDS — ink panes with the top edge light ── */
:where(#s-profile) .statcard {
  background: linear-gradient(180deg, rgba(14, 24, 26, 0.50), rgba(2, 10, 12, 0.72));
  border: 1px solid rgba(var(--ivory-rgb), 0.10);
  border-top-color: rgba(216, 178, 102, 0.24);
  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);
}

/* ── SETTINGS — group eyebrows warm; rows as quiet ink ── */
:where(#s-profile) .setgrouplabel { color: rgba(216, 182, 118, 0.50); }
:where(#s-profile) .setitem {
  background: linear-gradient(180deg, rgba(12, 21, 23, 0.45), rgba(3, 10, 12, 0.65));
  border: 1px solid rgba(var(--ivory-rgb), 0.09);
  border-top-color: rgba(var(--ivory-rgb), 0.14);
}
:where(#s-profile) .setitemsub { color: rgba(var(--ivory-rgb), 0.40); }