/* ===== SealPal sign-in and the start (account.js, Beta 2.0) =====
   Both take the whole page like the guided mode (glass/guided.css supplies .gd, the top bar, the progress line
   and the choice buttons); this file adds the narrow column, the fields and the "where you are going" card. */

/* ---------- Whole page ---------- */
body.ac-focus .sidebar,body.ac-focus .topbar,body.ac-focus .demo-banner,body.ac-focus .page-footer,body.ac-focus .sec-tabs,body.ac-focus .g-strip,body.ac-focus #g-float{display:none!important}
body.ac-focus .main{margin-left:0}
body.ac-focus .content{max-width:none;padding:0 16px 64px}
body.ac-focus .content>.gd,body.ac-focus .content h1{animation:none!important;filter:none!important}
.ac .gd-body{max-width:520px}
.ac-workspaces{border:0;padding:0;margin:0 0 24px;min-width:0}
.ac-workspaces legend{font-size:14px;font-weight:600;margin-bottom:10px}
.ac-workspaces [role=radiogroup]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ac-workspaces [role=radio]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:72px;padding:10px 6px;border:1px solid var(--gd-field-line);border-radius:var(--radius-control);background:var(--gd-field);color:var(--gd-ink);font:inherit;cursor:pointer}
.ac-workspaces [role=radio][aria-checked=true]{border-color:var(--gd-brand);box-shadow:inset 0 0 0 1px var(--gd-brand)}
.ac-workspaces [role=radio] b{font-size:14px;overflow-wrap:anywhere}
.ac-workspaces [role=radio] small{font-size:11px;color:var(--gd-muted);line-height:1.3;text-align:center}
.ac-workspaces [role=radio]:focus-visible{outline:2px solid var(--gd-brand);outline-offset:3px}

/* ---------- Fields ---------- */
.ac-form{display:grid;gap:12px;margin-top:6px}
.ac-form>label{font-size:14px;font-weight:600}
.ac-form input[type=email],.ac-code{width:100%;min-height:52px;padding:0 16px;border-radius:var(--radius-control);border:1.5px solid var(--gd-field-line);background:var(--gd-field);color:var(--gd-ink);font-size:17px}
.ac-code{font:600 26px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.35em;text-align:center}
.ac-form input:focus-visible,.ac-form select:focus-visible{outline:2px solid var(--gd-brand);outline-offset:2px}
.ac-form .field label{font-size:14px}
.ac-form .field input,.ac-form .field select{min-height:48px;border-radius:var(--radius-control);border:1.5px solid var(--gd-field-line);background:var(--gd-field);color:var(--gd-ink)}
.ac-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ac-main{min-height:52px;width:100%;font-size:16px;border-radius:var(--radius-control)}
.ac-err{margin:0;color:var(--gd-bad);font-size:14px}
.ac-to{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 18px;color:var(--gd-muted)}
.ac-to b{color:var(--gd-ink);word-break:break-all}
.ac-alt{margin-top:16px;text-align:center}
.ac-legal{margin-top:28px;font-size:12.5px;line-height:1.7;color:var(--gd-muted);text-align:center}
.ac-legal a{color:inherit;text-decoration:underline}
.ac-nav{display:flex;gap:12px;margin-top:20px}
.ac-nav .ac-main{flex:1;width:auto}
.ac-back{min-height:52px;border-radius:var(--radius-control);padding:0 22px}

/* ---------- Where the start leads ---------- */
.ac-dest{display:grid;gap:12px;margin:4px 0;padding:20px 22px}
.ac-dest b{font-size:20px;line-height:1.35}
.ac-dest ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ac-dest li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--gd-muted)}
.ac-dest li svg{width:16px;height:16px;color:var(--gd-brand)}

