/**
 * Login V3: chrome-free shell + OTP card + password-fallback view + lost-password wrappers.
 * Handle: gerbs-login-v3 (depends on gerbs-tokens, gerbs-components). Enqueued only when
 * gerbs_login_v3_focused() is true (inc/account/login-v3-chrome.php).
 *
 * TOKENS ONLY (design review 2, D52). gerbs-tokens is a hard dependency of this handle, so
 * every colour, space, radius, shadow, font and focus ring is a token reference with NO
 * fallback: a fallback that disagrees with the token is worse than none, and the first build
 * shipped five that did plus one token that did not exist. Pins kept from the 2026-08-29
 * design review (D51): fine print --fs-12, chip labels --fs-14, card --radius-lg. Inputs use
 * --radius-sm per docs/DESIGN.md.
 *
 * THE PHONE CASCADE (D53): gerbs-skin.css forces `h2 { font-size: 34px !important }` inside
 * its phone media query, which inverted this card's hierarchy on every phone. The card owns
 * its own type below with a scoped rule carrying its own !important; measured, not assumed.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */
body.gerbs-login-v3 #et-main-area,
body.gerbs-login-v3 #main-content {
  background: var(--gerbs-fog);
}
.glv3-head {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4) var(--space-2);
}
.glv3-logo {
  display: inline-flex;
  line-height: 0;
  border-radius: var(--radius-sm);
}
.glv3-logo img {
  width: 84px;
  height: 48px;
}
.glv3-foot {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4) var(--space-10);
  font-size: var(--fs-14);
}
.glv3-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--gerbs-ink-70);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Focus: the system ring, everywhere in the shell (DESIGN.md rule 3). */
.glv3-logo:focus-visible,
.glv3-foot a:focus-visible,
.glv3-link:focus-visible,
.glv3-fineprint a:focus-visible,
.glv3-field .g-field__input:focus-visible,
.glv3-code__box:focus-visible,
.glv3-step__h:focus-visible,
.glv3-card .g-btn:focus-visible,
.glv3-pwform .input-text:focus-visible,
.glv3-pwform button:focus-visible,
.glv3-pwform input[type="checkbox"]:focus-visible,
.glv3-card--lostpw .input-text:focus-visible,
.glv3-card--lostpw button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.glv3-step__h:focus {
  outline: none; /* programmatic focus on the step heading is announced, not drawn (D53) */
}

/* Visited links keep a distinct colour (universal rule); never on buttons. */
a.glv3-link:visited,
.glv3-fineprint a:visited,
.glv3-foot a:visited {
  color: var(--gerbs-blue-press);
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.glv3-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-4) var(--space-4);
}
/* Desktop: the card is centred in the space between the logo header and the shell footer, so
   its centre stays put when the code step drops the strip and fine print (D47). On phones the
   card is taller than the viewport and this is inert. */
@media (min-width: 721px) {
  .glv3-wrap {
    align-items: center;
    min-height: calc(100dvh - 200px);
  }
}
.glv3-card {
  width: 100%;
  max-width: 440px;
  background: var(--gerbs-white);
  border: 1px solid var(--gerbs-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  color: var(--gerbs-ink);
}
@media (max-width: 480px) {
  /* Phones: Divi's own row gutter (.et_pb_row margin 3.5%, about 13px each side at 375) is
     the outer gutter, so the wrapper adds none. With both stacked the card was 317px at 375
     and each of the six code cells measured 41px, under the 44px target (D55, Codex 3). Now
     the card is 349px and a cell is 46px at 375, about 44px at 360. */
  .glv3-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .glv3-card {
    padding: var(--space-6);
  }
}
/* The card owns its own type. gerbs-skin.css forces `h1, h1 * { font-size: 36px !important }`
   site-wide and `32px !important` under 768px, which silently beat the sizes declared here
   (the H1 measured 36px on desktop and 32px on phones, never the 32 / 24 the card pins), so the
   title carries a scoped !important exactly as the h2 rule below does for the phone
   `h2 { 34px !important }` (D53). Found by /qa 2026-09-06 with a computed-style probe. Both
   pins go away together when the skin rules are retired (D55 follow-up in TODOS). */
.glv3-card .glv3-title {
  margin: 0 0 var(--space-5);
  font-family: var(--ff-display);
  font-size: var(--fs-32) !important;
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  color: var(--gerbs-ink);
}
.glv3-card .glv3-step__h,
.glv3-card .glv3-strip__h {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-display);
  font-size: var(--fs-18) !important;
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--gerbs-ink);
}
@media (max-width: 720px) {
  .glv3-card .glv3-title {
    font-size: var(--fs-24) !important;
  }
}
.glv3-notices:empty {
  display: none;
}
.glv3-notices .woocommerce-error,
.glv3-notices .woocommerce-message,
.glv3-notices .woocommerce-info {
  margin: 0 0 var(--space-4);
}

/* Local definition: the full-width button modifier exists nowhere else on this page (D52). */
.glv3-card .g-btn--full {
  display: flex;
  width: 100%;
  justify-content: center;
}
.glv3-card .g-btn {
  min-height: 44px;
}

