/*
 * Sign-in pages (Sunrise card template, sunrise/auth/*.blade.php, behind config('redesign.auth')).
 *
 * Source: the handoff docs/redesign/010-auth/mockup-draft-v2-2026-11-11/ (the <style> block of
 * approved-mockup.fragment.html), reformatted one rule per line and adapted to the template's class
 * names: the mockup's ".auth-page .gpn-design.auth" page wrap is ".auth-page .auth" (.gpn-design is not
 * used), and its ".auth-page .gpn-design X" rules are ".auth-page X". The mockup's later overrides (radius
 * tokens, the 52px primary button, the centred provider column) are folded into the rules they override.
 * Left out: the review bar, the captcha slot (switch removed), the banner catalogue, the skip link and
 * the chrome / header / footer overrides (sunrise.layout owns the chrome, outside .auth-page), dialog,
 * .pill and .section-head (no page uses them).
 *
 * The whole component set for the six pages is here (T1), so the later tasks only add markup: card,
 * intro, banner, field, check, buttons, divider, providers, account invite, login options, account type
 * options, field pairs, privacy line, form end, the code field, two-step links, delivery panel, resend
 * tools, survey, change email, seller note, page banner.
 *
 * Every selector starts with .auth-page and every colour is a var(--sr-*) token that
 * resources/css/sunrise.css defines (tests/Feature/AuthTemplateFlagTest checks both, and greps for
 * literal colours). Radii use the live radius tokens.
 *
 * Bump config('gpnow.auth.asset_version') whenever this file changes.
 */

/* Error tone (decision X1). Moves to sunrise.css when the shared --sr-danger token lands. */
.auth-page{--sr-danger:var(--sr-pill-text-pink)}

/* Base */
.auth-page{margin:0;background:var(--sr-ground);color:var(--sr-body);font:15px/1.6 var(--sr-font-body);scroll-behavior:auto}
.auth-page *{box-sizing:border-box}
.auth-page [hidden]{display:none!important}
.auth-page button,.auth-page input,.auth-page textarea,.auth-page select{font:inherit}
.auth-page button,.auth-page a,.auth-page input,.auth-page select,.auth-page textarea,.auth-page summary{-webkit-tap-highlight-color:var(--sr-surface)}
.auth-page :focus-visible{outline:3px solid var(--sr-accent)!important;outline-offset:4px!important}
.auth-page button{cursor:pointer}
.auth-page button:disabled{cursor:not-allowed;opacity:1}
.auth-page a{color:var(--sr-accent)}
.auth-page img{max-width:100%}
.auth-page .sr-only,.auth-page .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Type */
.auth-page h1,.auth-page h2,.auth-page h3{font-family:var(--sr-font-display);color:var(--sr-ink);font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:0}
.auth-page h1{font-size:40px}
.auth-page h2{font-size:24px}
.auth-page h3{font-size:18px}
.auth-page p{margin:0}
.auth-page .muted{color:var(--sr-muted)}
.auth-page .tiny{font-size:12px}
.auth-page .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sr-accent);margin-bottom:10px}

/* Buttons and links. An <a class="btn"> looks the same as a <button class="btn">. */
.auth-page .btn{display:inline-flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--sr-line);border-radius:var(--sr-radius-button);padding:10px 17px;background:var(--sr-surface);color:var(--sr-ink);font-weight:700;line-height:1.4;text-decoration:none;text-align:center}
.auth-page .btn:hover{background:var(--sr-soft)}
.auth-page .btn.primary{min-height:52px;font-size:16px;background:var(--sr-action);border-color:var(--sr-action);color:var(--sr-on-action)}
.auth-page .btn.primary:hover{background:var(--sr-action);text-decoration:underline;text-underline-offset:4px}
.auth-page .btn.danger{border-color:var(--sr-danger);color:var(--sr-danger)}
.auth-page .btn.quiet{border-color:var(--sr-surface);color:var(--sr-muted)}
.auth-page .btn[aria-pressed=true]{background:var(--sr-accent-wash);border-color:var(--sr-section-line);color:var(--sr-accent)}
.auth-page .btn:disabled,.auth-page .btn[aria-disabled=true]{background:var(--sr-soft);color:var(--sr-muted);border-color:var(--sr-line)}
.auth-page .btn.primary[aria-busy=true]{background:var(--sr-action);border-color:var(--sr-action);color:var(--sr-on-action);cursor:progress}
.auth-page .text-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-weight:600;text-underline-offset:4px}
.auth-page .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.auth-page .full{width:100%}
.auth-page .stack{display:grid;gap:12px}
.auth-page .section{margin-top:28px}

