/* Shared "open" auth layout — sign in, create account, verify email, and
   forgot/reset password. Deliberately not boxed in a .card (see base.css
   .auth-wrap/.card, still used by legacy pages): these public front-door
   pages float on --page instead. Everything else (tokens, fonts, control
   styling) stays consistent with base.css. Class prefix "ao-" = auth-open,
   kept distinct from base.css's own .auth-* classes so the two systems
   never collide. */

/* Custom scrollbar — thin, subtle gray, no arrows. Mirrors the treatment in
   ui_concept.css/dashboard.css; base.css itself doesn't define this (each
   top-level stylesheet carries its own copy), so these pages need their own.
   WebKit/Blink only: the standard scrollbar-width/scrollbar-color props are
   intentionally omitted — setting them makes Chromium ignore these
   ::-webkit-scrollbar rules (and re-adds the native arrow buttons). Firefox
   falls back to its own scrollbars, which have no arrows anyway. */
@supports selector(::-webkit-scrollbar){
  *{ scrollbar-width:auto; }
}
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(128,128,140,.4);
  border-radius:20px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(128,128,140,.65);
  background-clip:padding-box;
}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button:horizontal,
*::-webkit-scrollbar-button:vertical{
  display:none; width:0; height:0;
}
*::-webkit-scrollbar-corner{ background:transparent; }

.ao-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* The top value is a floor, not an offset. justify-content:center owns the
     placement whenever the panel fits, and it does on every desktop and
     portrait-tablet size — the padding is invisible there. It only takes
     effect once the panel outgrows the viewport (signup is the tall one, and
     landscape tablets/short laptops are where that starts), and every pixel
     of it is then pure added scroll. So no breakpoint: a larger desktop-only
     value would change nothing while centred and cost scroll once not. 34px
     rather than 0 keeps the mark clear of the status bar / browser chrome on
     phones, where the panel always overflows. */
  padding:34px 20px 32px;
}

.ao-panel{ width:100%; max-width:376px; }

.ao-brand{ display:flex; justify-content:center;
  padding:7px; margin:-7px auto 25px; }   /* padding is breathing room, not tap
                                             target — 50px already clears 44 */
.ao-brand img{ height:50px; width:auto; display:block; }
/* The real Zulli logo — same inline mark+wordmark SVG as the landing page's
   nav/footer, so the mark and letterforms are pixel-identical everywhere.
   No intrinsic width/height attributes on the SVG itself, so it needs its
   own sizing rule here rather than relying on .ao-brand img above. */
.ao-brand svg.brand-logo{ height:clamp(24px, 1vw + 15px, 26px); width:auto; display:block; overflow:visible; }

.ao-panel h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:26px;
  text-align:center;
  margin:0 0 6px;
}
.ao-sub{ text-align:center; color:var(--ink-soft); font-size:14px; margin:0 0 28px; }

/* Centered icon badge for a no-form status page (check your email, link
   expired, password updated) — a little polish standing in for the empty
   space a form would otherwise fill. */
.ao-icon-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  background:color-mix(in srgb, var(--brass) 12%, var(--surface));
  color:var(--brass);
}
.ao-icon-badge svg{ width:26px; height:26px; }

.ao-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:11px 16px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-ctl);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.ao-google:hover{ background:var(--paper-dim); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.ao-google:active{ transform:translateY(0); }
.ao-google-icon{ flex:none; }

.ao-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; }
.ao-divider::before, .ao-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.ao-divider span{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.ao-field{ margin-bottom:16px; }
/* Turnstile on signup: no room taken until Cloudflare wants a click. See the
   same rule in contact_form_layouts.css. */
.cf-turnstile:not(.is-interactive){ height:0; overflow:hidden; }
.cf-turnstile.is-interactive{ margin:4px 0 12px; line-height:0; border-radius:10px; overflow:hidden; }
.ao-field > label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; letter-spacing:0.02em; }
.ao-field-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.ao-field-head label{ margin-bottom:0; }
.ao-forgot{ font-size:12.5px; font-weight:600; color:var(--brass); text-decoration:none;
  padding:12px 6px; margin:-12px -6px; }          /* tap target, see .ao-switch */
.ao-forgot:hover{ text-decoration:underline; }

.ao-control-wrap{ position:relative; display:flex; align-items:center; }
.ao-control-icon{ position:absolute; left:12px; width:16px; height:16px; color:var(--ink-soft); pointer-events:none; }

