/* BEDAZZLE — account / login / onboarding UI. Uses the shared design tokens. */

/* ---- header account ---- */
#authSlot { display: inline-flex; align-items: center; }
.bz-signin { white-space: nowrap; }
.bz-acct-wrap { position: relative; }
.bz-acct {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 6px;
  border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: var(--r-pill);
  color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s;
}
.bz-acct:hover { border-color: var(--ink); transform: translateY(-1px); }
.bz-acct__av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; flex: none; }
.bz-acct__av img { width: 100%; height: 100%; object-fit: cover; }
.bz-acct__initial { font-size: 13px; font-weight: 700; }
.bz-acct__name { font-size: 14px; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bz-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 248px; z-index: 120;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.bz-menu.open { opacity: 1; visibility: visible; transform: none; }
.bz-menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.bz-menu__head strong { font-size: 14px; }
.bz-menu__head span { font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; }
.bz-menu__item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 11px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); font-family: inherit; }
.bz-menu__item:hover { background: var(--surface-2); }
.bz-menu__item--danger { color: var(--ink-soft); }

/* ---- modal shell ---- */
.bzm-scrim { position: fixed; inset: 0; background: rgba(20,17,13,.46); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 300; backdrop-filter: blur(2px); }
.bzm-scrim.open { opacity: 1; visibility: visible; }
.bzm {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.98);
  width: min(440px, 92vw); z-index: 301; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 36px 34px 26px; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), visibility .32s;
}
.bzm.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.bzm__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.bzm__close:hover { color: var(--ink); border-color: var(--line-strong); }
.bzm__brand { font-family: var(--sans); font-weight: 700; letter-spacing: 0.22em; font-size: 12px; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.bzm h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -0.015em; }
.bzm__sub { font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin: 12px auto 22px; max-width: 34ch; }

/* ---- oauth buttons ---- */
/* Uniform sign-up buttons: Google (rendered), Apple, email — same width, height, pill */
.bz-gbtn { display: flex; justify-content: center; min-height: 44px; margin-bottom: 0; }
.bz-gbtn.bz-loading { opacity: .5; pointer-events: none; }
.bz-gnote { font-size: 12px; color: var(--ink-mute); line-height: 1.5; margin: 4px auto 0; max-width: 32ch; text-align: center; }
.bz-oauth {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 300px; max-width: 100%;
  height: 46px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--ink); color: var(--on-dark);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s; margin: 8px auto 0;
}
.bz-oauth:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.bz-oauth[hidden] { display: none; }
/* Email sub-form (revealed by "Continue with email") */
.bz-email-form { display: flex; flex-direction: column; gap: 8px; width: 300px; max-width: 100%; margin: 8px auto 0; }
.bz-email-form[hidden] { display: none; }
.bz-email-form .field { height: 46px; }
.bz-email-form__go { width: 100%; height: 46px; justify-content: center; }
.bz-email-msg { min-height: 16px; }
.bzm__or { display: flex; align-items: center; gap: 12px; color: var(--ink-mute); font-size: 12px; margin: 18px auto; width: 300px; max-width: 100%; }
.bzm__or::before, .bzm__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bzm__email { display: inline-block; font-size: 14px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bzm__email:hover { color: var(--ink-soft); }
.bzm__err { font-size: 13px; color: var(--out-stock, #9a2a2a); min-height: 18px; margin-top: 12px; }
.bzm__legal { font-size: 11px; color: var(--ink-mute); margin-top: 16px; line-height: 1.5; }
.bzm__legal a { text-decoration: underline; }

/* ---- login: premium variant with editorial image band ---- */
.bzm--login { padding: 0; overflow: hidden; text-align: center; width: min(440px, 92vw); }
.bzm__hero { position: relative; height: 168px; overflow: hidden; background: var(--surface-2); }
.bzm__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bzm__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,13,.30) 0%, rgba(20,17,13,0) 42%, rgba(20,17,13,.48) 100%); }
.bzm__hero-wm { position: absolute; left: 24px; bottom: 16px; z-index: 2; color: #fff; font-family: var(--sans); font-weight: 700; letter-spacing: 0.22em; font-size: 14px; text-transform: uppercase; }
.bzm__hero-eyebrow { position: absolute; left: 24px; top: 18px; z-index: 2; color: rgba(255,255,255,.92); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.bzm__body { padding: 26px 30px 24px; }
.bzm__body h2 { font-size: 28px; }
.bzm__close--over { background: rgba(255,255,255,.86); border-color: transparent; box-shadow: var(--shadow-sm); z-index: 3; }
.bzm__close--over:hover { background: #fff; }
.bzm__proof { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 20px; }
.bzm__avatars { display: inline-flex; }
.bzm__avatars i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); background-size: cover; background-position: center 25%; margin-left: -9px; }
.bzm__avatars i:first-child { margin-left: 0; }
.bzm__proof-txt { font-size: 13px; color: var(--ink-soft); }
.bzm__proof-txt b { color: var(--ink); }

/* ---- demo gate ---- */
.bz-gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 64%, transparent);
  backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.bz-gate__card {
  text-align: center; max-width: 430px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 44px 36px 36px;
}
.bz-gate__card h2 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 12px; }
.bz-gate__card .bzm__sub { margin-bottom: 24px; }
.bz-gate__cta { min-width: 230px; margin-bottom: 16px; }

/* ---- onboarding ---- */
.bzm--ob { padding-top: 30px; }
.bz-ob__bar { height: 4px; border-radius: 999px; background: var(--line); margin: -6px 0 24px; overflow: hidden; }
.bz-ob__bar span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; transition: width .45s var(--ease-out); }
.bz-ob__step { display: flex; flex-direction: column; align-items: center; }
.bz-ob__step .eyebrow { margin-bottom: 12px; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 22px 0 26px; }
.bz-chip {
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.bz-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.bz-chip.on { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.bz-ob__next { min-width: 200px; margin-top: 4px; }
.bz-ob__actions { display: flex; align-items: center; gap: 14px; }
.bzm__back, .bzm__skip { background: none; border: 0; color: var(--ink-soft); font-family: inherit; font-size: 14px; cursor: pointer; padding: 8px; }
.bzm__back:hover, .bzm__skip:hover { color: var(--ink); }
.bzm__skip { margin-top: 10px; }
.bz-ob__done { gap: 6px; }
.bz-ob__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }

@media (max-width: 560px) {
  .bzm:not(.bzm--login) { padding: 30px 22px 22px; border-radius: var(--r-lg); }
  .bzm h2 { font-size: 26px; }
  .bzm--login { border-radius: var(--r-lg); }
  .bzm--login .bzm__hero { height: 140px; }
  .bzm--login .bzm__body { padding: 22px 20px 20px; }
  .bz-acct__name { display: none; }
  /* keep account access reachable on mobile (the generic .btn hide rule would remove it) */
  #authSlot .bz-signin { display: inline-flex !important; height: 40px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bzm, .bzm-scrim, .bz-menu, .bz-ob__bar span { transition: none; }
}