/* ═══════════════════════════════════════════════════════════════════════════
   Documents — a page that also prints (documents.py).

   One body, three renderings: the web page, the browser's print, the
   WeasyPrint PDF. Built on the Atlas tokens in atlas.css, loaded before this
   file everywhere. Prose sits in a 68ch column; figures and tables take the
   full width. Bricolage for the title, section heads and the one hero figure;
   DM Sans for everything else. Sentence case, no capitals, no monospace.
   Charts are server SVG (components/chart.html) and colour themselves.

   Display weight is 700, not Atlas's 650: WeasyPrint accepts only multiples
   of 100 and drops a `font` shorthand that names 650, whole.
   ═══════════════════════════════════════════════════════════════════════════ */

.d-doc {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: var(--lh-prose);
}
.d-doc h1 {
  font: 700 var(--step-5) / var(--lh-tight) var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  max-width: 24ch;
}
.d-doc h2 {
  font: 700 var(--step-4) / var(--lh-tight) var(--font-display);
  letter-spacing: -0.012em;
  margin: var(--s-10) 0 var(--s-3);
}
.d-doc h3 {
  font: 600 var(--step-2) / 1.3 var(--font-ui);
  margin: var(--s-6) 0 var(--s-2);
}
.d-doc p, .d-doc ul, .d-doc ol { max-width: 68ch; margin: 0 0 var(--s-3); color: var(--ink-2); }
.d-doc li { margin-bottom: var(--s-1); }
.d-doc a { color: var(--court); text-decoration: underline; text-underline-offset: 3px; }
.d-doc strong { color: var(--ink); font-weight: 600; }

.d-lede { font-size: var(--step-2); line-height: 1.5; color: var(--ink) !important; max-width: 60ch; }
.d-meta { font-size: var(--step--1); color: var(--ink-3) !important; }
.d-note { font-size: var(--step-0); color: var(--ink-3) !important; }

/* ── Figures in a row ── */
.d-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: var(--s-6) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline);
}
.d-stats .a-stat__value { font-size: var(--step-3); font-weight: 600; }
.d-stats .a-stat__label { font-size: var(--step-0); color: var(--ink-2); }

/* ── Figures: a chart with its title, caption and table view ── */
.d-figure { margin: var(--s-6) 0; }
.d-figure__title { font-weight: 600; font-size: var(--step-1); color: var(--ink); margin-bottom: var(--s-2); }
.d-figure__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-figure__caption { font-size: var(--step--1) !important; color: var(--ink-3) !important; margin-top: var(--s-2) !important; max-width: none !important; }
.d-figure__table { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-3); }
.d-figure__table summary { cursor: pointer; }
.d-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; margin: var(--s-2) 0 0; font-size: var(--step-0); color: var(--ink-2); }
.d-legend li { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.d-figure__plot .d-legend__swatch { flex: none; display: inline-block; width: 10px; height: 10px; }
.d-legend__pct { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Tables ── */
.d-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); margin: var(--s-3) 0 var(--s-5); }
.d-table th, .d-table td { padding: 6px var(--s-2) 6px 0; text-align: left; vertical-align: baseline; }
.d-table thead th { font-weight: 500; font-size: var(--step--1); color: var(--ink-3); border-bottom: 1px solid var(--hairline-strong); }
.d-table tbody td { border-top: 1px solid var(--hairline); color: var(--ink); }
.d-table tbody tr:first-child td { border-top: 0; }
.d-table .num, .d-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-table tfoot td { font-weight: 600; border-top: 1px solid var(--hairline-strong); padding-top: var(--s-2); }
.d-table .muted { color: var(--ink-3); }
.d-table .warn { color: var(--critical); font-weight: 600; }
.d-table .peak { font-weight: 600; }
.d-note.warn { color: var(--critical) !important; font-weight: 600; }

/* ── Key and value ── */
.d-kv { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 6px var(--s-4); margin: var(--s-3) 0 var(--s-5); font-size: var(--step-0); }
.d-kv dt { color: var(--ink-3); }
.d-kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.d-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }

/* ── Tests met or not, and points still open: a shape and a word, never
   colour alone ── */
.d-checks { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-5); max-width: none !important; }
.d-check { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s-2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--hairline); font-size: var(--step-0); }
.d-check:first-child { border-top: 0; }
.d-check__icon svg { display: block; width: 14px; height: 14px; margin-top: 2px; }
.d-check__verdict { font-weight: 600; white-space: nowrap; }
.d-check--ok .d-check__verdict { color: var(--turf-4); }
.d-check--fail .d-check__verdict { color: var(--critical); }
.d-check--open .d-check__verdict { color: var(--signal); }

/* ── The request: what the plan asks a lender for ── */
.d-request { font: 700 var(--step-3) / 1.25 var(--font-display); color: var(--ink) !important; max-width: 36ch; margin: var(--s-2) 0 var(--s-5); }

.d-disclosure { font-size: var(--step--1) !important; color: var(--ink-3) !important; border-top: 1px solid var(--hairline); padding-top: var(--s-3); margin-top: var(--s-8); max-width: none !important; }

.d-print-only { display: none; }

/* ═══ The web page ═════════════════════════════════════════════════════════ */

