/* CertaRounds — Log in (src/screens/login.js) + the shared account-screen frame (.auth) that
   First login and Access ended also use. Semantic tokens only.
   Phone: logo · headline with Dr. Round · form card · Get access · footer (mockup phone 1).
   Desktop ≥1024: a lavender brand panel on the left, the form card centred on the right. */

/* ============ Frame ============ */
.auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + var(--sp-4)) calc(var(--gutter) + var(--safe-right)) calc(var(--safe-bottom) + var(--sp-4)) calc(var(--gutter) + var(--safe-left));
  background: var(--bg);
}
.auth__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.auth__top { display: flex; justify-content: flex-start; padding: var(--sp-1) 0; }
.auth__brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: 10px; }
.auth__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.auth__content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 440px;
  margin: var(--sp-5) auto 0;
}
.auth-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.auth__foot { margin-top: var(--sp-7); padding-bottom: var(--sp-2); text-align: center; }
.auth__foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px var(--sp-2);
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--text-3);
}
.auth__foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; color: var(--text-2); font-weight: var(--fw-medium); text-decoration: none; }
.auth__foot-links a:hover { color: var(--link); text-decoration: underline; }
.auth__foot-links a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.auth__foot-help { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--text-2); font-weight: var(--fw-medium); font-size: inherit; border-radius: 6px; }
.auth__foot-help:hover { color: var(--link); text-decoration: underline; }
.auth__foot-help:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ Hero: headline + small Dr. Round ============ */
.auth-hero { display: flex; align-items: flex-end; gap: var(--sp-3); }
.auth-hero__copy { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-3); }
.auth-hero__over { font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--sp-2); }
.auth-hero__title {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: var(--text-strong);
  text-wrap: balance;
}
.auth-hero__title:focus { outline: none; }
.auth-hero__accent { color: var(--accent); }
.auth-hero__sub { margin-top: var(--sp-3); font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.auth-hero__art { flex: 0 0 auto; margin: 0 -6px -6px 0; }

/* ============ Card + form ============ */
.auth-card { display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
.auth-form__fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form__row { display: flex; justify-content: flex-end; margin: calc(-1 * var(--sp-2)) 0 calc(-1 * var(--sp-1)); }
.auth-form .btn[type="submit"] { margin-top: var(--sp-1); }
.auth-form .input[readonly] { color: var(--text-2); }

/* Text-style buttons ("Forgot your password?", "Message us") with a 44px hit area */
.auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 8px;
  color: var(--link);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  text-align: left;
}
.auth-link:hover { color: var(--link-hover); text-decoration: underline; }
.auth-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* F2 (D7): the recovery link inside an alert keeps the full 44px target; negative margins keep the
   alert no taller than its text needs. */
.auth-alert .auth-link { display: flex; width: max-content; max-width: 100%; min-height: 44px; font-size: var(--fs-13); margin: -4px -4px -10px; }

/* ============ Alerts (inline, next to the form) ============ */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  font-size: var(--fs-15);
  line-height: 1.5;
}
.auth-alert:focus { outline: none; }
.auth-alert:focus-visible { box-shadow: var(--focus-ring); }
.auth-alert__icon { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
.auth-alert__body { min-width: 0; }
.auth-alert__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.auth-alert__text { color: var(--text); }
.auth-alert--danger { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-border); }
.auth-alert--danger .auth-alert__icon { color: var(--danger); }
.auth-alert--danger .auth-alert__text { color: var(--danger-strong); }
.auth-alert--warn { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--warning-border); }
.auth-alert--warn .auth-alert__icon { color: var(--warning); }
.auth-alert--info { background: var(--info-bg); }
.auth-alert--info .auth-alert__icon { color: var(--accent-soft-fg); }
.auth-alert--success { background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-border); }
.auth-alert--success .auth-alert__icon { color: var(--success); }

/* ============ "New to CertaRounds? Get access" ============ */
.auth-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--sp-2); text-align: center; }
.auth-alt__text { font-size: var(--fs-15); color: var(--text-2); }
.auth-alt__link { gap: 6px; }
.auth-alt__link .icon { flex-shrink: 0; }

