/* ────────────────────────────────────────────────────────────────────────────
   Shared styling for the legal documents (privacy.html, terms.html).
   Loaded by the standalone pages AND by index.html, so the content renders
   identically whether viewed on its own page or injected into the modal.
   The two HTML pages remain the single source of truth for the *content*.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --legal-bg:#020617;
  --legal-panel:#0f172a;
  --legal-line:rgba(255,255,255,0.08);
  --legal-text:#e5e7eb;
  --legal-heading:#ffffff;
  --legal-muted:#9ca3af;
  --legal-accent:#7c3aed;
}

/* ── Standalone page chrome ──────────────────────────────────────────────── */
body.legal-page{
  margin:0;
  background:var(--legal-bg);
  color:var(--legal-text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.65;
}

.legal-topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  background:rgba(2,6,23,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--legal-line);
}

.legal-topbar .legal-home{
  color:var(--legal-heading);
  font-weight:700;
  text-decoration:none;
  font-size:16px;
}
.legal-topbar .legal-home:hover{color:#c4b5fd;}

.legal-topbar .legal-nav a{
  color:var(--legal-muted);
  text-decoration:none;
  font-size:14px;
  margin-left:18px;
}
.legal-topbar .legal-nav a:hover{color:#fff;}

/* ── Document body (shared by page + modal) ──────────────────────────────── */
.legal-doc{
  max-width:820px;
  margin:0 auto;
  padding:40px 24px 80px;
}

.legal-doc .legal-meta{
  color:var(--legal-muted);
  font-size:13px;
  margin:0 0 8px;
}

.legal-doc h1{
  color:var(--legal-heading);
  font-size:30px;
  line-height:1.2;
  margin:0 0 6px;
}

.legal-doc h2{
  color:var(--legal-heading);
  font-size:20px;
  margin:36px 0 10px;
  padding-top:10px;
  border-top:1px solid var(--legal-line);
}

.legal-doc h3{
  color:var(--legal-heading);
  font-size:16px;
  margin:22px 0 8px;
}

.legal-doc p,
.legal-doc li{
  color:var(--legal-text);
  font-size:15px;
}

.legal-doc ul,
.legal-doc ol{
  padding-left:22px;
  margin:10px 0;
}
.legal-doc li{margin-bottom:8px;}

.legal-doc a{color:#a78bfa;}
.legal-doc a:hover{color:#c4b5fd;}

.legal-doc strong{color:#fff;}

/* Editable placeholders the operator must fill in before going live. */
.legal-doc .fillin{
  background:rgba(124,58,237,0.18);
  border:1px dashed var(--legal-accent);
  border-radius:4px;
  padding:0 5px;
  color:#e9d5ff;
  font-style:normal;
  white-space:nowrap;
}

.legal-doc .legal-note{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--legal-line);
  border-left:3px solid var(--legal-accent);
  border-radius:8px;
  padding:14px 16px;
  margin:18px 0;
  font-size:14px;
  color:var(--legal-muted);
}

.legal-doc .legal-toc{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--legal-line);
  border-radius:10px;
  padding:16px 20px;
  margin:24px 0;
}
.legal-doc .legal-toc h2{border:none;padding:0;margin:0 0 10px;font-size:15px;}
.legal-doc .legal-toc ol{columns:2;column-gap:28px;margin:0;}
.legal-doc .legal-toc a{text-decoration:none;}

@media (max-width:640px){
  .legal-doc .legal-toc ol{columns:1;}
  .legal-doc h1{font-size:24px;}
}

/* ── Modal (used on the public site to show a page inline) ───────────────── */
.legal-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  background:rgba(2,6,23,0.72);
  backdrop-filter:blur(4px);
  overflow-y:auto;
}
.legal-modal.active{display:flex;}

.legal-modal .legal-modal-card{
  position:relative;
  width:min(860px,100%);
  background:var(--legal-panel);
  border:1px solid var(--legal-line);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}

.legal-modal .legal-modal-close{
  position:sticky;
  top:0;
  float:right;
  margin:12px 12px 0 0;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid var(--legal-line);
  border-radius:9px;
  font-size:22px;
  cursor:pointer;
  z-index:2;
}
.legal-modal .legal-modal-close:hover{background:rgba(255,255,255,0.14);}

/* Inside the modal the document needs no extra max-width offset. */
.legal-modal .legal-doc{padding:8px 32px 40px;}

@media (max-width:640px){
  .legal-modal .legal-doc{padding:8px 18px 32px;}
}