/* ============================================================
   Verdigris Whitepaper / Briefing - print stylesheet
   Reference implementation for paged HTML rendered via
   WeasyPrint or Chrome --print-to-pdf.

   Status: experimental. Graduates to convention after 2 surfaces ship.

   Consumption:
     <link rel="stylesheet" href="path/to/cover.css">
     <section class="vd-cover"> ... </section>
     <section class="vd-paper"> ... </section>

   All selectors are namespaced .vd-* to avoid collision with
   consumer stylesheets.

   Tokens mirrored from:
     - tokens/color/base.json (built hex via build/dist/hex/colors.json)
     - tokens/typography/font-family.json
     - tokens/typography/scale.json (print pt mirror via @import; codegen at build/config.ts)
     - tokens/spacing/print.json
   ============================================================ */

@import url('../dist/typography/print.css');

:root {
  /* Brand color (canonical, hex from build/dist/hex/colors.json) */
  --vd-teal: #0fc8c3;                       /* color.brand.verdigris */
  --vd-teal-soft: #5fdedb;
  --vd-neutral-950: #09090b;                /* color.neutral.950, oklch(0.141 0.005 285.823) */
  --vd-ink: #14181f;                        /* near-black on light surface */
  --vd-muted: #5b6577;                      /* muted text on light */
  --vd-rule-strong: rgba(255, 255, 255, 0.20);
  --vd-teal-text: #007571;                  /* WCAG-AA teal on light bg; brand.verdigris-on-light token */
  --vd-rule-paper: rgba(20, 24, 31, 0.10);

  /* Print spacing (mirrors tokens/spacing/print.json) */
  --vd-frame-top: 0.85in;
  --vd-frame-side: 0.85in;
  --vd-frame-bottom: 0.85in;

  /* Cover rhythm. Floor + ceiling pair + default sit between. */
  --vd-cover-eyebrow-to-headline-min: 32px;
  --vd-cover-eyebrow-to-headline: 36px;
  --vd-cover-eyebrow-to-headline-max: 48px;

  --vd-cover-headline-to-deck-min: 18px;
  --vd-cover-headline-to-deck: 22px;
  --vd-cover-headline-to-deck-max: 28px;

  --vd-cover-deck-to-byline-min: 1.4in;     /* floor: below this, cover reads as page-1 article */
  --vd-cover-deck-to-byline: 1.6in;         /* default */
  --vd-cover-deck-to-byline-max: 2.6in;     /* ceiling: above this, cover reads as wrong-page-size */

  /* Confidentiality tier colors (shared across sales-collateral cells:
     slides, one-pagers, case-studies). Declared here so all four cells
     consume from one place. Loop 4 CSS audit moved these out of slides.css
     and one-pager.css duplicates (2026-05-03). */
  --vd-conf-public: var(--vd-muted);        /* default tier; subtle. 5.88:1 on white; 3.38:1 on #09090b */
  --vd-conf-customer: #c79100;              /* warm yellow; canonical for dark bg. 7.09:1 on #09090b; 2.81:1 on white (FAIL light) */
  --vd-conf-customer-on-light: #8f6300;     /* light-bg variant. 5.31:1 on white. Use in light footers (one-pager, body slides). [Z2O-1385] */
  --vd-conf-partner: #6b4ba0;               /* muted purple; canonical for light bg. 6.69:1 on white; 2.97:1 on #09090b (FAIL dark) */
  --vd-conf-partner-on-dark: #957bc1;       /* dark-bg variant. 5.57:1 on #09090b. Use in dark slide footers. [Z2O-1385] */
  --vd-conf-internal: #8a3a3a;              /* muted red; canonical for light bg. 7.64:1 on white; 2.60:1 on #09090b (FAIL dark) */
  --vd-conf-internal-on-dark: #c36f6f;      /* dark-bg variant. 5.52:1 on #09090b. Use in dark slide footers. [Z2O-1385] */
}

