/* The client report as a document (George, 19 October 2026: the GEO Playbook's style, "super clean and polished";
   then landscape, with the dashboard's own modules one a page). A4 landscape pages in the playbook's system: Epilogue,
   the ink, hairline rules, big numerals with the accent bar, a folio with the mark. On screen the pages stack and
   flow; in print each is one sheet, except a page marked `grow`, whose module runs over as many sheets as its rows
   need. The dashboard's modules keep their own stylesheet (the --dd-* tokens); nothing here restyles them. */
:root {
  --ground: #fbfbff; --raised: #f1f2f7; --panel: #ffffff;
  --ink: #121619; --ink-2: #8e9197; --body: #4a4f55; --mute: #6b6f75;
  --line: rgb(18 22 25 / 0.08); --line-strong: rgb(18 22 25 / 0.16);
  --accent-ink: #4e7a00; --accent-soft: rgb(162 215 41 / 0.18);
  --onyx: #121619; --onyx-deep: #0b0e10;
  --d-ink: #fbfbff; --d-body: #a4a9ae; --d-mute: #8e9197;
  --gut: 18mm; --pw: 297mm; --ph: 210mm;
}
@page { size: A4 landscape; margin: 0; }
/* every content sheet starts below the top edge, so a page that runs over keeps the same head on its later sheets;
   only the cover bleeds */
