/*
 * The BuiltAI document system for the illustrative example documents:
 * "Vexon Paper", the site's Vexon style translated to paper (the plan the
 * owner approved on 2026-09-18, and its specimen, the CCK Variation Narrative).
 *
 * A system document links this file after document-fonts.css, puts its
 * content in <main class="doc vp-<pack>">, and declares
 * <meta name="document-system" content="vexon-paper"> so the print engine
 * (scripts/render-example-pages.ts) prints it with these page rules instead of
 * its generic ones. Its own small <style> names the running header and the
 * reference in the page footer (see "Print" below).
 *
 * Every rule is scoped to .doc, so the reader bar, the pack index and the
 * quiet note the generator places around the document keep their own styles.
 */

:root {
  /* Neutrals: warm, from Vexon's ink #f6f1e7 and surface #11110f. */
  --paper: #FBFAF7; --paper-2: #F4F1EA; --desk: #E7E2D8;
  --ink: #15130F; --ink-2: #4A463E; --ink-3: #6B665C;
  --rule: #D9D3C7; --rule-2: #C9C1B2;
  --night: #11110F; --night-ink: #F6F1E7; --night-ink-2: #AAA79F; --night-ink-3: #85827A; --night-rule: rgba(246, 241, 231, .14);
  /* Brand. */
  --brand: #D97706; --brand-text: #AA5200;
  /* Semantic states, separate from the pack accent. */
  --ok: #067647; --ok-tint: #DEEAE2;
  --warn: #9C4A00; --warn-tint: #F6EBDD;
  --risk: #B42318; --risk-tint: #F2E0DC;
  --note: #33506B; --note-tint: #E3E8EC;
  /* Type. */
  --display: "General Sans", "Inter", Arial, sans-serif;
  --text: "Inter", "General Sans", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* One accent per document: the pack's. The text value reads on paper. */
.vp-cck { --accent: #059669; --accent-text: #007950; --accent-tint: #E2F0E9; --accent-on-night: #34D399; }
.vp-dispatch { --accent: #0284C7; --accent-text: #075985; --accent-tint: #E0F2FE; --accent-on-night: #38BDF8; }
.vp-cockpit { --accent: #7C3AED; --accent-text: #6D28D9; --accent-tint: #EDE9FE; --accent-on-night: #A78BFA; }
.vp-precon { --accent: #4F46E5; --accent-text: #4338CA; --accent-tint: #E0E7FF; --accent-on-night: #818CF8; }
.vp-rams { --accent: #991B1B; --accent-text: #7F1D1D; --accent-tint: #FEE2E2; --accent-on-night: #DC2626; }
.vp-bidroom { --accent: #2563EB; --accent-text: #1D4ED8; --accent-tint: #DBEAFE; --accent-on-night: #60A5FA; }
.vp-bto { --accent: #0D9488; --accent-text: #0F766E; --accent-tint: #CCFBF1; --accent-on-night: #2DD4BF; }
.vp-audit { --accent: #DB2777; --accent-text: #BE185D; --accent-tint: #FCE7F3; --accent-on-night: #F472B6; }

body { margin: 0; background: var(--desk); }
.doc, .doc * { box-sizing: border-box; }
.doc {
  max-width: 880px; margin: 32px auto 64px; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 16px; line-height: 1.55; text-align: left;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
  box-shadow: 0 1px 2px rgba(21, 19, 15, .08), 0 12px 40px rgba(21, 19, 15, .08);
}
.doc h1, .doc h2, .doc h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; margin: 0; }
.doc p, .doc ul, .doc ol, .doc figure { margin: 0; }
.doc a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.doc .num, .doc td.n, .doc .fig { font-variant-numeric: tabular-nums lining-nums; }
.doc .label { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.doc .mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.doc .muted { color: var(--ink-3); }

/* ---------- Cover ---------- */
.doc .cover { display: flex; flex-direction: column; }
.doc .cover-band {
  background: var(--night); color: var(--night-ink); padding: 40px 56px 44px;
  display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden;
}
.doc .cover-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.doc .wordmark { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--night-ink); }
.doc .wordmark .ai { color: var(--brand); }
.doc .packline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink-2); }
.doc .packline b { color: var(--accent-on-night); font-weight: 600; white-space: nowrap; }
.doc .packline span { white-space: nowrap; }
.doc .packline .sep { width: 28px; height: 2px; background: var(--accent-on-night); }
.doc .cover-title { display: flex; flex-direction: column; gap: 14px; max-width: 34em; }
.doc .cover-title .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink-2); }
.doc .cover-title h1 { font-size: 44px; line-height: 1.06; letter-spacing: -0.02em; color: var(--night-ink); }
.doc .cover-title .standfirst { font-size: 18px; line-height: 1.5; color: var(--night-ink-2); max-width: 36em; }

.doc .cover-body { padding: 36px 56px 40px; display: flex; flex-direction: column; gap: 32px; }
.doc .identity { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.doc .identity > div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.doc .identity dt, .doc .identity dd { margin: 0; }
.doc .identity dd { font-size: 15px; font-weight: 500; line-height: 1.4; }
.doc .quiet { margin-top: -18px; font-size: 13px; color: var(--ink-3); }
.doc .figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--accent); }
.doc .figures.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc .figures > div { padding: 16px 16px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.doc .figures .fig { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.doc .figures .cap { font-size: 13px; line-height: 1.4; color: var(--ink-2); max-width: 16em; }
.doc .cover-foot { display: none; }
.doc .pack-lockup { display: block; height: 34px; width: auto; }

/* ---------- Status chip: a dot and a word, the same in every pack ---------- */
.doc .chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; width: fit-content; line-height: 1.5; }
.doc .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.doc .chip.ok { color: var(--ok); background: var(--ok-tint); }
.doc .chip.warn { color: var(--warn); background: var(--warn-tint); }
.doc .chip.risk { color: var(--risk); background: var(--risk-tint); }
.doc .chip.note { color: var(--note); background: var(--note-tint); }
.doc .chip.pending { color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); }

/* ---------- Interior: sections on a label rail ---------- */
.doc .body { padding: 8px 56px 56px; }
.doc .sec { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; padding: 32px 0 8px; border-top: 1px solid var(--rule); }
.doc .sec:first-child { border-top: 0; }
.doc .sec-rail { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.doc .sec-rail .n { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--accent-text); letter-spacing: .04em; }
.doc .sec-rail .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.doc .sec-main { display: flex; flex-direction: column; gap: 16px; max-width: 42em; min-width: 0; }
.doc .sec-main.wide { max-width: none; }
.doc .sec-main h2 { font-size: 24px; line-height: 1.2; }
.doc .sec-main h3 { font-size: 17px; line-height: 1.3; }
.doc .sec-main p { font-size: 16px; line-height: 1.6; }
.doc .sec-main p.small, .doc .small { font-size: 14px; color: var(--ink-2); }
.doc .sec-main ul.list { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.55; }

.doc .quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 8px; }
.doc .quote q { font-size: 16px; line-height: 1.55; quotes: "\201C" "\201D"; }
.doc .quote .src { font-size: 13px; color: var(--ink-3); }

/* Fact list: label and value, hairline separated. */
.doc dl.facts { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); border-top: 1px solid var(--rule); }
.doc dl.facts dt, .doc dl.facts dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.doc dl.facts dt { padding-right: 16px; }
.doc dl.facts dd { font-size: 15px; line-height: 1.55; }

/* Table: header rule, hairlines, right-aligned tabular figures, a totals row. */
.doc .table-wrap { overflow-x: auto; }
.doc table.data { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.doc table.data th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.doc table.data td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc table.data th.n, .doc table.data td.n { text-align: right; white-space: nowrap; }
.doc table.data th:last-child, .doc table.data td:last-child { padding-right: 0; }
.doc table.data td .sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.doc table.data tr.sum td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 12px; }
.doc table.data tr.sub-total td { color: var(--ink-2); }
.doc table.data tr.minus td.n { color: var(--risk); }
.doc table.data.compact td { padding-top: 7px; padding-bottom: 7px; }

/* Callout: five meanings, each a 4px bar and a tint. */
.doc .callout { display: grid; grid-template-columns: 4px minmax(0, 1fr); border-radius: 4px; overflow: hidden; }
.doc .callout::before { content: ""; background: var(--c-bar); }
.doc .callout > div { padding: 14px 18px; background: var(--c-tint); display: flex; flex-direction: column; gap: 6px; }
.doc .callout .label { color: var(--c-text); }
.doc .callout p { font-size: 15px; line-height: 1.55; }
.doc .callout.note { --c-bar: var(--note); --c-tint: var(--note-tint); --c-text: var(--note); }
.doc .callout.warn { --c-bar: var(--warn); --c-tint: var(--warn-tint); --c-text: var(--warn); }
.doc .callout.risk { --c-bar: var(--risk); --c-tint: var(--risk-tint); --c-text: var(--risk); }
.doc .callout.act { --c-bar: var(--ink); --c-tint: var(--paper-2); --c-text: var(--ink); }
.doc .callout.ok { --c-bar: var(--ok); --c-tint: var(--ok-tint); --c-text: var(--ok); }

/* Cards: a grid of short, parallel items (stages, clauses, outputs). */
.doc .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doc .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc .card { border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.doc .card h3 { font-size: 16px; }
.doc .card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.doc .card .fig { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.doc .card.accent { border-top: 3px solid var(--accent); }

/* Meter: one measured share, labelled at both ends. */
.doc .meters { display: flex; flex-direction: column; gap: 10px; }
.doc .meter { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.doc .meter .track { height: 8px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.doc .meter .track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.doc .meter .v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Steps: an ordered process, numbered on the rail colour. */
.doc ol.steps { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); counter-reset: step; }
.doc ol.steps > li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); counter-increment: step; }
.doc ol.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--accent-text); padding-top: 1px; }
.doc ol.steps b { font-weight: 600; }
.doc ol.steps p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 2px; }

