/* =====================================================================
   Auth pages: Create account, Sign in, Forgot / Reset password (Figma "Create Account / Sign In" 1327:54198,
   create flow 1474:41943 / 1472:41813 / 1472:41982, errors 1409:2 / 1409:3, reset 1409:49263).
   Pages, not modals: no close X. Card 552 (padding 32, gap 24, radius 16, Elevation/Card). Mobile: bottom sheet.
   Uses the shared Button (.btn) and Input (.input) components; only auth-specific parts live here.
   ===================================================================== */
body:has(.auth){background:var(--neutral-900)}
.auth{position:relative;min-height:100vh;box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start;padding:156px var(--space-24) var(--space-48)}

/* Background (1413:35161): 5 article slides, 0.6s dissolve; overlay = brown gradient 80% → 50% + 2px blur */
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--neutral-900)}
.auth-bg__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.auth-bg__slide.is-active{opacity:1}
.auth-bg__scrim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--neutral-700) 80%,transparent) 0%,color-mix(in srgb,var(--neutral-700) 50%,transparent) 100%);-webkit-backdrop-filter:blur(var(--blur-overlay));backdrop-filter:blur(var(--blur-overlay))}

/* Inverse navbar over the photo (1410:49153). Scoped so this sheet can load on every page. */
body:has(.auth) .nav,body:has(.auth) .nav.is-scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
body:has(.auth) .nav{padding-inline:0}
body:has(.auth) .nav .nav__inner,body:has(.auth) .nav.is-scrolled .nav__inner{background:transparent;box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
body:has(.auth) .nav__link,body:has(.auth) .nav__link[aria-current]{color:var(--neutral-0)}
body:has(.auth) .nav__link:hover{color:var(--neutral-0);opacity:.85}
body:has(.auth) .nav__actions .btn--ghost{color:var(--neutral-0)}

/* The page layer must not swallow clicks meant for the Featured card underneath */
.auth__main{position:relative;z-index:2;width:100%;display:flex;justify-content:center;pointer-events:none}

/* ---------- Card ---------- */
.auth-card{pointer-events:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-24);width:min(552px,100%);padding:var(--space-32);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--text-primary);font:var(--text-sm)}
.auth-card [hidden]{display:none!important}
.auth-view{display:flex;flex-direction:column;gap:var(--space-24)}
.auth-view--center{align-items:center;text-align:center}
.auth-view--center > *{width:100%}
.auth-head{display:flex;flex-direction:column;gap:var(--space-4);text-align:center}   /* Title and context: 4 apart in the sign in, reset, check email and expired frames (1409:879) */
[data-auth="create"] [data-view="form"] .auth-head{gap:var(--space-8)}   /* create step 1 and its errors draw 8 (1474:41949) */
.auth-title{margin:0;font:var(--text-4xl);text-transform:uppercase;color:var(--text-primary)}
.auth-title:focus{outline:none}
.auth-sub{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.auth-sub strong{font-weight:400;color:var(--text-primary)}
.auth-group{display:flex;flex-direction:column;gap:var(--space-12)}
.auth-view[data-view="follow"] .auth-group{gap:var(--space-24)}   /* Step 2 frames (Prompt 25): Continue and Skip 24 apart */
.auth-card .btn{width:100%;height:48px;padding:var(--space-12) var(--space-24);font:var(--text-sm)}
.auth-card .btn--ghost.auth-skip{height:48px}
.auth-card a.btn{text-decoration:none}
.auth-social{border-width:1.5px}
/* Prompt 28 review: every create / sign-in / reset frame (1474:41946, 2239:86971, 2239:119455) draws the social, primary and secondary
   buttons 48 tall (was 44); the Social sign up button has no Button/Surface shadow */
.auth-card .auth-social{box-shadow:none}
/* Check your email (1409:277): Open email app, then Resend email 24 below as a hug-width secondary button on the left */
.auth-view:is([data-view="sent"],[data-view="expired"]) .auth-group{gap:var(--space-24)}   /* the second button sits 24 under the first (1409:277, 1409:875) */
.auth-view[data-view="sent"] [data-resend]{width:auto;align-self:flex-start}
.auth-social img{flex:none;width:16px;height:16px}
:root[data-theme="dark"] .auth-social img[src$="apple.svg"]{filter:invert(1)}   /* the black Apple mark disappears on the Dark button (Prompt 28 review) */
.auth-or{display:flex;align-items:center;gap:var(--space-16);color:var(--text-secondary)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border-default)}
.auth-links{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.auth-link{padding:var(--space-4) var(--space-8);border:0;border-radius:var(--radius-sm);background:none;color:var(--text-secondary);font:var(--text-xs);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.auth-link:hover{color:var(--text-primary)}
.auth-link:focus-visible,.auth-inline a:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.auth-inline a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.auth-forgot{align-self:flex-end;margin-top:calc(var(--space-4) * -1)}

/* Mode toggle (instance "View=List"): Create account | Sign in, gold selected item */
.auth-toggle{align-self:center;display:inline-flex;gap:var(--space-2);padding:1px;   /* 1 + the 1px border = Figma 2 inside padding, 40 tall (Prompt 28 review) */
  border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);box-shadow:var(--shadow-button-default)}
.auth-toggle a{padding:var(--space-8) var(--space-20);border-radius:6px;color:var(--text-primary);font:var(--text-sm);text-decoration:none;white-space:nowrap}
.auth-toggle a:hover{background:var(--surface-background)}
.auth-toggle a[aria-current]{background:var(--accent-default);color:var(--accent-text)}
.auth-toggle a:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}

