/* =========================================================================
   Legal documents — imprint, privacy, terms, partner agreement, DPA, consents
   -------------------------------------------------------------------------
   Seven pages, one stylesheet, and almost no page-specific styling: a legal
   document is prose with numbered sections, and the less it is designed the
   better it reads. What is here is the part the shared components do not
   already cover.

   THE VERSION BLOCK IS NOT DECORATION. It is the first thing under the
   heading because it is the thing a reader has to be able to cite: the version
   in it is the value written into a consent record, and a reader who wants to
   know what they agreed to needs to find it without scrolling. It prints.

   THE DOCUMENT PRINTS, AND THAT IS A REQUIREMENT RATHER THAN A COURTESY.
   A partner's legal department prints these. `print.css` is linked on every one
   of them — it is what keeps the brand hero's white ink off white paper — and
   the rules at the bottom of this file add what is specific to a document:
   the table of contents goes (it is navigation, useless on paper), and a
   section is not split across a page break where that can be avoided.
   ========================================================================= */

/* ---- The version block ---------------------------------------------------- */

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sd-border);
  border-radius: 10px;
  background: var(--sd-surface-alt);
}

.doc-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.doc-meta dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-text-soft);
}

.doc-meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--sd-text);
}

/* ---- Table of contents ---------------------------------------------------- */

.doc-toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--sd-primary);
  background: var(--sd-surface-alt);
}

.doc-toc h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.doc-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 2rem;
}

.doc-toc li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

/* ONE COLUMN ON A PHONE, and the reason is a German word (U-753).

   Two columns of a 390 px viewport are 143 px wide. `Unterauftragsverarbeiter`
   — clause 7 of the data processing agreement — renders 176 px, and a word has
   no break opportunity, so it left its column, left the page and gave
   `de/legal/dpa.html` 10 px of horizontal scroll that the English twin does not
   have. The column count is what is wrong here: at 390 px a two-column table of
   contents is unreadable before it is broken, and `columns: 1` removes both
   problems. 640 px is this SITE's narrow breakpoint: **nine**
   `@media (max-width: 640px)` rules under `assets/css/` on `main`, against three
   at 900 px and one each at 899, 760, 700 and 480. This file had no WIDTH query of
   its own before; it did have `@media print`.

   *Four editions of this one sentence, each wrong in a different way, and they are
   worth more than the rule they annotate: "this stylesheet's own breakpoint" (it had
   none), "thirteen" (counted after the branch, so the rule justified itself), "no
   media query" (there was `@media print`), "twelve" (`640px` as a STRING — three of
   those twelve are `max-width: 640px` container widths and not breakpoints at all).
   Every correction moved one thing and left the counting method alone.*

   It is the COLUMN and not the word: no `overflow-wrap` here, because breaking a
   legal term across lines to fit a layout that should not exist at this width
   hides the next such word instead of fitting it. */
@media (max-width: 640px) {
  .doc-toc ol {
    columns: 1;
  }
}

/* ---- The document body ---------------------------------------------------- */

.doc-body {
  max-width: 44rem;
}

.doc-body section {
  margin-bottom: 2.5rem;
}

.doc-body h2 {
  margin-bottom: 0.75rem;
  padding-top: 0.5rem;
  font-size: 1.35rem;
}

.doc-body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
}

.doc-body p,
.doc-body li {
  line-height: 1.7;
}

.doc-body ul,
.doc-body ol {
  padding-left: 1.35rem;
}

.doc-body li {
  margin-bottom: 0.4rem;
}

/* A defined term, e.g. the first use of "business partner". Not a colour alone
   — audit rule E-4: the weight carries it for a reader who sees no colour. */
.doc-term {
  font-weight: 600;
  color: var(--sd-text);
}

/* ---- A data table inside a document --------------------------------------

   There is no rule here, and that is the point. The privacy policy's three
   tables use `components/table.css` — `.table` inside `.table-wrap` — like every
   other table on the site. This file carried a `.doc-scroll` that re-derived the
   wrapper's `position: relative` and its `overflow-x`, with the same reasoning
   written out again, while omitting the `overflow-y: hidden` that keeps the
   rounded corners clipping, the touch scrolling, and the caption's own ground.
   A second implementation of a component is a component that will be fixed once.
   ------------------------------------------------------------------------- */

/* ---- Print ---------------------------------------------------------------- */

@media print {
  /* Navigation is useless on paper, and the anchors it offers do not exist
     there. The headings it points at stay. */
  .doc-toc {
    display: none;
  }

  .doc-meta {
    border: 1px solid var(--sd-border);
    background: transparent;
  }

  /* A section heading at the foot of a page, with its text overleaf, is the
     one layout defect that actually costs a reader something in a document
     they are checking clause by clause. */
  .doc-body h2,
  .doc-body h3 {
    break-after: avoid;
  }

  .doc-body section {
    break-inside: auto;
  }

  /* The document's own URL, printed once, so a paper copy says where it came
     from and which version it is. `content` here is generated text and it is
     the one place in this codebase that is acceptable: it is not user-facing
     copy that needs translating, it is the page's own address. */
  .doc-source::after {
    content: ' (' attr(data-url) ')';
    color: var(--sd-text-soft);
    font-size: 0.85em;
  }
}