/* ---- Named pages ----
   IMPORTANT: WeasyPrint's @page :first selector is brittle (issue #2088).
   Use named pages instead. Apply with `page: cover` on the cover element.
*/
@page cover {
  size: Letter;
  margin: 0;
  background: var(--vd-neutral-950);
}
@page paper {
  size: Letter;
  margin: 0.85in 0.85in 1.0in 0.85in;
  @bottom-left {
    /* FROZEN: matches caption (9pt) token; CSS Paged Media spec does not support var() in font: shorthand */
    content: "Verdigris Technologies";
    font: 9pt 'Inter', sans-serif;
    color: var(--vd-muted);
    padding-top: 18pt;
    border-top: 0.5pt solid var(--vd-rule-paper);
  }
  @bottom-right {
    /* FROZEN: matches caption (9pt) token; CSS Paged Media spec does not support var() in font: shorthand */
    content: "Page " counter(page) " of " counter(pages);
    font: 9pt 'Inter', sans-serif;
    color: var(--vd-muted);
    padding-top: 18pt;
    border-top: 0.5pt solid var(--vd-rule-paper);
  }
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; }
body { margin: 0; color: var(--vd-ink); font-size: var(--vd-typography-body); line-height: 1.55; }
.vd-cover h1, .vd-cover p, .vd-paper h2, .vd-paper h3, .vd-paper p { margin: 0; }

sup {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  padding-left: 1.5pt;
  color: var(--vd-teal-text);          /* recessive; was --vd-teal which competed with H1 accent */
  font-weight: 600;
  opacity: 0.85;
}

/* ============================================================
   COVER
   ============================================================ */
.vd-cover {
  page: cover;
  page-break-after: always;
  counter-set: page 0;
  width: 8.5in;
  height: 11in;
  background: var(--vd-neutral-950);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--vd-frame-top) var(--vd-frame-side) var(--vd-frame-bottom);
}

.vd-cover-top { display: flex; align-items: center; }
.vd-cover-top .vd-logo { width: 180px; height: auto; }

.vd-cover-center { padding-top: 1.0in; }

.vd-cover-eyebrow {
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vd-teal-soft);
}
.vd-cover-eyebrow .vd-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--vd-teal);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.vd-cover-eyebrow .vd-sep {
  display: inline-block;
  width: 1px; height: 8pt;
  background: var(--vd-rule-strong);
  margin: 0 14px;
  vertical-align: -1pt;
}

.vd-cover-headline {
  font-family: 'Lato', 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--vd-typography-display-cover);
  line-height: 1.10;
  letter-spacing: -0.02em;
  max-width: 6.4in;
  color: rgba(255, 255, 255, 0.96);
  padding-top: var(--vd-cover-eyebrow-to-headline);
}
.vd-cover-headline .vd-accent { color: var(--vd-teal); }

.vd-cover-deck {
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-deck-page);
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  max-width: 4.75in;
  padding-top: var(--vd-cover-headline-to-deck);
}

/* The bounded quiet field. Floor + ceiling enforce the cover register. */
.vd-cover-quiet {
  flex: 1 1 auto;
  min-height: var(--vd-cover-deck-to-byline-min);   /* 1.4in floor */
  max-height: var(--vd-cover-deck-to-byline-max);   /* 2.6in ceiling */
}