/* Approval record: the product's contract made visible. */
.doc table.approval { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc table.approval th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ink); }
.doc table.approval td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.doc table.approval td .line { display: block; height: 1px; background: var(--rule-2); margin-top: 18px; width: 100%; min-width: 80px; }
.doc .control { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.doc .control b { color: var(--ink); font-weight: 600; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .doc { margin: 0; box-shadow: none; }
  .doc .cover-band { padding: 28px 20px 32px; gap: 22px; }
  .doc .cover-title h1 { font-size: 32px; }
  .doc .cover-title .standfirst { font-size: 17px; }
  .doc .cover-body { padding: 24px 20px 28px; gap: 24px; }
  .doc .identity { grid-template-columns: 1fr 1fr; }
  .doc .figures, .doc .figures.three { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .doc .figures .fig { font-size: 26px; }
  .doc .body { padding: 0 20px 40px; }
  .doc .sec { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding-top: 28px; }
  .doc .sec-rail { flex-direction: row; gap: 10px; align-items: baseline; }
  .doc .sec-main h2 { font-size: 21px; }
  .doc table.data th.n { white-space: normal; }
  .doc dl.facts { grid-template-columns: 1fr; }
  .doc dl.facts dt { padding: 12px 0 0; border-bottom: 0; }
  .doc dl.facts dd { padding: 4px 0 12px; }
  .doc .cards, .doc .cards.three { grid-template-columns: 1fr; }
  .doc .meter { grid-template-columns: minmax(0, 1fr) auto; }
  .doc .meter .track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Print (A4) ----------
   The document's own <style> names its running header and its reference, e.g.
   @page { @top-left { content: "BuiltAI · Commercial Control Kit™"; }
           @top-right { content: "Variation Narrative · CE-009 · Rev 1"; }
           @bottom-right { content: "CREST-VN-CE009 · Page " counter(page) " of " counter(pages); } }
   Every page carries the quiet illustrative line: in the footer here, and on
   the cover (which has no margins) in .quiet and .cover-foot. */
@page {
  size: A4;
  margin: 22mm 18mm 20mm 18mm;
  @top-left { font-family: "Inter", Arial, sans-serif; font-size: 7.5pt; font-weight: 600; color: #6B665C; vertical-align: bottom; padding-bottom: 5mm; }
  @top-right { font-family: "Inter", Arial, sans-serif; font-size: 7.5pt; color: #6B665C; vertical-align: bottom; padding-bottom: 5mm; }
  @bottom-left { content: "Illustrative example: fictional project and parties."; font-family: "Inter", Arial, sans-serif; font-size: 7.5pt; color: #6B665C; vertical-align: top; padding-top: 5mm; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: "Inter", Arial, sans-serif; font-size: 7.5pt; color: #6B665C; vertical-align: top; padding-top: 5mm; }
}
@page :first { margin: 0; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } }
@media print {
  body { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc { max-width: none; margin: 0; box-shadow: none; background: transparent; font-size: 9.5pt; line-height: 1.5; }
  .doc .cover { height: 297mm; break-after: page; background: var(--paper); }
  .doc .cover-band { padding: 18mm 18mm 16mm; gap: 9mm; min-height: 150mm; justify-content: space-between; }
  .doc .cover-title h1 { font-size: 30pt; }
  .doc .cover-title .standfirst { font-size: 11.5pt; }
  .doc .wordmark { font-size: 15pt; }
  .doc .pack-lockup { height: 11mm; }
  .doc .packline, .doc .cover-title .eyebrow { font-size: 7.5pt; }
  .doc .cover-body { padding: 12mm 18mm 14mm; gap: 9mm; flex: 1; }
  .doc .quiet { margin-top: -6mm; font-size: 8pt; }
  .doc .cover-foot { display: flex; justify-content: space-between; margin-top: auto; font-size: 7.5pt; color: var(--ink-3); }
  .doc .identity dd { font-size: 9.5pt; }
  .doc .label, .doc .sec-rail .k, .doc table.data th, .doc table.approval th { font-size: 7.5pt; }
  .doc .figures .fig { font-size: 20pt; }
  .doc .figures .cap, .doc .control, .doc .quote .src, .doc table.data td .sub { font-size: 8pt; }
  .doc .body { padding: 0; }
  .doc .sec { grid-template-columns: 30mm minmax(0, 1fr); column-gap: 7mm; padding: 4mm 0 1mm; break-inside: auto; }
  .doc .sec.keep { break-inside: avoid; }
  .doc .sec-rail .n { font-size: 9pt; }
  .doc .sec-main { gap: 2.6mm; max-width: none; }
  .doc .sec-main h2 { font-size: 13pt; break-after: avoid; }
  .doc .sec-main h3 { font-size: 10.5pt; break-after: avoid; }
  .doc .sec-main p, .doc dl.facts dd, .doc .quote q { font-size: 9.5pt; }
  .doc .sec-main p.small, .doc .small, .doc ol.steps p, .doc .card p { font-size: 8.5pt; }
  .doc dl.facts { grid-template-columns: 30mm minmax(0, 1fr); }
  .doc dl.facts dt, .doc dl.facts dd { padding: 2mm 0; break-inside: avoid; }
  .doc table.data, .doc table.approval, .doc .meter { font-size: 8.5pt; }
  .doc table.data td { padding-top: 1.8mm; padding-bottom: 1.8mm; }
  .doc table.data thead { display: table-header-group; }
  .doc table.data tr, .doc .callout, .doc .quote, .doc .figures, .doc .identity, .doc table.approval tr, .doc .card, .doc ol.steps > li, .doc .meter { break-inside: avoid; }
  .doc .callout p { font-size: 9pt; line-height: 1.45; }
  .doc .callout > div { padding: 2.6mm 3.6mm; gap: 1mm; }
  .doc .card { padding: 3mm 3.6mm; }
  .doc .card .fig { font-size: 14pt; }
  .doc table.approval td { padding: 1.3mm 3mm 1.3mm 0; }
  .doc table.approval td .line { margin-top: 3.2mm; }
  .doc .control { padding-top: 2.4mm; gap: 1mm 6mm; }
  .doc .table-wrap { overflow: visible; }
  .doc p { orphans: 3; widows: 3; }
  .doc a { text-decoration: none; }
}