/* Banner: one component, four tones (sunrise/auth/banner). --sr-banner-color is local to .banner. */
.auth-page .banner{--sr-banner-color:var(--sr-accent);display:flex;gap:12px;align-items:flex-start;border:1px solid var(--sr-line);border-left:3px solid var(--sr-banner-color);background:var(--sr-soft);border-radius:var(--sr-radius-small);padding:16px;margin-bottom:24px;color:var(--sr-body)}
.auth-page .banner strong,.auth-page .banner .banner-icon{color:var(--sr-banner-color)}
.auth-page .banner.error{--sr-banner-color:var(--sr-danger)}
.auth-page .banner.success{--sr-banner-color:var(--sr-protected)}
.auth-page .banner.warning{--sr-banner-color:var(--sr-amber)}
.auth-page .banner-icon{width:24px;height:24px;flex:0 0 24px;border:1px solid var(--sr-banner-color);border-radius:var(--sr-radius-pill);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.auth-page .banner>div{min-width:0;overflow-wrap:anywhere}
.auth-page .banner strong{display:block}
.auth-page .banner p{margin-top:2px}
.auth-page .banner a{color:var(--sr-banner-color)}
.auth-page .banner ul{list-style:disc;padding:0 0 0 18px;margin:8px 0 0}
.auth-page .banner li a{display:block;min-height:44px;padding-top:8px}

/* Fields (sunrise/auth/field). align-content:start keeps a pair's inputs level (decision A1). */
.auth-page .field{display:grid;gap:7px;align-content:start;margin-bottom:18px}
.auth-page .field>label{font-weight:700;font-size:13px;color:var(--sr-ink)}
.auth-page input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.auth-page textarea,.auth-page select{width:100%;min-width:0;border:1px solid var(--sr-muted);border-radius:var(--sr-radius-small);min-height:48px;padding:12px 14px;background:var(--sr-surface);color:var(--sr-ink);line-height:1.45}
.auth-page input::placeholder,.auth-page textarea::placeholder{color:var(--sr-muted)}
.auth-page input[aria-invalid=true],.auth-page textarea[aria-invalid=true]{border-color:var(--sr-danger)}
.auth-page .error-line{min-height:0;color:var(--sr-danger);font-size:12px}
.auth-page .field-help{color:var(--sr-muted);font-size:12px}
.auth-page .check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px}
.auth-page input[type=checkbox],.auth-page input[type=radio]{appearance:auto;accent-color:var(--sr-accent);width:19px;height:19px;flex:0 0 19px;margin:0}
.auth-page fieldset{border:0;margin:0;padding:0;min-width:0}
.auth-page legend{font-size:13px;font-weight:700;color:var(--sr-ink);margin-bottom:12px}
.auth-page hr{border:0;border-top:1px solid var(--sr-line);margin:24px 0}
.auth-page .divider{display:flex;align-items:center;gap:12px;color:var(--sr-muted);font-size:12px;margin:24px 0}
.auth-page .divider:before,.auth-page .divider:after{content:'';flex:1;border-top:1px solid var(--sr-line)}