@page content { margin-top: 14mm; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.cr-body { font-family: "Epilogue", system-ui, sans-serif; color: var(--ink); background: #e6e7ec; -webkit-print-color-adjust: exact; print-color-adjust: exact; counter-reset: pg; }
.client-report { max-width: var(--pw); margin: 0 auto; padding: 0 0 20mm; }
.page { width: 100%; max-width: var(--pw); position: relative; background: var(--ground); margin: 0 auto; counter-increment: pg; padding: 18mm var(--gut) 20mm; min-height: var(--ph); }
@media screen { .page { margin: 6mm auto; box-shadow: 0 2px 30px rgb(0 0 0 / 0.12); } }
/* the column rules: the brand's spine */
.page::before, .page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.page::before { left: 12mm; } .page::after { right: 12mm; }
.inner { position: relative; }
.folio { position: absolute; left: var(--gut); right: var(--gut); bottom: 9mm; display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--mute); letter-spacing: 0.01em; }
.folio .n::after { content: counter(pg); }
.folio .cr-mark { height: 8pt; width: auto; vertical-align: -1pt; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; }
h2.cr-page-h { font-size: 27pt; text-wrap: balance; max-width: 190mm; }
h2.cr-page-h .two, h1 .two { color: var(--ink-2); display: block; }
h3 { font-size: 11pt; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 3mm; }
p { margin: 0 0 3.2mm; font-size: 10pt; line-height: 1.55; color: var(--body); }
p strong { color: var(--ink); font-weight: 600; }
.lede { font-size: 12pt; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; margin: 5mm 0 7mm; max-width: 170mm; }
.src { font-size: 7.6pt; line-height: 1.45; color: var(--mute); margin-top: 2mm; }
.gap-s { height: 4mm; } .gap-m { height: 7mm; } .gap-l { height: 12mm; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 9mm; }
.cols > div { min-width: 0; }
.cols-wide { grid-template-columns: 3fr 2fr; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { position: relative; padding-left: 5.5mm; font-size: 10pt; line-height: 1.5; color: var(--body); margin-bottom: 2.4mm; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 2.1mm; width: 2.2mm; height: 2.2mm; border-radius: 50%; background: var(--accent); }
.defs-h { font-size: 11pt; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 3mm; }
.q { font-size: 11pt; line-height: 1.4; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 1.5mm; }

/* the cover */
.cr-cover { background: var(--onyx-deep); color: var(--d-ink); }
.cr-cover::before, .cr-cover::after { background: rgb(251 251 255 / 0.06); }
.cover-brand { position: absolute; top: 18mm; left: var(--gut); right: var(--gut); color: var(--d-ink); font-size: 12pt; font-weight: 600; letter-spacing: -0.02em; }
.cover-inciteful { display: inline-flex; align-items: center; gap: 2mm; }
.cover-inciteful .cr-mark { height: 14pt; width: auto; }
.cover-logo { max-height: 14mm; max-width: 60mm; width: auto; }
.cover-agency { font-size: 13pt; }
.cover-title { position: absolute; top: 48mm; left: var(--gut); right: var(--gut); }
.cover-title h1 { font-size: 44pt; line-height: 0.98; letter-spacing: -0.055em; color: var(--d-ink); text-wrap: balance; max-width: 200mm; }
.cover-title h1 .two { color: var(--d-mute); }
.cover-title p { color: var(--d-body); font-size: 12.5pt; line-height: 1.45; max-width: 140mm; margin-top: 7mm; }
.cover-rule { position: absolute; left: var(--gut); top: 140mm; width: 14mm; height: 1.6mm; background: var(--accent); border-radius: 1mm; }
.cover-ed { position: absolute; bottom: 14mm; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; gap: 6mm; color: var(--d-mute); font-size: 8.5pt; }

/* statistics: four across on a landscape sheet */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.stat { padding: 6mm 5mm 6mm 0; border-bottom: 1px solid var(--line); min-width: 0; }
.stat + .stat { padding-left: 5mm; border-left: 1px solid var(--line); }
.stat .num { font-size: 40pt; font-weight: 600; letter-spacing: -0.06em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.stat .bar { width: 14mm; height: 1.6mm; background: var(--accent); margin: 3.5mm 0 3mm; border-radius: 1mm; }
.stat .lab { font-size: 9.4pt; line-height: 1.45; color: var(--ink); }

/* definition rows */
.defs { border-top: 1px solid var(--line-strong); }
.defs > div { display: grid; grid-template-columns: 34mm 1fr; gap: 5mm; padding: 3.6mm 0; border-bottom: 1px solid var(--line); }
.defs h3 { font-size: 10.5pt; margin: 0; }
.defs p { margin: 0; font-size: 9.4pt; }
.cols-defs { column-count: 2; column-gap: 12mm; }
.cols-defs > div { break-inside: avoid; }
.powered { margin-top: 6mm; }
.cr-powered { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line-strong); }

/* tables */
table.t { width: 100%; border-collapse: collapse; margin-top: 2mm; font-size: 8.8pt; }
table.t th { text-align: left; font-weight: 600; color: var(--ink); padding: 2.4mm 2.5mm 2.4mm 0; border-bottom: 1px solid var(--line-strong); font-size: 8.2pt; }
table.t td { padding: 2.4mm 2.5mm 2.4mm 0; border-bottom: 1px solid var(--line); color: var(--body); vertical-align: top; line-height: 1.4; }
table.t td.k { color: var(--ink); font-weight: 500; }
table.t th.n, table.t td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.t th.c, table.t td.c { text-align: center; width: 24mm; padding-left: 1mm; padding-right: 1mm; }
table.t th.c { font-size: 7.6pt; line-height: 1.2; vertical-align: bottom; }
table.t.grid td.k { max-width: 0; width: 100%; }
.yes { color: var(--accent-ink); font-weight: 600; }
.dot { display: inline-block; width: 3mm; height: 3mm; border-radius: 50%; vertical-align: middle; }
.dot.named { background: var(--accent); }
.dot.read { border: 1.5px solid var(--ink-2); }
.dot.absent { width: 2.6mm; height: 1px; border-radius: 0; background: var(--line-strong); }
.dot.unchecked { width: 1mm; height: 1mm; background: var(--line-strong); }
.legend { display: flex; flex-wrap: wrap; gap: 2mm 7mm; font-size: 8.4pt; color: var(--mute); margin-bottom: 2mm; }
.legend span { display: inline-flex; align-items: center; gap: 2mm; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bars: share of voice and the product boards */
.bars { border-top: 1px solid var(--line-strong); }
.barrow { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 4mm; padding: 2.6mm 0; border-bottom: 1px solid var(--line); font-size: 9.2pt; color: var(--body); }
.barrow .name { color: var(--ink); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow.you .name { font-weight: 600; }
.barrow .track { height: 2mm; background: var(--raised); border-radius: 1mm; overflow: hidden; }
.barrow .fill { display: block; height: 100%; background: var(--ink-2); border-radius: 1mm; }
.barrow.you .fill { background: var(--accent); }
.barrow .val { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); min-width: 10mm; text-align: right; }
.bars .barrow:not(:has(.track)) { grid-template-columns: 1fr auto; }
.bars-engines .barrow { grid-template-columns: 40mm 1fr auto; }

/* numbered steps */
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: st; border-top: 1px solid var(--line-strong); column-count: 2; column-gap: 12mm; }
ol.steps li { counter-increment: st; display: grid; grid-template-columns: 11mm 1fr; padding: 3.2mm 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
ol.steps li::before { content: counter(st, decimal-leading-zero); font-size: 9pt; color: var(--accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 0.5mm; }
ol.steps h3 { font-size: 10.5pt; margin-bottom: 1mm; }
ol.steps p { margin: 0; font-size: 9.2pt; line-height: 1.5; }

/* quotes */
.quotes .obj { padding: 4mm 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.quotes .meta { display: flex; align-items: center; gap: 2mm; font-size: 8.2pt; color: var(--mute); margin-bottom: 1.5mm; }
.quotes .meta img { width: 14px; height: 14px; border-radius: 3px; }
.quotes .obj p { margin: 0; font-size: 9.6pt; }

/* the dashboard's modules: the card as the dashboard draws it, full width of the sheet. A list card (the citation
   grid, the engines) takes the height of its rows, so every row is on the page and none behind "see more"; a chart
   card keeps the dashboard's height. The links into the dashboard's drawers have nowhere to go in a document. */
.cr-module { margin-top: 2mm; }
.cr-module.cr-module--live > .dd-card { width: 100%; max-width: none; }
.cr-module--live[data-report-module="citations"] > .dd-card, .cr-module--live[data-report-module="citations-shopping"] > .dd-card, .cr-module--live[data-report-module="engines"] > .dd-card { block-size: auto; }
.cr-module--live .dd-card-foot .dd-link, .cr-module--live .dd-card-section-line .dd-link { display: none; }
.cr-section--module .inner { display: grid; gap: 4mm; }

/* shipped work keeps the dashboard's wording; its own classes are plain here */
.cr-shipped { font-size: 9.2pt; }
.cr-shipped ul, .cr-shipped ol { padding-left: 5mm; }
/* The citation table (26 Oct 2026): engines across the top, the check before publication and the latest since beneath. */
.cr-shipped .proof-grid { margin-top: 2mm; margin-bottom: 1.5mm; }
.cr-shipped .proof-grid th.c, .cr-shipped .proof-grid td.c { width: auto; min-width: 16mm; }
.cr-shipped .proof-grid td.c.moved { background: var(--accent-soft); }
.pm { display: inline-block; width: 4.6mm; height: 4.6mm; vertical-align: middle; color: var(--mute); }
.pm svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-named { color: var(--accent-ink); }
.pm-read { color: var(--body); }
.pm-absent, .pm-na { color: var(--ink-2); }
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-shipped .proof-story { margin: 0 0 1mm; }
.cr-shipped .proof-story b { color: var(--accent-ink); }

/* the screen toolbar; never printed. Its text and button sit on the grey desk, not the sheet, and the button is the
   product's ink action rather than the agency's colour, so both clear AA whatever colour the agency chose. */
.cr-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 4mm; max-width: var(--pw); margin: 0 auto; padding: 4mm 0 0; font-size: 9pt; color: var(--body); }
.cr-print { font: inherit; font-weight: 600; color: #fff; background: var(--ink); border: 0; border-radius: 1.6mm; padding: 2.4mm 4.5mm; cursor: pointer; }

/* print: one sheet per page; a `grow` page runs over as many sheets as its module needs */
@media print {
  body.cr-body { background: #fff; }
  .client-report { max-width: none; padding: 0; }
  .page { width: var(--pw); height: var(--ph); min-height: 0; margin: 0; overflow: hidden; box-shadow: none; page-break-after: always; break-after: page; }
  body.cr-body { background: var(--ground); }
  .page.cr-section { page: content; height: calc(var(--ph) - 14mm); padding-top: 4mm; }
  .page.grow { height: auto; min-height: calc(var(--ph) - 14mm); overflow: visible; }
  .page.grow .dd-card, .page.grow table { break-inside: auto; overflow: visible; }
  .page.grow .dd-card { border-radius: 0; }
  .page.grow tr { break-inside: avoid; }
  .cr-toolbar { display: none; }
}
/* a phone: the pages flow, the rules stay, the gutter narrows */
@media screen and (max-width: 640px) {
  :root { --gut: 8mm; }
  .page { padding: 14mm var(--gut) 18mm; min-height: 0; }
  .page::before { left: 4mm; } .page::after { right: 4mm; }
  .cols, .cols-wide, .stats { grid-template-columns: 1fr; }
  .stat + .stat { padding-left: 0; border-left: 0; }
  .cols-defs, ol.steps { column-count: 1; }
  h2.cr-page-h { font-size: 24pt; }
  .cover-title { top: 36mm; } .cover-title h1 { font-size: 34pt; } .cover-rule { top: 150mm; }
  .cr-cover { min-height: 200mm; }
  .folio { bottom: 6mm; }
  .cr-toolbar { padding: 4mm; }
}