/* AI Trust Map client PDF composition (Report v2). #cmv2-print is a direct child of , rendered from the same decision model as the dashboard. On screen it stays hidden (the screen copy renders inside the report panel); in print it is the ONLY thing on the page, which is what stops deploy-time injected site chrome (header, hamburger, marketing footer) ever reaching a client report again. */ #cmv2-print { display: none; } /* Screen version of the same composition inside the report panel. */ .cmv2-screen-report .cmv2-page { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 16px; padding: 34px 36px; margin-top: 18px; } .cmv2-screen-report-actions { justify-content: flex-end; margin: 0; flex-wrap: wrap; } /* The one thing on screen that says why nothing downloaded, so it is built to be read. * * It was 12.5px, right-aligned, colour-only - and it is the whole of the feedback when a * download fails. Reported as "the button changed for a bit but that was it", which is what a * message looks like when it is easy to miss. Now a tinted block with a border, left-aligned * with its own text, at body size. */ /* p.cmv2-download-error, not .cmv2-download-error. * * The note is appended into .cmw-report-link-card, and citation-map-ai-answers.css styles * `.cmw-report-link-card p` at specificity 0,1,1. A bare class is 0,1,0 and loses however late * its sheet loads, so the message rendered grey at 11.5px inside its own red box - measured in * a browser, invisible to a test that reads the rule instead of the outcome. Element+class ties * the specificity, and this sheet loads after that one. */ p.cmv2-download-error { flex-basis: 100%; margin: 10px 0 0; padding: 10px 12px; text-align: left; color: #b42318; background: #fef3f2; border: 1px solid #f6cfcb; border-radius: 8px; font-size: 14px; line-height: 1.5; } p.cmv2-download-error a { color: #b42318; font-weight: 700; text-decoration: underline; } /* Shared composition styling (screen and print). */ .cmv2-print-brand h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; } .cmv2-print-brand .cmv2-print-domain { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--seo, #2f80ff); } .cmv2-print-brand .cmv2-print-sub { margin-top: 10px; color: var(--muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .cmv2-print-cover-page .cmv2-exec { margin-top: 26px; } .cmv2-print-kicker { color: var(--seo, #2f80ff); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .cmv2-page h2 { margin: 8px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; } /* Measure: running text was set to roughly 100 characters a line. 640px lands near 70-75, which is the comfortable range, and the long paragraphs are where readers stopped. */ .cmv2-print-lead { margin: 0 0 16px; color: #475569; font-size: 13.5px; line-height: 1.6; max-width: 640px; } .cmv2-print-h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .01em; } .cmv2-print-fixes ul, .cmv2-print-list { margin: 8px 0 0; padding-left: 18px; } .cmv2-print-fixes li, .cmv2-print-list li { margin: 0 0 8px; color: #334155; font-size: 12.5px; line-height: 1.55; } .cmv2-print-strength { color: #15803d; } .cmv2-print-why-page p { margin: 6px 0 10px; color: #334155; font-size: 12.5px; line-height: 1.6; max-width: 660px; } .cmv2-print-foot { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-top: 26px; padding-top: 12px; border-top: 1px solid #e6ebf1; color: #7a8797; font-size: 10.5px; } .cmv2-print-foot img { opacity: .8; } .cmv2-print-note { color: #7a8797; font-size: 11px; margin: 8px 0 0; } /* Specific fix items */ .cmv2-print-fixitem { border: 1px solid var(--line, #e2e8f0); border-left: 3px solid #b45309; border-radius: 10px; padding: 10px 14px; margin: 8px 0; } .cmv2-print-fixitem > b { font-size: 13px; } .cmv2-print-fixitem ul { margin: 6px 0; padding-left: 18px; } .cmv2-print-fixitem li { margin: 0 0 4px; color: #334155; font-size: 12px; line-height: 1.5; } .cmv2-print-fixitem p { margin: 4px 0 0; color: #475569; font-size: 11.5px; line-height: 1.5; } /* Same rule as the review table: break where the URL has a natural seam, not mid-label. */ .cmv2-print-fixpage { word-break: normal; overflow-wrap: anywhere; } /* Priorities at a glance + timeline (plan page) */ .cmv2-print-priority-index { margin: 8px 0 0; padding-left: 20px; } .cmv2-print-priority-index li { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; } .cmv2-print-priority-index li b { display: block; } .cmv2-print-priority-index li span { color: #475569; } .cmv2-print-timeline { display: grid; gap: 8px; margin-top: 8px; } .cmv2-print-timeline > div { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 14px; } .cmv2-print-timeline span { display: inline-block; color: var(--seo, #2f80ff); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cmv2-print-timeline b { display: block; margin: 2px 0; font-size: 13px; } .cmv2-print-timeline p { margin: 0; color: #475569; font-size: 11.5px; line-height: 1.5; } /* Dossier pages */ .cmv2-print-dossier-page h2 { word-break: break-word; } .cmv2-print-dossier-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } .cmv2-print-dossier-meta span { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 10px; font-weight: 700; } .cmv2-print-dossier-link { margin: 0 0 6px; font-size: 11.5px; color: #334155; word-break: normal; overflow-wrap: anywhere; } .cmv2-print-dossier-page p { margin: 4px 0 8px; color: #334155; font-size: 12px; line-height: 1.55; max-width: 660px; } .cmv2-print-checklist { margin: 6px 0 0; padding: 0; list-style: none; } .cmv2-print-checklist li { position: relative; padding-left: 20px; margin: 0 0 6px; color: #334155; font-size: 12px; line-height: 1.5; } .cmv2-print-checklist li:before { content: '☐'; position: absolute; left: 0; top: -1px; color: #64748b; font-size: 13px; } /* Queued work: the same material a priority dossier carries, at a density that says "below the priorities" without the reader having to be told. Kept indivisible so a route in never breaks across a page from its own drafted message. */ .cmv2-queued-shared { break-inside: avoid; page-break-inside: avoid; margin: 0 0 16px; padding: 11px 14px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fbfdff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-queued-shared .cmv2-queued-label { margin-top: 0 !important; } .cmv2-queued-shared small { display: block; color: #7a8797; font-size: 10.5px; margin-top: 7px; } .cmv2-queued-item { break-inside: avoid; page-break-inside: avoid; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e8edf3; border-left: 3px solid #cbd5e1; border-radius: 10px; } .cmv2-queued-item > p { margin: 0 0 7px; color: #334155; font-size: 12px; line-height: 1.55; } .cmv2-queued-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 7px; } .cmv2-queued-head b { color: #0f172a; font-size: 13px; } .cmv2-queued-head span { color: #7a8797; font-size: 10.5px; font-weight: 700; } .cmv2-queued-label { margin: 9px 0 0 !important; color: #64748b !important; font-size: 9.5px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .cmv2-queued-item .cmv2-print-outreach { margin-top: 10px; } .cmv2-queued-item .cmv2-print-outreach p { font-size: 11.5px; } .cmv2-print-outreach { border: 1px solid var(--line, #e2e8f0); border-left: 3px solid var(--seo, #2f80ff); border-radius: 10px; padding: 12px 14px; } .cmv2-print-outreach b { display: block; font-size: 12px; margin-bottom: 4px; } .cmv2-print-outreach p { white-space: pre-line; } .cmv2-print-outreach small { display: block; color: #7a8797; font-size: 10.5px; margin-top: 6px; } /* Tables (scoreboard, sources, review, experiences) */ .cmv2-print-tablewrap { overflow-x: auto; } .cmv2-print-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .cmv2-print-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid #d8e1ec; color: #475569; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: bottom; } .cmv2-print-table td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; color: #334155; font-size: 11px; line-height: 1.45; vertical-align: top; } .cmv2-print-table tr { break-inside: avoid; } /* The confirmed record the listing corrections are measured against. A row-header table, so the customer reads it as a record to check rather than as another findings list. */ .cmv2-print-confirmed { margin: 8px 0 12px; } .cmv2-print-confirmed-table { max-width: 110mm; margin-top: 0; } .cmv2-print-confirmed-table th { width: 34mm; border-bottom: 1px solid #eef1f5; text-transform: none; letter-spacing: 0; font-size: 10.5px; font-weight: 700; color: #64748b; vertical-align: top; } .cmv2-print-confirmed-table td { font-weight: 600; color: #0f172a; } /* Engine performance bars. Pure CSS widths: no charting library, no external request, and they survive a PDF renderer. print-color-adjust keeps the fill from being dropped as a "background" by a print path that helpfully strips them. */ .cmv2-bars { margin: 10px 0 4px; display: grid; gap: 7px; } /* The branded panel was drawn grey to stop the two panels reading as one comparison. Grey on a 100% bar reads as disabled or as a warning, and a clean branded result is a GOOD result: every engine can retrieve the business when handed its name. So it keeps the same --seo green as the discovery panel and there is no override here at all, which is also the only way the two stay in step if the token ever moves. The panels are kept apart by their headings and by the note between them, which say it in words rather than leaving a colour to imply it. Owner call. */ .cmv2-bar-row { display: grid; grid-template-columns: 46mm 1fr 12mm; align-items: center; gap: 8px; break-inside: avoid; } .cmv2-bar-label { font-size: 11px; font-weight: 700; color: #334155; } .cmv2-bar-track { position: relative; height: 9px; border-radius: 999px; background: #eef1f5; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--seo, #2f80ff); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-bar-value { font-size: 11px; font-weight: 800; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; } /* Grouped appendix: one explanation per verdict, then the domains. A large group whose rows all share a reason becomes a flowing list rather than N rows repeating one sentence. */ .cmv2-print-domainlist { margin: 2px 0 6px; color: #334155; font-size: 10.5px; line-height: 1.65; word-break: normal; overflow-wrap: anywhere; } .cmv2-group-why { margin: 2px 0 4px; } .cmv2-print-review-page .cmv2-print-h3 { margin: 14px 0 2px; } /* Branded questions sit below a rule in the competitor table: rivals score zero on them by construction, so they are shown but never counted as part of the contest. */ .cmv2-print-sov .cmv2-sov-split td { border-top: 2px solid #d8e1ec; border-bottom: none; padding: 10px 8px 4px; color: #64748b; font-size: 10px; font-style: italic; } .cmv2-print-sov .cmv2-sov-branded td { color: #64748b; } .cmv2-print-sov .cmv2-sov-branded .cmv2-score-total { color: #64748b; font-weight: 600; } .cmv2-print-scoreboard .cmv2-q-col { max-width: 62mm; font-size: 10px; line-height: 1.35; } .cmv2-print-scoreboard th { font-size: 8.5px; } .cmv2-print-scoreboard td { padding: 4px 6px; } .cmv2-print-review td { padding: 5px 7px; font-size: 10.5px; line-height: 1.4; } .cmv2-score { font-weight: 700; white-space: nowrap; } .cmv2-score.is-yes { color: #15803d; } .cmv2-score.is-partial { color: #b45309; } .cmv2-score.is-no { color: #b42318; } .cmv2-score.is-na { color: #94a3b8; } .cmv2-score-total { font-weight: 800; white-space: nowrap; } /* ── The scoreboard as a grid of marks ───────────────────────────────────────── Every column is one mark wide, so the table can be read down as well as across and the whole of a ten-question map fits one sheet. Nothing here wraps, which is what makes the row height a constant the paginator can trust. */ .cmv2-print-heatgrid { table-layout: fixed; } .cmv2-print-heatgrid th { font-size: 8px; letter-spacing: .03em; padding: 0 2px 7px; text-align: center; } .cmv2-print-heatgrid td { padding: 0; height: 21px; text-align: center; vertical-align: middle; } .cmv2-hg-qh, .cmv2-hg-q { width: 30px; text-align: left !important; } .cmv2-hg-th, .cmv2-hg-t { width: 46px; text-align: right !important; } .cmv2-hg-q { font-size: 9px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; } .cmv2-hg-t { font-size: 9.5px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 6px !important; } /* SHAPE first, colour second: solid, half, hollow. The grid has to survive a greyscale office printer, and a reader who cannot separate green from amber still gets three distinct marks. */ .cmv2-cell { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-cell.is-yes { background: #15803d; } /* A clean VERTICAL half. The first cut of this was a 105deg gradient, which at 13px with a corner radius read as a glyph rather than as half a square - the mark has to say "half" at a glance or it is just another symbol to decode. */ .cmv2-cell.is-partial { background: linear-gradient(90deg, #b45309 0 50%, transparent 50% 100%); box-shadow: inset 0 0 0 1.2px #b45309; } /* NOT red, and the reasoning is in the renderer: there are around a hundred of these on a real report, and an absence is the opportunity being sold rather than a fault being reported. */ .cmv2-cell.is-no { background: transparent; box-shadow: inset 0 0 0 1.2px #cbd5e1; } .cmv2-cell.is-na { background: repeating-linear-gradient(45deg, #e2e8f0 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.2px #e2e8f0; } .cmv2-print-heatgrid tr.is-full td { background: #f0faf5; } .cmv2-print-heatgrid tr.is-empty .cmv2-hg-q, .cmv2-print-heatgrid tr.is-empty .cmv2-hg-t { color: #b45309; } .cmv2-hg-foot td { border-top: 2px solid #0f172a; border-bottom: none; padding-top: 6px !important; font-size: 9px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; } .cmv2-hg-foot td span { font-weight: 600; color: #94a3b8; } .cmv2-hg-legend { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #e6ebf1; font-size: 9.5px; color: #475569; } .cmv2-hg-legend span { display: flex; align-items: center; gap: 5px; } .cmv2-hg-legend .cmv2-cell { width: 10px; height: 10px; } .cmv2-hg-key { color: #7a8797; } /* Domains must never break mid-word: a reader retypes them, and "birminghammail.co.u k" across five appendix pages reads as carelessness. break-all splits anywhere INCLUDING mid-label; overflow-wrap:anywhere only breaks when the line genuinely cannot fit, so the dots and hyphens are taken first. Declared here, not earlier: an identical selector later in this file silently won. */ /* The host column had a max-width and no width, so the reason column took every spare millimetre and squeezed domains into two lines broken mid-word ("bookretreats.c / om"). A domain that has to be read back to somebody is the one thing on this table that must not wrap arbitrarily, so it gets a reserved width and only breaks when it genuinely cannot fit. */ .cmv2-print-review td:first-child { width: 46mm; word-break: normal; overflow-wrap: anywhere; hyphens: none; } /* Scoped to the VERDICT cell by class, not by position. Only the Priority group renders a verdict column, so in every other group `td:nth-child(2)` is the reason sentence: nowrap made it a single 350mm line, pushed the table past the page, and squeezed the host column to 6mm so a 40-character domain wrapped to thirty lines and the row stood 135mm tall. That is what made fifteen review pages overflow by about a metre each. */ .cmv2-print-review td.cmv2-verdict { white-space: nowrap; } /* A table can never be wider than the page it prints on: there is no scrollbar on paper, so a horizontal overflow is silent damage rather than something a reader can scroll to. `table-layout: fixed` was here too and did more harm than good: with ten columns and no declared widths it gave the scoreboard's question column a tenth of the table, about 19mm, so a customer question wrapped to seventeen lines and every row stood 75mm tall. The real cause of the overflow it was guarding against was the nowrap rule above, which is fixed. */ #cmv2-print .cmv2-print-tablewrap { overflow-x: hidden; } #cmv2-print .cmv2-print-table { max-width: 100%; } .cmv2-verdict { white-space: nowrap; font-weight: 700; } /* Verdict colours, shared by the table cells and the key above it. Green acts, teal is yours, amber watches, red is a rival's, black ignores. Text colour survives print reliably where backgrounds may not. */ #cmv2-print .is-priority { color: #15803d; } #cmv2-print .is-yours { color: #0e7490; } #cmv2-print .is-watch { color: #b45309; } #cmv2-print .is-rival { color: #b91c1c; } #cmv2-print .is-none { color: #111827; } .cmv2-verdict-key { list-style: none; padding: 0; margin: 0 0 4mm; font-size: 9.5pt; line-height: 1.45; } .cmv2-verdict-key li { margin: 0 0 0.8mm; } .cmv2-verdict-key span { font-weight: 700; } .cmv2-print-table tr.is-you td { background: #f1fbf7; font-weight: 700; } /* Plan steps on the print plan page */ .cmv2-print-plansteps { display: grid; gap: 8px; margin: 4px 0 6px; } .cmv2-print-plansteps > div { border: 1px solid var(--line, #e2e8f0); border-left: 3px solid var(--seo, #2f80ff); border-radius: 10px; padding: 10px 14px; } .cmv2-print-plansteps span { display: inline-block; color: var(--seo, #2f80ff); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cmv2-print-plansteps b { display: block; margin: 2px 0; font-size: 13px; } .cmv2-print-plansteps p { margin: 0; color: #475569; font-size: 11.5px; line-height: 1.5; } .cmv2-print-caution { color: #935d10; font-style: italic; } .cmv2-print-sov .cmv2-q-col { max-width: 70mm; font-size: 10px; line-height: 1.35; } .cmv2-print-sov td { white-space: nowrap; } .cmv2-print-sov td.cmv2-q-col { white-space: normal; } /* Quotes */ .cmv2-print-quote { margin: 0 0 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 12px 16px; break-inside: avoid; } .cmv2-print-quote.is-flagged { border-left: 3px solid #b45309; } .cmv2-print-quote blockquote { margin: 0; color: #1e293b; font-size: 12.5px; line-height: 1.6; } .cmv2-print-quote figcaption { margin-top: 6px; color: #7a8797; font-size: 10.5px; } /* Questions appendix */ .cmv2-print-questions { margin: 6px 0 0; padding-left: 20px; } .cmv2-print-questions li { margin: 0 0 5px; color: #334155; font-size: 11.5px; line-height: 1.45; } @media print { /* Only the dedicated composition prints - but only once it exists, so an old payload without the model still prints the legacy report rather than a blank document. */ body.cmv2-print-ready > :not(#cmv2-print) { display: none !important; } body.cmv2-print-ready #cmv2-print { display: block; } body.cmv2-print-ready { background: #fff !important; font-size: 10.5pt; } /* Each section is EXACTLY one page: a fixed height puts the footer in the same place at the true foot of every page, whether the page is a full table or a short cover. min-height was not enough on its own - a short page ended early and dragged its footer up to the bottom of its content - so both are set. THE HEIGHT IS A4's PRINTABLE AREA. It was US Letter's until 2026-08-27; the paragraphs below are the history of why, and the note at the end is why it changed. A4 printable height with these margins is 272mm; US Letter is 254.4mm. A box sized for A4 is a promise the SHEET has to keep, and twice now it has not: a customer's print dialog defaulted to Letter, every box overflowed its sheet by 16.6mm, and the dense pages painted their overflow on top of the next page. Two runs, four unreadable pages, a blank sheet fragmented off the end each time, and footers reading "of 17" across 18. Sizing for the SMALLER sheet inverts that. On Letter it fits exactly; on A4 it fits with 18mm to spare, so the footer sits a little above the true foot of the page and nothing anywhere can collide. A footer 18mm high on one paper size is a cosmetic cost that nobody notices. Overlapping text is not, and it reaches the customer. `overflow: hidden` would clip rather than overlap, which is worse: it loses evidence silently. The enforceable guarantee is citation-map-print-guard.js, which measures every page against its box AND against the sheet before a PDF exists. WHY IT IS NOW A4 (owner decision, 2026-08-27). The Letter sizing was correct when the only way to get a PDF was the customer's own print dialog, which picks its own paper. It is not the situation any more: /api/citation-map/report.pdf renders the document itself with `preferCSSPageSize: true`, so the file a customer receives is A4 because @page says so, and no dialog is involved. Sizing for Letter left 18mm of every A4 sheet unused - a whole band of white paper on all seventeen pages of the artefact people actually get, to protect a fallback path that is reached only when the server route fails and that already tells the customer in as many words to choose A4. The trade-off is real and worth stating plainly: if somebody uses their browser's print dialog AND leaves it on US Letter, dense pages will overflow again. The download button never does that, and the fallback message names the paper size. */ /* box-sizing MATTERS here and its absence is why two reports shipped broken. Without it, `height: 254mm` plus `padding-bottom: 14mm` is a 268mm box, and the original 271mm rule was really 285mm - larger than A4's own 272mm printable area, so the layout never fitted the paper it was designed for either. It only looked fine because most pages carry short content and an over-tall EMPTY box draws nothing. Measured in a real engine the box was 268mm against Letter's 254.4mm on every single page. */ #cmv2-print .cmv2-page { box-sizing: border-box; break-after: page; position: relative; height: 272mm; min-height: 272mm; padding: 0 0 14mm; } /* The cover is full bleed: no footer, no reserved band, panel to the foot of the sheet. */ #cmv2-print .cmv2-print-cover-page { padding-bottom: 0; } #cmv2-print .cmv2-page:last-child { break-after: auto; } #cmv2-print .cmv2-print-foot { position: absolute; bottom: 0; left: 0; right: 0; margin-top: 0; } /* Page 2 density: three evidence cards plus the plan must fit one page. */ #cmv2-print .cmv2-page h2 { font-size: 21px; margin: 6px 0 6px; } #cmv2-print .cmv2-print-lead { font-size: 12px; margin-bottom: 10px; } #cmv2-print .cmv2-print-h3 { margin: 12px 0 6px; font-size: 13px; } #cmv2-print .cmv2-priority header h3 { font-size: 14px; } #cmv2-print .cmv2-rank { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; } #cmv2-print .cmv2-priority-why b, #cmv2-print .cmv2-priority-do b { font-size: 9px; } #cmv2-print .cmv2-priority-why { padding: 8px 14px 0; } #cmv2-print .cmv2-priority-why p, #cmv2-print .cmv2-priority-do p { font-size: 10.5px; margin: 4px 0 8px; line-height: 1.45; } #cmv2-print .cmv2-priority-positions { padding: 6px 14px; gap: 6px 22px; } #cmv2-print .cmv2-priority-positions b { font-size: 11px; } #cmv2-print .cmv2-priority-positions span { font-size: 8.5px; } #cmv2-print .cmv2-priority-do { padding: 6px 14px 10px; } #cmv2-print .cmv2-print-fixes li, #cmv2-print .cmv2-print-list li { font-size: 11px; margin-bottom: 6px; } #cmv2-print .cmv2-print-why-page p { font-size: 11px; margin: 4px 0 8px; } /* The executive snapshot must look like the dashboard the customer saw. */ #cmv2-print .cmv2-exec { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 12px; padding: 20px 20px 16px; } #cmv2-print .cmv2-metrics { grid-template-columns: repeat(5, 1fr); } #cmv2-print .cmv2-metric strong { font-size: 18px; } #cmv2-print .cmv2-exec-copy h1 { font-size: 24px; } #cmv2-print .cmv2-ring { width: 92px; height: 92px; } #cmv2-print .cmv2-ring::after { width: 74px; height: 74px; } #cmv2-print .cmv2-ring strong { font-size: 21px; } #cmv2-print .cmv2-gap-tag, #cmv2-print .cmv2-rank, #cmv2-print .cmv2-step span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Nothing useful may straddle a page boundary. */ #cmv2-print .cmv2-priority, #cmv2-print .cmv2-exec, #cmv2-print .cmv2-print-fixes, #cmv2-print .cmv2-print-list li, #cmv2-print h2, #cmv2-print .cmv2-print-h3 { break-inside: avoid; } #cmv2-print .cmv2-print-h3 { break-after: avoid; } #cmv2-print .cmv2-priorities { gap: 8px; } #cmv2-print .cmv2-priority { box-shadow: none; } #cmv2-print .cmv2-priority header { padding: 10px 14px; } #cmv2-print .cmv2-priority-why { padding: 10px 14px 2px; } #cmv2-print .cmv2-priority-why p, #cmv2-print .cmv2-priority-do p { font-size: 11.5px; } #cmv2-print .cmv2-priority-positions { padding: 8px 14px; } #cmv2-print .cmv2-priority-do { padding: 9px 14px 12px; } #cmv2-print a { color: inherit; text-decoration: none; } } @page { size: A4; margin: 12mm 12mm 13mm; } /* ═══════════════════════════════════════════════════════════════════════════ Document architecture (2026-08-27) The composition had no page furniture and one measure. Sixteen pages each opened with the same green kicker in the same size, ran a single column at roughly 55% of the width, and stopped somewhere around half the height, so a third of the paid document was white space and every caveat sat in the reading line as though it were part of the finding. Three rules fix that and nothing else changes: · a running head names the numbered section, so a page can be cited; · the body is main + rail, so qualifications are visibly secondary and the reading measure lands at 65-75 characters instead of 95; · the cover is a cover, and the contents is generated from the assembled pages so its numbers cannot drift. ══════════════════════════════════════════════════════════════════════════ */ /* Running head. Present on every page except the cover. */ .cmv2-print-runhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-bottom: 7px; border-bottom: 1px solid #e6ebf1; } .cmv2-runhead-section { color: #0f172a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cmv2-runhead-brand { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em; } /* Body grid. The rail is 52mm; on screen it is a proportional column so the panel stays fluid at any width. */ .cmv2-page-body { display: block; } .cmv2-page-body.cmv2-has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 33%; gap: 22px; align-items: start; } .cmv2-page-main { min-width: 0; } .cmv2-page-rail { min-width: 0; display: grid; gap: 12px; align-content: start; } .cmv2-rail-note { border-left: 2px solid #dbe3ec; padding: 1px 0 1px 12px; } /* Scoped to the note's own title. An unscoped rule turned every inline inside the note body into a block-level uppercase heading, which broke a sentence into three stacked fragments on the standing page. */ .cmv2-rail-note > b:first-child { display: block; margin-bottom: 4px; color: #0f172a; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .cmv2-rail-note p b { font-weight: 700; color: #334155; } .cmv2-rail-note p { margin: 0; color: #5b6b7f; font-size: 10.5px; line-height: 1.55; } .cmv2-rail-figure { border-top: 2px solid #0f172a; padding-top: 8px; } .cmv2-rail-figure strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0f172a; font-variant-numeric: tabular-nums; } .cmv2-rail-figure span { display: block; margin-top: 5px; color: #0f172a; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .cmv2-rail-figure small { display: block; margin-top: 2px; color: #7a8797; font-size: 10.5px; line-height: 1.45; } /* The main column carries the argument, so its measure is capped rather than left to the page width. These override the old 640/660px caps, which were set against the full-width single column. */ .cmv2-page-main .cmv2-print-lead, .cmv2-page-main .cmv2-print-why-page p, .cmv2-page-main .cmv2-print-dossier-page p { max-width: none; } /* ── Cover ───────────────────────────────────────────────────────────────── */ .cmv2-print-cover-page { color: #e8eef7; } /* 224mm, not 236mm. The content area of the page box is 240mm (254mm less the 14mm footer band), and 236mm plus 50px of padding is 249mm: the panel ran 2.9mm THROUGH the footer and printed over the page number. Caught by the footer-band check in citation-map-print-guard, which exists because scrollHeight cannot see content growing into the box's own padding. */ /* Full bleed: the cover carries no footer, so the panel runs to the foot of the sheet. 272mm is A4's printable height with the @page margins, matching the page box exactly. */ .cmv2-cover { display: flex; flex-direction: column; min-height: 272mm; background: #060B18; border-radius: 16px; padding: 26px 30px 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* The title block sits at the optical two-thirds rather than dead centre: `space-between` on three blocks left a void above the eyebrow and another below the verdict, which reads as an unfinished page rather than a composed one. */ .cmv2-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* The title block sits at roughly the optical two-thirds, with the negative space above it where a cover's negative space belongs. `space-between` on three blocks put it dead centre and left a void both above and below, which reads as an unfinished page. */ .cmv2-cover-mid { margin: 46% 0 auto; } .cmv2-cover-foot { margin-top: 34px; } .cmv2-cover-tag { color: #7f8ea3; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .cmv2-cover-eyebrow { color: #36e6d0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .cmv2-cover-mid h1 { margin: 14px 0 0; color: #fff; font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; } .cmv2-cover-domain { margin-top: 10px; color: #36e6d0; font-size: 15px; font-weight: 700; } .cmv2-cover-finding { margin: 24px 0 0; max-width: 128mm; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; } .cmv2-cover-verdict { margin: 12px 0 0; max-width: 122mm; color: #9fb0c6; font-size: 14px; font-weight: 500; line-height: 1.55; } /* A superseded Playbook says so on its own cover. Amber rather than red: the document is not wrong, it is describing an earlier moment, and alarming a customer about a report they paid for would overstate it. */ .cmv2-cover-superseded { margin: 14px 0 0; max-width: 122mm; padding: 9px 12px; border-left: 3px solid #E2A33C; background: rgba(226,163,60,0.10); color: #F0D6A8; font-size: 12.5px; line-height: 1.5; } .cmv2-cover-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 16px; border-top: 1px solid #1e2a3f; } .cmv2-cover-foot span { display: block; color: #7f8ea3; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .cmv2-cover-foot b { display: block; margin-top: 5px; color: #e8eef7; font-size: 12px; font-weight: 700; line-height: 1.4; } /* ── Contents ────────────────────────────────────────────────────────────── */ .cmv2-contents { margin-top: 22px; padding-top: 16px; border-top: 2px solid #0f172a; } .cmv2-contents-list { margin: 10px 0 0; padding: 0; list-style: none; } .cmv2-contents-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f5; } .cmv2-contents-no { color: #94a3b8; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .cmv2-contents-name { color: #0f172a; font-size: 13px; font-weight: 700; } .cmv2-contents-pages { color: #7a8797; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Bars: reference line, sample size, thin-sample marking ──────────────── */ .cmv2-bar-row { grid-template-columns: 40mm 1fr 16mm 12mm; } .cmv2-bar-n { color: #94a3b8; font-size: 9.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .cmv2-bar-ref { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #0f172a; opacity: .55; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* A rate measured on materially fewer completed checks is not comparable with the rest, and an equal-weight bar invites exactly that comparison. Hatching says "smaller sample" without hiding the figure. */ .cmv2-bar-row.is-thin .cmv2-bar-fill { background: repeating-linear-gradient(135deg, #94a3b8 0 4px, #cbd5e1 4px 8px); } .cmv2-bar-row.is-thin .cmv2-bar-label, .cmv2-bar-row.is-thin .cmv2-bar-value { color: #64748b; } /* ── The narrowing bar ───────────────────────────────────────────────────── */ .cmv2-narrow { margin: 14px 0 6px; } .cmv2-narrow-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-narrow-bar span { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-narrow-bar .is-act { background: #10b981; } /* A correction is act-now work, so it reads as a darker relative of the priority green rather than as its own unrelated colour. */ .cmv2-narrow-bar .is-fix { background: #047857; } .cmv2-narrow-bar .is-next { background: #6ee7b7; } .cmv2-narrow-bar .is-have { background: #22d3ee; } .cmv2-narrow-bar .is-watch { background: #fbbf24; } .cmv2-narrow-bar .is-rival { background: #f87171; } .cmv2-narrow-bar .is-none { background: #cbd5e1; } .cmv2-narrow-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 9px 0 0; padding: 0; list-style: none; } .cmv2-narrow-key li { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: 10.5px; } .cmv2-narrow-key b { color: #0f172a; font-variant-numeric: tabular-nums; } .cmv2-narrow-key i { width: 9px; height: 9px; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-narrow-key .is-act { background: #10b981; } .cmv2-narrow-key .is-fix { background: #047857; } .cmv2-narrow-key .is-next { background: #6ee7b7; } .cmv2-narrow-key .is-have { background: #22d3ee; } .cmv2-narrow-key .is-watch { background: #fbbf24; } .cmv2-narrow-key .is-rival { background: #f87171; } .cmv2-narrow-key .is-none { background: #cbd5e1; } /* ── Priority placement ──────────────────────────────────────────────────── */ .cmv2-plot { margin: 16px 0 4px; } .cmv2-plot-area { position: relative; height: 46mm; border: 1px solid #e2e8f0; border-radius: 8px; background: linear-gradient(to right, #fff 0%, #f6fbf9 100%); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-plot-quad { position: absolute; top: 8px; left: 10px; max-width: 40%; color: #b6c2d1; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35; } .cmv2-plot-quad.is-target { left: auto; right: 10px; text-align: right; color: #10b981; } .cmv2-plot-dot { position: absolute; transform: translate(-50%, 50%); } .cmv2-plot-dot i { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Queued entries share the plot with the first moves but must not read as them: hollow dot, same scale, same axes. Solid = start now, outlined = next. */ .cmv2-plot-dot.is-queued i { background: #fff; color: #0f172a; box-shadow: inset 0 0 0 1.5px #94a3b8; font-weight: 700; } .cmv2-plot-x { display: flex; justify-content: space-between; margin-top: 6px; color: #94a3b8; font-size: 9.5px; font-weight: 700; } /* Names the websites it plots, so the exhibit carries its own context wherever it sits. Numbered dots alone meant nothing on the page the plot ended up on. */ .cmv2-plot-key { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 9px 0 0; padding: 0; list-style: none; } .cmv2-plot-key li { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-size: 10.5px; } .cmv2-plot-key li.is-queued { color: #64748b; } .cmv2-plot-key li.is-queued i { background: #fff; color: #0f172a; box-shadow: inset 0 0 0 1.25px #94a3b8; } .cmv2-plot-key li.is-queued b { font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; } .cmv2-plot-key i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 8.5px; font-style: normal; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Above the plot rather than below the x-axis labels, where it read as a third x-label. */ .cmv2-plot-y { margin: 0 0 5px; color: #94a3b8; font-size: 9.5px; font-weight: 700; } /* ── Dossier evidence strip ──────────────────────────────────────────────── */ .cmv2-evidence-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0 12px; padding: 11px 0; border-top: 1px solid #e6ebf1; border-bottom: 1px solid #e6ebf1; } .cmv2-evidence-strip strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0f172a; font-variant-numeric: tabular-nums; } .cmv2-evidence-strip span { display: block; margin-top: 4px; color: #64748b; font-size: 9.5px; line-height: 1.35; } /* The mark names what the number counts, so four bare digits stop needing four captions read before any of them means anything. Muted on purpose: it labels the figure, it is not the figure. */ .cmv2-evidence-strip .cmv2-ic { font-size: 13px; color: #94a3b8; display: block; margin-bottom: 5px; } /* ── Workplan ────────────────────────────────────────────────────────────── */ .cmv2-print-workplan .cmv2-wp-when { width: 26mm; font-weight: 800; color: #0f172a; } .cmv2-print-workplan .cmv2-wp-owner { width: 26mm; } .cmv2-print-workplan .cmv2-wp-done { width: 14mm; } .cmv2-print-workplan .cmv2-wp-what b { display: block; font-size: 12px; } .cmv2-print-workplan .cmv2-wp-what span { display: block; margin-top: 3px; color: #5b6b7f; font-size: 11px; line-height: 1.5; } .cmv2-print-workplan td.cmv2-wp-owner, .cmv2-print-workplan td.cmv2-wp-done { border-left: 1px solid #eef1f5; } .cmv2-print-workplan td.cmv2-wp-done:after { content: '☐'; color: #94a3b8; font-size: 14px; } /* ── Scoreboard read-out ─────────────────────────────────────────────────── */ .cmv2-scoreboard-read { margin-top: 14px; padding-top: 11px; border-top: 2px solid #0f172a; } .cmv2-scoreboard-read p { margin: 0; color: #334155; font-size: 12px; line-height: 1.6; } @media print { /* The cover is the one page with no running head and no top rule, so it gets the full box; everything else keeps the furniture. */ #cmv2-print .cmv2-print-cover-page { padding-bottom: 14mm; } #cmv2-print .cmv2-page-body.cmv2-has-rail { grid-template-columns: minmax(0, 1fr) 52mm; gap: 9mm; } #cmv2-print .cmv2-page-rail { gap: 9px; } #cmv2-print .cmv2-rail-note p, #cmv2-print .cmv2-rail-figure small { font-size: 9.5px; } #cmv2-print .cmv2-rail-note b, #cmv2-print .cmv2-rail-figure span { font-size: 9px; } #cmv2-print .cmv2-rail-figure strong { font-size: 22px; } #cmv2-print .cmv2-print-runhead { margin-bottom: 10px; } #cmv2-print .cmv2-cover-mid h1 { font-size: 42px; } #cmv2-print .cmv2-narrow-bar, #cmv2-print .cmv2-plot-area, #cmv2-print .cmv2-plot-dot i, #cmv2-print .cmv2-bar-ref, #cmv2-print .cmv2-narrow-key i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Nothing in the new furniture may straddle a page boundary either. */ #cmv2-print .cmv2-evidence-strip, #cmv2-print .cmv2-narrow, #cmv2-print .cmv2-plot, #cmv2-print .cmv2-rail-note, #cmv2-print .cmv2-rail-figure, #cmv2-print .cmv2-contents-list li { break-inside: avoid; } } /* ── How you appear when you do appear ───────────────────────────────────── */ .cmv2-quality { margin: 18px 0 4px; } /* minmax(0, 1fr) never wraps, so three cards stayed three columns at 390px and each held a two-word line. A real minimum lets them stack on a phone; print forces the single row back, where the page is always 186mm wide. */ .cmv2-quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; margin-top: 10px; } .cmv2-quality-card { border-top: 2px solid #0f172a; padding-top: 9px; } .cmv2-quality-card strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0f172a; font-variant-numeric: tabular-nums; } .cmv2-quality-card > span { display: block; margin-top: 5px; color: #0f172a; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; line-height: 1.35; } .cmv2-quality-card p { margin: 6px 0 0; color: #5b6b7f; font-size: 10.5px; line-height: 1.5; } /* A section folded onto another section's page keeps a real lead, not a footnote. */ .cmv2-print-blocklead { margin: 4px 0 8px; color: #475569; font-size: 12px; line-height: 1.55; } .cmv2-google-sources-block { margin-top: 20px; padding-top: 14px; border-top: 2px solid #0f172a; } @media print { #cmv2-print .cmv2-quality-card strong { font-size: 21px; } #cmv2-print .cmv2-quality-card p, #cmv2-print .cmv2-quality-card > span { font-size: 9.5px; } #cmv2-print .cmv2-quality-card, #cmv2-print .cmv2-google-sources-block { break-inside: avoid; } } /* ── The bars on a narrow screen ───────────────────────────────────────────── The grid reserves 40mm for the label, which is a sensible share of a 186mm page and most of a 390px phone: the track was left about 70px and the chart stopped being readable as a comparison. On a narrow screen the label takes its own line above the bar, which is the same information at full width. */ @media screen and (max-width: 720px) { .cmv2-bar-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label n value" "track track track"; gap: 3px 8px; } .cmv2-bar-label { grid-area: label; } .cmv2-bar-track { grid-area: track; } .cmv2-bar-n { grid-area: n; } .cmv2-bar-value { grid-area: value; } .cmv2-bars { gap: 12px; } } @media print { /* One row on paper, whatever the screen rules do. */ #cmv2-print .cmv2-quality-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } #cmv2-print .cmv2-evidence-strip { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } @media print { /* Page 2 carries the executive snapshot AND the contents, and the snapshot is styled by the dashboard sheets, which size it for a scrolling column rather than for a 240mm box. Measured against the real stylesheet set it needed 281mm and printed 35mm of itself over the page number. These rules compact only the printed copy; the dashboard is untouched. */ #cmv2-print .cmv2-print-summary-page .cmv2-exec { padding: 16px 18px 13px; } #cmv2-print .cmv2-print-summary-page .cmv2-ring { width: 74px; height: 74px; } #cmv2-print .cmv2-print-summary-page .cmv2-ring::after { width: 60px; height: 60px; } #cmv2-print .cmv2-print-summary-page .cmv2-ring strong { font-size: 17px; } #cmv2-print .cmv2-print-summary-page .cmv2-exec-copy h1 { font-size: 19px; line-height: 1.2; } #cmv2-print .cmv2-print-summary-page .cmv2-exec-copy p { font-size: 11px; line-height: 1.45; } #cmv2-print .cmv2-print-summary-page .cmv2-metric strong { font-size: 15px; } #cmv2-print .cmv2-print-summary-page .cmv2-metric span { font-size: 8px; } #cmv2-print .cmv2-print-summary-page .cmv2-metric small { font-size: 8px; line-height: 1.35; } #cmv2-print .cmv2-print-summary-page .cmv2-exec-segments small, #cmv2-print .cmv2-print-summary-page .cmv2-exec-narrowing small { font-size: 8.5px; line-height: 1.45; } #cmv2-print .cmv2-print-summary-page .cmv2-exec-narrowing strong { font-size: 11.5px; line-height: 1.4; } /* ── Page one, printed ────────────────────────────────────────────────────── * The summary is sized for a scrolling column; the PDF page has 240mm of usable box. These * rules compact the printed copy only, and the two-zone structure survives: the dark band * still carries the verdict and the exhibit, the light band still carries the work. * * .avp-next is HIDDEN in print on purpose. On the dashboard it tells the reader what the * rest of the document holds; in the PDF the contents page does that job with page numbers. */ #cmv2-print .avp-summary { border: 0; } #cmv2-print .avp-hero { padding: 14px 16px 15px; } #cmv2-print .avp-hero-grid { margin-top: 9px; gap: 14px; } #cmv2-print .avp-verdict h1 { font-size: 19px; line-height: 1.15; } #cmv2-print .avp-goodnews { font-size: 10.5px; line-height: 1.45; margin-top: 11px; padding-left: 9px; } #cmv2-print .avp-example { padding: 9px 10px; } #cmv2-print .avp-example figcaption, #cmv2-print .avp-example .avp-example-lead { font-size: 7.4px; } #cmv2-print .avp-example blockquote { font-size: 10.5px; margin: 5px 0 7px; padding: 6px 8px; } #cmv2-print .avp-example-list li { font-size: 9.5px; padding: 4.5px 7px; grid-template-columns: 15px 1fr auto; gap: 6px; } #cmv2-print .avp-example-list li b { font-size: 8px; } #cmv2-print .avp-example-you em { font-size: 8.4px; } #cmv2-print .avp-example > small { font-size: 7.8px; margin-top: 5px; } #cmv2-print .avp-body { padding: 12px 16px 10px; gap: 11px; } /* A4 is 186mm wide, which is ~703px, so the 1000px dashboard breakpoint fires on the printed page and stacks what should be a row. The sheet has a FIXED width, so the responsive rules are wrong here by construction and are overridden rather than moved. The hero is the exception: stacked, the verdict gets the full measure and lands on two lines instead of five, which is better on paper than side by side. */ #cmv2-print .avp-cards { gap: 8px; grid-template-columns: repeat(4, 1fr); } #cmv2-print .avp-explain { grid-template-columns: 1.12fr 1fr; } #cmv2-print .avp-card { padding: 9px; gap: 3px; min-height: 0; } #cmv2-print .avp-card-label { font-size: 7.4px; letter-spacing: .04em; line-height: 1.3; min-height: 2.6em; } #cmv2-print .avp-card-value { font-size: 19px; } #cmv2-print .avp-card-sub { font-size: 8.2px; line-height: 1.3; } /* The mark and the share cost about 6mm of card height between them, which page one does not have spare - it already needed the whole sheet once. So both shrink on paper rather than being dropped: the meter is the one part of the card a badly photocopied page keeps, and the mark is what separates the green card from the amber one for a reader who cannot tell those two hues apart. */ #cmv2-print .avp-card-head { min-height: 0; gap: 5px; } #cmv2-print .avp-card-head .cmv2-ic { font-size: 12px; } #cmv2-print .avp-card-chip { font-size: 7.2px; padding: 1px 5px; } #cmv2-print .avp-card-meter { height: 3.4px; margin-top: 4px; } /* The chain prints as LABELS ONLY. * * On screen each step carries a sentence of detail. At 186mm the three columns are narrow, so * those sentences wrap hard and the strip measured 43.8mm - on the two real reports that were * the difference between a printable page and one that ran 16mm into the footer. The labels * alone are the device, and the paragraph directly beneath already says the detail in full. */ #cmv2-print .avp-chain { gap: 12px; grid-template-columns: repeat(3, 1fr); } #cmv2-print .avp-chain-step + .avp-chain-step::before { display: block; } #cmv2-print .avp-chain-step { padding: 5px 7px; gap: 0; border-left-width: 2.5px; align-content: center; } #cmv2-print .avp-chain-step b { font-size: 8.8px; line-height: 1.18; letter-spacing: -.005em; } #cmv2-print .avp-chain-step span { display: none; } #cmv2-print .avp-chain-step + .avp-chain-step::before { left: -11px; width: 7px; height: 7px; } #cmv2-print .avp-explain { gap: 9px; } #cmv2-print .avp-explain-block { padding: 8px 10px; } #cmv2-print .avp-explain-block h2 { font-size: 7.6px; margin-bottom: 5px; } #cmv2-print .avp-explain-block p { font-size: 8.8px; line-height: 1.4; margin-bottom: 4px; } #cmv2-print .avp-explain-block p:first-of-type { font-size: 9.4px; line-height: 1.3; } #cmv2-print .avp-next { display: none; } #cmv2-print .avp-spine { display: none; } #cmv2-print .avp-detail { padding-top: 10px; gap: 8px 11px; grid-template-columns: repeat(5, 1fr); } #cmv2-print .avp-detail-item span { font-size: 7.2px; } #cmv2-print .avp-detail-item strong { font-size: 12px; } #cmv2-print .avp-detail-item small { font-size: 7.6px; line-height: 1.32; } #cmv2-print .avp-method { padding-top: 9px; gap: 4px; } #cmv2-print .avp-method span { font-size: 7.2px; margin-bottom: 3px; } #cmv2-print .avp-method small, #cmv2-print .avp-method-scope { font-size: 8px; line-height: 1.4; } #cmv2-print .avp-method-note { font-size: 8px; } /* The contents has its own sheet since 2026-08-29, so it no longer has to be compact. */ #cmv2-print .cmv2-print-contents-page .cmv2-contents { margin-top: 0; padding-top: 0; border-top: 0; } #cmv2-print .cmv2-print-contents-page .cmv2-contents-list li { padding: 7px 0; } #cmv2-print .cmv2-contents { margin-top: 14px; padding-top: 10px; } #cmv2-print .cmv2-contents-list li { padding: 4.5px 0; } #cmv2-print .cmv2-contents-name { font-size: 11.5px; } #cmv2-print .cmv2-contents-no, #cmv2-print .cmv2-contents-pages { font-size: 10px; } } @media print { /* The first review page's heading block is heading, intro, a six-line verdict key and a note. Measured at the printed width against a 140-website stress fixture it stood 2.3mm into the footer band BEFORE a single row was placed, so no packing budget could fix it: the page was too tall empty. Trimming the key's leading is the smallest change that buys the room, and it reads no differently. */ #cmv2-print .cmv2-verdict-key { margin-bottom: 3mm; line-height: 1.38; } #cmv2-print .cmv2-verdict-key li { margin-bottom: 0.4mm; } } /* ── The cover states the work, not just the count (2026-08-28) ─────────────── 160 checks across 8 AI experiences, asked twice, then read by a person: the entire proposition appeared once, as a footer datum. It is display copy now. */ .cmv2-cover-scope { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 30px; padding-top: 22px; border-top: 1px solid #1e2a3f; max-width: 128mm; } .cmv2-cover-scope strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #36e6d0; white-space: nowrap; font-variant-numeric: tabular-nums; } .cmv2-cover-scope span { color: #9fb0c6; font-size: 12.5px; line-height: 1.6; } /* The questions page: the customer's own words, set to be read rather than filed. */ .cmv2-print-questions-page .cmv2-print-questions li { font-size: 12.5px; line-height: 1.55; margin-bottom: 7px; } /* What AI answered instead: one block per lost question. The rivals are a list rather than a table because the count is secondary to the names, which are the point of the page. */ .cmv2-instead { border-left: 3px solid #f87171; padding: 2px 0 2px 12px; margin: 0 0 14px; } .cmv2-instead-q { font-weight: 650; margin: 0 0 4px; } .cmv2-instead-score { margin: 0 0 6px; color: #475569; } .cmv2-instead-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .cmv2-instead-names li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef2f7; padding-bottom: 2px; } .cmv2-instead-names span { color: #64748b; white-space: nowrap; } /* ── Share of voice: who AI named instead ────────────────────────────────────── The reader's own row is first, at zero, on the same axis as the rest. The empty track IS the finding, so it is drawn rather than described. Rivals stay in the recessive ink: they are context, not a set of competing series, so there is no categorical palette here and no legend to read. */ .cmv2-sovbars { display: grid; gap: 4px; margin: 7px 0 2px; } .cmv2-sovrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 30px; align-items: center; gap: 9px; } .cmv2-sovname { font-size: 10px; color: #334155; text-align: right; line-height: 1.25; overflow-wrap: anywhere; } .cmv2-sovtrack { position: relative; height: 12px; background: #eef2f7; border-radius: 3px; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-sovtrack i { display: block; height: 100%; background: #94a3b8; border-radius: 0 3px 3px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-sovval { font-size: 10px; font-weight: 800; color: #334155; text-align: right; font-variant-numeric: tabular-nums; } .cmv2-sovrow.is-you .cmv2-sovname { color: #0f172a; font-weight: 800; } .cmv2-sovrow.is-you .cmv2-sovtrack { background: #fdf3e7; box-shadow: inset 0 0 0 1.2px #b45309; } .cmv2-sovrow.is-you .cmv2-sovval { color: #b45309; } .cmv2-sovtrack em { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b45309; } /* ── Where you were placed ───────────────────────────────────────────────────── One block per ranked answer, so the distribution and the sample size are the same picture. Depth is carried by fill as well as by the number in the block. */ .cmv2-posstrip { margin-top: 14px; padding-top: 11px; border-top: 1px solid #e6ebf1; } .cmv2-posstrip-head b { font-size: 11px; font-weight: 800; color: #0f172a; } .cmv2-posstrip-head span { display: block; margin-top: 2px; font-size: 10px; color: #64748b; } .cmv2-posstrip-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; } .cmv2-posstrip-chips b { width: 19px; height: 21px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-posstrip-chips .is-first { background: #15803d; color: #fff; } .cmv2-posstrip-chips .is-second { background: #dcf3e6; color: #15803d; box-shadow: inset 0 0 0 1px #86c9a5; } .cmv2-posstrip-chips .is-rest { background: #f1f5f9; color: #475569; box-shadow: inset 0 0 0 1px #cbd5e1; } .cmv2-posstrip-chips .is-beyond { background: transparent; color: #94a3b8; box-shadow: inset 0 0 0 1px #cbd5e1; } .cmv2-posstrip-note { margin: 7px 0 0; font-size: 9.5px; color: #7a8797; line-height: 1.45; } /* ── The caveat, said once ───────────────────────────────────────────────────── It sits ABOVE the list, where a caveat about the whole job belongs, rather than at the foot of every card where it taught the reader to skip small grey text. */ .cmv2-fix-once { margin: 0 0 10px; padding: 9px 12px; background: #f4f8fd; border: 1px solid #dbe7f6; border-radius: 8px; color: #334155; font-size: 11px; line-height: 1.5; } /* ── What done looks like ────────────────────────────────────────────────────── The only line on a priority page that says when the reader may stop, and it was the fourth heading of four in the same weight as the rest. */ .cmv2-print-done { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; background: #f0faf5; border: 1px solid #cbead9; border-radius: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cmv2-print-done .cmv2-ic { font-size: 15px; color: #15803d; margin-top: 1px; } .cmv2-print-done div { font-size: 11.5px; line-height: 1.5; color: #334155; } .cmv2-print-done b { display: block; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #15803d; margin-bottom: 2px; } .cmv2-instead-src { margin: 6px 0 0; color: #475569; font-size: 11px; } /* The progress record on the working-order page. Secondary to the table it qualifies. */ #cmv2-print .cmv2-print-progress { margin: 6px 0 0; font-size: 9px; line-height: 1.45; font-weight: 700; color: #0f7a5a; }