/* ---------------------------------------------------------------------------
   legal.css - a ROUTE stylesheet, not part of the always-loaded core.

   The long-form prose of the statutory documents.

   Loaded by: /impressum, /imprint, /datenschutz, /privacy, /datenloeschung, /data-deletion,
   /nutzungsbedingungen, /terms, /attributions.
   Linked from those pages' own markup (<RouteStylesheets Sheets="..." />), so
   it arrives AFTER tokens/reset/app/components: at equal specificity a rule
   here beats the same selector in the core sheet, which reverses the order
   these rules had inside components.css. Why the split exists, and what a page
   that links the wrong set breaks, is in
   docs/architecture/performance-budgets.md.
   --------------------------------------------------------------------------- */

/* ============================== Legal pages ==============================
   The five legal documents (Impressum / Datenschutzerklärung / Löschung von
   Konto und Daten / Nutzungsbedingungen / Attributions). The footer that
   links them is in the core
   sheet, where it belongs - it renders on every route, not only on these.

   These are long-form prose, which is the one content shape the rest of the
   design system does not cover: everything else here is a list row, a card or
   a control. Two things follow. Body copy gets a reading measure (~68ch) so a
   line does not run the full width of a desktop viewport, and headings get
   generous space above so the document is scannable by section.

   AUTHORED AT 360px, like everything else (design-system.md §1.1 / §4). The
   one real overflow hazard on these pages is the tables — the cookie table in
   the privacy policy and the licence table in the attributions — which is why
   every table is wrapped in .bd-table-scroll rather than left to reflow. A
   table is the one element that legitimately cannot wrap below a certain
   width, so it scrolls inside its own container and the page does not. */

.bd-legal {
  padding: var(--bd-space-4) 0 var(--bd-space-10);
  /* min-width: 0 is what actually stops a wide descendant (the tables below)
     from forcing the whole column wider than the viewport — see
     docs/reuse-outastory-app-layer.md §5. */
  min-width: 0;
}

.bd-legal p,
.bd-legal li {
  max-width: 68ch;
  /* Legal prose carries tokens that have no break opportunity — an e-mail
     address, a cookie name like .AspNetCore.Culture, a statute reference. At
     360px one of those can be wider than the column and push the page into a
     horizontal scroll, which is the one thing no page here may do. */
  overflow-wrap: break-word;
}

.bd-legal section {
  margin-top: var(--bd-space-6);
}

.bd-legal h2 {
  margin-bottom: var(--bd-space-3);
}

.bd-legal h3 {
  margin-top: var(--bd-space-5);
  margin-bottom: var(--bd-space-2);
}

.bd-legal ul,
.bd-legal ol {
  padding-left: var(--bd-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bd-space-2);
}

.bd-legal li {
  list-style: disc;
}

/* An ORDERED list is a procedure, and the number is the content: /datenloeschung
   and /data-deletion walk somebody through deleting their account, and a step
   that reads as a bullet has lost the one thing that made it a step. reset.css
   strips the marker from every ul and ol together (lists-as-layout are the
   common case), and .bd-legal li puts a disc back — so without this rule the
   steps would render as bullets, correctly and uselessly. `> li` rather than
   `li` so a nested unordered list inside a step keeps its disc. */
.bd-legal ol > li {
  list-style: decimal;
}

/* The "Stand: … · English version" line under the title. */
.bd-legal__meta {
  color: var(--bd-color-muted);
}

.bd-legal__meta-sep {
  margin: 0 var(--bd-space-2);
}

/* The "the German version is authoritative" notice on each English
   translation. Deliberately given a visible edge rather than left as an
   ordinary paragraph — a reader who skims must not miss it. */
.bd-legal__authoritative {
  border-left: 3px solid var(--bd-color-primary);
  padding: var(--bd-space-3) var(--bd-space-4);
  background: var(--bd-color-surface-raised);
  border-radius: var(--bd-radius-sm);
}