/* ---------- Account controls: early access remains a separate, explicit action ---------- */
.ac-top-in{border-radius:var(--radius-control)}
.side-who{min-width:0}
.side-who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Text buttons this module adds (change status, sign in from the banner, sign out) */
button.text-link[data-ac]{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.side-in{width:100%}
.side-out{padding:0;border:0;background:none;color:inherit;font-size:inherit;text-decoration:underline;cursor:pointer}

/* ---------- My status, signed in ---------- */
.ac-dates>summary{display:flex;align-items:center;gap:8px;padding:16px 20px;font-weight:600;cursor:pointer}
.ac-dates>summary svg{width:18px;height:18px}
.ac-need{display:block;margin-top:4px;font-size:18px}
.op-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}

/* ---------- Sign-up sheet (2026-11-10): slides up and fades in over the page when a signed-out person opens a process ---------- */
dialog.ac-sheet{--gd-ink:var(--ink,#171614);--gd-muted:var(--muted,#55524b);--gd-line:var(--line,rgba(20,18,14,.12));--gd-field:rgba(255,255,255,.82);--gd-field-line:rgba(20,18,14,.18);--gd-brand:var(--brand,#1570e6);--gd-bad:#b3261e;
  position:fixed;inset:auto 0 24px;margin:0 auto;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:0;color:var(--gd-ink);border-radius:var(--radius-dialog);
  animation:ac-sheet-up .26s cubic-bezier(.2,.8,.2,1) both}
dialog.ac-sheet::backdrop{animation:ac-sheet-fade .26s ease-out both}
html[data-theme=day] dialog.ac-sheet{background:#fbf9f4}
html[data-theme=night] dialog.ac-sheet{background:#2b2926;--gd-field:rgba(255,255,255,.07);--gd-field-line:rgba(255,255,255,.22);--gd-bad:#ff9a8f}
.ac-sheet-in{position:relative;padding:28px 28px 24px}
.ac-sheet-in h2{margin:0 40px 18px 0;font-family:var(--serif);font-size:22px;line-height:1.35;font-weight:600}
html[lang=en] .ac-sheet-in h2{font-family:Georgia,'Times New Roman',serif}
.ac-sheet-to{margin:0 40px 6px 0;font-size:13px;font-weight:600;color:var(--gd-muted)}
.ac-sheet-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radius-control);background:none;color:var(--gd-muted);cursor:pointer}
.ac-sheet-x:hover{background:var(--gd-line)}
.ac-sheet-x:focus-visible{outline:2px solid var(--gd-brand);outline-offset:2px}
.ac-sheet .ac-form{margin-top:0}
.ac-sheet .ac-legal{margin-top:18px}
.ac-sheet .ac-alt{margin-top:14px}
@keyframes ac-sheet-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes ac-sheet-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){dialog.ac-sheet,dialog.ac-sheet::backdrop{animation:none}}

/* ---------- Account & security (#account, vault.js): devices, access record, my data ---------- */
.vt-grid{display:grid;gap:24px;max-width:760px}
.vt-card{padding:22px 24px}
.vt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.vt-head h2{display:flex;align-items:center;gap:6px;font-size:16px}
.vt-list{list-style:none;margin:0;padding:0}
.vt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.vt-row:first-child{border-top:0}
.vt-main{display:grid;gap:3px;min-width:0}
.vt-main b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.vt-main small,.vt-row time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.vt-row time{white-space:nowrap}
.vt-empty{font-size:14px;color:var(--muted)}
.vt-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn.vt-danger,html[data-theme=day] .btn.vt-danger{color:#b3261e;border-color:rgba(179,38,30,.35)}
.btn.vt-danger:hover{background:rgba(179,38,30,.06)}
html[data-theme=night] .btn.vt-danger{color:#ff9a8f;border-color:rgba(255,154,143,.4)}
.btn.primary.vt-danger-fill,.btn.primary.vt-danger-fill:hover{background:#b3261e;border-color:#b3261e;color:#fff}
.vt-code{display:grid;gap:10px}
.vt-code label{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.vt-code input{min-height:48px;padding:0 14px;border-radius:var(--radius-control);border:1.5px solid var(--line);background:transparent;color:inherit;font:600 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;text-align:center}
.vt-code input:focus-visible{outline:2px solid var(--brand,#1570e6);outline-offset:2px}
.vt-code .modal-actions{margin-top:14px}