/* TIF Synergy — /legal/ page styles and print rules.
   Loaded after tokens.css, site.css and site-additions.css on every
   /legal/* page (current, archived and print/PDF renders alike).
   The operative wording landed 2026-08-24 and was minted on 2026-08-25 as
   version 2026-08-28-IE (2026-08-28 for the shared sub-processor list); the
   pages these rules style are no longer drafts — see CLAUDE.md and
   docs/decisions/0017-legal-pages-url-structure-and-versioning.md.
   The .legal-draft-notice rules below are retained deliberately: nothing
   served references that class any more, and removing it is queued as a
   post-drop cleanup rather than done on mint day. */

/* ── Draft placeholder notice ─────────────────────────────────────
   Every /legal/ page ships with placeholder body text until the final
   wording lands. This block must never be visually skippable — it also
   prints (see @media print below), so a downloaded PDF carries the same
   warning as the page it was generated from. Do not hide this in print. */
.legal-draft-notice {
  background: var(--status-warn-bg);
  border: 1px dashed var(--status-warn);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 0 0 8px;
}
.legal-draft-notice .legal-draft-notice__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--status-warn);
  margin-bottom: 8px;
}
.legal-draft-notice p {
  color: var(--text);
  font-size: 15px;
  margin-top: 8px;
}
.legal-draft-notice p:first-of-type { margin-top: 0; }

/* ── Version block (requirement 2: effective date + machine-readable
   version identifier, verbatim, matching what the Suite tools store) ── */
.legal-version-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 0 0 32px;
}
.legal-version-block dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0;
}
.legal-version-block dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  align-self: center;
}
.legal-version-block dd {
  font-size: 15px;
  color: var(--text);
  /* A grid item's automatic minimum size is its min-content width, so the
     unbreakable 25-character SUBPROCESSOR_LIST_VERSION forced the 1fr track
     wider than the viewport and scrolled the whole PAGE sideways at 390px.
     The tables were blamed for this; they were not the cause. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.legal-version-block time#version {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--brand-primary);
  font-weight: 500;
}
.legal-version-block .legal-variable-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}

/* ── Downloadable copy CTA ───────────────────────────────────────
   Authority corrected 2026-08-25. This used to cite article 6:234 BW, which
   does not reach these documents: article 6:247(2) BW disapplies afdeling
   6.5.3 entirely where the parties are not both established in the
   Netherlands, regardless of governing law, and the provider is Irish.
   The requirement itself survives and is NON-DEROGABLE: article 10(3) of
   Directive 2000/31/EC, "Contract terms and general conditions provided to
   the recipient must be made available in a way that allows him to store and
   reproduce them". The "except when otherwise agreed by parties who are not
   consumers" derogation appears in article 10(1) and 10(2) only, so a B2B
   contract cannot draft around it. Verified against the Directive text.
   Transposed in Ireland by reg. 13(3) of S.I. 68/2003, and REG. 13(5) MAKES
   NON-COMPLIANCE WITH (1), (2) OR (3) A CRIMINAL OFFENCE, with officer
   liability where a body corporate's offence involves a director's consent,
   connivance or neglect. The B2B derogation and the email carve-out reach
   (1) and (2) only, in the Irish instrument exactly as in the Directive.
   Verified from primary text 2026-08-25 by two independent retrievals; an
   earlier note here called the numbering unverified after two 403s, which
   turned out to be a user-agent property of the request rather than anything
   about the source.
   So the PDF at a permanent versioned URL is doing real legal work rather
   than being a convenience. The served page text carries no citation at all,
   on purpose: the uncited sentence is true under every candidate authority. */
.legal-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: rgba(184, 150, 62, 0.08);
  border: 1px solid color-mix(in oklch, var(--brand-gold) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 0 0 32px;
}
.legal-download p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 48ch; }
.legal-download strong { color: var(--brand-primary); }

/* ── Provider disclosure ─────────────────────────────────────────
   Who the reader is contracting with. Must not be left to be inferred
   from the shared footer's Irish block alone — issue #56 requirement 6.
   Authority corrected 2026-08-25: this used to cite article 3:15d BW, which
   does not reach these pages. The provider under the Irish set is TIF Synergy
   Ireland Limited, so the particulars are required by s.151 Companies Act 2014
   and by reg. 7(1) of S.I. 68/2003, transposing article 5(1) of Directive
   2000/31/EC, while art. 6:247(2) BW disapplies afdeling 6.5.3 where the
   parties are not both established in the Netherlands regardless of governing
   law. Same correction as the download block's dropped 6:234 cite. */
.legal-provider-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 0 0 32px;
}
.legal-provider-block h3 { margin-bottom: 12px; }
.legal-provider-block ul { margin: 0; }
.legal-provider-block li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
}
.legal-provider-block li:last-child { border-bottom: 0; }
.legal-provider-block li strong {
  color: var(--brand-primary);
  display: inline-block;
  min-width: 150px;
}

/* ── Operative body text ──────────────────────────────────────────
   The four documents are long continuous legal prose. Prose gets a
   readable measure; tables deliberately do not, because several of them
   are wide by nature and clipping a cell would hide a disclosure. */
/* Specificity note: site.css sets `.section > .container > p { max-width: none }`
   (0,2,1) to let section text fill the container. A bare `.legal-body p` (0,1,1)
   loses to it silently and the rule reads as applied while measuring ~150
   characters per line. These selectors are deliberately one class heavier so
   they actually win. */
.section > .container.legal-body > p,
.section > .container.legal-body > h2,
.legal-body li { max-width: 78ch; }
.legal-body h2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* ── Annex tables ─────────────────────────────────────────────────
   The sub-processor annex is eight columns wide and its cells carry whole
   paragraphs of transfer-basis disclosure. On screen the table scrolls
   inside its own box rather than forcing the page to scroll sideways; the
   print rules below shrink it to fit the PDF, which is the legally
   operative artefact, so nothing may be clipped or dropped there. */
