/* Shared chrome for the /account/ pages (forgot, reset, delete).
 *
 * A file rather than three inlined copies: these pages are the same card in the same frame and differ
 * only in their form, so duplicating the palette three ways would guarantee they drift. It is still
 * build-free and still self-contained — same origin, committed as served, no external request — which is
 * the rule web/README.md actually sets. The marketing page keeps its CSS inline because it is one page
 * with no sibling to share with.
 *
 * The palette is index.html's, copied deliberately rather than imported: these pages must render
 * correctly on their own, and the tokens are the brand's (11_Brand/02_Brand_Guidelines.md § 3), not this
 * file's to invent. Same rule as the marketing page — --ink labels brand fills and never flips between
 * themes, --text is body copy and does.
 */
:root{
  color-scheme: light dark;
  --teal:#1EBC71; --coral:#FF8C85; --mint:#B4F2D5; --ink:#23262B;
  --page:#FDFBF7; --surface:#FFFFFF; --text:#23262B; --hairline:#E3E7EC;
  --indigo:#406797; --cream:#FDFBF7; --accent-type:#406797;
  --danger:#B3261E;
}
@media(prefers-color-scheme:dark){
  :root{
    --page:#16181A; --surface:#1F2225; --text:#ECEAE6; --hairline:#31363B;
    --indigo:#24405A; --cream:#EEF1F4; --accent-type:#9CBEE4;
    --danger:#F2B8B5;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Manrope,"Avenir Next",-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--page);line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px;
}
h1{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:18px;margin:16px 0 28px}
.brand svg{width:34px;height:34px}

.card{
  width:100%;max-width:440px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:20px;padding:32px;
}
.lede{font-size:16px;opacity:.85;margin-bottom:24px}

label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
input{
  width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--page);
  border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;margin-bottom:6px;
}
input:focus{outline:2px solid var(--accent-type);outline-offset:1px}
.hint{font-size:13px;opacity:.75;margin-bottom:18px}

button{
  width:100%;font:inherit;font-weight:700;font-size:17px;padding:14px 24px;border:none;border-radius:14px;
  background:var(--coral);color:var(--ink);cursor:pointer;transition:transform .2s ease-out;
}
button:hover:not(:disabled){transform:translateY(-2px)}
button:disabled{opacity:.55;cursor:progress}
button.danger{background:var(--danger);color:#FFFFFF}
@media(prefers-color-scheme:dark){button.danger{color:var(--ink)}}

/* Messages. Both are hidden until a page has something to say, so neither reserves space in the layout. */
.msg{margin-top:18px;font-size:15px;border-radius:12px;padding:14px 16px}
.msg.error{background:rgba(179,38,30,.1);color:var(--danger)}
.msg.ok{background:var(--mint);color:var(--ink)}
[hidden]{display:none !important}

.warn{
  background:rgba(179,38,30,.1);color:var(--danger);border-radius:12px;padding:14px 16px;
  font-size:15px;margin-bottom:24px;
}

.foot{margin-top:22px;font-size:14px;opacity:.8}
.foot a,.msg a{color:var(--accent-type);font-weight:600}
.pagefoot{margin:28px 0 8px;font-size:13.5px;opacity:.75;text-align:center}
.pagefoot a{color:var(--accent-type);font-weight:600;text-decoration:none}