/* ============================================================================
   legal.css — login, legal (terms/privacy/security) and status pages.
   Calm, readable, centred column. Depends on tokens.css + base.css.
   ============================================================================ */

/* ---- generic legal document ---------------------------------------------- */
.legal { background: var(--bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.legal main { flex: 1; }
.legal-doc { max-width: 760px; margin-inline: auto; padding-block: var(--s-8) var(--s-10); }
.legal-doc .eyebrow { margin-bottom: var(--s-3); }
.legal-doc h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.legal-lead { font-size: var(--fs-md); color: var(--text-2); margin-bottom: var(--s-6); }
.legal-updated { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-7); }
.legal-doc h2 { font-size: var(--fs-lg); margin: var(--s-8) 0 var(--s-3); }
.legal-doc h3 { font-size: var(--fs-md); margin: var(--s-5) 0 var(--s-2); }
.legal-doc p { color: var(--text); margin-bottom: var(--s-3); line-height: var(--lh-body); }
.legal-doc ul { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 var(--s-4); }
.legal-doc ul li { display: flex; gap: var(--s-2); color: var(--text); }
.legal-doc ul li::before { content: "—"; color: var(--accent); flex: 0 0 auto; }
.legal-doc a { text-decoration: underline; text-underline-offset: 2px; }
.legal-req-card { margin-top: var(--s-6); padding: var(--s-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: var(--fs-sm); color: var(--text-2); }
.legal-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.legal-toc a { padding: 4px var(--s-3); background: var(--bg-2); border-radius: var(--r-pill); font-size: var(--fs-sm); text-decoration: none; color: var(--text-2); }
.legal-toc a:hover { color: var(--accent-lo); }

/* security-highlights grid on /security */
.sec-highlights { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin: var(--s-6) 0 var(--s-8); }
.sec-highlight { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sec-highlight .icon-badge { flex: 0 0 auto; }
.sec-highlight h3 { font-size: var(--fs-md); margin-bottom: var(--s-1); }
.sec-highlight p { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
@media (min-width: 640px) { .sec-highlights { grid-template-columns: 1fr 1fr; } }

/* ---- login ---------------------------------------------------------------- */
.auth-wrap { min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--s-7); }
.auth-brand { display: flex; align-items: center; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-5); }
.auth-brand span { font-weight: 700; font-size: var(--fs-md); }
.auth-title { font-size: var(--fs-xl); text-align: center; }
.auth-sub { text-align: center; color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-2); margin-bottom: var(--s-6); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .field[data-name-field] { display: none; }
.auth-form.is-register .field[data-name-field] { display: flex; }
.auth-toggle { margin-top: var(--s-5); text-align: center; font-size: var(--fs-sm); }
.auth-toggle button { color: var(--accent-lo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.auth-demo { margin-top: var(--s-5); padding: var(--s-3); background: var(--accent-soft); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--accent-lo); text-align: center; }
.auth-back { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-4); color: var(--text-2); font-size: var(--fs-sm); }

/* ---- status page ---------------------------------------------------------- */
.status-hero { text-align: center; padding-block: var(--s-8) var(--s-6); }
.status-badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); }
.status-badge.is-ok { background: var(--ok-soft); color: var(--ok); }
.status-badge.is-degraded { background: var(--warn-soft); color: var(--warn); }
.status-badge.is-down { background: var(--danger-soft); color: var(--danger); }
.status-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status-list { display: flex; flex-direction: column; gap: var(--s-2); max-width: 620px; margin-inline: auto; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.status-row-name { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.status-row-name .icon { color: var(--accent); }
.status-state { font-size: var(--fs-sm); font-weight: 600; }
.status-state.ok { color: var(--ok); } .status-state.warn { color: var(--warn); } .status-state.down { color: var(--danger); }