/* =====================================================================
 *  legal.css  --  biometricQ privacy.html + terms.html
 *
 *  These two pages stand on their own: they are opened straight from the
 *  console nav, from the consent window, and from a bookmark, so they
 *  carry their own copy of the console's theme tokens rather than
 *  depending on index.html. The four theme names and every value match
 *  index.html exactly, and the same localStorage key ('biometricq_theme')
 *  is read, so a page opened from the console arrives already wearing the
 *  theme the reader chose.
 *
 *  Only the tokens these pages actually use are duplicated. If you ever
 *  restyle the console, the ones to keep in step are --bg, --card,
 *  --card-2, --ink, --body, --dim, --faint, --line, --accent and
 *  --accent-soft.
 * ===================================================================== */

:root{
  --disp:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:12px;

  /* Slate (default) */
  --bg:#0d1526; --bg-tint-1:rgba(110,168,255,.10); --bg-tint-2:rgba(60,214,196,.07);
  --card:#151d31; --card-2:#1b2540;
  --ink:#eef2fb; --body:#c2cce4; --dim:#93a0be; --faint:#697592;
  --line:rgba(150,170,215,.14); --line-2:rgba(150,170,215,.26);
  --accent:#6ea8ff; --accent-soft:rgba(110,168,255,.14); --on-accent:#0b1020;
  --ok:#35d6a4; --ok-bg:rgba(53,214,164,.12); --ok-line:rgba(53,214,164,.34);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -20px rgba(0,0,0,.7);
}
html[data-theme="light"]{
  --bg:#eef1f8; --bg-tint-1:rgba(79,107,255,.06); --bg-tint-2:rgba(20,160,140,.05);
  --card:#ffffff; --card-2:#f4f6fc;
  --ink:#0f1830; --body:#33405c; --dim:#5a6787; --faint:#8b97b3;
  --line:rgba(30,50,100,.12); --line-2:rgba(30,50,100,.20);
  --accent:#4f6bff; --accent-soft:rgba(79,107,255,.10); --on-accent:#ffffff;
  --ok:#12a06a; --ok-bg:rgba(18,160,106,.10); --ok-line:rgba(18,160,106,.30);
  --shadow:0 1px 2px rgba(20,40,90,.08),0 12px 30px -18px rgba(20,40,90,.28);
}
html[data-theme="quantum"]{
  --bg:#04060d; --bg-tint-1:rgba(124,108,255,.16); --bg-tint-2:rgba(60,230,224,.10);
  --card:#0b1020; --card-2:#0e1428;
  --ink:#eaf1ff; --body:#aab6d8; --dim:#8b98be; --faint:#5c688d;
  --line:rgba(122,150,220,.14); --line-2:rgba(122,150,220,.28);
  --accent:#3ce6e0; --accent-soft:rgba(60,230,224,.10); --on-accent:#04060d;
  --ok:#3ce6a0; --ok-bg:rgba(60,230,160,.09); --ok-line:rgba(60,230,160,.32);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.7);
}
html[data-theme="midnight"]{
  --bg:#0a0b10; --bg-tint-1:rgba(130,140,255,.08); --bg-tint-2:rgba(120,200,255,.05);
  --card:#14161f; --card-2:#1b1e2b;
  --ink:#f4f5fa; --body:#c7cbd8; --dim:#969bad; --faint:#6b7185;
  --line:rgba(180,186,220,.13); --line-2:rgba(180,186,220,.24);
  --accent:#a0a4ff; --accent-soft:rgba(160,164,255,.13); --on-accent:#0a0b10;
  --ok:#4ad6a0; --ok-bg:rgba(74,214,160,.11); --ok-line:rgba(74,214,160,.32);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -20px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100vh}
body{
  background:
    radial-gradient(1100px 620px at 82% -10%,var(--bg-tint-1),transparent 60%),
    radial-gradient(880px 520px at 0% 2%,var(--bg-tint-2),transparent 56%),
    var(--bg);
  color:var(--body);font-family:var(--sans);font-size:14.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---- top bar ---- */
.lbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px 22px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);
}
.lbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.lbar .brand img{width:28px;height:28px;object-fit:contain;flex:none}
.lbar .brand b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.2px}
.lbar .brand b i{color:var(--accent);font-style:normal}
.lbar .sp{flex:1}
.lbar a.back{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 11px;
}
.lbar a.back:hover{color:var(--ink);border-color:var(--line-2)}

/* ---- page frame ---- */
.lwrap{max-width:820px;margin:0 auto;padding:38px 22px 90px}
.leyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.lwrap h1{
  font-family:var(--disp);font-weight:700;font-size:34px;line-height:1.15;letter-spacing:-.7px;
  color:var(--ink);margin:0 0 10px;
}
.lstamp{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:0 0 30px}

/* ---- the short version ---- */
.lshort{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 34px;box-shadow:var(--shadow);
}
.lshort h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 10px;font-weight:500;
}
.lshort ul{margin:0;padding-left:18px}
.lshort li{margin:0 0 7px;color:var(--body)}
.lshort li:last-child{margin-bottom:0}
.lshort b{color:var(--ink)}

/* ---- body ---- */
.legal-body h2{
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.25px;color:var(--ink);
  margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--line);
}
.legal-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.legal-body h2 .n{
  font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:400;
  margin-right:10px;letter-spacing:0;
}
.legal-body h3{
  font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);margin:22px 0 6px;
}
.legal-body p{margin:0 0 13px}
.legal-body ul{margin:0 0 13px;padding-left:19px}
.legal-body li{margin:0 0 7px}
.legal-body b,.legal-body strong{color:var(--ink);font-weight:600}
.legal-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.legal-body a:hover{border-bottom-color:var(--accent)}
.legal-body code{
  font-family:var(--mono);font-size:12.5px;background:var(--accent-soft);
  border-radius:4px;padding:1px 5px;color:var(--ink);
}

/* a fact we want to be impossible to miss */
.lnote{
  background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 16px;color:var(--body);
}
.lnote b{color:var(--ink)}

.ltable{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px}
.ltable th,.ltable td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ltable th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:500;background:var(--card-2);
}
.ltable td:first-child{color:var(--ink);width:34%}

.lfoot{
  margin-top:48px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap;align-items:center;
}
.lfoot a{color:var(--dim);text-decoration:none}
.lfoot a:hover{color:var(--ink)}

@media (max-width:620px){
  .lwrap{padding:26px 16px 70px}
  .lwrap h1{font-size:27px}
  .ltable td:first-child{width:auto}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:100%}
  .ltable thead{display:none}
  .ltable tr{border-bottom:1px solid var(--line);padding:8px 0}
  .ltable td{border:0;padding:2px 0}
  .ltable td:first-child{font-weight:600}
}