/* Shared look for hCRI.io's standalone pages (Terms, Privacy, Licenses, About, Companion page,
   Companion manual): the same palette, typeface and rainbow bar the main app uses, so every page
   reads as one site. Palette values mirror frontend/src/lib/theme.js; the app's font stack is
   Courier New / monospace. Loaded AFTER each page's own <style>, so these tokens win.
   The page picks dark/light from the hcri_theme setting via the data-theme attribute. */
:root, :root[data-theme="dark"] {
  --bg:#060a0f; --surface:#0a1628; --surface2:#0b1929; --border:rgba(80,160,220,0.25);
  --text:#e8f4ff; --dim:#7aaccc; --accent:#00d4ff; --accent-dim:rgba(0,212,255,.14);
  --good:#3dff9a; --warn:#ffcc33; --bad:#ff4466;
  --site-font:'Courier New',Courier,monospace;
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#eef2f7; --surface:#ffffff; --surface2:#dce6f0; --border:rgba(40,90,160,0.25);
  --text:#0d1f30; --dim:#2a5070; --accent:#005baa; --accent-dim:rgba(0,91,170,.14);
  --good:#0a6e2e; --warn:#8a5a00; --bad:#aa1133;
  color-scheme:light;
}
html, body { background:var(--bg); }
body, button, input, select, textarea, header a.brand { font-family:var(--site-font); }
.bar { height:5px; background:linear-gradient(90deg,#6a3df0,#2a6df0,#13b3d6,#23c552,#c9d22a,#f0922a,#e0392a); }

/* ---- shared page chrome: header row, then the rounded rainbow bar (same as the main site) ---- */
.bar { height:8px; border-radius:8px; margin:6px 0 20px;
  background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4,#22c55e,#eab308,#f97316,#ef4444);
  box-shadow:0 3px 22px rgba(0,212,255,.25); }
:root[data-theme="light"] .bar { box-shadow:0 3px 22px rgba(0,91,170,.25); }
body { padding:12px 12px 0; margin:0; }
.wrap { max-width:860px; margin:0 auto; padding:0 0 80px; }
.wrap.wide { max-width:1080px; }
body > .bar { max-width:1080px; margin-inline:auto; }
header, header.top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0 0; border-bottom:none; margin:0 auto; }
.brand, header a.brand { font-size:20px; font-weight:900; letter-spacing:1px; color:var(--text); text-decoration:none; }
.brand .dot, .brand .io, header a.brand .io { color:var(--accent); }
#theme-toggle { width:38px !important; height:34px !important; border-radius:8px !important; background:var(--surface) !important;
  border:1px solid var(--border) !important; color:var(--text) !important; font-size:16px !important; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center; cursor:pointer; box-sizing:border-box; }
h1, h2 { line-height:1.2; }