input.ao-control{
  width:100%;
  padding:10px 12px 10px 38px;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-input);
}
input.ao-control:focus{ outline:2px solid var(--brass-light); outline-offset:0; }
input.ao-control::placeholder{ color:var(--ink-soft); opacity:0.75; }
/* A field whose Django errorlist is showing gets a red border to match —
   the list alone left the input itself looking untouched, so on a form with
   several fields the message floated with no visible owner. :has() reaches
   the sibling structure login.html renders ({{ field.errors }} inside the
   same .ao-field as the input). */
.ao-field:has(ul.errorlist) input.ao-control{ border-color:var(--oxblood); }
input.ao-control:disabled{ opacity:.55; cursor:not-allowed; }
.ao-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.ao-submit:disabled:hover{ background:var(--brass); transform:none; }

.ao-control-wrap--pw input.ao-control{ padding-right:40px; }

/* The 6-digit verify-email code — wide letter-spacing and a centered,
   monospaced-feeling size so it reads as a code, not a normal text field. */
input.verify-code-input{
  font-family:'IBM Plex Mono', monospace;
  font-size:20px;
  letter-spacing:0.4em;
  text-align:center;
  padding-left:38px;
}
input.verify-code-input::placeholder{ letter-spacing:0.4em; }

/* Live password-strength checklist (signup) — each rule starts as an empty
   outline dot and fills solid green with a checkmark the instant it's met. */
.pw-checklist{
  list-style:none;
  margin:9px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
}
.pw-rule{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--ink-soft);
  transition:color var(--ease);
}
.pw-rule-dot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1.5px solid var(--line);
  color:transparent;
  transition:background var(--ease), border-color var(--ease), color var(--ease);
}
.pw-rule-dot svg{ width:9px; height:9px; }
.pw-rule.met{ color:var(--green-text); }
.pw-rule.met .pw-rule-dot{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.pw-match{
  margin:8px 0 0;
  font-size:12px;
  font-weight:600;
}
.pw-match.pw-match-ok{ color:var(--green-text); }
.pw-match.pw-match-bad{ color:var(--oxblood); }

.ao-resend-form{ margin:0; }

.ao-pw-toggle{
  position:absolute;
  right:6px;
  display:flex;
  padding:12px;                                   /* 40px tap target */
  background:none;
  border:none;
  border-radius:6px;
  color:var(--ink-soft);
  cursor:pointer;
}
.ao-pw-toggle:hover{ color:var(--ink); background:var(--paper-dim); }
.ao-pw-toggle svg{ width:16px; height:16px; }

.ao-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:6px;
  padding:11px 20px;
  background:var(--brass);
  color:var(--on-brass);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  border:none;
  border-radius:var(--radius-ctl);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.ao-submit:hover{ background:var(--brass-light); transform:translateY(-1px); }
.ao-submit:active{ transform:translateY(0); }
.ao-submit svg{ width:16px; height:16px; }

.ao-switch{ text-align:center; margin-top:22px; font-size:13px; color:var(--ink-soft); }
.ao-switch a{ color:var(--brass); font-weight:600; text-decoration:none; }
.ao-switch a:hover{ text-decoration:underline; }

/* Tap targets. These small type links ("Resend code", "Skip for now",
   Terms/Privacy, the logo) were 16–30px of tappable height on a phone, well
   under the ~44px a thumb expects. Padding grows the hit area and an equal
   negative margin hands the space straight back, so nothing on any of the
   auth pages sharing this sheet moves by a pixel. */
.ao-switch a,
.ao-switch button.plain{
  display:inline-block;
  padding:11px 6px;
  margin:-11px -6px;
}

.ao-fine{ text-align:center; margin-top:16px; font-size:11.5px; color:var(--ink-soft); }
.ao-fine a{ color:var(--ink-soft); text-decoration:underline; }
.ao-fine a:hover{ color:var(--ink); }

.ao-footer{ margin-top:44px; text-align:center; }
.ao-legal{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; margin:0 0 8px; }
.ao-legal a{ color:var(--ink-soft); text-decoration:none;
  padding:12px 6px; margin:-12px -6px; }          /* tap target, see .ao-switch */
.ao-legal a:hover{ color:var(--ink); text-decoration:underline; }
.ao-legal span{ color:var(--line); }
.ao-copyright{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  margin:0;
}
.ao-copyright svg{ width:12px; height:12px; }

/* The iOS focus-zoom floor used to be duplicated here. The canonical copy in
   form-controls.css (section 12, loaded on every auth page) already covers
   these screens — and this copy's shorter :not() list force-sized range/
   color/file inputs to 16px, the exact regression the canonical rule's
   exclusion list exists to prevent. Deleted, not moved: one floor, one file. */