/* ============ Contact sheet ============ */
.auth-contact__lead { font-size: var(--fs-17); line-height: 1.5; color: var(--text-strong); font-weight: var(--fw-medium); }
.auth-contact__price {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}
.auth-contact__who { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-3); margin-bottom: var(--sp-2); }
.auth-contact__after { font-size: var(--fs-13); line-height: 1.5; color: var(--text-3); }

/* ============ Tablet: the form sits in one card ============ */
@media (min-width: 768px) {
  .auth { padding-top: calc(var(--safe-top) + var(--sp-7)); }
  .auth__top { justify-content: center; }
  .auth__content { max-width: 480px; margin-top: var(--sp-6); }
  .auth-card {
    padding: var(--sp-8) var(--sp-8) var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
  }
  .auth-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
}

/* ============ Desktop: ONE entry layout — brand panel + content column ============
   Welcome, Log in, First login, Onboarding and Access ended all use it. The panel is exactly the
   viewport's height and sticky (its art and motto never fall below the fold); the content column is
   top-aligned, so an error appearing never moves the form. */
@media (min-width: 1024px) {
  .auth--split {
    display: grid;
    grid-template-columns: minmax(440px, 44%) minmax(0, 1fr);
    align-items: start;
    padding: var(--sp-4);
    gap: 0;
  }
  .auth--split .auth__main {
    align-items: center;
    min-height: calc(100vh - 2 * var(--sp-4));
    min-height: calc(100dvh - 2 * var(--sp-4));
    padding: clamp(32px, 8vh, 96px) clamp(32px, 4vw, 72px) 0;
  }
  .auth--split .auth__content { flex: 0 0 auto; margin: 0; width: 100%; max-width: 460px; }
  .auth--wide .auth__content { max-width: 600px; }
  .auth--split .auth__foot { margin-top: auto; padding-top: var(--sp-8); }
  .auth--split .auth-hero__title { font-size: var(--fs-30); }
  .auth--split .auth-hero__copy { padding-bottom: 0; }
  .auth--split .auth-card { padding: var(--sp-9) var(--sp-8) var(--sp-8); }

  .auth__panel {
    position: sticky;
    top: var(--sp-4);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2 * var(--sp-4));
    height: calc(100dvh - 2 * var(--sp-4));
    padding: clamp(32px, 6vh, 56px) clamp(36px, 4vw, 56px) clamp(28px, 4vh, 44px);
    border-radius: 32px;
    background: var(--w-hero-bg);
    overflow: hidden;
    isolation: isolate;
  }
  .auth__panel-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .auth__panel-tag { font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .06em; color: var(--text-2); padding-left: 2px; }
  .auth__panel-body { margin-top: clamp(28px, 7vh, 80px); max-width: 420px; position: relative; z-index: 1; }
  .auth__panel-title {
    font-size: var(--fs-36);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.08;
    color: var(--text-strong);
    text-wrap: balance;
  }
  .auth__panel-title:focus { outline: none; }
  .auth__line { display: block; }
  .auth__accent { color: var(--accent); }
  .auth__panel-lead { margin-top: var(--sp-4); font-size: var(--fs-17); line-height: 1.55; color: var(--text-2); max-width: 36ch; }
  .auth__points { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: clamp(20px, 4vh, 32px); }
  .auth__points li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text); }
  .auth__panel-art {
    position: absolute;
    right: clamp(20px, 3vw, 48px);
    bottom: 0;
    z-index: 0;
    line-height: 0;
    pointer-events: none;
  }
  .auth__panel-art .mascot { height: clamp(150px, 25vh, 240px) !important; width: auto !important; aspect-ratio: 2 / 3; }
  .auth__panel-foot {
    margin-top: auto;
    position: relative;
    z-index: 1;
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-3);
    line-height: 1.8;
  }
  .auth__panel-foot span { display: block; }
}
@media (min-width: 1280px) {
  .auth__panel-title { font-size: var(--fs-44); }
}
/* Short windows: Dr. Round steps aside so nothing overlaps; the motto stays */
@media (min-width: 1024px) and (max-height: 700px) {
  .auth__panel-art { display: none; }
}

/* The violet check circles every entry screen uses for its proof points */
.auth__check { display: inline-flex; flex-shrink: 0; color: var(--accent); }

/* Very narrow phones (< 380px): Dr. Round steps aside so the form rises into view */
@media (max-width: 379px) {
  .auth-hero__art { display: none; }
}

