/* Customer auth presentation — storefront palette, Italiana + DM Sans.
   Shared by the five auth pages. The account surface has its own stylesheet
   (account.css) since Phase 5.2; /account.html is now only a redirect stub and
   carries no account styling at all. */
:root {
  --color-black: #0b0a09;
  --color-champagne: #cba45c;
  --color-ivory: #f2eee6;
  --font-sans: "DM Sans", Arial, sans-serif;
  --font-serif: "Italiana", Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-black); color: var(--color-ivory); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; }
button, input { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.auth-page__background { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 10% 15%, #29221755, transparent 60%); }
.auth-page { position: relative; min-height: 100svh; padding: 0 clamp(24px, 5vw, 96px) 64px; display: grid; align-items: start; }
.auth-page__container { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-header { grid-column: 1 / -1; min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; border-bottom: 1px solid #f2eee626; }
.auth-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.auth-logo__mark { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.auth-logo__text { font-size: 13px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.auth-logo__text em { color: var(--color-champagne); font-family: var(--font-serif); font-size: 17px; font-weight: 400; letter-spacing: 0; margin-left: 3px; }
.auth-back-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: #d0c5b1; text-decoration: none; font-size: 12px; letter-spacing: .055em; }
/* Hovers across this file are gated on `hover: hover` for the same reason they
   are in the storefront stylesheets: a tap latches `:hover`, and the latched
   state then survives as the visitor scrolls away. `:focus-visible` stays
   outside the guard so the keyboard rings below still reach every control, and
   the links and the password toggle — the controls a touch visitor actually
   presses — gain an `:active` colour so the press answers without it. */
.auth-back-link:active { color: #f2eee6; }
@media (hover: hover) {
  .auth-back-link:hover { color: #f2eee6; }
}
.auth-back-link span { font-size: 19px; }
.auth-story { position: relative; display: flex; min-height: 670px; overflow: hidden; isolation: isolate; background: #211b13; }
.auth-story__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; z-index: -2; }
.auth-story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0b0a0900 12%, #0b0a0933 35%, #0b0a09ed 100%); }
.auth-story__content { align-self: end; padding: clamp(32px, 4.2vw, 64px); padding-bottom: 74px; }
.auth-story__eyebrow { font-size: 10px; letter-spacing: .18em; color: #ddc398; margin: 0 0 24px; }
.auth-story h2 { font: 400 clamp(44px, 5.2vw, 76px)/.98 var(--font-serif); letter-spacing: -.035em; margin: 0; }
.auth-story h2 em { color: #d3b174; font-weight: 400; }
.auth-story__note { color: #d1cabe; font-size: 14px; line-height: 1.7; margin: 26px 0 0; }
.auth-story__signature { position: absolute; bottom: 24px; left: clamp(32px, 4.2vw, 64px); font-size: 9px; letter-spacing: .22em; color: #b8a88f; }
.auth-card { min-width: 0; background: var(--color-ivory); color: #201d18; padding: 52px clamp(32px, 4.4vw, 68px); display: flex; flex-direction: column; justify-content: center; border-top: 2px solid var(--color-champagne); }
.auth-card:focus { outline: none; }
.auth-title-block { margin-bottom: 30px; }
.auth-title { font: 400 clamp(36px, 3.3vw, 49px)/1.06 var(--font-serif); letter-spacing: -.035em; margin: 0 0 15px; text-wrap: balance; }
.auth-subtitle { margin: 0; color: #615a50; font-size: 14px; line-height: 1.7; max-width: 36ch; }
.auth-email-display { display: block; overflow-wrap: anywhere; margin-top: 8px; }
.auth-email-display:empty { display: none; }
.auth-form { display: flex; flex-direction: column; gap: 22px; }
.form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-label { font-size: 12px; font-weight: 500; letter-spacing: .025em; }
.form-input-wrapper { position: relative; }
.form-input { width: 100%; min-width: 0; height: 54px; background: #fcfaf6; color: #201d18; border: 1px solid #b7ac9a; border-radius: 0; padding: 0 15px; font-size: 16px; transition: border-color .18s, box-shadow .18s; scroll-margin-block: 24px; }
.form-input::placeholder { color: #7d7469; opacity: 1; }
.form-input-wrapper:has(.password-toggle) .form-input { padding-right: 58px; }
.form-input:focus { outline: 2px solid #98713c; outline-offset: 2px; border-color: #98713c; }
@media (hover: hover) {
  /* No `:active` twin: tapping a text input focuses it, and `:focus` above
     already carries the border. */
  .form-input:hover { border-color: #8f7b5b; }
}
.form-input[aria-invalid="true"] { border-color: #a1392b; background: #fff8f3; color: #201d18; }
.form-input:-webkit-autofill { -webkit-text-fill-color: #201d18; box-shadow: 0 0 0 1000px #fcfaf6 inset; }
.password-toggle { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 0; background: transparent; color: #625540; cursor: pointer; }
.password-toggle:active { background: #e9e0d2; color: #201d18; }
@media (hover: hover) {
  .password-toggle:hover { background: #e9e0d2; color: #201d18; }
}
.password-toggle svg { width: 21px; height: 21px; }
.form-hint { display: flex; flex-wrap: wrap; font-size: 12px; color: #686052; margin-top: 1px; }
.form-hint__item { display: inline-flex; align-items: center; gap: 6px; }
.form-hint__item--met { color: #326148; }
.form-hint svg { flex: 0 0 14px; }
.form-error { color: #972f23; font-size: 12px; display: flex; align-items: start; gap: 6px; }
.form-error svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.form-options { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: -12px; }
.checkbox-wrapper { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; }
.checkbox-wrapper input { accent-color: #79613d; width: 18px; height: 18px; }
.link-understated, .auth-footer__link { display: inline-flex; align-items: center; min-height: 44px; color: #66502e; text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 13px; }
.link-understated:active, .auth-footer__link:active { color: #201d18; }
@media (hover: hover) {
  .link-understated:hover, .auth-footer__link:hover { color: #201d18; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; height: auto; padding: 14px 18px; font: 500 12px/1.5 var(--font-sans); letter-spacing: .075em; text-transform: uppercase; text-align: center; text-decoration: none; border-radius: 0; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.btn--primary { background: #201b14; border: 1px solid #201b14; color: #f2eee6; }
.btn--secondary { background: transparent; border: 1px solid #99856a; color: #51422c; }
/* The button's press feedback is the existing `.btn:active` transform, so these
   two only need the guard — the colour flourish is for a pointer. */
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { background: #78603b; border-color: #78603b; }
  .btn--secondary:hover:not(:disabled) { background: #e6ddcd; }
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: #ddd4c6; color: #51483b; border-color: #c0b19c; cursor: wait; }
.btn[aria-busy="true"]::after { content: "Please wait"; }
.btn__spinner { width: 20px; height: 20px; flex-shrink: 0; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid #cfc4b4; }
.auth-footer__text { margin: 0; color: #615a50; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.auth-alert { display: flex; align-items: start; gap: 10px; padding: 14px; margin: 0 0 22px; border: 1px solid; border-left-width: 3px; font-size: 13px; overflow-wrap: anywhere; }
.auth-alert__icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.auth-alert--error { color: #84291f; background: #f9e7df; border-color: #b97866; }
.auth-alert--success { color: #28573c; background: #e6eee2; border-color: #7b9c7a; }
.auth-alert--info { color: #64502e; background: #ebe2cd; border-color: #a18d65; }
/* Phase 5.6 — the guest wishlist merge note.
   A negative top margin so it tucks under the auth alert above it instead of
   leaving 22px of dead air between two related messages, and a smaller bottom
   margin for the same reason: the alert and the note are one piece of news, and
   the form below them is the next thing.
   The tone is deliberately --info and never --error or --success. The sign-in
   already told the customer they are signed in; a red box here would contradict
   that, and a green one would understate a merge that lost pieces. */
.wishlist-merge-note { margin: -10px 0 22px; }
/* Phase 5.8 — the third-party provider controls.
   -------------------------------------------------------------------------
   Everything here is subordinate to the email/password form above it, and the
   styling says so: the buttons are `.btn--secondary` — outlined, not filled —
   and they sit UNDER the primary submit, behind a hairline separator. A
   customer who came here to type a password must never be steered at Google by
   the layout, and a customer who came here for Google must still be able to
   find the form they can fall back to.
   The whole block is absent, not hidden, when no provider is configured: the
   markup carries `hidden` and oauth-controls.mjs is the only thing that clears
   it, so an unconfigured project renders the page exactly as signed off in 5.1
   — no separator, no gap, no empty box. */

/* The relay warning. Its own tone, between --info and --error: what it reports
   is neither a failure nor a neutral note. It is a real risk the customer has
   not hit yet, and colouring it red would say the sign-in went wrong — which is
   the one thing it must not say, because the sign-in is exactly what worked. */
.auth-alert--warning { color: #6b4a12; background: #f6ecd6; border-color: #c19a4e; }
/* Tucks under whatever is above it, for the same reason .wishlist-merge-note
   does: two related messages with 22px of dead air between them read as two
   unrelated events. */
.relay-note { margin: -10px 0 22px; }

.auth-separator { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: #8a7f6d; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.auth-separator::before, .auth-separator::after { content: ""; flex: 1 1 auto; height: 1px; background: #cfc4b4; }
.auth-separator span { flex: 0 0 auto; }

.auth-providers { display: grid; gap: 12px; }
.provider-mark { width: 18px; height: 18px; flex: 0 0 18px; }
/* The button's own label already says what is happening ("Opening…"), so the
   generic busy suffix that .btn adds for a form submit would say it twice —
   "Opening…Please wait" is both redundant on screen and read out twice. */
.auth-provider[aria-busy="true"]::after { content: none; }

/* The callback page's "Try again". A plain block with a top margin; the anchor
   inside carries the button styling so it keeps the 54px target and the focus
   ring every other control on these pages has. */
.callback-actions { margin: 22px 0 0; }
.auth-icon-block { text-align: left; }
.auth-icon { width: 42px; height: 42px; display: block; color: #806238; margin: 0 0 24px; }
.auth-actions { display: grid; gap: 14px; }
:focus-visible { outline: 2px solid #98713c; outline-offset: 4px; }
.auth-header :focus-visible { outline-color: #d3b174; }
.auth-skip-link { position: fixed; z-index: 5; top: -80px; left: 16px; padding: 12px 18px; background: #f2eee6; color: #201d18; }
.auth-skip-link:focus { top: 12px; }
@media (min-width: 1600px) { .auth-header { margin-bottom: 64px; } .auth-page { padding-bottom: 80px; } .auth-story { min-height: 730px; } }
@media (max-width: 1023px) and (min-width: 701px) {
  .auth-page { padding-inline: 24px; }
  .auth-page__container { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .auth-card { padding: 36px 28px; }
  .auth-story__content { padding-inline: 28px; }
  .auth-story__eyebrow { line-height: 1.9; }
  .auth-story h2 { font-size: 43px; }
}
@media (max-width: 700px) {
  .auth-page { padding: 0 16px 32px; }
  .auth-page__container { grid-template-columns: minmax(0, 1fr); }
  .auth-header { min-height: 90px; margin-bottom: 20px; gap: 8px; }
  .auth-logo { gap: 7px; }
  .auth-logo__mark { width: 34px; height: 38px; }
  .auth-logo__text { font-size: 10px; letter-spacing: .045em; }
  .auth-logo__text em { display: block; font-size: 14px; line-height: 1.2; margin: 0; }
  .auth-back-link { font-size: 11px; gap: 6px; }
  .auth-story { min-height: 168px; }
  .auth-story__image { object-position: 65% 49%; }
  .auth-story::after { background: linear-gradient(90deg, #0b0a09d9, #0b0a091a); }
  .auth-story__content { align-self: center; padding: 22px; }
  .auth-story__eyebrow { display: none; }
  .auth-story h2 { font-size: 38px; }
  .auth-story__note, .auth-story__signature { display: none; }
  .auth-card { padding: 30px 24px; }
  .auth-title { font-size: 36px; }
  .auth-subtitle { font-size: 13px; }
  .auth-title-block { margin-bottom: 26px; }
  .auth-form { gap: 20px; }
  .auth-footer { margin-top: 24px; padding-top: 14px; }
  .auth-footer__text { font-size: 12px; }
  .auth-icon { width: 34px; height: 34px; margin-bottom: 20px; }
}
@media (max-width: 359px) {
  .auth-page { padding-inline: 12px; }
  .auth-card { padding-inline: 20px; }
  .auth-header { gap: 4px; }
  .auth-back-link { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .form-input, .btn { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; } }