/* New account screens use the field library's SEED tokens. */
:root{--account-width:480px;--touch-size:44px;--border-width:1px;--focus-width:2px}
*{box-sizing:border-box}
body.auth-page{margin:0;background:var(--color-bg-layer-default);color:var(--color-fg-neutral);font-family:var(--font-family);font-size:var(--font-size-t5);line-height:var(--line-height-t7)}
.auth-shell{width:100%;max-width:var(--account-width);margin:var(--space-x16) auto;padding:var(--space-x6);padding-bottom:var(--space-screen-bottom)}
.auth-brand{display:inline-flex;align-items:center;gap:var(--space-x2);font-size:var(--font-size-t7);font-weight:var(--font-weight-bold);color:var(--color-fg-neutral);text-decoration:none;margin-bottom:var(--space-x12);min-height:var(--touch-size)}
.auth-brand span{font-size:var(--font-size-t2);font-weight:var(--font-weight-medium);letter-spacing:.1em}
.auth-shell h1{font-size:var(--font-size-t9);line-height:var(--line-height-t9);margin:0 0 var(--space-x3);word-break:keep-all}
.auth-shell header p,.auth-help{font-size:var(--font-size-t4);line-height:var(--line-height-t6);color:var(--color-fg-neutral-muted);word-break:keep-all;margin:var(--space-x2) 0}
.auth-shell form{margin-top:var(--space-x8)}
.auth-field{display:flex;flex-direction:column;gap:var(--space-x2);margin-bottom:var(--space-x6)}
.auth-field label{font-size:var(--font-size-t4);font-weight:var(--font-weight-bold);color:var(--color-fg-neutral)}
.auth-field input,.auth-field select{width:100%;min-width:0;min-height:var(--space-x12);padding:var(--space-x3) var(--space-x1);border:0;border-bottom:var(--border-width) solid var(--color-stroke-neutral-weak);border-radius:0;background:var(--color-bg-layer-default);color:var(--color-fg-neutral);font:inherit}
.auth-field input:focus,.auth-field select:focus{border-color:var(--color-stroke-brand-solid)}
.auth-primary,.auth-secondary{display:flex;justify-content:center;align-items:center;min-height:var(--space-x13);padding:var(--space-x3) var(--space-x5);font:inherit;font-weight:var(--font-weight-bold);border:0;border-radius:var(--radius-r3);text-decoration:none;cursor:pointer;transition:background var(--duration-d3)}
.auth-primary{width:100%;color:var(--color-fg-neutral-inverted);background:var(--color-bg-brand-solid);margin:var(--space-x6) 0}
.auth-primary:active{background:var(--color-bg-brand-solid-pressed)}
.auth-secondary{color:var(--color-fg-brand-contrast);background:var(--color-bg-neutral-weak);margin-top:var(--space-x4)}
.auth-primary:disabled{opacity:.6;cursor:wait}
.auth-error{color:var(--color-fg-critical-contrast);font-size:var(--font-size-t4);line-height:var(--line-height-t6);margin:var(--space-x3) 0;min-height:var(--line-height-t6);word-break:keep-all}
.auth-page :focus-visible,.account-row :focus-visible{outline:var(--focus-width) solid var(--color-stroke-focus-ring);outline-offset:var(--space-x1)}
.account-list{display:flex;flex-direction:column;margin-top:var(--space-x6)}
.account-row{display:flex;align-items:center;gap:var(--space-x4);padding:var(--space-x5) 0;border-bottom:var(--border-width) solid var(--color-stroke-neutral-subtle)}
.account-row:last-child{border-bottom:0}
.account-row>div{flex:1;min-width:0;overflow-wrap:anywhere}
.account-row p{color:var(--color-fg-neutral-muted);font-size:var(--font-size-t4)}
.account-row button{min-height:var(--touch-size)}
#user-form,#password-form{padding-top:var(--space-x5)}
.session-expired{position:sticky;top:0;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-x3);padding:var(--space-x2) var(--space-x5);background:var(--color-bg-critical-weak);color:var(--color-fg-critical-contrast);font-family:var(--font-family);font-size:var(--font-size-t4);line-height:var(--line-height-t6);word-break:keep-all}
.session-expired button{min-height:var(--touch-size);padding:0 var(--space-x4);border:0;border-radius:var(--radius-r3);background:var(--color-bg-brand-solid);color:var(--color-fg-neutral-inverted);font:inherit;font-weight:var(--font-weight-bold);cursor:pointer}
.session-expired button:focus-visible{outline:var(--focus-width) solid var(--color-stroke-focus-ring);outline-offset:var(--space-x1)}
@media(max-width:479px){.auth-shell{margin:var(--space-x6) auto;padding:var(--space-global-gutter)}.auth-brand{margin-bottom:var(--space-x8)}.account-row{gap:var(--space-x2);flex-wrap:wrap}.account-row>div{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.auth-primary,.auth-secondary{transition:none}}