/* Auth surface -- version 3.
 *
 * Every pre-auth page (sign in, the password step, 2FA, the magic-link
 * lifecycle, signup confirmation, the role picker, account finishing,
 * and the client company's own entrance) is one layout: the marketing
 * nav's ink bar across the top, a green promise panel on the left, and
 * exactly one form at a time on the right.
 *
 * Two things the old centred card could not do, and this exists to fix:
 * a visitor arriving from the marketing site kept no sense of where they
 * were, and the sign-in page showed two parallel forms with two
 * identical email fields. Here the link is the default and the password
 * opens only if asked for.
 *
 * Loaded only by the auth pages (pages/_head.html), so it never reaches
 * the SPA. Every value resolves through the Vainio tier-2 aliases -- the
 * design was authored against this theme, so nothing below is a brand
 * literal.
 *
 * Scaling (three bands, no others):
 *   <=640px    the panel becomes a top band: promise first, form right
 *              after, one column, 54px fields.
 *   641-2199px panel at 41%, form centred in a 470-520px band.
 *   >=2200px   the form does NOT stretch. The type scale steps up
 *              instead, the panel's content caps out, and vertical
 *              centring keeps the form at eye height -- a 4K display
 *              must not leave a small note adrift in a large void.
 */

.auth-shell {
  /* Local scale, stepped once at 4K. Everything below sizes off these,
     so the >=2200px band is one block of overrides, not a second sheet. */
  --auth-h1: 2.5rem;      /* 40px */
  --auth-h2: 2.875rem;    /* 46px */
  --auth-lede: 1.0625rem; /* 17px */
  --auth-field: 3.625rem; /* 58px */
  --auth-field-text: 1.0625rem;
  --auth-band: 32.5rem;   /* 520px, the form's own width */
  --auth-aside-band: 35rem;
  --auth-pad-y: 4rem;
  --auth-pad-x: 5.5rem;
  --auth-aside-pad-x: 4.5rem;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* ---- continuity bar -------------------------------------------------
   The marketing nav trimmed to what an auth page can act on: back to the
   site, the locale, and the route the visitor did NOT take. Same ink
   band, same 62px, same light lockup as .mkt-nav, so a visitor who
   followed a CTA in sees one site, not two. */
.auth-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 62px;
  padding: var(--s-2) var(--s-6);
  background: var(--color-action-2-ink);
  border-bottom: 1px solid var(--color-action-2-line);
  color: var(--color-on-action-2-muted);
  flex-wrap: wrap;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--color-on-action-2-muted);
  font-size: var(--f-sm);
  font-weight: 500;
}
.auth-brand:hover { text-decoration: none; color: var(--color-on-action-2); }
/* The light cut of the lockup (paper wordmark, gold mark): the default
   cut's forest-green wordmark would read as a hole in the ink. */
.auth-brand img { height: 1.5rem; width: auto; }
.auth-topbar-spacer { flex: 1 1 auto; }

.auth-lang {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--f-sm);
}
.auth-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-on-action-2-muted);
  font-weight: 500;
}
.auth-lang a:hover { text-decoration: none; color: var(--color-on-action-2); }
.auth-lang a[aria-current="true"] {
  background: var(--color-action-2-well);
  border-color: var(--color-action-2-line);
  color: var(--color-on-action-2);
  font-weight: 600;
}
.auth-topbar-rule {
  width: 1px;
  align-self: center;
  height: 22px;
  background: var(--color-action-2-line);
}
.auth-alt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--f-sm);
  color: var(--color-on-action-2-muted);
}
/* The route not taken takes the nav's login colour: gold on ink, the
   one accent the marketing bar has. */
.auth-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-on-action-2-accent);
}
.auth-alt a:hover { text-decoration: none; color: var(--color-on-action-2); }

/* ---- body ----------------------------------------------------------- */
.auth-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 41% minmax(0, 1fr);
}

/* ---- promise panel --------------------------------------------------- */
.auth-aside {
  display: flex;
  flex-direction: column;
  padding: var(--auth-pad-y) var(--auth-aside-pad-x);
  background: var(--color-action-2);
  color: var(--color-on-action-2);
}
/* Two of these bracket the body block, so the promise sits optically
   centred however tall the panel gets. */
.auth-aside-fill { flex: 1 1 auto; }
.auth-aside-mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
/* The audience badge: who this page is for, in one word. */
.auth-pill {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--color-action-2-line);
  border-radius: var(--radius-full);
  background: var(--color-action-2-well);
  color: var(--color-on-action-2-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.auth-aside-body { max-width: var(--auth-aside-band); }
.auth-aside h2 {
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-size: var(--auth-h2);
  line-height: 1.12;
  letter-spacing: -0.032em;
  color: var(--color-on-action-2);
  text-wrap: balance;
}
.auth-aside-lead {
  margin: var(--s-3) 0 0;
  font-size: var(--auth-lede);
  line-height: 1.6;
  color: var(--color-on-action-2-muted);
  text-wrap: pretty;
}
.auth-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.auth-points li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 1.03125rem;
  line-height: 1.45;
}
/* Decoration, not content: the list already reads as a list. */
.auth-points li::before {
  content: "\2713";
  flex: none;
  color: var(--color-on-action-2-accent);
  font-weight: 700;
}
/* A quiet well on the panel, for the sentence that explains why a step
   is being asked for (the lockout rule, what a role changes). */