.legal-table-scroll {
  overflow-x: auto;
  margin: 24px 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.legal-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  color: var(--text-2);
}
/* Only WIDE tables get a min-width that forces the scroll box. Narrow ones
   (the two- and three-column change logs) must not, or they scroll needlessly
   on a phone. md2legal.py emits a modifier only for 6, 7 and 8 columns and
   raises on anything wider, so this list cannot fail by omission the way an
   open-ended `--{n}col` rule did. */
.legal-table--8col { min-width: 1180px; }
.legal-table--7col { min-width: 1040px; }
.legal-table--6col { min-width: 960px; }
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.legal-table th:last-child,
.legal-table td:last-child { border-right: 0; }
.legal-table thead th {
  background: var(--neutral-50);
  color: var(--brand-primary);
  font-weight: 600;
  white-space: nowrap;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* ── Archive banner (superseded-version slot, requirement 4) ────
   Present on every /legal/<doc>/<version>/ archive page. Green/"current"
   styling until a newer version ships, then swap to the amber/superseded
   copy — the class pair exists now so that first real supersession is a
   text edit, not a CSS change. */
.legal-archive-banner {
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin: 0 0 40px;
  font-size: 14px;
  border: 1px solid var(--status-warn);
  background: var(--status-warn-bg);
  color: var(--text);
}
.legal-archive-banner strong { color: var(--status-warn); }
.legal-archive-banner a { font-weight: 600; }
.legal-archive-banner--current {
  border-color: var(--status-ok);
  background: var(--status-ok-bg);
}
.legal-archive-banner--current strong { color: var(--status-ok); }

/* ── Print stylesheet (requirement 5) ─────────────────────────────
   Not decoration: tools/build_legal_pdfs.py renders the served HTML
   through headless Chromium print CSS to produce the permanent PDF, so
   this block IS the PDF's layout, not a second document maintained
   by hand. Keep the draft notice, version block and provider disclosure
   visible; drop nav chrome and anything purely decorative. */
@media print {
  .site-nav, .mobile-drawer, .site-footer,
  .hero-actions, .menu-toggle,
  .legal-download a.btn, a.btn { display: none !important; }

  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.45; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: none; padding: 0; }
  .section { padding: 16px 0; }
  .hero-sub { padding: 0 0 16px; border-bottom: 1px solid #000; }
  h1 { font-size: 20pt; color: #000; }
  h2 { font-size: 15pt; color: #000; page-break-after: avoid; }
  h3 { font-size: 12pt; color: #000; page-break-after: avoid; }
  p, li, dd, dt, .lede, .small { color: #000; }

  .legal-draft-notice, .legal-version-block, .legal-provider-block,
  .legal-archive-banner, .legal-download {
    border: 1px solid #000;
    background: #fff !important;
    box-shadow: none;
  }
  .legal-draft-notice, .legal-version-block, .legal-provider-block,
  .legal-archive-banner {
    break-inside: avoid;
  }

  /* Annex tables in the PDF. The PDF is the legally operative artefact, so
     nothing here may clip: the scroll box that carries the table on screen
     must not become a fixed-width window in print, and the min-widths that
     force horizontal scrolling on screen must be dropped entirely. Type
     drops to 7pt because the sub-processor annex is eight columns of
     paragraph-length transfer-basis text and that is what fits A4 without
     a cell being cut off. Rows break across pages rather than avoiding a
     break, because a single row here can be taller than a page. */
  .legal-table-scroll {
    overflow: visible !important;
    border: 0;
    margin: 12px 0 18px;
  }
  .legal-table,
  .legal-table--6col,
  .legal-table--7col,
  .legal-table--8col {
    min-width: 0 !important;
    width: 100%;
    font-size: 7pt;
    line-height: 1.3;
    /* `auto`, NOT `fixed`. With fixed and no column widths the eight columns
       divide evenly, which gave the annex's last column — carrying ~90% of the
       text — about 74px and spread one row over eight pages with seven near-
       empty columns beside it. `auto` lets the content decide, which is the
       whole point here. */
    table-layout: auto;
  }
  .legal-table th, .legal-table td {
    border: 1px solid #000;
    padding: 3px 4px;
    color: #000;
    word-break: break-word;
  }
  /* Must be `thead th`, not `th`: the screen rule is `.legal-table thead th`
     (0,1,2) and a print `.legal-table th` (0,1,1) loses to it, so the green
     header colour survived into the PDF. */
  .legal-table thead th {
    background: #fff !important;
    color: #000;
    white-space: normal;
  }
  .legal-table thead { display: table-header-group; }
  .legal-body p, .legal-body li, .legal-body h2 { max-width: none; }
  .legal-body h2 { border-top: 0; margin-top: 20px; padding-top: 0; }
  .legal-body code {
    background: #fff;
    border: 0;
    padding: 0;
  }

  /* Neutralise assets/js/main.js's scroll-reveal motion layer. main.js adds
     .reveal (opacity:0, translateY) to section h2/.eyebrow/.lede/p.mt-3 and
     only adds .is-visible once an IntersectionObserver fires on scroll. A
     headless print/PDF render never scrolls, so those nodes stay at
     opacity:0 and Chromium drops them from the printed paint entirely —
     found 2026-08-11: every <h2> and most section body text missing from
     all four generated PDFs (42-54% of visible text). This overrides
     site-additions.css's reveal rules unconditionally, regardless of
     .is-visible state or prefers-reduced-motion, so nothing on a /legal/
     page can ever be silently dropped from a print or PDF render again. */
  .reveal, .reveal-stagger, .hero-reveal, .hero-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}