/* ---------------- Round 11: legal / compliance UI ----------------
   Covers: the legal overlay's own chrome (tabs + doc body — the overlay shell itself reuses
   .fullscreen-overlay/.ep-bar/.ep-body from main.css/exam.css, see js/legal.js), the site
   footer (business/registration info + legal links), the cookie-consent banner, the signup
   consent checkboxes, and the small "report content" links/buttons used in the exam drawer
   and comment threads. Nothing here overrides an existing class — all new selectors. */

/* The overlay shell (#legal-overlay/#legal-panel) reuses .fullscreen-overlay from main.css,
   but that shared class deliberately has no background of its own (see main.css) — every
   other overlay built on it (pricing/profile/exam-player) sets its own background+layout
   here, and this one was missing that rule, so the page underneath showed through and its
   text visually overlapped the legal doc content. Same background/layout pair as
   #pricing-overlay/#pricing-panel and #profile-overlay/#profile-panel. */
#legal-overlay{background:var(--paper); display:flex; flex-direction:column;}
#legal-panel{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}

.legal-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.legal-tab{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer;
}
.legal-tab.active{ background:var(--black); color:#fff; border-color:var(--black); }
.legal-doc h4{ font-size:var(--fs-base); margin:20px 0 6px; }
.legal-doc h4:first-child{ margin-top:0; }
.legal-doc p, .legal-doc li{ font-size:var(--fs-base); line-height:1.7; color:var(--ink); }
.legal-doc ul{ padding-left:20px; margin:6px 0; }

.site-footer{
  margin-top:32px; padding:18px 4px 90px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.site-footer-links{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.site-footer-links a{ font-size:var(--fs-sm); color:var(--muted); text-decoration:underline; cursor:pointer; }
.site-footer-business{ font-size:var(--fs-xs); color:var(--muted); line-height:1.6; }

.legal-footer-mini{ text-align:center; font-size:var(--fs-2xs); margin-top:10px; }
.legal-footer-mini a{ color:rgba(18,18,18,0.55); text-decoration:underline; cursor:pointer; margin:0 4px; }

.consent-check{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.consent-check label{
  display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-xs); line-height:1.5;
  color:rgba(18,18,18,0.75); cursor:pointer;
}
.consent-check input[type="checkbox"]{ margin-top:2px; flex-shrink:0; }
.consent-check a{ text-decoration:underline; }

.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:100px; z-index:60;
  background:var(--black); color:#fff; border-radius:16px; padding:14px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
/* Above 860px the sidebar nav takes over and .bottom-nav is hidden (see styles/sidebar.css) —
   the banner can sit closer to the true bottom edge instead of clearing space for it. */
@media (min-width:860px){ .cookie-banner{ bottom:20px; left:20px; right:20px; max-width:640px; margin:0 auto; } }
.cookie-banner p{ flex:1; min-width:200px; font-size:var(--fs-sm); line-height:1.5; margin:0; }
.cookie-banner a{ color:var(--yellow); text-decoration:underline; }

.report-link{
  display:block; background:none; border:none; padding:0; margin-top:14px;
  font-size:var(--fs-xs); color:var(--muted); text-decoration:underline; cursor:pointer;
}

.card-source-disclaimer{ font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; }