.auth-aside-note {
  margin: var(--s-5) 0 0;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--color-action-2-well);
  color: var(--color-on-action-2-muted);
  font-size: var(--f-sm);
  line-height: 1.6;
  text-wrap: pretty;
}
.auth-aside-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-action-2-line);
  font-size: var(--f-sm);
}
.auth-aside-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-action-2-muted);
}
.auth-aside-foot a:hover { color: var(--color-on-action-2); }
/* "Provided by Vido" -- the footnote a firm-branded panel drops to. */
.auth-aside-byline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-action-2-line);
  color: var(--color-on-action-2-muted);
  font-size: var(--f-sm);
}
.auth-aside-byline img { height: 1.125rem; width: auto; opacity: 0.85; }
/* The firm's initials, when the panel carries a firm rather than Vido. */
.auth-aside-avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--color-action-2-well);
  border: 1px solid var(--color-action-2-line);
  color: var(--color-on-action-2-accent);
  font-family: var(--font-display);
  font-weight: 700;
}
.auth-aside-firm { font-size: var(--f-lg); font-weight: 600; }
/* Back out of a signed-in-but-unscoped state (the role picker). */
.auth-aside-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--color-on-action-2-muted);
  font-size: var(--f-sm);
}
.auth-aside-back:hover { color: var(--color-on-action-2); }

/* ---- form column ----------------------------------------------------- */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--auth-pad-y) var(--auth-pad-x);
  min-width: 0;
}
.auth-main-inner { width: 100%; max-width: var(--auth-band); }
.auth-main h1 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--auth-h1);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-text);
  text-wrap: balance;
}
.auth-lede {
  margin: 0 0 var(--s-6);
  font-size: var(--auth-lede);
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
/* A status chip above the heading: what the page has already established
   ("link verified", "code accepted"). */
.auth-status {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-action-2);
  font-size: var(--f-sm);
  font-weight: 600;
}

/* The tier the visitor picked in the pricing grid, carried into signup
   (3a). A marker, not a lock: "change" goes back to the grid. */
.auth-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--r-lg);
  background: var(--color-brand-bg);
  font-size: var(--f-sm);
  color: var(--vainio-gold-ink);
}
.auth-plan strong { font-weight: 600; }
.auth-plan a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--vainio-gold-ink);
  text-decoration: underline;
}

.auth-field { margin-bottom: var(--s-4); }
.auth-field:last-of-type { margin-bottom: 0; }
.auth-field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--color-text);
}
.auth-field .auth-input {
  display: block;
  width: 100%;
  height: var(--auth-field);
  box-sizing: border-box;
  padding: 0 var(--s-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface-1);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--auth-field-text);
}
.auth-field .auth-input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}
.auth-field-desc {
  margin: var(--s-2) 0 0;
  font-size: var(--f-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
/* A one-time code is read back digit by digit, so it gets the tracking a
   password must not have. */
.auth-input-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
}

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  height: var(--auth-field);
  margin-top: var(--s-4);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--color-action-2);
  color: var(--color-on-action-2);
  font-family: var(--font-body);
  font-size: var(--auth-field-text);
  font-weight: 600;
  cursor: pointer;
}
.auth-submit:hover { background: var(--color-action-2-hover); }
.auth-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 3.375rem;
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface-1);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--f-md);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.auth-secondary:hover { border-color: var(--color-action-2); text-decoration: none; }

/* "or" rule between the default route and the alternative. */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-5);
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.auth-or span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* The password route, closed by default. <details> so it works with no
   JavaScript -- these pages ship none. */
.auth-disclose > summary {
  list-style: none;
  margin-top: var(--s-3);
}
.auth-disclose > summary::-webkit-details-marker { display: none; }
.auth-disclose > summary .auth-secondary { margin-top: 0; }
.auth-disclose > summary .auth-caret { color: var(--color-text-subtle); font-size: var(--f-sm); }
.auth-disclose[open] > summary .auth-caret { transform: rotate(180deg); }
.auth-disclose-body { margin-top: var(--s-5); }

.auth-alert {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--r-lg);
  background: var(--color-danger-bg);
  color: var(--color-text);
  font-size: var(--f-sm);
  line-height: 1.5;
  text-wrap: pretty;
}
.auth-alert-warning { border-color: var(--color-warning); background: var(--color-warning-bg); }
.auth-alert::before {
  content: "!";
  flex: none;
  font-weight: 700;
  color: var(--color-danger);
}
.auth-alert-warning::before { content: "!"; color: var(--color-warning-hover); }

