/* pages.css — shared theme for the auxiliary pages (legal, register, login, account).
   Design tokens live in assets/tokens.css (--vt-*, + self-hosted Saira); the aux pages
   link it alongside this file. These short aliases keep the rules below working. */
:root{
  --bg:var(--vt-bg); --panel:var(--vt-panel); --panel2:var(--vt-panel-2); --line:var(--vt-line);
  --text:var(--vt-text); --muted:var(--vt-muted); --accent:var(--vt-accent); --accent2:var(--vt-blue);
  --shadow:var(--vt-shadow); --ok:var(--vt-ok); --bad:var(--vt-bad);
}
*{box-sizing:border-box}
body{margin:0;background:var(--vt-backdrop) fixed;
  color:var(--text);font:var(--vt-fs-body)/var(--vt-lh-prose) var(--vt-font-ui);
  -webkit-font-smoothing:antialiased}
/* Saira (display face) for the wordmark, headings and controls */
.brand,h1,h2,h3,.btn{font-family:var(--vt-font-display)}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:860px;margin:0 auto;padding:24px 20px 80px}
.narrow{max-width:460px}
/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:800;font-size:13px;
  letter-spacing:var(--vt-tracking-wordmark);text-transform:uppercase;line-height:1.05}
.brand:hover{text-decoration:none}
.brand .mk{width:40px;height:auto;display:block}
.bar .right{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;cursor:pointer;
  border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:.15s;border:1px solid transparent}
.btn:hover{text-decoration:none}
/* flat pill recipe matching the app's buttons (Projection/P50 toggles, auth buttons) — rectangle kept */
.btn.ghost{background:var(--panel2);color:var(--muted);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.4)}
.btn.ghost:hover{color:var(--text);border-color:var(--accent2)}
.btn.solid{background:var(--accent);color:#1a1208;border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.4)}
.btn.solid:hover{filter:brightness(1.06)}
.btn.danger{background:transparent;color:var(--bad);border-color:#5b2a2a}
.btn.danger:hover{background:rgba(248,81,73,.1)}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
/* cards / panels */
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:26px 28px;box-shadow:var(--shadow);margin-bottom:18px}
h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:19px;margin:30px 0 10px;letter-spacing:-.01em;scroll-margin-top:20px}
h3{font-size:15px;margin:20px 0 8px;color:var(--text)}
.sub{color:var(--muted);font-size:13px;margin:0 0 4px}
p{margin:10px 0}
small,.fine{color:var(--muted);font-size:12.5px}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
blockquote{margin:14px 0;padding:13px 16px;border-left:3px solid var(--accent);
  background:var(--panel2);border-radius:0 10px 10px 0;color:#dfe4ec}
.placeholder{background:rgba(240,136,62,.14);color:var(--accent);border-radius:4px;padding:0 4px;
  font-size:.92em;font-weight:600;white-space:nowrap}
.callout{background:rgba(76,139,245,.1);border:1px solid #2a3a5c;border-radius:10px;padding:11px 14px;
  color:#c7d3ea;font-size:12.5px;margin:14px 0}
/* table of contents (legal) */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.toc a{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:6px 14px;
  font-size:13px;color:var(--muted);font-weight:600}
.toc a:hover{color:var(--text);border-color:var(--accent2);text-decoration:none}
/* forms */
.field{margin:0 0 16px}
.field label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field input{width:100%;background:#0f131b;color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;font-size:14px;outline:none}
.field input:focus{border-color:var(--accent2)}
.field .hint{color:var(--muted);font-size:11.5px;margin-top:5px}
.field .err{color:var(--bad);font-size:11.5px;margin-top:5px;display:none}
.field.invalid input{border-color:var(--bad)}
.field.invalid .err{display:block}
.gdpr{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.55}
.check{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;font-size:13px;color:#dfe4ec;cursor:pointer}
.check input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.formfoot{margin-top:8px;text-align:center;color:var(--muted);font-size:13px}
.notice{border-radius:10px;padding:11px 14px;font-size:13px;margin:0 0 16px;display:none}
.notice.show{display:block}
.notice.info{background:rgba(76,139,245,.1);border:1px solid #2a3a5c;color:#c7d3ea}
.notice.warn{background:rgba(240,136,62,.12);border:1px solid #5a4326;color:#f0c08a}
/* footer */
.foot{color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:30px;line-height:1.7}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.foot nav a{font-weight:600;font-size:12px}
/* modal (account deletion) */
.modal{position:fixed;inset:0;background:rgba(4,6,10,.74);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px}
.modal.on{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:18px;max-width:460px;width:100%;
  padding:24px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sheet h2{margin-top:0}
.sheet .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
@media(max-width:560px){.wrap{padding:18px 14px 60px}.panel{padding:20px 18px}
  .sheet .actions{flex-direction:column-reverse}.btn.full,.sheet .actions .btn{width:100%}}
/* ---------- motion & polish ---------- */
.btn{transition:background .15s,border-color .15s,color .15s,filter .15s,transform .1s}
.btn:active:not([disabled]){transform:translateY(1px) scale(.985)}
.field input{transition:border-color .15s,box-shadow .15s}
.field input:focus{box-shadow:0 0 0 3px rgba(76,139,245,.14)}
.toc a,.foot nav a{transition:color .15s,border-color .15s}
@media (prefers-reduced-motion: no-preference){
  .panel{animation:pageIn .45s ease both}
  .panel:nth-of-type(2){animation-delay:.06s}
  .panel:nth-of-type(3){animation-delay:.12s}
  .panel:nth-of-type(4){animation-delay:.18s}
  @keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .modal.on{animation:backdropIn .2s ease}
  .modal.on .sheet{animation:sheetPop .24s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes backdropIn{from{opacity:0}to{opacity:1}}
  @keyframes sheetPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
}