/* Account page layout, on top of /shared/tokens.css (colors, type, card, fields, buttons, messages).
   One card, one column. Kept in a file so the page can run under style-src 'self'. */
body{padding-inline:20px;padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
.wrap{max-width:520px;margin-inline:auto;padding-block:32px 64px;display:grid;gap:32px}
.top{display:flex;justify-content:space-between;align-items:center}
.stack{display:grid;gap:24px}
.gap6{display:grid;gap:6px}
.gap10{display:grid;gap:10px}
.gap12{display:grid;gap:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
form{display:grid;gap:16px}

/* Full-width main buttons in the page; .auto keeps a confirm's button its own width. */
.wrap .btn.primary{width:100%}
.btn.primary.auto{width:auto}
/* A destructive action in a confirm: ink, not red (red lives only in stamps; the words warn).
   The same as .btn.danger in /app/app.css. */
.btn.danger{background:var(--ink);color:var(--paper)}

/* "Download my records first" in the Delete account confirm, with its note under the link */
.download-first{display:grid;gap:0}

/* Create account / Sign in switch */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--pen-wash);border-radius:12px}
.tabs button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 1rem var(--sans);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* "Keep me signed in on this computer", with its hint lined up under the words */
.remember{display:grid;gap:2px}
.check{display:flex;gap:12px;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.check input{flex:0 0 22px;width:22px;height:22px;margin:0;accent-color:var(--pen);cursor:pointer}
.remember p{padding-left:34px}

footer{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px}
footer ul{list-style:none;margin:0 0 0 -8px;padding:0;display:flex;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}

/* "Still there?" */
dialog{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(13,18,32,.55)}
dialog h2{font-size:1.4rem}
#idleCountdown{color:var(--pen);font-size:1.1rem}