/* ── No-JS ─────────────────────────────────────────────────────────────── */
.glv3-noscript {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gerbs-blue-tint);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}
.glv3-noscript p {
  margin: 0 0 var(--space-3);
}

/* ── Social slot + divider (D22) ───────────────────────────────────────── */
.glv3-social {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.glv3-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-4);
  color: var(--gerbs-ink-70);
  font-size: var(--fs-14);
}
.glv3-or::before,
.glv3-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gerbs-hairline);
}

/* ── Email field + arrow submit ────────────────────────────────────────── */
.glv3-field .g-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}
.glv3-field__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.glv3-field .g-field__input {
  flex: 1;
  min-height: 44px;
  font-family: var(--ff-body);
  font-size: var(--fs-16); /* 16px: no iOS zoom */
  padding: 0 var(--space-4);
  border: 1px solid var(--gerbs-ink-20);
  border-radius: var(--radius-sm);
  background: var(--gerbs-white);
  color: var(--gerbs-ink);
}
.glv3-field.is-invalid .g-field__input {
  border-color: var(--gerbs-error);
  background: var(--gerbs-error-tint);
}
.glv3-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-4);
  white-space: nowrap;
}
.glv3-submit__arrow {
  width: 18px;
  height: 18px;
}
@media (max-width: 420px) {
  .glv3-submit__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .glv3-submit {
    padding: 0 var(--space-4);
  }
}

/* Error tier: the customer's input was wrong (invalid, wrong, expired, capped). */
.glv3-err[hidden] {
  display: none; /* author display:flex below would otherwise beat the UA [hidden] rule */
}
.glv3-err {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--gerbs-error);
}
.glv3-err::before {
  content: "!";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gerbs-error);
  color: var(--gerbs-white);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-align: center;
  margin-top: 2px;
}
/* Status tier: the system is talking (paused, security check, network, new code sent).
   Neutral, not red; the customer did nothing wrong (D50). */
.glv3-status[hidden] {
  display: none;
}
.glv3-status {
  display: block;
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gerbs-blue-tint);
  color: var(--gerbs-ink);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

/* ── Turnstile: reserved only while a visible challenge is mounted (D50) ── */
.glv3-turnstile {
  min-height: 0;
  margin: 0;
}
.glv3-turnstile.is-visible {
  min-height: 65px;
  margin: var(--space-3) 0 var(--space-1);
}

/* ── Fine print (decision 2, D49) ─────────────────────────────────────── */
.glv3-fineprint {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--gerbs-ink-70);
  text-wrap: pretty;
}
.glv3-fineprint a {
  color: inherit;
  text-decoration: underline;
}

/* ── Trust strip (decisions 4, 6, 7): one flat region below a hairline ─── */
.glv3-strip {
  margin-top: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--gerbs-hairline);
}
.glv3-strip__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.glv3-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--gerbs-ink);
}
.glv3-chip__icon {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--gerbs-blue);
  line-height: 0;
}
.glv3-chip__icon svg {
  width: 32px;
  height: 32px;
}
.glv3-chip__sub {
  display: block;
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--gerbs-ink-70);
}
/* The two in-house roundels style their text through classes, not font attributes (D52). */
.glv3-mark__caps {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
}
.glv3-mark__small {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
}
.glv3-mark__big {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
}

/* ── Code step ─────────────────────────────────────────────────────────── */
.glv3-sentto {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--gerbs-ink-70);
}
.glv3-sentto [data-glv3-sentto] {
  color: var(--gerbs-ink);
  overflow-wrap: anywhere;
}
.glv3-link--inline {
  white-space: nowrap; /* a short atomic UI label; domain length must not decide the layout (D46) */
}
.glv3-code {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
  min-width: 0;
}
.glv3-code__boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (max-width: 420px) {
  .glv3-code__boxes {
    gap: var(--space-1); /* six cells clear 44px each on a 375px phone */
  }
}
.glv3-code__box {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  border: 1px solid var(--gerbs-ink-20);
  border-radius: var(--radius-sm);
  background: var(--gerbs-white);
  color: var(--gerbs-ink);
  caret-color: var(--gerbs-blue);
}
.glv3-code.is-invalid .glv3-code__box {
  border-color: var(--gerbs-error);
}
/* One line is always reserved under the boxes, so an error never moves the button (D46). */
.glv3-feedback {
  min-height: calc(var(--fs-14) * 1.5 + var(--space-2));
}
.glv3-resend {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-14);
  text-align: center;
}
.glv3-resend.is-emphasized .glv3-link {
  font-weight: var(--fw-semibold);
}
/* Where-to-look hint: quieter than the resend control above it, since it is reference text
   the customer reads only when the code has not turned up. Two lines are RESERVED from
   code-step open and the text is revealed by visibility, so nothing below it ever moves
   (the D46 reserved-line rule, applied to the hint by plan-design-review 2026-09-07 D3).
   INVARIANT: the reservation is TWO lines at 42ch, so every i18n.hint string must fit in
   84 characters with a clean break (the longest today is 74); the smoke pins the length.
   🚨 CASCADE TRAP, measured on slot1 2026-09-07: as a bare `.glv3-hint` (0,1,0) this rule
   LOST to the theme's `.entry-content p { font-size: 15px }` (style.css, 0,1,1) and to
   Divi's `p { padding-bottom: 1em }`, so the hint rendered at 15px / 22.5px lines with a
   15px bottom pad: two lines = 60px against a 42px reservation computed from the 14px it
   declares, and the reveal pushed the password link down (18px in a 720px viewport, 9px
   when the centred card absorbed half). The e2e no-shift assertion caught it. Hence the
   `.glv3-card` prefix (0,2,0) and the explicit padding: 0, so the reservation and the
   render are computed from the same numbers. Same family as the gerbs-skin h1/h2 traps. */
