/* ==========================================================================
   COMPONENTS · LEGAL DOCUMENT — the low-chrome, long-form .op-doc template every
   legal / compliance page reuses (disclaimer, terms, privacy, refund, cookies,
   imprint, accessibility, editorial-standards). A centred reading column with an
   optional sticky contents rail; auto-numbered clauses set like a printed
   statute. Ink + the rubric kicker only — no badges, no colour beyond.
   ========================================================================== */

.op-doc {
  color: var(--text);
}

/* — Masthead: rubric kicker · serif title · mono effective-date + version — */
.op-doc__masthead {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule-strong);
}
.op-doc__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-doc__stamp {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--feat-tabular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* — The layout: stacked by default; sticky contents rail + column at lg up — */
.op-doc__layout { display: grid; gap: var(--space-xl); }
@media (min-width: 72rem) {
  .op-doc__layout {
    grid-template-columns: var(--apparatus-aside) minmax(0, 1fr);
    gap: var(--apparatus-gap);
    align-items: start;
  }
}

/* — Contents: an ordered list with mono leading numbers, sticky at lg up — */
.op-doc__toc { align-self: start; }
@media (min-width: 72rem) {
  .op-doc__toc {
    position: sticky;
    top: var(--space-md);
    max-height: calc(100vh - 2 * var(--space-md));
    overflow-y: auto;
  }
}
.op-doc__toc-heading {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-xs);
}
.op-doc__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: op-doc-toc;
  display: grid;
  gap: var(--space-3xs);
}
.op-doc__toc-list a {
  display: flex;
  gap: 0.7em;
  padding: 0.25em 0;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-ink);
}
.op-doc__toc-list a::before {
  counter-increment: op-doc-toc;
  content: counter(op-doc-toc) ".";
  flex: none;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.op-doc__toc-list a:hover { color: var(--accent); }
.op-doc__toc-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — The reading column: capped at the measure, generous statute rhythm — */
.op-doc__main {
  max-width: var(--measure);
  counter-reset: op-doc-section;
}
.op-doc__main > * + * { margin-top: var(--space-xl); }

/* — A clause: auto-numbered, hairline rule above, serif sub-head — */
.op-doc__section {
  counter-increment: op-doc-section;
  counter-reset: op-doc-sub;
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.op-doc__section > * + *,
.op-doc__sub > * + * { margin-top: var(--gap-prose); }
.op-doc__section p,
.op-doc__sub p { font-size: var(--text-base); line-height: var(--leading-relaxed); }

.op-doc__heading {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-doc__heading::before {
  content: counter(op-doc-section) ".\2002";
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* — A sub-clause "1.1": indented counter, smaller serif head — */
.op-doc__sub { margin-top: var(--space-lg); }
.op-doc__subheading {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text);
}
.op-doc__subheading::before {
  content: counter(op-doc-section) "." counter(op-doc-sub) "\2002";
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}

/* — Defined terms: a <dl> — italic serif term, reading-voice definition — */
.op-doc__defined {
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--space-sm) var(--space-md);
}
@media (min-width: 40rem) {
  .op-doc__defined { grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); }
}
.op-doc__defined dt {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text);
}
.op-doc__defined dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* — The closing "last revised" note, kept muted — */
.op-doc__revision {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-doc__revision time {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}