/* ============ F2: centred entry column, calmer panel, desktop contact dialog ============
   The content column is centred on tall screens without moving when an error appears: its top
   padding comes from a per-screen reference height (--entry-h, the screen's usual height without
   messages), not from the live height. Taller content simply starts at the minimum padding. */
.auth { --entry-h: 600px; }
.auth--login { --entry-h: 580px; }
.auth--first { --entry-h: 780px; }
.auth--access { --entry-h: 700px; }
.auth--access-empty { --entry-h: 520px; }
.auth--onboarding { --entry-h: 620px; }
.auth--welcome { --entry-h: 740px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .auth__content {
    margin-top: max(var(--sp-6), calc((100vh - var(--entry-h)) / 2 - 75px));
    margin-top: max(var(--sp-6), calc((100dvh - var(--entry-h)) / 2 - 75px));
  }
}
@media (min-width: 1024px) {
  .auth--split .auth__main {
    padding-top: max(32px, calc((100vh - var(--entry-h)) / 2 - 48px));
    padding-top: max(32px, calc((100dvh - var(--entry-h)) / 2 - 48px));
  }
  /* The panel body sits in the middle of the panel, between the lockup and the motto */
  .auth__panel-body { margin-block: auto; padding-block: var(--sp-6); }
  .auth__panel-foot { margin-top: 0; }
  /* The tagline starts under the wordmark, not under the C mark (brand-sheet lockup) */
  .auth__panel-tag { padding-left: calc(34px * 210 / 176); }
  /* Contact dialog: a centred ~480px dialog for two rows, not a full-height side drawer */
  .sheet.sheet--center.auth-sheet { width: min(500px, calc(100vw - 2 * var(--sp-8))); }
}
/* Narrow, short split panels (1024×768, 1180×820): Dr. Round would crowd the list — he steps aside */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 820px) {
  .auth__panel-art { display: none; }
}

/* ============ F3 ============ */
/* Contact sheet/dialog: a clear hierarchy — a 20px title over a quieter 15px lead (the DS sheet body
   now shares the title's left edge). */
.auth-sheet .sheet__title { font-size: var(--fs-20); }
.auth-contact__lead { font-size: var(--fs-15); font-weight: var(--fw-regular, 400); color: var(--text-2); }

/* Entry frame, desktop (F3): one fixed top line — the card's top edge is level with the panel's
   lockup on every entry screen (no jump between Log in, First login, Access…); the footer links live
   in the panel's foot. This replaces F2's per-screen vertical centring. */
@media (min-width: 1024px) {
  .auth--split .auth__main {
    padding-top: clamp(32px, 6vh, 56px);
    padding-top: clamp(32px, 6vh, 56px);
    padding-bottom: var(--sp-7);
  }
  .auth__panel-links { position: relative; z-index: 1; margin-top: var(--sp-2); }
  .auth__panel-links .auth__foot-links { justify-content: flex-start; margin-left: -6px; }
}
/* Tablet portrait (F3): the phone composition (hero outside, the form is the card) as one group —
   logo, content and footer centred together, so the logo never sits alone above an empty band. */
@media (min-width: 768px) and (max-width: 1023px) {
  .auth__main { justify-content: center; }
  .auth__content { flex: 0 0 auto; margin-top: var(--sp-6); }
  .auth__foot { margin-top: var(--sp-7); }
  .auth-card { padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; }
  .auth-form {
    padding: var(--sp-6);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
  }
  .auth--access .acc-summary {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    border-radius: 20px;
  }
}
/* "Forgot your password?" is a quiet link; the Log in pill owns the card */
.auth-form__row .auth-link { font-size: var(--fs-15); font-weight: var(--fw-medium); }
/* Log in (phones/tablets): heading beside Dr. Round, the intro full width under both */
.auth-hero-wrap .auth-hero__sub { margin-top: 0; }
.auth-hero-wrap .auth-hero__copy { padding-bottom: var(--sp-2); }
.auth-hero-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ============ F4 ============ */
/* Desktop entry frame (R4): the content column is centred against the full-height panel (from each
   screen's usual height, so an error appearing never moves it); the panel's headline block sits at
   one fixed offset so it never jumps between Welcome, Log in and the setup screens. */
