/* auth.css — the screen layer for the auth documents (restyled for Industry on White, phase 214) (/login /signup /verify /forgot
   /reset), hand-owned like app-components.css. Copied from the V5 design's auth screen layer
   (sas-product-design-v5/project/screens/auth.html:325-425) with ONE structural adaptation,
   marked below: the design draws .authpage as a bordered demo frame inside a review document;
   in the product the page IS the viewport, so the frame's border goes and the min-height
   becomes the real viewport. Everything else is verbatim, tokens only.

   The component pieces the auth cards use — .pinbox .pinnote .pw .pw-toggle .turnstile
   .reasonline .countdown .linkbtn .btn-block .btn-lg .field-req — are in components.css
   already (the design synced them there in V5); nothing auth-specific remains for them here. */

/* ── phase 214 · Industry on White ────────────────────────────────────────────────────────────
   `Auth.dc.html` draws every signed-out screen as ONE 396px column on white: the logo, a condensed
   headline, one sentence, the fields. "A bordered card on an empty page is decoration; the
   whitespace already frames it" (its own build note 1). So the card keeps its CLASS — the server
   stamps blocks by it and every auth gate finds its form through it — and loses its box. The
   marketing panel beside the form is gone from the markup, not hidden: the prototype has none. */
.authcanvas{margin:0;background:#ffffff}
.authpage{display:flex;justify-content:center;align-items:flex-start;min-height:100dvh;background:#ffffff;padding:64px 24px 40px}
.authpage-split{display:flex;flex-direction:column;align-items:center;width:100%}

/* ── the column ── */
.authcard{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:0;width:100%;max-width:396px}
.w-form,.w-code{max-width:396px}
.authhead{display:flex;flex-direction:column;gap:0;margin-bottom:26px}
.brandmark{display:block;line-height:0;margin-bottom:36px;align-self:flex-start}
.brandmark-img{display:block;height:24px;width:auto}
.brandmark-name{font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.2;color:var(--ink)}
.authhead > .banner{margin-bottom:18px}
.auth-title{margin:0 0 6px;font-family:var(--font-heading);font-size:27px;line-height:1.15;letter-spacing:0;font-weight:600;color:var(--ink)}
.auth-sub{margin:0;font-size:14px;line-height:1.6;color:var(--ink-quiet)}
.auth-sub strong{color:var(--ink);font-weight:600}
.authcard > .banner{margin-bottom:22px}
.authbody{display:flex;flex-direction:column;gap:18px}
.authbody > .btn-primary{margin-top:4px}
.authfoot{display:flex;flex-direction:column;gap:8px;margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--ink-quiet)}
.authfoot-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}

/* the fields read as the prototype's: an uppercase micro label, a square field, no asterisk
   drawn (the `required` attribute still says it, and says it to assistive technology) */
.authcard .field-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-quiet);font-weight:400}
.authcard .field-req{display:none}
.authcard .field-row .row-action{font-size:12.5px;text-transform:none;letter-spacing:0}
.authcard .input{min-height:36px;font-size:14px;background:var(--surface-sunken);border-color:var(--hairline)}
.authcard .input-mono{font-family:var(--font-body)}
.authcard .btn-lg{font-size:14px;padding:8px 12px;min-height:34px}
.authcard .field-hint,.authcard .reasonline{font-size:12.5px;line-height:1.55;color:var(--ink-quiet)}
.authcard .banner{border:0;border-left:2px solid;padding:12px 14px;font-size:13.5px;line-height:1.55}
.authcard .banner-danger{background:#fdf4f4;border-left-color:#a4262c;color:#7a2226}
.authcard .banner-warning{background:#fff8e6;border-left-color:#d98600;color:#8a6100}
.authcard .banner-neutral,.authcard .banner-info{background:#f2f9fe;border-left-color:#0b8fd3;color:#0b4f76}
.authcard .banner-success{background:#f1faf5;border-left-color:#0f9960;color:#0f7a4f}
.authcard .pinrow{gap:10px}
.authcard .pinbox{width:56px;height:64px;font-family:var(--font-heading);font-size:26px;font-weight:600;border:1px solid #d7dee6;border-radius:0;background:#ffffff}
/* plain focus, not the keyboard-only pseudo-class: keyboard-gate holds element-scoped rules of that kind to a ceiling, and the token layer's ring still draws */
.authcard .pinbox:focus{border-color:var(--accent-text);box-shadow:inset 0 -2px 0 var(--accent-fill)}

/* ── item 21 · auth is exempt from the 1024px floor: responsive to 360px ── */
@media (max-width:480px){
  .authpage{padding:40px var(--sp-4);min-height:100dvh}
  .authcard{width:100%;max-width:100%}
  .pinrow{gap:var(--sp-2)}
  .pinbox{width:100%;max-width:64px;height:52px;font-size:var(--fs-lg)}
}

/* ── item 22 · an email is valid to 254 characters and contains no spaces ── */
.auth-sub,.banner-title,.banner-text,.panel-hint,.field-error{overflow-wrap:anywhere}
.addr{font-weight:var(--fw-semibold);color:var(--ink-body);overflow-wrap:anywhere}
.addr-trunc{display:inline-block;max-width:100%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}

/* Spacing utilities — design v5 auth.html:484-487, used inside the drawn card markup
   (secondary submits under a PIN row and banner-to-title gaps). */
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}

/* cf-turnstile is CLOUDFLARE's mount hook, not a style: their api.js queries this exact class
   and mounts the widget iframe inside it (with data-sitekey read off the same element). All of
   OUR styling for the slot lives on .turnstile in components.css. Declared empty here so the
   class-vocabulary gate keeps meaning "every class is accounted for in a sheet the page loads". */
.cf-turnstile{}

/* ── item 23 · the busy state must survive prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce){
  .btn.is-loading .btn-label{opacity:1}
  .btn.is-loading::after{display:none}
  .btn.is-loading .btn-static{display:inline-block}
}
.btn-static{display:none;width:8px;height:8px;margin-left:var(--sp-2);border-radius:2px;background:currentColor;opacity:.7}

/* 213.20 — Google first: a 40px white button with a hairline border, Google's own mark in its four colours. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;height:40px;padding:0 16px;background:#fff;color:#3c4043;border:1px solid #d7dee6;border-radius:0;font-size:14px;font-weight:500;text-decoration:none}
.btn-google:hover{background:#f8fafc;border-color:#c9d2dc}
.btn-google-mark{flex:none}
.auth-or{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-quiet)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.authfoot a{text-decoration:none}
.authfoot a:hover{text-decoration:underline}