/* Inputs (Input 385:3556, Show label off: the label is for screen readers only) */
.auth-card .input{gap:var(--space-8)}
.auth-card .input__hint:empty{display:none}
.auth-card .input.is-error .input__control{border:1px solid var(--feedback-error)}
.auth-card .input.is-error .input__control:focus-within{border-width:2px}
.auth-card .input.is-disabled .input__control{background:var(--surface-background)}
.auth-eye{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:calc(-1 * var(--space-6));padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-secondary);cursor:pointer}
.auth-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.auth-eye .auth-eye__off,.auth-eye[aria-pressed=true] .auth-eye__on{display:none}
.auth-eye[aria-pressed=true] .auth-eye__off{display:block}
.auth-eye:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}

/* Newsletter checkbox (Email preference, Neutral, Light): 20px box, 1.5px border-strong, radius 4 */
.auth-check{position:relative;display:flex;align-items:center;min-height:40px;box-sizing:border-box;padding-block:var(--space-4);gap:var(--space-12);cursor:pointer;font:var(--text-sm);color:var(--text-primary)}
.auth-check input{position:absolute;left:0;top:50%;width:20px;height:20px;margin:-10px 0 0;opacity:0}
.auth-check__box{flex:none;display:grid;place-items:center;box-sizing:border-box;width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-default);color:var(--button-primary-text)}
.auth-check__box svg{width:14px;height:14px;opacity:0;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.auth-check:hover .auth-check__box{border-color:var(--neutral-400)}
.auth-check input:checked + .auth-check__box{background:var(--button-primary-bg);border-color:var(--button-primary-bg)}
.auth-check input:checked + .auth-check__box svg{opacity:1}
.auth-check input:focus-visible + .auth-check__box{box-shadow:var(--shadow-focus-ring-accent)}

/* Loading state on submit buttons (400 ms) */
.btn.is-loading{pointer-events:none;color:transparent!important;position:relative}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid currentColor;border-color:var(--button-primary-text) var(--button-primary-text) transparent transparent;border-radius:50%;animation:auth-spin .7s linear infinite}
.btn--secondary.is-loading::after{border-color:var(--text-primary) var(--text-primary) transparent transparent}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* Step progress: Back (24px chevron) + "N of 3" + 4px track, gap 8 */
.auth-progress{display:flex;align-items:center;gap:var(--space-8)}
.auth-progress__back{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-primary);cursor:pointer}
.auth-progress__back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.auth-progress__back:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.auth-progress__label{font:var(--text-xs);color:var(--text-secondary);white-space:nowrap}
.auth-progress__track{flex:1;height:4px;border-radius:var(--radius-full);background:var(--border-subtle);overflow:hidden}
.auth-progress__track i{display:block;height:100%;border-radius:inherit;background:var(--accent-default);transition:width .35s var(--ease-out)}
.auth-progress--mobile{display:none}

