/* Account control (account-menu.js) and the sign-in / account pages. Uses shell.css tokens. */
.account{position:relative;display:flex;align-items:center;margin-left:4px}
.account-button{display:inline-flex;align-items:center;gap:6px;height:32px;min-width:32px;padding:0 8px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}
.account-button:hover{background:var(--surface-3)}
.account-user{padding:0;justify-content:center;width:32px}
.account-icon{width:18px;height:18px;flex-shrink:0}
.account-loading{color:var(--faint);border-style:dashed;cursor:default;width:32px;padding:0;justify-content:center}
.account-error{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.account-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;width:min(280px,calc(100vw - 16px));padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-m)}
.account-who{display:grid;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
.account-who strong{font-size:14px}
.account-who span{color:var(--muted);font-size:13px}
.account-item{display:block;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-s);background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.account-item:hover,.account-item:focus-visible{background:var(--surface-2)}
.account-item:disabled{color:var(--muted);cursor:progress}
.account-note{padding:0 10px;color:var(--danger);font-size:13px}
.account-note:empty{display:none}
/* Sign-in and account pages: one centred panel, the SVG mark, one clear primary action. */
.auth-shell{display:grid;place-items:center;min-height:calc(100vh - var(--top-h));padding:32px 16px;box-sizing:border-box}
.auth-panel{display:grid;justify-items:center;gap:16px;width:min(400px,100%);padding:36px 32px 32px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow-s);text-align:center;box-sizing:border-box}
.auth-mark{width:72px;height:auto}
.auth-panel h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.auth-body{display:grid;gap:12px;width:100%}
.auth-primary{width:100%;min-height:44px;font-size:15px;font-weight:600;box-sizing:border-box}
.auth-google{gap:10px}
.auth-google .icon{width:18px;height:18px}
.auth-pending{opacity:.55;cursor:progress}
.auth-alert{width:100%;margin:0;padding:10px 12px;border:1px solid var(--amber-line);border-radius:var(--radius-s);background:var(--amber-soft);text-align:left;box-sizing:border-box}
.auth-redirect{margin:24px 16px;color:var(--muted)}
.auth-facts{display:grid;gap:12px;margin:0 0 4px;text-align:left}
.auth-facts div{display:grid;gap:2px}
.auth-facts dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.auth-facts dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.auth-note{margin:0;color:var(--muted);font-size:13px}
.auth-note:empty{display:none}
p.auth-note[role="status"]{color:var(--danger)}
@media (max-width:600px){.auth-shell{place-items:start center;padding:24px 16px}.auth-panel{padding:28px 20px 24px}.auth-primary{min-height:48px}.account-signin .account-label,.account-error .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.account-signin,.account-error{width:32px;padding:0;justify-content:center}}
@media (forced-colors:active){.account-button{border-color:ButtonText}.account-item:focus-visible{outline:2px solid Highlight}}
.account-login{color:var(--ink-2)!important;font-weight:500}
/* Username claim (/welcome.html): a left-aligned 440px card near the top, the prefix inside the input group, and
   separate rows for guidance, availability, the permanence notice and the action. */
.claim-shell{place-items:start center;min-height:0;padding:56px 16px 48px}
.claim-card{justify-items:stretch;gap:0;width:min(440px,100%);padding:32px;text-align:left}
.claim-mark{width:40px;height:auto;margin-bottom:20px}
.claim-card h1{font-size:24px;outline:none}
.claim-lede{margin:6px 0 0;color:var(--muted);font-size:15px}
.claim-body{display:grid;width:100%;margin-top:24px}
.claim-form{display:grid;gap:0}
.claim-label{margin-bottom:8px;font-size:14px;font-weight:600}
.claim-group{display:flex;align-items:stretch;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);overflow:hidden}
.claim-group:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.claim-group.is-invalid{border-color:var(--danger)}
.claim-prefix{display:flex;align-items:center;padding:0 2px 0 12px;color:var(--muted);font-size:15px;white-space:nowrap;user-select:none}
.claim-input{flex:1;min-width:0;padding:0 12px 0 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;outline:none}
.claim-help{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.claim-status{display:flex;align-items:flex-start;gap:6px;min-height:20px;margin:12px 0 0;font-size:14px;line-height:1.4}
.claim-status:empty{visibility:hidden}
.claim-status .icon{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.claim-status[data-state="checking"]{color:var(--muted)}
.claim-status[data-state="available"],.claim-status[data-state="claimed"]{color:var(--green)}
.claim-status[data-state="taken"],.claim-status[data-state="invalid"],.claim-status[data-state="error"]{color:var(--danger)}
.claim-status[data-state="unavailable"]{color:var(--amber)}
.claim-status a{color:inherit;font-weight:600}
.claim-notice{display:flex;gap:8px;margin:20px 0 0;padding:10px 12px;border:1px solid var(--amber-line);border-radius:var(--radius-s);background:var(--amber-soft);font-size:13px;line-height:1.45}
.claim-notice .icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--amber)}
.claim-submit{margin-top:20px}
.claim-submit[aria-disabled="true"]{opacity:.65;cursor:progress}
.claim-done{display:grid;gap:0}
.claim-done-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.claim-done-icon .icon{width:22px;height:22px}
.claim-address{display:grid;gap:4px;margin:20px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.claim-address dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.claim-address dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.claim-actions{display:grid;gap:10px;margin-top:24px}
.claim-actions .btn{justify-content:center}
@media (max-width:600px){.claim-shell{padding:24px 16px 32px}.claim-card{padding:24px 20px}.claim-card h1{font-size:22px}}
@media (forced-colors:active){.claim-group{border-color:ButtonText}.claim-group.is-invalid{border-color:Mark}}
.claim-done .claim-address{margin-top:0}
.claim-address dd a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.claim-actions .btn{min-height:44px;box-sizing:border-box}