/* ============================================================
   Accounts — sign in / sign up modal
   Additive: touches no existing rule in style.css. Every value
   resolves to a :root token; no literals.

   Layering (extends the scale in cart.css / curso.css):
     refract 3 · topbar 50 · drawer 90 · curso 96/97 · cart 100/101 · AUTH 110/111
   ============================================================ */

/* ── the trigger: top bar ────────────────────────────────────
   Icon-only at every width, unlike topbar__cta/cart-btn: those
   two already fill the bar between 1080px and roughly 1500px, and
   a third labelled pill pushes the row past its fit there, which
   wraps every button's text onto two lines. A bare glyph plus
   aria-label carries "account" without needing that room back. */
.acc-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--rose-lt); border-radius:4px;
  color:var(--rose-deep); cursor:pointer; width:44px; height:44px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.acc-btn:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#FFF9F5; }
.acc-btn .ico{ width:18px; height:18px; }
.acc-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── the backdrop: glass over the page ──────────────────── */
.auth-veil{
  position:fixed; inset:0; z-index:110;
  background:rgba(38,37,33,.24);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
}
.auth-veil.is-on{ opacity:1; pointer-events:auto; }

/* ── the modal ───────────────────────────────────────────── */
.auth{
  position:fixed; inset:0; z-index:111;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
  visibility:hidden; pointer-events:none;
}
.auth.is-open{ visibility:visible; pointer-events:auto; }

.auth__panel{
  position:relative; width:min(440px,100%);
  max-height:calc(100svh - clamp(28px,6vw,80px));
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(34px,4.6vw,48px) clamp(26px,3.6vw,40px);
}

.auth__x{
  position:absolute; top:clamp(12px,1.6vw,18px); right:clamp(12px,1.6vw,18px); z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  color:var(--ink-2); cursor:pointer;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.auth__x:hover{ border-color:var(--rose-lt); color:var(--rose-deep); transform:rotate(90deg); }
.auth__x .ico{ width:17px; height:17px; }

/* ── tabs: sign in / sign up ─────────────────────────────── */
.auth__tabs{
  display:flex; gap:clamp(22px,3vw,32px);
  margin-bottom:clamp(24px,3.2vw,32px); border-bottom:1px solid var(--line);
}
.auth__tab{
  position:relative; background:none; border:0; padding:0 0 14px; cursor:pointer;
  font-family:var(--sans); font-size:var(--t-label); font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  transition:color .4s var(--ease);
}
.auth__tab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--rose-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.auth__tab:hover{ color:var(--rose-deep); }
.auth__tab.is-on{ color:var(--ink); }
.auth__tab.is-on::after{ transform:scaleX(1); }

/* ── the forms ───────────────────────────────────────────── */
.auth__t{ font-family:var(--serif); font-size:var(--fs-h3); line-height:1.16; letter-spacing:-.022em; }
.auth__p{ margin-top:8px; font-size:var(--t-sm); color:var(--ink-2); line-height:1.6; max-width:38ch; }

.auth__f{ display:flex; flex-direction:column; gap:7px; margin-top:clamp(20px,2.6vw,26px); }
.auth__f span{
  font-size:var(--t-label); font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.auth__f input{
  font-family:var(--sans); font-size:var(--t-md); color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding:13px 15px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.auth__f input:focus-visible{ border-color:var(--rose-deep); background:var(--paper); }

.auth__err{
  margin-top:14px; padding:11px 14px; border-radius:4px;
  background:var(--rose-sage); border:1px solid var(--rose-sage-d);
  font-size:var(--t-sm); color:var(--rose-deep); line-height:1.5;
}
.auth__ok{
  margin-top:14px; padding:11px 14px; border-radius:4px;
  background:var(--sage-soft); border:1px solid var(--line);
  font-size:var(--t-sm); color:var(--deep); line-height:1.5;
}

.auth__cta{
  width:100%; margin-top:clamp(20px,2.6vw,26px);
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  background:var(--rose-deep); color:#FFF9F5; border:0; border-radius:4px;
  padding:15px 28px; cursor:pointer;
  font-family:var(--sans); font-size:var(--t-md); font-weight:300; letter-spacing:.01em;
  transition:background .4s var(--ease), transform .4s var(--ease), opacity .4s var(--ease);
}
.auth__cta:hover{ background:var(--ink); transform:translateY(-2px); }
.auth__cta:disabled{ opacity:.5; cursor:default; transform:none; }
.auth__cta .ico{ width:1.15em; height:1.15em; }

.auth__cta--ghost{ background:none; border:1px solid var(--line); color:var(--ink-2); }
.auth__cta--ghost:hover{ background:var(--paper-2); color:var(--rose-deep); transform:none; }

/* ── signed-in state ─────────────────────────────────────── */
.auth__in{ display:none; text-align:center; }
.auth.is-in .auth__in{ display:block; }
.auth.is-in .auth__out{ display:none; }

.auth__badge{
  display:inline-block; margin-bottom:16px; padding:4px 13px; border-radius:99px;
  border:1px solid var(--rose-deep); color:var(--rose-deep);
  font-size:var(--t-label); font-weight:400; letter-spacing:.16em; text-transform:uppercase;
}
.auth__email{ margin-top:8px; font-size:var(--t-sm); color:var(--ink-2); word-break:break-word; }

/* ── reveal start-states (JS clears them) ───────────────── */
.js .auth__panel > *{ opacity:0; }

/* ── reduced motion: parity, same policy as the rest of the page ── */
@media (prefers-reduced-motion:reduce){
  .auth__panel,
  .auth__panel > *{ opacity:1 !important; transform:none !important; }
  .auth-veil{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(38,37,33,.46); }
  .auth__x:hover,
  .auth__cta:hover{ transition:none; transform:none; }
}