@media screen {
  .d-page { max-width: 1040px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-10); }
  .d-crumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--s-5); }
  .d-crumbs a { color: var(--ink-3); }
  .d-hero-map { margin: var(--s-6) calc(-1 * var(--s-5)); }
  .d-tip {
    position: fixed; z-index: 50; pointer-events: none;
    background: var(--ink); color: #fff; font: 500 var(--step--1) / 1.3 var(--font-ui);
    padding: 4px 8px; border-radius: var(--r-xs); white-space: nowrap;
    transform: translate(-50%, calc(-100% - 10px));
  }
  .d-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0; }
  .d-form input[type="email"] {
    min-height: 40px; min-width: 16rem; padding: 0 var(--s-3);
    border: 1px solid var(--hairline-strong); border-radius: var(--r-s);
    font: inherit; font-size: var(--step-0);
  }
  .d-form label { font-size: var(--step--1); color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
  .d-hero-map .d-figure__caption { padding: 0 var(--s-5); }
  @media (max-width: 720px) {
    /* A chart drawn at 640 units shrunk to a phone reads at 6px: keep its
       labels legible and let the chart scroll inside its own frame. */
    .d-figure__plot { overflow-x: auto; }
    .d-figure__plot .d-chart:not(.d-chart--map):not(.d-chart--share) { min-width: 540px; }
    .d-doc { font-size: 1rem; }
    .d-doc h1 { font-size: var(--step-4); }
    .d-doc h2 { font-size: var(--step-3); }
    .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-two { grid-template-columns: 1fr; gap: 0; }
    .d-kv { grid-template-columns: 1fr 1fr; }
    .d-table { font-size: var(--step--1); }
    .d-scroll { overflow-x: auto; }
  }
}

/* ═══ Print: the browser's and WeasyPrint's ════════════════════════════════ */

@media print {
  html { font-size: 10pt; }
  body { background: #fff; }
  .d-doc { font-size: 1rem; line-height: 1.45; }
  .d-doc h1 { font-size: var(--step-5); }
  .d-doc h2 { font-size: var(--step-3); margin-top: var(--s-8); break-after: avoid; }
  .d-doc h3 { font-size: var(--step-1); break-after: avoid; }
  .d-doc p, .d-doc li { orphans: 3; widows: 3; }
  .d-doc a { color: var(--ink); text-decoration: none; }
  .d-figure, .d-stats, .d-checks, .d-kv, .d-two, .d-request { break-inside: avoid; }
  .d-table { font-size: var(--step--1); }
  .d-table thead { display: table-header-group; }
  .d-table tr { break-inside: avoid; }
  .d-figure__table, .d-web-only, .d-form, .d-crumbs, .d-tip { display: none !important; }
  .d-print-only { display: block; }
  .d-section { break-before: auto; }
  .d-break { break-before: page; }
}

/* WeasyPrint only: the page box, the running head, the cover, the contents. */
.d-print { string-set: doc-title attr(data-title), doc-asof attr(data-asof), doc-page attr(data-page), doc-of attr(data-of); }

@page {
  size: A4;
  margin: 20mm 18mm 18mm 18mm;
  @top-left { content: string(doc-title); font: 400 7.5pt "DM Sans"; color: #6B7890; }
  @top-right { content: string(doc-asof); font: 400 7.5pt "DM Sans"; color: #6B7890; }
  @bottom-right { content: string(doc-page) " " counter(page) " " string(doc-of) " " counter(pages); font: 400 7.5pt "DM Sans"; color: #6B7890; }
}
/* The lender's tables: twelve months across, so the annex prints landscape. */
@page annex { size: A4 landscape; margin: 16mm 14mm 14mm 14mm; }
.d-annex { page: annex; break-before: page; }
.d-table--annex { font-size: 8pt; }
.d-table--annex td, .d-table--annex th { padding-top: 1.2mm; padding-bottom: 1.2mm; }
.d-table--wide td, .d-table--wide th { padding-left: 1mm; padding-right: 1mm; }
.d-row-total td { font-weight: 600; border-top: 1px solid var(--hairline-strong); }

@page cover {
  margin: 0;
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-right { content: none; }
}

.d-cover {
  page: cover;
  position: relative;
  box-sizing: border-box;
  height: 297mm;
  padding: 26mm 20mm 20mm;
  break-after: page;
  color: var(--ink);
  font-family: var(--font-ui);
}
.d-cover__kicker { font-size: 10pt; color: var(--ink-3); margin: 0 0 6mm; }
.d-cover__title { font: 700 34pt / 1.05 var(--font-display); letter-spacing: -0.02em; margin: 0 0 5mm; max-width: 15ch; }
.d-cover__sub { font-size: 13pt; line-height: 1.4; color: var(--ink-2); margin: 0 0 10mm; max-width: 40ch; }
.d-cover__art { margin: 4mm -20mm 8mm; }
.d-cover__art svg { display: block; width: 100%; height: auto; }
.d-cover__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; border-top: 1px solid var(--hairline-strong); padding-top: 5mm; }
.d-cover__stats .a-stat__value { font: 600 17pt / 1.1 var(--font-ui); }
.d-cover__stats .a-stat__label { font-size: 8.5pt; color: var(--ink-2); }
.d-cover__stats .a-stat__note { font-size: 7.5pt; }
.d-cover__foot { position: absolute; left: 20mm; right: 20mm; bottom: 16mm; display: flex; justify-content: space-between; gap: 8mm; font-size: 8.5pt; color: var(--ink-3); border-top: 1px solid var(--hairline); padding-top: 4mm; }
.d-cover__brand { font: 700 11pt var(--font-display); color: var(--ink); }

.d-contents { break-after: page; font-family: var(--font-ui); color: var(--ink); }
.d-contents__title { font: 700 var(--step-3) / 1.2 var(--font-display); margin: 0 0 var(--s-5); }
.d-contents ol { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.d-contents li { counter-increment: item; border-top: 1px solid var(--hairline); padding: 5px 0; font-size: 10pt; }
.d-contents li::before { content: counter(item) "  "; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.d-contents a { color: var(--ink); text-decoration: none; }
.d-contents a::after { content: leader(" ") target-counter(attr(href), page); color: var(--ink-3); font-variant-numeric: tabular-nums; }