.vd-cover-byline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--vd-typography-body);
  color: rgba(255, 255, 255, 0.78);
  padding-top: 14px;
  border-top: 0.4pt solid var(--vd-rule-strong);
}
.vd-cover-byline .vd-name { font-weight: 600; color: #ffffff; letter-spacing: 0.005em; }
.vd-cover-byline .vd-affil {
  display: block;
  font-size: var(--vd-typography-body-small);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 4px;
}
.vd-cover-byline .vd-date {
  font-size: var(--vd-typography-body-small);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
  text-align: right;
}
.vd-cover-byline .vd-date .vd-meta {
  display: block;
  font-size: var(--vd-typography-micro);
  /* 0.40 opacity at 8pt fails WCAG AA on dark (--vd-neutral-950) background
     (~2.2:1 contrast ratio). Bumped to 0.55 to clear AA at small type.
     Loop 4 CSS audit (2026-05-03). */
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding-top: 4px;
}

/* "Prepared for: ..." line. Required for vendor-authored briefs to LBNL/DOE-style audiences. */
.vd-cover-recipient {
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt; below perceptual threshold */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 18px;
}

/* COI / disclosure block. Required for vendor-authored briefs whose
   recommendations would benefit the author's commercial interest. */
.vd-cover-disclosure {
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  max-width: 5.5in;
  padding-top: 10px;
}
.vd-cover-disclosure strong { color: rgba(255, 255, 255, 0.78); font-weight: 600; }

/* ============================================================
   PAPER (inside pages)
   ============================================================ */
.vd-paper { page: paper; }
.vd-paper section { padding-bottom: 14pt; }

.vd-section-eyebrow {
  display: flex;
  align-items: baseline;
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vd-muted);
  padding-bottom: 6pt;
  page-break-after: avoid;          /* never strand an eyebrow at the bottom of a page */
  break-after: avoid;
}
.vd-section-eyebrow .vd-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 600;
  color: var(--vd-teal-text);
  margin-right: 12pt;
}

h2.vd-section-title {
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: var(--vd-typography-headline-section);  /* collapse 17pt -> 18pt; matches case-study + whitepaper-body */
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vd-ink);
  padding-bottom: 10pt;
  page-break-after: avoid;
  page-break-inside: avoid;       /* never split the H2 across pages */
  break-inside: avoid;
  max-width: 6.5in;
  hyphens: manual;
  text-wrap: pretty;              /* Chrome-only; harmless no-op in WeasyPrint */
}

p.vd-body { font-size: var(--vd-typography-body); line-height: 1.6; color: var(--vd-ink); padding-bottom: 10pt; orphans: 3; widows: 3; }
p.vd-body strong { font-weight: 600; }

ul.vd-bullets { margin: 0; padding-left: 18pt; padding-bottom: 10pt; }
ul.vd-bullets li { font-size: var(--vd-typography-body); line-height: 1.55; padding-bottom: 7pt; }

/* Thesis card. No background fill. Teal left rule only (Brookings/CSIS convention). */
.vd-thesis {
  margin-top: 12pt;
  padding: 6pt 0 6pt 16pt;
  border-left: 3pt solid var(--vd-teal);
  page-break-inside: avoid;
}
.vd-thesis .vd-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vd-teal-text);
  padding-bottom: 6pt;
}
.vd-thesis p { font-size: var(--vd-typography-body); line-height: 1.55; color: var(--vd-ink); }

table.vd-impact {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6pt;
  page-break-inside: avoid;
  border-top: 0.75pt solid var(--vd-rule-paper);
  border-bottom: 0.5pt solid var(--vd-rule-paper);
}
table.vd-impact th, table.vd-impact td {
  text-align: left;
  vertical-align: top;
  padding: 11pt 12pt 11pt 0;
  border-top: 0.25pt solid var(--vd-rule-paper);
  font-size: var(--vd-typography-caption);    /* collapse 10pt -> 9pt; tabular density justifies */
  line-height: 1.5;
}
table.vd-impact tr:first-child th, table.vd-impact tr:first-child td { border-top: none; }
table.vd-impact th {
  width: 2.05in;
  font-weight: 600;
  color: var(--vd-ink);
  padding-right: 18pt;
  hyphens: manual;
}

ol.vd-actions { margin: 0; padding-left: 0; list-style: none; counter-reset: act; padding-top: 6pt; }
ol.vd-actions li {
  counter-increment: act;
  padding: 6pt 0 12pt 0.55in;
  position: relative;
  page-break-inside: avoid;
}
ol.vd-actions li::before {
  content: counter(act);
  position: absolute;
  left: 0;
  top: 6pt;
  width: 0.4in;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: var(--vd-typography-deck-page);  /* 13pt — numeric prefix */
  color: var(--vd-teal-text);
  font-weight: 700;
}
ol.vd-actions .vd-action-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: var(--vd-typography-body);
  color: var(--vd-ink);
  padding-bottom: 4pt;
}
ol.vd-actions .vd-action-body { font-size: var(--vd-typography-body-small); line-height: 1.55; color: var(--vd-muted); }

