/* 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: var(--weight-heavy); }
.legal-section { margin-bottom: 44px; }
.legal-section h2 {
  font-size: 1.4rem; font-weight: var(--weight-heavy); 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: var(--weight-bold); margin: 22px 0 8px; }
/* Arriving from the Report tile on the home screen, which links to #contact: the
   heading is scrolled to with a little air above it instead of flush against the
   top edge of the window. */
.legal-section h3[id] { scroll-margin-top: 12px; }
/* 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: var(--weight-bold);
}
/* min-height, and not padding, because the link is already an inline-flex box that
   centres its own text: growing the box to the 24px minimum target (WCAG 2.2, 2.5.8)
   keeps the text where it is instead of pushing it down. This is the one deliberate
   change of size on the page - the row that carries it is 3px taller than it was, which
   is what asking a 21px target to be 24px costs. */
.back-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--primary); text-decoration: none; font-weight: var(--weight-bold); margin-bottom: 8px;
}
/* Inside the row that stays at the top of the window the spacing below the link is the
   row's own, so the link's is dropped - otherwise the two are added together and the
   link floats above the middle of the row it sits in. .page-top comes from style.css,
   which this page loads as well, and it is what makes the row stick. */
.legal-back .back-link { margin-bottom: 0; }
.legal-page .site-footer a { color: var(--muted); }