.auth-note {
  margin: var(--s-5) 0 0;
  font-size: var(--f-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.auth-note a { font-weight: 600; color: var(--color-action-2); }

/* The row under the form: the other audience's door, and anything else
   that is a way out rather than a way on. */
.auth-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--f-sm);
}
.auth-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-action-2);
}

/* ---- account / role rows --------------------------------------------- */
.auth-choices { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-choice-form { margin: 0; }
.auth-choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface-1);
  text-align: start;
  cursor: pointer;
}
.auth-choice:hover { border-color: var(--color-action-2); }
.auth-choice-mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 700;
}
/* The row a session would land on by default reads as the primary one. */
.auth-choice-primary { border-color: var(--color-action-2); }
.auth-choice-primary .auth-choice-mark {
  background: var(--color-action-2);
  border-color: var(--color-action-2);
  color: var(--color-on-action-2-accent);
}
.auth-choice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-choice-name { font-weight: 600; color: var(--color-text); }
.auth-choice-kind { font-size: var(--f-sm); color: var(--color-text-muted); }
.auth-choice-go { flex: none; color: var(--color-text-subtle); font-weight: 600; }
.auth-choice-primary .auth-choice-go { color: var(--color-action-2); }

/* ---- 2FA extras ------------------------------------------------------ */
.auth-qr {
  display: block;
  width: 11rem;
  height: 11rem;
  margin: 0 0 var(--s-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-1);
}
.auth-secret {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--f-sm);
  word-break: break-all;
}
.auth-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--f-md);
  list-style: none;
}

/* ---- <=640px: the panel becomes a top band ---------------------------
   The promise still lands first, but it must not cost a screenful: the
   supporting copy and the legal row drop, and the form starts right
   after the headline. The continuity bar folds into the band, so the
   locale and the way back stay reachable without a second row. */
@media (max-width: 40rem) {
  .auth-shell {
    --auth-h1: 1.75rem;
    --auth-h2: 1.375rem;
    --auth-lede: 0.9375rem;
    --auth-field: 3.375rem; /* 54px */
    --auth-field-text: 1rem;
    --auth-pad-y: var(--s-5);
    --auth-pad-x: var(--s-4);
    --auth-aside-pad-x: var(--s-4);
  }
  /* The ink bar over the green band, as the marketing nav sits over the
     hero. The bar keeps the lockup: it is the only Vido mark on the page
     now, and the arrow beside it is the way back. */
  .auth-topbar {
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
  }
  .auth-brand img { height: 1.25rem; }
  /* Compact, but never below the touch floor: the locale pair loses its
     padding, so the width is stated rather than inherited. */
  .auth-lang a { padding: var(--s-1) var(--s-2); }
  .auth-lang a[aria-current="true"] {
    background: transparent;
    border-color: transparent;
  }
  .auth-topbar-rule,
  .auth-topbar .auth-alt { display: none; }
  .auth-body { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { padding-top: var(--s-4); gap: var(--s-4); }
  .auth-aside-fill,
  .auth-aside-lead,
  .auth-aside-note,
  .auth-points,
  .auth-aside-foot { display: none; }
  .auth-aside h2 { margin: 0; }
  .auth-main { justify-content: flex-start; }
  .auth-main-inner { max-width: none; }
  .auth-or { margin: var(--s-5) 0 var(--s-4); }
  /* The doors and the legal row move to the page's own foot on a phone,
     where the panel no longer has room for them. */
  .auth-foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .auth-codes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- >=2200px: step the type, do not stretch the form ---------------- */
@media (min-width: 137.5rem) {
  .auth-shell {
    --auth-h1: 4.5rem;
    --auth-h2: 5.125rem;
    --auth-lede: 1.875rem;
    --auth-field: 6.5rem;
    --auth-field-text: 1.875rem;
    --auth-band: 58.5rem;
    --auth-aside-band: 68.75rem; /* 1100px */
    --auth-pad-y: 7rem;
    --auth-pad-x: 10rem;
    --auth-aside-pad-x: 8rem;
  }
  .auth-points li { font-size: 1.75rem; }
  .auth-field label,
  .auth-field-desc,
  .auth-note,
  .auth-foot,
  .auth-alert,
  .auth-aside-foot { font-size: 1.375rem; }
  .auth-secondary { min-height: 5.75rem; font-size: 1.625rem; }
  /* The bar steps with everything else: a 14px locale toggle beside a
     72px heading is what "4K support" usually forgets. */
  .auth-topbar { min-height: 6.5rem; padding: var(--s-4) var(--s-7); }
  .auth-brand img { height: 2.625rem; }
  .auth-lang,
  .auth-alt { font-size: 1.375rem; }
  .auth-pill { font-size: 1.125rem; }
  .auth-status { font-size: 1.375rem; }
}