.vd-sources {
  padding-top: 14pt;
  border-top: 0.5pt solid var(--vd-rule-paper);
  margin-top: 12pt;
  page-break-before: auto;     /* let sources flow up onto thesis page if room */
}
.vd-sources h3 {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vd-muted);
  padding-bottom: 8pt;
}
.vd-sources ol {
  columns: 2;
  column-gap: 22pt;
  column-fill: balance;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  line-height: 1.5;
  color: var(--vd-muted);
  padding-left: 16pt;
  margin: 0;
}
.vd-sources ol li { padding-bottom: 4pt; break-inside: avoid; }

/* Methods callout. Required for vendor-authored briefs whose claims rest on
   proprietary field data. Sits below sources, footnoted as letter (m, n, ...)
   to distinguish from numeric citations. */
.vd-methods {
  margin-top: 14pt;
  padding: 10pt 12pt 10pt 12pt;
  background: #f6f7fa;
  border-left: 2pt solid var(--vd-muted);
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  line-height: 1.55;
  color: var(--vd-ink);
  break-inside: avoid;
}
.vd-methods strong { font-weight: 700; color: var(--vd-ink); }
.vd-methods em { font-style: italic; }

/* Draft modifier: make placeholder values impossible to miss when the document
   is rendered before Methods data is filled in. Renders a high-contrast warning
   block so a CEO reviewing on screen or print cannot ship to LBNL by mistake. */
.vd-methods.vd-methods-draft {
  background: #fff4d6;                /* warm yellow alert tint */
  border-left-color: var(--vd-conf-customer);  /* same warm yellow as confidentiality tier */
  border-left-width: 4pt;
}
.vd-methods.vd-methods-draft strong:first-child {
  display: block;
  color: #8a5a00;
  font-size: var(--vd-typography-body-small);
  letter-spacing: 0.10em;
  padding-bottom: 6pt;
}

/* ============================================================
   FIGURE
   One figure with real data does more credibility work than
   most of the brief's prose. Keep figure + caption + credit
   together; never split across pages.
   ============================================================ */
figure.vd-figure {
  margin: 14pt 0 16pt 0;
  padding: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
figure.vd-figure img,
figure.vd-figure svg,
figure.vd-figure canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 0.25pt solid var(--vd-rule-paper);
}
figure.vd-figure.vd-figure-bleed img,
figure.vd-figure.vd-figure-bleed svg {
  border: none;
}
figcaption.vd-figure-caption {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-body-small);
  line-height: 1.5;
  color: var(--vd-ink);
  padding-top: 8pt;
}
figcaption.vd-figure-caption .vd-figure-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);    /* collapse 8.5pt -> 9pt */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vd-teal-text);
  padding-right: 8pt;
}
figcaption.vd-figure-caption strong { font-weight: 600; color: var(--vd-ink); }
.vd-figure-credit {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-micro);
  line-height: 1.5;
  color: var(--vd-muted);
  padding-top: 4pt;
}

/* ============================================================
   TEMPLATE PLACEHOLDERS
   Author-facing fill-in fields. Renders in alert color so the
   author cannot miss them on screen or in PDF before shipping.
   Convention: <span class="vd-template">[FIELD: hint]</span> or
   bare bracketed text inside .vd-template wrapper. Pairs with the
   "structural slots may be added; content must not be invented"
   principle in categories/whitepapers/cover.md.
   ============================================================ */
.vd-template,
.vd-template * {
  background: #fff4d6;                /* matches .vd-methods-draft alert tint */
  color: #8a5a00;
  font-weight: 600;
  padding: 0 3pt;
  border-radius: 2pt;
  /* Print-safe: ensure background prints in WeasyPrint and Chrome. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.vd-template::before { content: "\25B8 "; }   /* small triangle marks the field */