/* Styling for the legal documents page.
   The styles were taken out of <style> and out of inline style= attributes so that the
   CSP can forbid inline style-src entirely (no 'unsafe-inline'). */
.legal-page { max-width: 720px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
/* Which version of the site the documents apply to — the first thing anyone reads, and
   therefore set apart from the text above it */
.legal-scope {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-title { font-size: 1.7rem; font-weight: 800; }
.legal-section { margin-bottom: 44px; }
.legal-section h2 {
  font-size: 1.4rem; font-weight: 800; color: var(--primary);
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 6px;
}
.legal-updated { color: var(--muted); font-size: 0.8rem; margin-bottom: 16px; }
.legal-section h3 { font-size: 1.05rem; font-weight: 700; margin: 22px 0 8px; }
/* A long run with no space — a web address or a storage key name — pushes the page
   wider on a narrow screen and drags in a horizontal scroll (WCAG 1.4.10). break-word
   breaks it only when there is no alternative, and leaves ordinary text alone. */
.legal-section p, .legal-section li {
  line-height: 1.75; font-size: 0.95rem; color: var(--text);
  overflow-wrap: break-word;
}
.legal-section ul { padding-left: 22px; margin: 8px 0; }
.legal-section li { margin-bottom: 6px; }
/* Links inside the documents. Without this rule a link with no class of its own falls
   back to the browser's default blue (#0000EE), which against this page's background
   measures 2.04:1 and fails WCAG 1.4.3 — on the very page that states the Site aims at
   AA. The underline stays: colour is not the only thing marking a link (WCAG 1.4.1). */
.legal-section a { color: var(--primary); text-decoration: underline; }
/* Here it has to be anywhere: the width of an inline-block is measured by its longest
   word, and break-word does not affect that measurement — so the box itself would stay
   too wide. */
.legal-section code {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px; font-size: 0.85em; display: inline-block;
  overflow-wrap: anywhere;
}
/* Details that must be filled in before this page is published. Deliberately loud:
   the operator's name is what makes the controller identifiable under Article 13
   GDPR, and it should be impossible to publish the page without noticing it is
   still a placeholder. */
.legal-fillin {
  background: var(--error-bg);
  border: 1px dashed var(--error);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--error);
  font-weight: 700;
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--primary); text-decoration: none; font-weight: 700; margin-bottom: 8px;
}
.legal-page .site-footer a { color: var(--muted); }