.auth--login { --entry-h: 620px; }
.auth--first { --entry-h: 770px; }
.auth--first-2 { --entry-h: 480px; }
.auth--access { --entry-h: 700px; }
.auth--access-empty { --entry-h: 500px; }
.auth--onboarding { --entry-h: 620px; }
.auth--welcome { --entry-h: 720px; }
@media (min-width: 1024px) {
  .auth--split > .auth__panel { grid-column: 1; grid-row: 1; }
  .auth--split > .auth__main { grid-column: 2; grid-row: 1; }
  .auth--split .auth__main {
    padding-top: max(32px, calc((100vh - 32px - var(--entry-h)) / 2));
    padding-top: max(32px, calc((100dvh - 32px - var(--entry-h)) / 2));
  }
  .auth__panel-body { margin-top: clamp(40px, 13vh, 132px); margin-bottom: auto; }
  /* The footer links: after the content in the DOM, drawn in the panel's foot under the motto */
  .auth__panel { padding-bottom: calc(clamp(28px, 4vh, 44px) + 48px); }
  .auth--split > .auth__panel-links {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    position: sticky;
    bottom: var(--sp-4);
    z-index: 2;
    margin: 0 0 clamp(20px, 3vh, 36px) clamp(36px, 4vw, 56px);
  }
  .auth--split > .auth__panel-links .auth__foot-links { justify-content: flex-start; margin-left: -6px; }
}
/* Short split panels (1024–1279 × ≤820): a smaller Dr. Round instead of none (no hollow corner) */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 701px) and (max-height: 820px) {
  .auth__panel-art { display: block; }
  .auth__panel-art .mascot { height: clamp(110px, 18vh, 150px) !important; }
}
/* Log in hero (phones/tablets): a 72px Dr. Round standing on the "Log in" baseline, kept at 360 */
.auth-hero-wrap .auth-hero { align-items: flex-end; }
.auth-hero-wrap .auth-hero__copy { padding-bottom: 0; }
.auth-hero-wrap .auth-hero__title { line-height: 1; }
.auth-hero-wrap .auth-hero__art { margin: 0; }
@media (max-width: 379px) { .auth--login .auth-hero-wrap .auth-hero__art { display: block; } }
/* "Forgot your password?" in secondary ink (violet on hover): the Log in pill is the card's accent */
.auth-form__row .auth-link { color: var(--text-2); }
.auth-form__row .auth-link:hover { color: var(--link-hover); }
/* 768: the logo lines up with the content column (one axis, as on phones) */
@media (min-width: 768px) and (max-width: 1023px) {
  .auth__top { justify-content: flex-start; width: 100%; max-width: 480px; margin: 0 auto; }
}
/* The contact sheet container takes focus on open; the dialog role announces it — no outline box */
.sheet.auth-sheet:focus, .sheet.auth-sheet:focus-visible { outline: none; }
/* Onboarding steps differ in height: taller steps start higher (their reference height is larger) */
.auth--ob-level { --entry-h: 760px; }
.auth--ob-weak { --entry-h: 960px; }
.auth--ob-done { --entry-h: 760px; }
/* Welcome's panel is full (headline, actions, three proofs) down to the motto at these sizes: no art */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 820px) {
  .auth--welcome .auth__panel-art { display: none; }
}

/* ============ F5 ============ */
/* The brand panel never clips or overlaps (R5): it grows with its content (at least viewport-high;
   the page scrolls when it is taller), its motto is the last block in normal flow, and the footer
   links live under the content column instead of being drawn over the panel. Captions on the
   lavender use --text-2 (≈6:1; --text-3 was 3.6–3.9:1). */
@media (min-width: 1024px) {
  .auth__panel {
    height: auto;
    min-height: calc(100vh - 2 * var(--sp-4));
    min-height: calc(100dvh - 2 * var(--sp-4));
    overflow: visible;
    padding-bottom: clamp(28px, 4vh, 44px);
  }
  .auth__panel-body { margin-bottom: var(--sp-7); }
  .auth__panel-foot { margin-top: auto; color: var(--text-2); }
  .auth--split .auth__foot { margin-top: var(--sp-6); padding-top: 0; }
  .auth--split .auth__foot .auth__foot-links { justify-content: center; }
}
/* Dr. Round only where the panel has room for him beside its content (every entry screen alike) */
@media (min-width: 1024px) and (max-height: 820px) {
  .auth__panel-art { display: none !important; }
}