/* Auth page composition: canonical SurfSale tokens, original Faivi brand asset. */
.fa-auth { min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--surface); color:var(--neutral-900); font-family:var(--font); }
.fa-auth-main { min-width:0; display:flex; flex-direction:column; padding:var(--space-40) var(--space-48) var(--space-24); }
.fa-auth-logo { display:block; width:var(--size-144); height:auto; }
.fa-auth-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-24); }
.fa-auth-context,.fa-auth-footer { font-size:12px; color:var(--neutral-500); line-height:1.45; }
.fa-auth-content { width:100%; max-width:var(--size-400); margin:auto; padding:var(--space-48) 0; }
.fa-auth-eyebrow { font-size:12px; color:var(--neutral-500); margin:0 0 var(--space-16); }
.fa-auth-title { font-size:24px; font-weight:500; line-height:1.2; letter-spacing:-.03em; margin:0; }
.fa-auth-subtitle { font-size:14px; line-height:1.55; color:var(--neutral-600); margin:var(--space-12) 0 var(--space-32); overflow-wrap:anywhere; }
.fa-auth-form { display:flex; flex-direction:column; gap:var(--space-20); }
.fa-auth-error { margin:0; color:var(--danger); font-size:14px; line-height:1.45; }
.fa-auth-secondary { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-24); font-size:14px; color:var(--neutral-600); }
.fa-auth-link { display:inline-flex; align-items:center; min-height:var(--control-height); color:var(--accent); text-decoration:none; border-radius:var(--radius-4); }
/* Links inside consent copy follow the text baseline and wrap between words. */
.fa-auth-form [data-ui-component="Checkbox"] .fa-auth-link { display:inline; min-height:0; }
.fa-auth-link:hover { text-decoration:underline; }
.fa-auth-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fa-auth-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-12); }
.fa-auth-footer a { color:inherit; text-decoration:none; min-height:var(--control-height); display:inline-flex; align-items:center; }
.fa-auth-password { position:relative; }
.fa-auth-password input { padding-right:var(--space-48); }
.fa-auth-password > button { position:absolute; right:0; top:0; }
.fa-auth-code input { font-size:22px; letter-spacing:.45em; text-align:center; font-variant-numeric:tabular-nums; }
.fa-auth-note { background:var(--bg-app); padding:var(--space-16); border-radius:var(--radius-12); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.fa-auth-status { display:flex; align-items:center; justify-content:center; width:var(--size-56); height:var(--size-56); border-radius:var(--radius-16); background:var(--accent-tint); color:var(--accent); margin-bottom:var(--space-24); }
.fa-auth-status svg { width:var(--semantic-icon-size); height:var(--semantic-icon-size); }
.fa-auth-steps { display:flex; gap:var(--space-8); margin:0 0 var(--space-32); padding:0; list-style:none; }
.fa-auth-steps li { flex:1; font-size:12px; color:var(--neutral-500); padding-top:var(--space-12); border-top:var(--size-2) solid var(--neutral-200); }
.fa-auth-steps li[aria-current=step] { border-color:var(--accent); color:var(--accent); }
.fa-auth-steps li[data-complete=true] { border-color:var(--neutral-900); color:var(--neutral-900); }
.fa-auth-aside { position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; min-width:0; margin:var(--space-16) var(--space-16) var(--space-16) 0; border-radius:var(--radius-24); background:var(--accent-tint); padding:var(--space-48); }
.fa-auth-aside h2 { position:relative; z-index:1; margin:0; font-size:40px; line-height:1.1; letter-spacing:-.04em; font-weight:500; max-width:var(--size-440); }
.fa-auth-aside p { position:relative; z-index:1; font-size:14px; color:var(--neutral-600); line-height:1.55; max-width:var(--size-320); margin:var(--space-20) 0 0; }
.fa-auth-aside-bottom { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:var(--space-8); font-size:12px; color:var(--neutral-700); }
.fa-auth-aside-bottom span { border:1px solid var(--surface); border-radius:var(--radius-full); padding:var(--space-8) var(--space-12); }
@media(min-width:1600px) { .fa-auth-main { padding-inline:var(--space-72); } .fa-auth-aside { padding:var(--space-64); } }
@media(max-width:1000px) { .fa-auth-main { padding:var(--space-24); } .fa-auth-aside { padding:var(--space-32); } .fa-auth-aside h2 { font-size:32px; } }
@media(max-width:760px) { .fa-auth { grid-template-columns:minmax(0,1fr); } .fa-auth-aside { display:none; } .fa-auth-main { min-height:100svh; padding:var(--space-24); } .fa-auth-content { padding:var(--space-40) 0; } .fa-auth-logo { width:var(--size-112); } }
/* Form surfaces resolve the kit's contextual field alias locally. */
.fa-auth-main { --field-bg:var(--control-bg); background:var(--surface); color:var(--neutral-900); }
.fa-auth-content { padding-block:var(--space-32); }
.fa-auth-aside-bottom { margin-top:auto; padding-top:var(--space-24); }
.fa-auth-note + .s-btn { margin-top:var(--space-20); }
/* Owner-approved Faivi illustration; legacy logo nodes stay hidden for cached clients. */
.fa-auth-art { display:none; }
.fa-auth-art img { display:none; }
@media(min-width:761px) {
  .fa-auth-art { display:block; position:absolute; inset:0; pointer-events:none; background:url('./uploads/faivi-auth-learning-3d-20261007.webp') center top / cover no-repeat; }
  .fa-auth-aside:has(> .fa-auth-art) .fa-auth-aside-bottom span { background:color-mix(in srgb,var(--surface) 88%,transparent); }
}
@media(max-width:760px) {
  .fa-auth:has(.fa-auth-art) { grid-template-columns:minmax(0,1fr); }
  .fa-auth:has(.fa-auth-art) .fa-auth-aside { display:none; }
  .fa-auth:has(.fa-auth-art) .fa-auth-main { min-height:100svh; }
}