/* ==========================================================================
   CrysMed — Member & Provider auth (login / register)
   Shared by member-auth.html and provider-auth.html.
   Extends version2's tokens + main.css.
   ========================================================================== */

.auth-shell { background: var(--white); padding-block: var(--sp-7); }

.auth-shell__grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  /* Real bug fix, 2026-09-16 — this used to be one fused box (shared radius/shadow, gap:0,
     overflow:hidden clipping both children together). Once the registration form grew past the
     aside panel's own natural height (all the fields added through this session's own work), the
     default grid stretch made the aside match the form's full height, and its own
     margin-top:auto benefits block then pushed down to that new, much lower bottom edge — the
     reported black gap. overflow:hidden also flatly blocks position:sticky on a descendant, so
     fixing this the sticky-panel way (confirmed with the project lead) means each side becomes
     its own real card instead — same look real sticky-panel signup pages (Stripe/Linear-style)
     already use. */
  gap: var(--sp-5);
  align-items: start;
}

/* ---- Left: dark benefits panel ---- */
.auth-aside {
  background: linear-gradient(352deg, #2394c0, #000000);
  /* background: var(--ink-900); */
  color: var(--white);
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  /* Stays in view while the (often much longer) form scrolls beside it — 68px matches
     .site-header .container's own fixed height so the panel sits right under the sticky nav,
     never behind or overlapping it. align-self:start is the actual fix for the stretch/gap bug;
     sticky is the extra polish on top of that. */
  position: sticky;
  top: 68px;
  align-self: start;
}
.auth-aside .eyebrow { color: var(--accent-500); margin-bottom: var(--sp-2); }
.auth-aside .eyebrow::before { background: var(--accent-500); }
.auth-aside h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}
.auth-aside__sub { font-size: var(--fs-sm); color: rgba(255,255,255,.68); line-height: var(--lh-relaxed); max-width: 42ch; margin-bottom: var(--sp-6); }

.auth-benefits { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: auto; margin-bottom: var(--sp-6); }
.auth-benefits li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.auth-benefits__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--brand-500);
  display: flex; align-items: center; justify-content: center;
}
.auth-benefits__icon svg { width: 15px; height: 15px; }
.auth-benefits b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--white); margin-bottom: 1px; }
.auth-benefits span { font-size: .75rem; color: rgba(255,255,255,.55); }

.auth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14); }
.auth-stats b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--white); }
.auth-stats span { font-size: .6875rem; color: rgba(255,255,255,.55); }

/* ---- Right: auth card ---- */
.auth-card {
  background: var(--white);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.auth-tabs { display: flex; gap: var(--sp-1); background: var(--surface); border-radius: var(--r-md); padding: 4px; margin-bottom: var(--sp-5); }
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-500);
}
.auth-tab.is-active { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-1); }

.auth-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-panel[hidden] { display: none; }
.auth-panel__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }

/* Show/hide toggle on password fields, member + provider login/register. */
.password-input { position: relative; }
.password-input input { padding-right: 40px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-300);
  cursor: pointer;
}
.password-toggle:hover { color: var(--ink-700); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }

.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.auth-row a { font-weight: var(--fw-bold); color: var(--brand-700); }
.auth-row a:hover { color: var(--brand-900); }

.auth-panel .btn-block { margin-top: var(--sp-1); }
.auth-legal { font-size: .6875rem; color: var(--ink-500); line-height: var(--lh-relaxed); margin-top: var(--sp-1); }
.auth-legal a { font-weight: var(--fw-semibold); color: var(--ink-700); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: var(--sp-5) 0 var(--sp-4);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-social { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.auth-social__btn:hover { border-color: var(--ink-300); }
.auth-social__btn svg { width: 16px; height: 16px; }

.auth-switch { text-align: center; font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-5); }
.auth-switch button { font-weight: var(--fw-bold); color: var(--brand-700); background: none; border: none; font-family: inherit; font-size: inherit; padding: 0; }
.auth-switch button:hover { color: var(--brand-900); }

@media (max-width: 980px) {
  .auth-shell__grid { grid-template-columns: minmax(0, 1fr); }
  .auth-aside {
    padding: var(--sp-6);
    /* Stacked layout here, not side-by-side — sticky would otherwise pin the dark panel across
       the top of the screen for the entire time someone's filling in a long form on a phone. */
    position: static;
  }
  .auth-benefits { margin-top: var(--sp-5); }
}
@media (max-width: 560px) {
  .auth-shell { padding-block: var(--sp-5); }
  .auth-panel__row { grid-template-columns: minmax(0, 1fr); }
  .auth-social { grid-template-columns: minmax(0, 1fr); }
}