/* Disclosure (change email on /unconfirmed) */
.auth-page details>summary{min-height:44px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.auth-page summary::-webkit-details-marker{display:none}
.auth-page summary:after{content:'+';font-size:21px}
.auth-page details[open]>summary:after{content:'−'}
.auth-page details>div{padding-top:16px}

/* Page and card (sunrise/auth/card) */
.auth-page .auth{padding:48px 24px 72px;min-height:660px}
.auth-page .auth .auth-card{width:100%;max-width:520px;margin:0 auto;background:var(--sr-surface);border:1px solid var(--sr-line);border-radius:var(--sr-radius-card);padding:36px}
.auth-page .auth .auth-card.wide{max-width:610px}
.auth-page .auth .intro{margin-bottom:28px}
.auth-page .auth .intro h1{margin-bottom:12px;font-size:34px}
.auth-page .auth .intro>p:last-child{font-size:14px;color:var(--sr-muted)}
.auth-page .auth .card-mark{width:42px;height:42px;border-radius:var(--sr-radius-small);display:grid;place-items:center;background:var(--sr-accent-wash);color:var(--sr-accent);margin-bottom:20px}
.auth-page .auth .card-mark svg{width:22px;height:22px;fill:none;stroke:var(--sr-accent);stroke-width:1.6}
.auth-page .auth .card-section-title{font-size:13px;color:var(--sr-muted);margin-bottom:16px}
.auth-page .auth .auth-card h2.form-heading{font-size:24px;margin:0 0 18px}
.auth-page .auth .form-status:empty{display:none}

/* Log in */
.auth-page .auth .login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin:-2px 0 20px}
.auth-page .auth .login-options a{min-height:44px;display:flex;align-items:center;font-weight:600}

/* Providers (sunrise/auth/socials) */
.auth-page .auth .socials{display:grid;gap:10px;justify-items:center}
.auth-page .auth .provider{width:220px;max-width:100%;position:relative;font-weight:600;font-size:14px;min-height:46px;gap:10px}
.auth-page .auth .provider img{width:20px;height:20px;object-fit:contain}
.auth-page .auth .provider svg{width:20px;height:20px;flex:none}
.auth-page .auth .provider[data-provider=linkedin] svg{color:var(--sr-brand-linkedin)}
.auth-page .auth .provider[data-provider=facebook] svg{color:var(--sr-brand-facebook)}
.auth-page .auth .provider[data-provider=twitter] svg{color:var(--sr-brand-twitter)}
.auth-page .auth .provider.google{width:auto;padding:0;min-height:44px;border:0;background:var(--sr-surface)}
.auth-page .auth .provider.google img{width:auto;height:44px;max-width:100%}
.auth-page .auth .google-note{font-size:12px;text-align:center;color:var(--sr-muted);margin:12px 0 0}

/* Account invite under the log-in card */
.auth-page .auth .account-invite{max-width:520px;margin:18px auto 0;border:1px solid var(--sr-section-line);border-radius:var(--sr-radius-small);padding:20px 24px;background:var(--sr-accent-wash);display:flex;align-items:center;justify-content:space-between;gap:14px}
.auth-page .auth .account-invite h2{font-size:24px}
.auth-page .auth .account-invite p{font-size:12px;margin-top:4px}
.auth-page .auth .account-invite a{font-size:13px;white-space:nowrap}

/* Sign up */
.auth-page .auth .type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.auth-page .auth .type-option{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--sr-muted);border-radius:var(--sr-radius-small);padding:16px;cursor:pointer;min-height:104px}
.auth-page .auth .type-option input{margin-top:3px}
.auth-page .auth .type-option:has(input:checked){border-color:var(--sr-accent);background:var(--sr-accent-wash)}
.auth-page .auth .type-option b{font-size:14px;color:var(--sr-ink);display:block;margin-bottom:5px}
.auth-page .auth .type-option small{font-size:12px;color:var(--sr-muted);line-height:1.65;display:block}
.auth-page .auth .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.auth-page .auth .privacy{align-items:flex-start;margin:4px 0 20px}
.auth-page .auth .privacy input{margin-top:5px}
.auth-page .auth .privacy a{display:inline-flex;min-height:44px;align-items:center}
.auth-page .auth .privacy-error{margin:-16px 0 20px}
.auth-page .auth .privacy-error:empty{display:none}
.auth-page .auth #account-type-error{margin:-8px 0 16px}
.auth-page .auth .form-end{font-size:12px;color:var(--sr-muted);text-align:center;margin-top:18px}
.auth-page .auth .form-end a{display:inline-flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}

