/* Account pages (checklist Phase 2B). Tokens, nav and theme come from the landing
   page's /welcome/site.css, so these pages match the portal in light and dark. */

/* `hidden` must win over the display rules below (.row is flex, .card is block). */
[hidden]{display:none!important}

.acct{max-width:560px;margin:56px auto 80px;padding:0 16px}
.acct.wide{max-width:1040px}
.acct h1{font-size:calc(26px * var(--ts, 1));line-height:1.25;margin-bottom:8px;letter-spacing:-.01em}
.acct .lede{color:var(--ink-2);margin-bottom:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:calc(14px * var(--ts, 1))}
.field .hint{color:var(--dim);font-size:calc(12.5px * var(--ts, 1))}
.field input,.field textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:10px 12px;font:inherit}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* Honeypot: off-screen for people and screen readers, still in the form for bots. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:650;border-radius:8px;padding:10px 18px;cursor:pointer;text-decoration:none;transition:filter .12s,transform .08s}
.btn:hover{filter:brightness(1.08);color:var(--accent-ink)}
/* site.css colours nav links grey (.site-nav a); a button-styled link keeps its ink. */
.site-nav a.btn,.site-nav a.btn:hover{color:var(--accent-ink)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink-2)}
.btn.danger{border-color:var(--err);background:transparent;color:var(--err)}
.btn.ok{border-color:var(--ok);background:var(--ok);color:#0b0e14}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.note{border-radius:10px;padding:14px 16px;margin:16px 0;border:1px solid var(--line-2);background:var(--panel-2)}
.note.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.note.err{border-color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
.note b{display:block;margin-bottom:2px}
.muted{color:var(--dim);font-size:calc(13px * var(--ts, 1))}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:4px 0 18px}
dl.kv dt{color:var(--dim)} dl.kv dd{margin:0;word-break:break-word}

/* Admin table */
.tbl{width:100%;border-collapse:collapse;font-size:calc(13.5px * var(--ts, 1))}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{color:var(--dim);font-weight:600;font-size:calc(12px * var(--ts, 1));text-transform:uppercase;letter-spacing:.04em}
.tbl td .muted{display:block}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:calc(12px * var(--ts, 1));border:1px solid var(--line-2)}
.pill.active{border-color:var(--ok);color:var(--ok)} .pill.pending{border-color:var(--accent);color:var(--accent)}
.pill.denied,.pill.revoked{border-color:var(--err);color:var(--err)}
.tbl .acts{display:flex;gap:6px;flex-wrap:wrap}
.tbl .acts .btn{padding:4px 10px;font-size:calc(12.5px * var(--ts, 1))}
.tblwrap{overflow-x:auto}
@media (max-width:720px){.tbl .hide-sm{display:none}}

/* Waiting screen (Phase 4A / D5) */
.wait{position:relative;min-height:calc(100vh - var(--nav-h));display:grid;grid-template-rows:1fr auto;overflow:hidden;background:#05070c;color:#e7eaf2}
.wait canvas.sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.wait .stage{position:relative;display:grid;place-items:center;min-height:52vh}
.wait .stage .still{display:none;max-width:min(520px,80vw);opacity:.92;border-radius:12px}
.wait.reduced .stage .still{display:block}
.wait .panel{position:relative;max-width:640px;width:calc(100% - 32px);margin:0 auto 48px;padding:22px 24px;border-radius:14px;background:rgba(11,14,20,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.wait h1{font-size:calc(22px * var(--ts, 1));margin-bottom:4px}
.wait .step{color:#aeb6c8;margin-bottom:14px;min-height:1.6em}
.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar > i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4fb6ae,#d8a64a);transition:width .8s ease}
.bar.done > i{background:#6fcf97}
.wait .meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:#7b8497;font-size:calc(12.5px * var(--ts, 1))}
.wait .fact{margin-top:16px;color:#aeb6c8;font-size:calc(13.5px * var(--ts, 1));min-height:3.2em;transition:opacity .5s}
.wait .fact b{color:#d8a64a;font-weight:600}
.wait .row{margin-top:14px}
.wait .btn.ghost{color:#e7eaf2;border-color:rgba(255,255,255,.25)}
@media (prefers-reduced-motion:reduce){.bar > i{transition:none}}