/* P5 job 8: entry. Sign-in states, first password, narrow window, session end (frames signin*, first-pass*, account-error, session-*, narrow; HANDOFF §9).
   Copied from rework/P5/frames/kit/p5.css «entry» with the app's state kit (.stv) in place of the frames' .st. */
#auth{place-items:start center;padding-top:max(112px,calc(50dvh - 300px))}   /* E-08: a fixed top offset, the card never re-centres when a message or a state appears */
@media (max-height:720px){#auth{padding-bottom:var(--s-6)}}   /* 1280x680: the lockout and first-password cards end 3 px past the 48 px pad; the top stays put */
#auth .af-err{min-height:20px}   /* the message slot is reserved */
#auth .af-err:empty{display:block}
.af-note{display:flex;align-items:flex-start;gap:var(--s-2);margin:0;padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);color:var(--text);font-size:var(--fs-2);line-height:18px;text-align:left}
.af-note .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:calc((1lh - 16px) / 2);color:var(--amber)}
.af.ro .af-in{opacity:.55;cursor:not-allowed}
#auth .af-go:disabled{opacity:1;background:var(--raised);border-color:var(--line);color:var(--text-2);box-shadow:none;cursor:not-allowed;font-variant-numeric:tabular-nums}
.af-checks{display:grid;gap:var(--s-1);margin:-4px 0 0;padding:0 0 0 var(--s-1);list-style:none}
.af-checks li{display:flex;align-items:center;gap:var(--s-2);color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.af-checks li.met{color:var(--green)}
.af-checks .i{flex:none;width:var(--icon-sm);height:var(--icon-sm)}
.af-checks .ring{flex:none;width:12px;height:12px;margin:0 2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
/* a state inside the card (S-21 160, S-22 200): the title is the page's h1, so it must not take the card's gradient mono h1 */
.auth-panel .stv{padding:0}
.auth-panel .stv .art{margin-top:-8px}
.auth-panel .stv h1{margin:0 0 6px;background:none;color:var(--text);-webkit-background-clip:border-box;background-clip:border-box;font:600 var(--fs-4b)/24px var(--font);letter-spacing:-.01em;text-wrap:balance}
.auth-panel .stv .stv-acts{align-self:stretch;flex-direction:column;margin-top:var(--s-6)}
.auth-panel .stv .stv-acts .af-go{width:100%}
.auth-panel .stv details{align-self:stretch;max-width:none;text-align:left}
/* narrow window: S-23 236 on the dotted canvas */
#narrow{place-items:center}
#narrow .stv h1{margin:0 0 var(--s-2);font:600 var(--fs-5)/28px var(--font);letter-spacing:-.01em;color:var(--text)}
#narrow .stv p{max-width:none}
/* session end (B-08): the returning person in a raised plate, as the frame draws it */
.si-who{margin:0 0 var(--s-4);background:var(--raised);box-shadow:var(--edge)}
.si-name b{font:600 var(--fs-4)/20px var(--font)}
.si-name .me-role{margin-top:2px}
/* the sheet: 400 wide, the title in the body's light (no divider, no glass bar), a labelled 40 px field, the footer 24 from the edge */
#dlg-signin{width:min(400px,calc(100vw - 32px))}
#dlg-signin .m-head{min-height:0;padding:var(--s-5) var(--s-4) 0 var(--s-6);border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#dlg-signin .m-head h2{font:600 var(--fs-4b)/24px var(--font)}
#dlg-signin .dlg-body{padding:var(--s-4) var(--s-6) var(--s-6)}
#dlg-signin .af-form{gap:6px}
#dlg-signin .af{padding-top:var(--s-6)}
#dlg-signin .af-sr{top:0;left:0;width:auto;height:auto;overflow:visible;clip-path:none;color:var(--text-2);font:500 var(--fs-2)/18px var(--font)}
#dlg-signin .af-in{height:40px;padding-left:var(--s-8);border-radius:var(--r-2);font-size:var(--fs-3)}
#dlg-signin .af-ic{left:12px;width:16px;height:16px}
#dlg-signin .af-in::placeholder{color:transparent}   /* the label above says it */
#dlg-signin .af-eye{right:4px}
#dlg-signin .af-err:empty{display:none}
#dlg-signin .si-foot{margin-top:var(--s-5)}
#dlg-signin .si-foot .si-out{margin-left:0}
#dlg-signin .si-foot .si-go{height:34px;padding:0 14px;font:500 var(--fs-2)/1 var(--font)}
.si-who .av.lg{width:48px;height:48px;font-size:17px}

@media (max-width:767px){#narrow .nw-zoom{display:none}}