/* spatial-surfaces.css — parte din creator-portal-spatial.css (liniile 405-667).
   Suprafețe: ecranele de auth, drawere, notificări, profil public, avatare, scrollbars,
   fixuri de text, modul dark, polish mobil, wordmark, acordeonul de înregistrare.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ---------- 12 · AUTH SCREENS (floating glass slab) ---------- */
body.cp-spatial .cp-auth {
  min-height: auto;
  max-width: 1180px;
  margin: clamp(18px, 4vh, 44px) auto;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / .18);
  box-shadow: var(--glass-edge), 0 60px 120px -50px oklch(0 0 0 / .75);
}
@media (max-width: 900px) {
  body.cp-spatial .cp-auth { margin: 14px; border-radius: 24px; }
}
body.cp-spatial .cp-auth-aside {
  background: oklch(0.14 0.02 280 / .5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid oklch(1 0 0 / .12);
}
body.cp-spatial .cp-auth-aside h1 em { color: oklch(1 0 0 / .5); }
body.cp-spatial .cp-auth-aside .ic { background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-auth-main {
  /* More opaque than the showcase areas: the form must stay legible regardless of
     how bright the ambient photo is behind it (a bright sky was bleeding through the
     translucent inputs). The mountain still reads around the card + through the aside. */
  background: oklch(0.17 0.018 265 / .72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
body.cp-spatial .cp-fset-h .n { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); }
body.cp-spatial .cp-done .seal { background: var(--signal-bg); color: var(--signal); border-color: oklch(0.7 0.12 162 / .45); }
body.cp-spatial .cp-done-steps .ord { border-color: oklch(1 0 0 / .22); color: var(--muted); }
body.cp-spatial .cr-consent a { color: #fff; }

/* ---------- 13 · DRAWERS ---------- */
body.cp-spatial .cp-drawer.open .cp-drawer-scrim { background: oklch(0.08 0.02 265 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.cp-spatial .cp-drawer-panel {
  background: oklch(0.17 0.018 265 / .72);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-left: 1px solid oklch(1 0 0 / .16);
  box-shadow: -40px 0 100px -50px oklch(0 0 0 / .8), var(--glass-edge);
}
body.cp-spatial .cp-drawer-top,
body.cp-spatial .cp-drawer-foot { border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cp-drawer-foot { background: oklch(1 0 0 / .04); }
body.cp-spatial .rv-acc,
body.cp-spatial .cm-deliv-row,
body.cp-spatial .al-row { background: oklch(1 0 0 / .06); border-color: oklch(1 0 0 / .14); }
body.cp-spatial .cm-deliv-row.done { background: oklch(0.6 0.12 162 / .14); border-color: oklch(0.7 0.12 162 / .35); }
body.cp-spatial .al-row:has(input:checked) { background: oklch(0.6 0.12 162 / .14); border-color: var(--signal); }
body.cp-spatial .rv-pill { border-color: oklch(1 0 0 / .2); color: var(--ink-2); }
body.cp-spatial .rv-pill.ok { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.7 0.12 162 / .35); }
body.cp-spatial .cm-note { background: oklch(1 0 0 / .05); border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cm-stepper .dot { background: oklch(0.2 0.02 265 / .6); border-color: oklch(1 0 0 / .2); color: var(--muted); }
body.cp-spatial .cm-stepper li.done .dot,
body.cp-spatial .cm-stepper li.current .dot { border-color: var(--signal); }
body.cp-spatial .cm-stepper li.done .dot { background: var(--signal); color: oklch(0.15 0.05 162); }
body.cp-spatial .cm-deliv-check { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .18); }
body.cp-spatial .cm-deliv-up { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .2); color: #fff; }

/* ---------- 14 · NOTIFICATIONS DROPDOWN ---------- */
body.cp-spatial .cp-notif {
  background: oklch(0.17 0.018 265 / .8);
  backdrop-filter: blur(34px) saturate(1.6);
  -webkit-backdrop-filter: blur(34px) saturate(1.6);
  border-color: oklch(1 0 0 / .16);
  box-shadow: 0 40px 80px -34px oklch(0 0 0 / .8), var(--glass-edge);
}
body.cp-spatial .cp-notif-h,
body.cp-spatial .cp-notif-item,
body.cp-spatial .cp-notif-foot { border-color: oklch(1 0 0 / .1); }
body.cp-spatial .cp-notif-item.unread { background: oklch(0.6 0.12 162 / .12); }
body.cp-spatial .cp-notif-foot:hover { background: oklch(1 0 0 / .06); }

/* ---------- 15 · PUBLIC PROFILE ---------- */
body.cp-spatial .cp-public { color: var(--ink); }
body.cp-spatial .cp-pub-head { border-color: oklch(1 0 0 / .14); }
body.cp-spatial .cp-pub-av { background: oklch(1 0 0 / .12); color: #fff; }

/* ---------- 16 · AVATARS / MARKS (image-slot + initials) ----------
   Glass treatment for the initials/photo avatar chips that the DARK skin
   originally re-tinted (drawer / admin table / admin side-card / review row).
   These were .rv-av / .cp-cr-av / .al-row .av / .cp-side-card .av — now the
   .cp-ava primitive with --lg/--sm/--md/--rounded. The brief-logo (--soft) and
   alloc (--xs) avatars were intentionally NOT re-tinted in dark (they keep the
   base ink/paper fill = light-on-dark), so they stay excluded here. */
body.cp-spatial .cp-ava--lg,
body.cp-spatial .cp-ava--sm,
body.cp-spatial .cp-ava--md,
body.cp-spatial .cp-ava--rounded {
  background: oklch(1 0 0 / .14);
  color: #fff;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12);
}
body.cp-spatial image-slot { box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); }
body.cp-spatial .cp-gallery .add-slot { border-color: oklch(1 0 0 / .25); color: var(--muted); }
body.cp-spatial .cp-gallery .add-slot:hover { border-color: oklch(1 0 0 / .5); color: #fff; }

/* ---------- 18 · SCROLLBARS ---------- */
body.cp-spatial *::-webkit-scrollbar { width: 10px; height: 10px; }
body.cp-spatial *::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
body.cp-spatial *::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / .3); background-clip: padding-box; }
body.cp-spatial *::-webkit-scrollbar-track { background: transparent; }

/* ---------- 19 · MISC TEXT FIXES ---------- */
body.cp-spatial ::selection { background: oklch(1 0 0 / .25); color: #fff; }
body.cp-spatial .cp-sec-h .more { color: var(--muted); }
body.cp-spatial .cp-sec-h .more:hover { color: #fff; }
body.cp-spatial .cp-pub-back:hover,
body.cp-spatial .cp-login-forgot { color: var(--signal); }
body.cp-spatial .cp-login-alt a { color: #fff; }
body.cp-spatial .cp-empty-row { color: var(--muted); }

/* ---------- 22 · DARK MODE: deeper scrim, mountains still visible ---------- */
/* light (default) = current look. dark = much moodier, photo still reads. */
[data-theme="dark"] .cp-ambient::after {
  background:
    radial-gradient(140% 100% at 50% 0%, oklch(0.10 0.02 265 / .15) 30%, oklch(0.07 0.02 265 / .45) 100%),
    linear-gradient(180deg, oklch(0.08 0.02 265 / .34), oklch(0.05 0.015 265 / .50));
}
[data-theme="dark"] .cp-ambient { filter: brightness(.85) saturate(.95); }
[data-theme="dark"] body.cp-spatial {
  --glass-tint:   oklch(0.16 0.016 265 / .50);
  --glass-tint-2: oklch(0.12 0.014 265 / .62);
}
[data-theme="dark"] body.cp-spatial .cp-top { background: oklch(0.13 0.014 265 / .58); }
[data-theme="dark"] body.cp-spatial .demo-bar { background: oklch(0.10 0.014 265 / .62); }

/* ---------- 23 · MOBILE POLISH (glass on phones) ---------- */
@media (max-width: 820px) {
  /* prototype switcher bar: let it scroll instead of squashing */
  body.cp-spatial .demo-bar {
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.cp-spatial .demo-bar::-webkit-scrollbar { display: none; }
  body.cp-spatial .db-brand .db-sep { display: none; }      /* keep just the logo */
  body.cp-spatial .db-switch { margin-left: 0; flex: none; }
  body.cp-spatial .db-actions { flex: none; }

  /* tighter floating margins so glass uses the width */
  body.cp-spatial .cp-top { margin: 10px 10px 0; }
  body.cp-spatial .cp-auth { margin: 10px; border-radius: 20px; }
}

@media (max-width: 600px) {
  /* registration / login hero: trim it so the form is reachable fast */
  body.cp-spatial .cp-auth-aside { padding: 22px 20px; }
  body.cp-spatial .cp-auth-aside h1 { font-size: clamp(26px, 8vw, 34px); }
  body.cp-spatial .cp-auth-aside .lead { font-size: 14px; }
  body.cp-spatial .cp-auth-main { padding: 22px 18px 30px; }

  /* accordion steps: a touch more compact */
  body.cp-spatial .cp-acc .cp-fset-h { padding: 14px 15px; }
  body.cp-spatial .cp-acc .cp-fset-inner { padding: 2px 15px 16px; }
  body.cp-spatial .cp-acc-done { padding: 3px 8px; }

  /* public profile + app cards: reduce big radii so they breathe */
  body.cp-spatial .cp-stat,
  body.cp-spatial .cp-brief,
  body.cp-spatial .cp-panel { border-radius: 18px; }

  /* niche/content chips: easier tap targets */
  body.cp-spatial .ct-svc span { padding: 9px 13px; }
}

/* ---------- 21 · TM WORDMARK LOGO ---------- */
.tm-logo { height: 17px; width: auto; display: inline-block; vertical-align: middle; }
body.cp-spatial .db-brand,
body.cp-spatial .cp-side-brand { display: flex; align-items: center; gap: 10px; }
.db-sep { position: relative; padding-left: 11px; font-weight: 600; }
.db-sep::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: oklch(1 0 0 / .26);
}
body.cp-spatial .cp-side-brand .tm-logo { height: 16px; }

/* ---------- 20 · REGISTRATION ACCORDION (steps 1·2·3·4) ---------- */
body.cp-spatial .cp-acc .cp-fset {
  margin: 18px 0 0;
  border: 1px solid oklch(1 0 0 / .12);
  border-radius: var(--radius-md);
  background: oklch(1 0 0 / .04);
  padding: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
body.cp-spatial .cp-acc .cp-fset.open {
  border-color: oklch(1 0 0 / .26);
  background: oklch(1 0 0 / .07);
  box-shadow: 0 18px 40px -28px oklch(0 0 0 / .6);
}
body.cp-spatial .cp-acc .cp-fset-h {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 16px 18px; cursor: pointer; user-select: none;
  border-radius: var(--radius-md);
}
body.cp-spatial .cp-acc .cp-fset-h h3 { margin: 0; }
body.cp-spatial .cp-acc .cp-fset-h:hover { background: oklch(1 0 0 / .03); }
body.cp-spatial .cp-acc .cp-fset.done .cp-fset-h .n {
  background: var(--signal); color: oklch(0.15 0.05 162); font-size: 0;
}
body.cp-spatial .cp-acc .cp-fset.done .cp-fset-h .n::after { content: "✓"; font-size: 12px; }

.cp-acc-edit { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
body.cp-spatial .cp-acc .cp-fset:not(.done) .cp-acc-edit { display: none; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-edit { margin-left: 0; }

/* green "✓ Gata" badge on completed steps */
.cp-acc-done {
  display: none; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px 4px 8px; border-radius: 100px;
  color: var(--signal); background: var(--signal-bg);
  border: 1px solid oklch(0.7 0.12 162 / .45);
}
.cp-acc-done svg { width: 13px; height: 13px; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-done { display: inline-flex; margin-left: auto; }

.cp-acc-chev { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); flex: none; margin-left: auto; transition: transform .3s ease; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-chev { margin-left: 8px; }
.cp-acc-chev svg { width: 16px; height: 16px; }
body.cp-spatial .cp-acc .cp-fset.open .cp-acc-chev { transform: rotate(180deg); color: #fff; }

body.cp-spatial .cp-acc .cp-fset-body { display: none; }
body.cp-spatial .cp-acc .cp-fset.open .cp-fset-body { display: block; }
@media (prefers-reduced-motion: no-preference) {
  body.cp-spatial .cp-acc .cp-fset.open .cp-fset-body { animation: cpAccIn .32s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes cpAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.cp-acc .cp-fset-inner { display: flex; flex-direction: column; gap: 16px; padding: 4px 18px 18px; }
.cp-acc-nav { margin-top: 2px; }
.cp-acc-next { align-self: flex-start; }

/* GDPR + submit revealed only after the last step */
body.cp-spatial .cp-acc .cp-acc-tail { display: none; }
.cp-nisa-other { margin-top: 8px; }
body.cp-spatial .cp-acc.cp-acc-complete .cr-consents.cp-acc-tail { display: flex; }
body.cp-spatial .cp-acc.cp-acc-complete .ct-submit.cp-acc-tail { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  body.cp-spatial .cp-acc.cp-acc-complete .cp-acc-tail { animation: cpAccIn .32s cubic-bezier(.2,.8,.2,1) both; }
}

/* ---------- photo image-slot: legible placeholder on dark glass ---------- */
/* The component defaults to dark text (rgba(0,0,0,.55)) which vanishes on the
   spatial backdrop. Outer host styles win over the shadow :host rule, and the
   empty-state cap/sub inherit color — so this lifts the whole "Foto / browse
   files" caption to a readable light tone. ::part(empty) bumps the icon too. */
body.cp-spatial image-slot.cp-av,
body.cp-spatial image-slot.cp-pub-av {
  color: rgba(255, 255, 255, .82);
}
body.cp-spatial image-slot.cp-av::part(empty),
body.cp-spatial image-slot.cp-pub-av::part(empty) {
  color: rgba(255, 255, 255, .82);
}
body.cp-spatial image-slot.cp-av::part(ring),
body.cp-spatial image-slot.cp-pub-av::part(ring) {
  border-color: rgba(255, 255, 255, .38);
}