/* The sign-in page: one door per audience. On app.css (tokens, type, fields). */
body.auth-page{overflow-wrap:anywhere}
.auth-page a{color:var(--blue);font-weight:600}
.auth-page a:hover{text-decoration:underline;text-underline-offset:4px}
.auth-main{width:100%;max-width:var(--content);margin:0 auto;padding:44px var(--gutter) 64px}
.login-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:60px;align-items:start}
.auth-slogan{font-size:52px;line-height:1.05;margin-top:16px;font-weight:800}
.auth-intro{font-size:17px;margin-top:14px;max-width:48ch;color:var(--muted)}
.role-list{display:flex;flex-direction:column;margin-top:24px}
.role-list button{display:flex;align-items:center;gap:22px;padding:20px 14px;border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:transparent;text-align:left;color:inherit;width:100%}
.role-list button[aria-pressed=true]{border-left-color:var(--blue);background:var(--surface);border-radius:0 12px 12px 0}
.role-list button:hover:not([aria-pressed=true]){background:rgba(255,255,255,.6)}
.role-list img{width:76px;height:76px;object-fit:contain;flex-shrink:0}
.role-list b{display:block;font-size:18px;font-family:var(--display);letter-spacing:-.02em}
.role-list span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.role-list .door-note{font-size:12px;color:var(--blue);font-weight:600}
.role-list button:not([aria-pressed=true]) .door-note{display:none}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.login-card h1{font-size:28px}.login-card h2{font-size:22px;margin-bottom:16px}
.login-card .intro{color:var(--muted);margin-top:8px}
.seg{display:flex;background:#eef0f4;border-radius:12px;padding:4px;margin-top:22px;gap:2px}
.seg button{flex:1;text-align:center;padding:10px 6px;border:0;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);background:transparent;min-height:42px}
.seg button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(11,21,56,.10)}
.login-card form>label:not(.confirmation){display:block;font-weight:600;font-size:14px;margin:16px 0 6px}
.login-card input:not([type=checkbox]),.login-card select{width:100%;min-height:48px;padding:12px 14px;border:1px solid #aeb7c9;border-radius:12px;color:var(--ink);background:var(--surface);font-size:16px}
.login-card input:not([type=checkbox]):focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(8,75,255,.15)}
/* the family code and the PIN are typed by a child, often from a parent reading them out */
.login-card input.code-input{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;min-height:64px;padding:8px 12px}
.login-card input.pin-input{font-family:var(--mono);font-size:24px;letter-spacing:.3em;text-align:center;min-height:56px}
.confirmation{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:14px;color:var(--muted);cursor:pointer}
.confirmation input{width:22px;height:22px;flex-shrink:0;margin:1px 0 0;accent-color:var(--blue)}
.login-card button[type=submit],.primary-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:18px;padding:11px 22px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.login-card button[type=submit]:hover,.primary-link:hover{background:var(--blue-dark);text-decoration:none}
.login-card button:disabled{opacity:.48;cursor:not-allowed}
.secondary-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.hint,.small{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.small.door{margin-top:14px;color:var(--ink)}
#recipient{font-weight:600;margin-top:16px}
#status{margin-top:14px;font-size:14px;color:var(--ink);min-height:0}
#status:empty{display:none}
#status[data-tone=error]{color:var(--red)}
.test-access{margin:22px 0 4px;padding:18px;border:1px solid #cdd9ff;border-radius:14px;background:linear-gradient(145deg,#f5f7ff,#fff)}
.test-access h2{font-size:18px;margin:0 0 6px}
.test-kicker{margin:0 0 4px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.test-access label{margin-top:12px}
details summary{cursor:pointer;color:var(--muted);font-size:14px;margin-top:14px}
#account h1{font-size:26px}
#account .primary-link{margin-top:20px}
@media(max-width:1023px){.auth-main{padding:32px var(--gutter) 56px}.login-grid{grid-template-columns:1fr;gap:32px}.auth-slogan{font-size:40px}.login-card{padding:26px}}
@media(max-width:639px){.auth-main{padding:22px var(--gutter) 40px}.auth-slogan{font-size:34px}.role-list button{gap:14px;padding:16px 10px}.role-list img{width:56px;height:56px}.login-card{padding:22px}.seg button{font-size:13px;padding:10px 4px}.login-card input.code-input{font-size:24px;min-height:58px}}
@media(prefers-reduced-motion:no-preference){#code-form:not([hidden]){animation:reveal-clip .2s ease-out}@keyframes reveal-clip{from{clip-path:inset(0 0 12% 0)}to{clip-path:inset(0)}}}