/* Two-step */
.auth-page .auth #code{font:500 28px/1.3 var(--sr-font-display);letter-spacing:.35em}
.auth-page .auth .two-step-links{display:grid;justify-items:center;gap:2px;margin-top:18px;font-size:12px}
.auth-page .auth .two-step-links form{margin:0;display:flex;justify-content:center}
/* Log out is a POST form; its <button class="text-link"> looks exactly like an <a class="text-link">. */
.auth-page button.text-link{border:0;background:none;padding:0;margin:0;font:inherit;font-weight:600;color:var(--sr-accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* Confirm your email */
.auth-page .auth .delivery{padding:18px;background:var(--sr-soft);border-radius:var(--sr-radius-small);margin:22px 0}
.auth-page .auth .delivery .address{font-weight:700;color:var(--sr-ink);overflow-wrap:anywhere}
.auth-page .auth .delivery .delivery-status{font-size:12px;color:var(--sr-protected);margin-top:5px}
.auth-page .auth .delivery .delivery-status.failed{color:var(--sr-danger)}
.auth-page .auth .delivery .delivery-address+.delivery-address{margin-top:14px;padding-top:14px;border-top:1px solid var(--sr-line)}
.auth-page .auth .survey>.error-line{display:block;margin:0 0 12px;font-size:13px}
.auth-page .auth .confirm-tools{margin-top:18px;display:grid;gap:10px}
.auth-page .auth .confirm-tools p{font-size:12px;color:var(--sr-muted)}
.auth-page .auth .survey{padding-top:24px;margin-top:28px;border-top:1px solid var(--sr-line)}
.auth-page .auth .survey h2{font-size:24px;line-height:1.4;margin-bottom:14px}
.auth-page .auth .survey-options{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;margin-bottom:16px}
.auth-page .auth .survey-options label{font-size:12px}
.auth-page .auth .survey .btn{margin-top:8px}
.auth-page .auth .email-change{border-top:1px solid var(--sr-line);margin-top:26px;padding-top:12px}
.auth-page .auth .email-change summary h2{font-size:24px}
.auth-page .auth .seller-note{margin-top:20px;font-size:13px;line-height:1.75;padding:16px;border-left:2px solid var(--sr-section-line);background:var(--sr-accent-wash)}

/* Page-level banner (T5, sunrise/auth/page-banner): on the page a confirmation or reset lands on, under
   the header, inside .sunrise-container (the header's content width, as the mockup's page-* states).
   The wrapper is .sunrise.auth-page.auth-page-banner with no .auth inside, so of this file only the
   base type rules and the .banner component reach it; it lets the landing page's own ground show. */
.auth-page.auth-page-banner{background:transparent;padding-top:32px}
.auth-page.auth-page-banner .banner{margin:0 0 8px}

@media(max-width:760px){
.auth-page .auth h2,.auth-page .auth .account-invite h2,.auth-page .auth .survey h2,.auth-page .auth .email-change summary h2,.auth-page .auth .auth-card h2.form-heading{font-size:21px}
}

@media(max-width:700px){
.auth-page h1{font-size:32px}
.auth-page h2{font-size:21px}
.auth-page .banner{padding:14px;gap:10px}
}

@media(max-width:600px){
.auth-page .auth{padding:28px 16px 48px}
.auth-page .auth .auth-card{padding:24px 20px}
.auth-page .auth .auth-card.wide{padding:24px 20px}
.auth-page .auth .intro{margin-bottom:24px}
.auth-page .auth .intro h1{font-size:30px}
.auth-page .auth .card-mark{margin-bottom:18px}
.auth-page .auth .type-options{grid-template-columns:1fr}
.auth-page .auth .type-option{min-height:88px;padding:14px}
.auth-page .auth .field-pair{grid-template-columns:1fr;gap:0}
.auth-page .auth .survey-options{grid-template-columns:1fr}
.auth-page .auth .account-invite{display:block;padding:20px}
.auth-page .auth .account-invite a{margin-top:8px}
.auth-page .auth .login-options{gap:6px;font-size:11px}
.auth-page .auth .login-options .check{font-size:12px}
.auth-page .auth .provider{font-size:13px}
.auth-page.auth-page-banner{padding-top:16px}
}