/* =====================================================================
   The Collectorium — Auth pages (v3)
   ---------------------------------------------------------------------
   The split-screen entry screen shared by login and register, plus a
   centered single-column variant (`.au-root.centered`) for the lighter
   verify/resend/check-email/reset-password pages. Field, button, and
   checkbox styling comes from the shared component library
   (public/css/v3/components.css) — this file only covers what's unique
   to the auth surface: the brand showcase panel, the split/centered
   layout shells, and the password strength meter.
   ===================================================================== */

.au-root {
  container-type: inline-size;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ============================================================
   BRAND PANEL — the marketing showcase, always rich/dark
   regardless of the active theme.
   ============================================================ */
.au-brand {
  flex: 1.05;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 44px 52px;
  color: #fff;
  background:
    radial-gradient(130% 110% at 12% 8%, color-mix(in srgb, var(--accent-blue) 46%, #0b0b0f) 0%, #0b0b0f 56%),
    #0b0b0f;
}

.au-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 38% at 82% 78%, rgba(230, 103, 178, 0.28), transparent 70%),
    radial-gradient(36% 34% at 92% 20%, rgba(125, 199, 164, 0.22), transparent 70%);
}

.au-brand-head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 18px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 2;
}

/* Inherits color:#fff from .au-brand, so the C reads white over the dark
   gradient without needing a separate asset. */
.au-brand-head .v3-logo {
  height: 38px;
  width: auto;
  display: block;
}

/* Floating collection "cardlets" — static decoration, hardcoded sample
   content per the ticket (not live data). */
.au-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.au-cardlet {
  position: absolute;
  width: 168px;
  min-height: 214px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: rgba(0, 0, 0, 0.78);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
}

.au-cardlet .glyph {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 26px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre-line;
  padding: 18px;
}

.au-cardlet .foot {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.14);
}

.au-cardlet .bar {
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.42);
  overflow: hidden;
  margin-bottom: 8px;
}

.au-cardlet .bar i {
  display: block;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-pill);
}

.au-cardlet .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.au-cardlet .nm {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.au-cardlet .ct {
  font-weight: var(--weight-bold);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.au-cardlet .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.au-brand-copy {
  margin-top: auto;
  position: relative;
  z-index: 2;
  max-width: 420px;
}

.au-brand-copy .eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 14px;
}

.au-brand-copy h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}

.au-brand-copy p {
  font-size: 15.5px;
  font-weight: var(--weight-medium);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

.au-brand-stats {
  display: flex;
  gap: 30px;
  margin-top: 26px;
  position: relative;
  z-index: 2;
}

.au-brand-stat .v {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 24px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.au-brand-stat .k {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

/* ============================================================
   FORM PANEL — theme-adaptive
   ============================================================ */
.au-form-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 56px 40px;
  background: var(--bg);
}

.au-form {
  width: 100%;
  max-width: 380px;
}

/* Theme toggle, pinned top-right of the form side. Same [data-set-theme]
   contract as the header's toggle (public/js/v3/theme.js). */
.au-theme {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 5;
  display: inline-flex;
  background: var(--circle-chrome);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.au-theme button {
  width: 32px;
  height: 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  display: inline-grid;
  place-items: center;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: color var(--duration-1);
}

.au-theme button.on {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

[data-theme='light'] .au-theme button.on {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Mobile / centered-only brand mark above the form heading. */
.au-form-mark {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.au-form-mark .v3-logo {
  height: 36px;
  width: auto;
  display: block;
}

.au-form h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 0 0 7px;
  color: var(--fg);
}

.au-form .au-sub {
  font-size: 14.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  line-height: 1.5;
  margin: 0 0 28px;
}

.au-form .v3-field-error {
  margin: 0 0 16px;
}

/* Captcha field wrapper — the gregwar bundle renders its own <img> + reload
   link + input; this just gives them the same rhythm as the other fields. */
.au-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.au-captcha .captcha_image {
  border-radius: var(--radius-md);
}

.au-captcha .captcha_reload {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 13px;
  color: var(--accent-blue);
  text-decoration: none;
}

.au-captcha .v3-input {
  margin-top: 4px;
}

/* login meta row (forgot-password link, right-aligned) */
.au-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 4px 0 22px;
}

/* terms agreement row (signup) */
.au-terms {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 22px;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  line-height: 1.5;
}

.au-terms .v3-checkbox {
  margin-top: 1px;
}

.au-swap {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}

/* Escape hatch to the public catalogue (TC-426). It sits outside the <form>,
   below it, so it reads as leaving rather than as another way to submit — but
   it is the only alternative to signing in, so it is a button, not a link.
   Secondary, so it doesn't read as a second submit.

   Nothing here targets the anchor: `pages` beats `components`, so a rule on
   `.au-browse a` would silently override .v3-button's own type and colour. */
.au-browse {
  width: 100%;
  max-width: 380px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
  text-align: center;
}

.au-browse-lbl {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--fg-secondary);
}

.au-browse-hint {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
}

/* ============================================================
   Password strength meter (component spec §3f)
   ============================================================ */
.au-strength {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.au-strength[hidden] {
  display: none;
}

.au-strength i {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--divider);
  transition: background var(--duration-2);
}

.au-strength.s1 i:nth-child(1) { background: var(--danger); }
.au-strength.s2 i:nth-child(-n+2) { background: #E0A52F; }
.au-strength.s3 i:nth-child(-n+3) { background: var(--brand-green); }
.au-strength.s4 i { background: var(--brand-green); }

.au-strength-lbl {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--fg-tertiary);
  margin-top: 6px;
}

/* ============================================================
   CENTERED LAYOUT (no brand panel) — verify / resend / check-email /
   reset-password pages.
   ============================================================ */
.au-root.centered {
  display: block;
}

.au-root.centered .au-brand {
  display: none;
}

.au-root.centered .au-form-wrap {
  min-height: 100vh;
}

.au-root.centered .au-form-mark {
  display: flex;
}

.au-root.centered .au-form {
  max-width: 400px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@container (max-width: 1080px) {
  .au-brand {
    padding: 36px 38px;
  }

  .au-cardlet {
    width: 150px;
    min-height: 192px;
  }
}

/* Collapse the split layout to a single centered column. */
@container (max-width: 860px) {
  .au-root {
    display: block;
  }

  .au-brand {
    display: none;
  }

  .au-form-wrap {
    padding: 40px 22px;
  }

  .au-form-mark {
    display: flex;
  }
}

@container (max-width: 420px) {
  .au-form h1 {
    font-size: 25px;
  }

  .au-form-wrap {
    padding: 32px 18px;
  }
}