.glv3-card .glv3-hint {
  margin: var(--space-2) auto 0;
  padding: 0;
  max-width: 42ch;
  /* Two line boxes. The em calc is the fallback for engines without the lh unit (iOS < 16.4)
     and tracks the USED font size, so a browser minimum font size or iOS text inflation grows
     the reservation with the text; a rem calc would not (Grok 4.6 #3). 2lh, where supported,
     tracks the used line box exactly (Grok 4.5 #2). text-size-adjust is pinned so iOS cannot
     inflate the text without inflating the box. text-wrap stays at its default on the hint:
     the orphan-avoiding value can add a line and defeat the reservation, and this is helper
     text, not a heading (Grok 4.5 #3; the smoke greps this block for that value, so this
     comment must not name it). */
  min-height: calc(2em * var(--lh-normal));
  min-height: 2lh;
  -webkit-text-size-adjust: 100%;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--gerbs-ink-70);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.glv3-card .glv3-hint.is-shown {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .glv3-card .glv3-hint {
    transition: none;
  }
}

/* ── Links and alternate actions: 44px hit areas, text-sized appearance ── */
.glv3-link {
  display: inline-block;
  background: none;
  border: 0;
  padding: var(--space-3) var(--space-1);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-1));
  font: inherit;
  line-height: var(--lh-normal);
  color: var(--gerbs-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.glv3-link:disabled {
  color: var(--gerbs-ink-70);
  text-decoration: underline;
  text-decoration-color: var(--gerbs-ink-20);
  cursor: default;
}
.glv3-alt {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-14);
}
.glv3-alt + .glv3-alt {
  margin-top: var(--space-2);
}
[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
.glv3-step[hidden] {
  display: none !important;
}

/* ── Password view + lost-password wrappers: stock WooCommerce forms inside the card ──
   Specificity is deliberately above WooCommerce's `.woocommerce form.login` (0,2,1) so the
   card, not the theme, owns the look (D51; wrap-only ownership per D33 is unchanged). */
.glv3-card .glv3-pwform form.woocommerce-form-login,
.glv3-card.glv3-card--lostpw form.woocommerce-ResetPassword {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  /* gerbs-skin.css pins `body .woocommerce .woocommerce-form-login { height: 340px }`. The
     card's form is 290px of content, so the fixed box left ~50px of dead space between the
     Sign in button and the Forgot link, and would overflow onto the links the moment a label
     wraps (found by /qa 2026-09-06, measured at 375 and 1280). */
  height: auto;
  min-height: 0;
}
.glv3-card .glv3-pwform .form-row,
.glv3-card.glv3-card--lostpw .form-row {
  float: none;
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.glv3-card .glv3-pwform .form-row label,
.glv3-card.glv3-card--lostpw .form-row label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.glv3-card .glv3-pwform .input-text,
.glv3-card.glv3-card--lostpw .input-text {
  width: 100%;
  min-height: 44px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  padding: 0 var(--space-4);
  border: 1px solid var(--gerbs-ink-20);
  border-radius: var(--radius-sm);
  background: var(--gerbs-white);
  color: var(--gerbs-ink);
}
.glv3-card .glv3-pwform .password-input {
  display: block;
  width: 100%;
}
.glv3-card .glv3-pwform .woocommerce-form-login__submit,
.glv3-card.glv3-card--lostpw .woocommerce-Button {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  background: var(--gerbs-blue);
  color: var(--gerbs-white);
  border: 0;
  border-radius: var(--radius-atc);
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.glv3-card .glv3-pwform .woocommerce-form-login__submit:hover,
.glv3-card.glv3-card--lostpw .woocommerce-Button:hover {
  background: var(--gerbs-blue-hover);
}
/* Remember me: a system checkbox with a 44px hit area. */
.glv3-card .glv3-pwform .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-14);
  font-weight: 400;
  cursor: pointer;
}
.glv3-card .glv3-pwform .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--gerbs-blue);
  cursor: pointer;
}
.glv3-card .glv3-pwform .lost_password {
  display: none; /* the card offers its own Forgot link below the form */
}
.glv3-card.glv3-card--lostpw > p:first-of-type,
.glv3-card.glv3-card--lostpw .glv3-lostpw__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}