/* Step 2: search + scrolling list of Follow Items (Compact), 264px, bottom fade 72px, thin scrollbar */
.auth-search .input__icon{width:18px;height:18px}
.auth-list{position:relative}
.auth-list__scroll{height:264px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.auth-list__scroll::-webkit-scrollbar{width:4px}
.auth-list__scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}
.auth-list__items{display:flex;flex-wrap:wrap;gap:var(--space-8);align-content:flex-start;padding:var(--space-4) var(--space-12) var(--space-72) var(--space-4)}
.auth-list::after{content:"";position:absolute;left:0;right:12px;bottom:0;height:72px;background:linear-gradient(180deg,transparent,var(--surface-default));pointer-events:none}
.auth-list .follow-item--compact{background:var(--surface-elevated);border:1px solid var(--neutral-300)}
.auth-list .follow-item--compact .follow-btn{font:var(--text-sm)}   /* Prompt 25: component padding 3 / 8 (Figma 2239:86989 chips 136–221 wide) */
.auth-list .follow-item__img--initials{display:grid;place-items:center;background:var(--surface-background);border:1px solid var(--border-default);box-sizing:border-box;font:600 9px/1 var(--font-body);color:var(--text-secondary)}
.auth-list .follow-item--compact{max-width:100%}
.auth-list .follow-item__label{white-space:normal;overflow-wrap:anywhere}   /* Prompt 25: never truncated; a long name wraps the row */
.auth-empty__sub{margin:var(--space-4) 0 0;font:var(--text-sm);color:var(--text-secondary)}
.auth-clear[hidden]{display:none}
.auth-list__more{width:100%;margin:var(--space-4) 0 0;font:var(--text-xs);color:var(--text-secondary);text-align:center}
.auth-list__sentinel{width:100%;height:1px}
.auth-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-32) 0;text-align:center}
.auth-empty p{margin:0}
.auth-empty__title{font:var(--text-sm);color:var(--text-primary)}

/* Step 3: success badge, Follow us (44px round icon buttons) */
.auth-badge{flex:none;display:grid;place-items:center;width:64px!important;height:64px;margin:0 auto;border-radius:var(--radius-full);background:var(--accent-default);color:var(--neutral-0)}
.auth-badge svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-badge path{stroke-dasharray:40;stroke-dashoffset:0;animation:auth-draw .5s .15s var(--ease-out) backwards}
@keyframes auth-draw{from{stroke-dashoffset:40}}
.auth-follow{display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.auth-follow__label{margin:0;font:var(--text-sm);color:var(--text-primary)}
.auth-follow__icons{display:flex;justify-content:center;gap:var(--space-12)}
.auth-follow__icons a{display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--neutral-0);box-shadow:var(--effect-button-default);transition:box-shadow .2s,background .2s}
.auth-follow__icons a:hover{background:var(--surface-background);box-shadow:var(--effect-button-hover)}
.auth-follow__icons a:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.auth-follow__icons img{width:20px;height:20px}

/* ---------- Responsive ---------- */
@media (max-width:1023px){.auth-feat{display:none}}
/* Tablet (Figma 2239:86968, Prompt 20): Inverse navbar over the background, the 552 card floats centred 160 from the top (no bottom sheet) */
@media (min-width:600px) and (max-width:1023px){
  .auth{padding:160px var(--space-24) var(--space-48)}
}
/* Phone (2239:119452…): signed-out App / Header, no tab bar; the card floats 16 from the edges (358 wide), padding 16, Mobile text */
@media (max-width:599px){
  /* Prompt 28 review: every phone frame (2239:119452 … 2239:119758) puts the card 16 under the App / Header, padding 24 / 20, gap 24,
     and step 1 has no "1 of 3" row (the frames show the step bar on step 2 only) */
  .auth{align-items:flex-start;min-height:100vh;min-height:100dvh;padding:var(--space-16) var(--space-16) var(--space-32)}
  .auth-card{width:100%;padding:var(--space-24) var(--space-20);gap:var(--space-24)}
  /* App / Header over the photo (2239:119818): no bar fill or blur, light logo art (layout sets appHeaderLight) */
  .app-top .app-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Step 2 phone frame 2239:119473 (Prompt 25): card padding 24 / 20, gap 24, list 264 like the other breakpoints */
  .auth-card:has(.auth-view[data-view="follow"]:not([hidden])){padding:var(--space-24) var(--space-20);gap:var(--space-24)}
}
@media (prefers-reduced-motion:reduce){.auth-bg__slide,.auth-progress__track i,.auth-feat{transition:none}.auth-badge path{animation:none}.btn.is-loading::after{animation-duration:2s}}

/* Toasts on the auth pages float top-right (frames 1409:687 / 1409:760: x 1024, y 146 on a 1440 frame) */
.toasts{top:146px;bottom:auto;left:auto;right:24px;transform:none;align-items:flex-end}
@media (max-width:767px){.toasts{top:16px;right:16px;left:16px;align-items:center}}