/* ============================================================================
 * Vizaeo — printed report stylesheet
 *
 * Tufte-inflected, Rams-restrained. Black ink on white paper, generous
 * margins, restrained typography, no chrome. Editorial proportions —
 * Charter at 10pt with 1.55 leading, h1 at 17pt, the score numeral at
 * 38pt. Small-caps labels get 0.05em tracking. Section breathing room
 * is roughly 1.6em between blocks; that's where the rhythm lives.
 *
 * Sits inside @media print so it never affects screen rendering.
 * Loaded after globals.css so its rules win cleanly without specificity
 * wars.
 * ========================================================================== */

@media print {
  /* ── Force light-theme CSS variables ─────────────────────────────────────
   * ThemeProvider also strips the `.theme-dark` class on `beforeprint`
   * (see ThemeProvider.tsx), but Chrome's PDF export and some print
   * pipelines capture rendered styles before that DOM mutation lands.
   * Belt-and-braces: redeclare every dark-mode variable to its light
   * value at `:root.theme-dark` so card surfaces and text colors
   * resolve to light regardless of whether the class strip won the race.
   * If you add a new dark-mode CSS variable in globals.css, mirror it
   * here. */
  :root,
  :root.theme-dark,
  :root.theme-dark.theme-protanopia-dark,
  :root.theme-dark.theme-deuteranopia-dark,
  :root.theme-dark.theme-tritanopia-dark {
    /* Backgrounds + surfaces — login floor, forced light for paper */
    --background: #ffffff !important;
    --surface: #ffffff !important;
    --surface-hover: #fafbfc !important;
    --brand-card-white: var(--surface) !important;
    --brand-background: var(--surface) !important;
    --brand-mobile-background: var(--background) !important;
    --card-bg: var(--surface) !important;
    --subtle-bg: rgba(45, 74, 125, 0.04) !important;
    --bg-muted: rgba(0, 0, 0, 0.03) !important;
    --bg-faint: rgba(0, 0, 0, 0.02) !important;
    --tab-bar-bg: var(--surface) !important;

    /* Borders */
    --border: #dfe2ea !important;
    --card-border: rgba(45, 74, 125, 0.12) !important;
    --border-subtle: rgba(0, 0, 0, 0.06) !important;
    --border-faint: rgba(0, 0, 0, 0.04) !important;
    --tab-bar-border: rgba(45, 74, 125, 0.12) !important;

    /* Text — login floor ink */
    --text: #191c28 !important;
    --text-secondary: #4a5266 !important;
    --text-muted: #666e82 !important;
    --text-on-primary: #ffffff !important;
    --brand-text-dark: var(--text) !important;
    --foreground: var(--text) !important;
    --text-primary: var(--text) !important;
    --text-tertiary: var(--text-muted) !important;
    --muted: var(--text-muted) !important;
    --tab-inactive: #9eadc4 !important;

    /* Brand + status */
    --brand-primary-blue: #205cbd !important;
    --brand-cta: #ee7d3a !important;
    --primary: #bd5119 !important;
    --danger: #b42318 !important;
    --warning: #9a6a1c !important;
    --success: #1a7f4b !important;

    /* Score colors follow status tokens */
    --score-low: var(--danger) !important;
    --score-mid: var(--warning) !important;
    --score-high: var(--success) !important;
  }

  /* ── Page setup ────────────────────────────────────────────────────────── */

  @page {
    size: letter;
    margin: 0.85in 0.95in 0.95in 0.95in;
  }
  @page :first {
    margin-top: 1.2in;
  }

  /* Compare / Where You Lead vs Where They Lead / Platforms / Score
     Trend / Where you can pick up the most each break to a fresh
     portrait page. Previously the wide sections routed to a
     `section-landscape` named page so tables could stretch sideways,
     but the printed result was awkward — partially-filled landscape
     sheets that the reader had to rotate. Keep the fresh-page break
     for section rhythm; let the content reflow into the portrait
     column. */
  [data-section-label='Compare'],
  [data-section-label='Where You Lead vs Where They Lead'],
  [data-section-label='Platforms'],
  [data-section-label='Score Trend'],
  [data-section-label='Where you can pick up the most'] {
    page-break-before: always;
    break-before: page;
  }

  /* ── Color baseline ───────────────────────────────────────────────────── */

  /* Force white. The reader's printer paper is white; matching it is the
     point. The aggressive descendant reset nukes every screen-era card
     fill and surface tint; rules that need a real fill (score bars) are
     re-asserted explicitly below. */
  html,
  body,
  body *,
  body *::before,
  body *::after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
    background-image: none !important;
    filter: none !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: #14171f !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-scheme: light !important;
  }

  /* ── Typography ───────────────────────────────────────────────────────── */

  body {
    font-family:
      'Charter', 'Iowan Old Style', 'Source Serif 4', 'Source Serif Pro', 'Sitka Text', Georgia,
      'Times New Roman', serif !important;
    font-size: 10pt;
    line-height: 1.55;
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'onum' 1;
    text-rendering: optimizeLegibility;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  p {
    orphans: 3;
    widows: 3;
    margin: 0 0 0.75em;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: inherit;
    font-weight: 600;
    color: #14171f !important;
    line-height: 1.2;
    page-break-after: avoid;
    break-after: avoid;
    letter-spacing: 0;
  }

  h1 {
    font-size: 17pt;
    margin: 0 0 0.5em;
  }

  /* h2 stays mixed-case on paper. The eyebrow on
     [data-section-label]::before carries the small-caps role. */
  h2 {
    font-size: 12pt;
    margin: 1.4em 0 0.5em;
    color: #14171f !important;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 0;
    padding-bottom: 0;
  }

  h3 {
    font-size: 10.5pt;
    margin: 1.1em 0 0.35em;
    font-weight: 600;
  }

  h4 {
    font-size: 10pt;
    margin: 0.85em 0 0.25em;
    font-weight: 600;
    font-style: italic;
  }

  td,
  th,
  output,
  .tabular,
  [data-numeric],
  .score,
  .score-value,
  .score-num {
    font-variant-numeric: tabular-nums lining-nums !important;
  }

  small,
  figcaption,
  .caption {
    font-size: 8.5pt;
    color: #4b5160 !important;
    line-height: 1.4;
  }

  /* ── Things that don't belong on paper ────────────────────────────────── */

  nav,
  header,
  footer,
  aside,
  button,
  [role='button'],
  [role='tab'],
  [role='tablist'],
  [role='dialog'],
  [role='alertdialog'],
  [role='tooltip'],
  [data-toast-root],
  [data-no-print],
  .no-print {
    display: none !important;
  }

  [data-section-label='Improvement Plan'] {
    display: none !important;
  }

  input,
  select,
  textarea {
    display: none !important;
  }

  details {
    display: block !important;
  }
  details > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
    margin-bottom: 0.3em;
    font-weight: 600;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
  details > summary::after,
  details > summary::before {
    content: none !important;
  }
  details:not([open]) > *:not(summary) {
    display: revert !important;
  }

  /* ── Layout ───────────────────────────────────────────────────────────── */

  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    gap: 0 !important;
  }

  main > * {
    margin: 0 0 1.6em !important;
    padding: 0 !important;
  }

  [data-section-label],
  section,
  article {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.8em !important;
    page-break-inside: auto;
  }

  /* Each section gets a small-caps eyebrow + a hairline rule from
     data-section-label. Mixed-case, *not* uppercased, with editorial
     0.05em tracking. */
  [data-section-label]::before {
    content: attr(data-section-label);
    display: block;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--brand-primary-blue); /* Vizaeo blue */
    border-bottom: 0.5pt solid var(--brand-primary-blue);
    padding-bottom: 0.22em;
    margin-bottom: 0.85em;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Hero already provides a strong title; suppress the redundant Overview
     eyebrow. */
  [data-section-label='Overview']::before {
    content: none !important;
  }

  /* Print-only section title for the Overview/hero. The hero has its
     own eyebrow ("VISIBILITY REPORT · {date}") but lacked a section
     title at the same visual level as Methodology, Query Coverage
     Details, etc. This shows only in print where every other section
     gets a proper editorial header — see VisibilityReportHero.tsx. */
  .print-only-section-title {
    display: block !important;
    font-size: 22pt !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #14171f !important;
    margin: 0 0 0.4em !important;
    letter-spacing: 0 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ── Defeat screen-side text truncation in print ─────────────────────
   * Several screen components clip long text with overflow:hidden +
   * text-overflow:ellipsis + white-space:nowrap to keep cards tidy.
   * On paper there's no width constraint to clip against and ellipsis
   * just hides information, so revert all of that for print. */

  body * {
    text-overflow: clip !important;
  }

  [data-print-unwrap] {
    text-overflow: clip !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ── Hero (Overview section) — shrink screen-scale type for paper ──
   * VisibilityReportHero ships with screen-scale font-sizes (42px
   * headline, 18-pt leaderboard scores, etc.) in its CSS module.
   * Print hooks are data attributes, not [style*='…'] substrings, so
   * moving styles into the module does not silently change the PDF.
   *
   * Strategy: inherit the section's 10pt onto every descendant except
   * the print-only editorial title (which was never an inline font-size
   * and keeps its 22pt rule). Then re-assert the headline, eyebrow, and
   * tabular numerals. */

  [data-section-label='Overview'] *:not(.print-only-section-title) {
    font-size: inherit !important;
  }

  [data-section-label='Overview'] {
    font-size: 10pt !important;
    padding: 0 !important;
    margin: 0 0 1.6em !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Headline ("You rank #N of M …") */
  [data-section-label='Overview'] h1 {
    font-size: 16pt !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    margin: 0 0 0.4em !important;
  }

  /* Eyebrow row */
  [data-section-label='Overview'] [data-print='eyebrow'] {
    font-size: 7.5pt !important;
    letter-spacing: 0.05em !important;
  }

  /* Leaderboard score numerals — tabular and compact, not 18px chunky. */
  [data-section-label='Overview'] [data-print='tabular'] {
    font-size: 10pt !important;
    font-variant-numeric: tabular-nums lining-nums !important;
  }

  /* Action row (Export PDF etc.) — already nuked by the global button rule
     but re-assert for safety. */
  [data-section-label='Overview'] button {
    display: none !important;
  }

  /* ── Cover / title page ─────────────────────────────────────────────── */

  .print-cover {
    display: block !important;
    page-break-after: always !important;
    break-after: page !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Vizaeo logo at the top of the cover. SVG is colored, force the
     printer to render the colors so the brand actually lands. */
  .print-cover .print-logo {
    display: block !important;
    width: 1.6in;
    height: auto;
    margin: 0 auto 0.7in;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Title of the document — what it IS — dominates the cover. Larger
     and heavier than the business name so the reader's eye lands here
     first. */
  .print-cover .report-title {
    font-size: 34pt;
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 0.35em;
    letter-spacing: -0.01em;
    color: var(--brand-primary-blue) !important; /* Vizaeo blue */
  }

  /* Business name underneath — secondary to the report title, but
     still substantial. Whose report this is. */
  .print-cover .business-name {
    font-size: 20pt;
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 0.3em;
    letter-spacing: -0.005em;
    color: #14171f !important;
  }

  .print-cover .subtitle {
    font-size: 11.5pt;
    font-style: italic;
    color: #4b5160 !important;
    margin: 0 0 1.4em;
  }

  /* Score numeral in Vizaeo orange — the headline number of the report. */
  .print-cover .overall-score {
    font-size: 56pt;
    line-height: 1;
    margin: 0.4em 0 0;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--brand-cta) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .print-cover .overall-score .denom {
    font-size: 16pt;
    color: #4b5160 !important;
    margin-left: 0.15em;
    font-weight: 400;
    letter-spacing: 0;
  }

  .print-cover .meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1em 1.8em;
    margin: 0.9in auto 0;
    padding-top: 0.7em;
    border-top: 0.5pt solid var(--brand-primary-blue);
    max-width: 5.5in;
    text-align: center;
  }

  .print-cover .meta dt {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1f2f4a !important;
    margin: 0 0 0.25em;
    font-weight: 600;
  }

  .print-cover .meta dd {
    margin: 0;
    font-size: 10pt;
    color: #14171f !important;
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* ── Methodology page (hidden on screen, visible in print) ───────────── */

  .print-methodology {
    display: block !important;
    page-break-after: always !important;
    break-after: page !important;
    text-align: left;
    padding: 0 !important;
    margin: 0 !important;
  }

  .print-methodology .eyebrow {
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #1f2f4a !important;
    margin: 0 0 0.85em;
  }

  .print-methodology .title {
    font-size: 22pt;
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 0.4em;
    letter-spacing: 0;
  }

  .print-methodology .lede {
    font-size: 11pt;
    line-height: 1.55;
    color: #14171f !important;
    margin: 0 0 1.8em;
    max-width: 5in;
  }

  .print-methodology .block {
    margin: 0 0 1.6em;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-methodology .block-title {
    font-size: 11pt;
    font-weight: 600;
    margin: 0 0 0.3em;
  }

  .print-methodology .block-lede {
    font-size: 9.5pt;
    color: #4b5160 !important;
    line-height: 1.5;
    margin: 0 0 0.85em;
    max-width: 5in;
    font-style: italic;
  }

  .print-methodology .persona-list {
    margin: 0;
    padding: 0;
  }

  .print-methodology .persona {
    border-top: 0.25pt solid #c7cad3;
    padding: 0.45em 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-methodology .persona:first-child {
    border-top: 0.5pt solid #14171f;
  }
  .print-methodology .persona:last-child {
    border-bottom: 0.5pt solid #14171f;
  }

  .print-methodology .persona dt {
    font-size: 10pt;
    font-weight: 600;
    color: #14171f !important;
    margin: 0 0 0.15em;
  }

  .print-methodology .persona dd {
    font-size: 9.5pt;
    color: #14171f !important;
    margin: 0;
    line-height: 1.45;
  }

  .print-methodology .persona dd .tags {
    color: #4b5160 !important;
    font-size: 8.5pt;
  }

  .print-methodology .product-list {
    margin: 0;
    padding: 0;
    list-style: none;
    column-count: 2;
    column-gap: 0.4in;
    column-rule: 0.25pt solid #c7cad3;
  }

  .print-methodology .product-list li {
    font-size: 10pt;
    padding: 0.3em 0;
    border-bottom: 0.25pt solid #c7cad3;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── Tables ───────────────────────────────────────────────────────────── */

  table {
    border-collapse: collapse;
    width: 100% !important;
    page-break-inside: auto;
    font-variant-numeric: tabular-nums lining-nums;
    margin: 0.5em 0 1em;
  }

  thead {
    display: table-header-group;
  }

  th {
    text-align: left;
    font-weight: 600;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 0.5pt solid #14171f;
    padding: 0.4em 0.7em 0.3em 0;
    color: #1f2f4a !important;
  }

  td {
    padding: 0.42em 0.7em 0.42em 0;
    border-bottom: 0.25pt solid #c7cad3;
    vertical-align: baseline;
    color: #14171f !important;
  }

  tr:last-child td {
    border-bottom: 0;
  }

  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  th.num,
  td.num,
  th[data-numeric],
  td[data-numeric] {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* ── Bars / charts ────────────────────────────────────────────────────── */

  /* Score bars: keep proportion (the inline width is the data); re-assert
     charcoal on the fill, light grey on the track. The base reset above
     zeroed every background to transparent; these rules pull the two
     real-data backgrounds back.

     2026-06-01: scoped to the `.score-bar` / `.score-bar-track` classes
     (was `[style*='background'][style*='width']`, which also caught
     diagnostic rows whose inline style happens to contain both
     substrings — see ScoringDiagnostic.tsx Wrapper). Anything that
     needs the print-side black/grey bar treatment must carry the class. */
  .score-bar {
    background: #14171f !important;
    background-color: #14171f !important;
    border-radius: 0 !important;
  }

  .score-bar-track {
    background: #e5e7eb !important;
    background-color: #e5e7eb !important;
    border-radius: 0 !important;
  }

  /* Recharts (TrendSection) */
  .recharts-wrapper,
  .recharts-surface {
    overflow: visible !important;
  }
  .recharts-cartesian-axis-line,
  .recharts-cartesian-axis-tick-line {
    stroke: #14171f !important;
  }
  .recharts-cartesian-grid-vertical line,
  .recharts-cartesian-grid-horizontal line {
    stroke: #d6d8de !important;
    stroke-dasharray: none !important;
  }
  .recharts-text {
    fill: #14171f !important;
    font-family: inherit !important;
  }

  /* ── Links ────────────────────────────────────────────────────────────── */

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  a.print-cite[href]::after {
    content: ' \2014  ' attr(href);
    font-size: 0.85em;
    color: #4b5160 !important;
    word-break: break-all;
  }

  /* ── Images / SVG / icons ─────────────────────────────────────────────── */

  img,
  svg {
    max-width: 100% !important;
    height: auto !important;
  }

  [data-brand-glyph] {
    display: none !important;
  }

  /* ── Page-break utilities ────────────────────────────────────────────── */

  [data-page-break-before] {
    page-break-before: always !important;
    break-before: page !important;
  }
  [data-page-break-avoid] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Top Fixes is hidden everywhere in the screen UI now and shouldn't
     appear in the printed PDF either. */
  [data-section-label='Top fixes'] {
    display: none !important;
  }

  /* ── Force-expand collapsed sections in print ─────────────────────────
   * On screen, Platform Breakdown / Score Trend / Where you can pick up
   * the most are collapsed by default. On paper there's no value in
   * hiding the data — the reader can't click to expand. CollapsibleSection
   * keeps its children in the DOM with display:none when closed; print
   * forces them visible and hides the toggle button. */

  .collapsible-body {
    display: block !important;
    padding: 0 0 0.6em !important;
  }

  [data-section-label] > div > button[aria-expanded],
  [data-section-label] button[aria-expanded] {
    display: none !important;
  }

  /* ── Where You Lead vs Where They Lead — fit each card on one page ─── */

  [data-section-label='Where You Lead vs Where They Lead'] {
    font-size: 9pt;
  }

  [data-section-label='Where You Lead vs Where They Lead'] [data-competitor-card] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 0 !important;
    margin: 0 0 0.9em !important;
    border: 0 !important;
  }

  /* VIZ-232: force-expand collapsed cards in print mode regardless of
   * their screen-side open/closed state. The body is kept in the DOM
   * (display:none on screen) so print just unhides it. */
  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    .competitor-card-body {
    display: block !important;
    padding: 0 !important;
  }
  /* The broader `[data-section-label] button[aria-expanded] { display:none }`
     rule above hides all toggle buttons in print, but the competitor card's
     toggle button is also the only place the "vs {competitor name}" h4
     lives. Override to keep the button visible (stripped of button chrome)
     and hide just the interactive affordance (the chevron SVG). The score
     gap badge stays — it carries real per-competitor information. */
  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    button[aria-expanded] {
    display: flex !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 0.4em !important;
    margin: 0 !important;
    text-align: left;
    cursor: default;
  }
  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    button[aria-expanded]
    svg {
    display: none !important;
  }

  [data-section-label='Where You Lead vs Where They Lead'] [data-competitor-card] h4 {
    font-size: 10.5pt !important;
    margin: 0 0 0.15em !important;
  }

  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    [data-print='pill'] {
    padding: 0.05em 0.4em !important;
    font-size: 8.5pt !important;
  }

  /* GapRow: tighten padding + drop pill chrome on paper */
  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    [data-print='gap-row'] {
    padding: 0.3em 0 !important;
    margin-bottom: 0.2em !important;
    border: 0 !important;
    border-bottom: 0.25pt solid #c7cad3 !important;
    border-radius: 0 !important;
  }

  /* "Where you lead" / "Where they lead" subsection labels */
  [data-section-label='Where You Lead vs Where They Lead']
    [data-competitor-card]
    [data-print='subsection-label'] {
    font-size: 7.5pt !important;
    letter-spacing: 0.06em !important;
    margin: 0.4em 0 0.2em !important;
  }

  /* ── Tail mark ────────────────────────────────────────────────────────── */

  main::after {
    content: '\25A0';
    display: block;
    text-align: center;
    margin: 1.4em 0 0;
    font-size: 8pt;
    color: #14171f;
    page-break-before: avoid;
  }

  /* ── Contact footer ──────────────────────────────────────────────────── */

  /* A small "Questions? support@vizaeo.com" block at the very end of
     the printed document. Hidden on screen (see screen-default rule
     below the @media block); shown in both normal-print and pinned-only
     print modes. */
  .print-contact-footer {
    display: block !important;
    margin: 0.9em 0 0 !important;
    padding: 0.6em 0 0 !important;
    border-top: 0.5pt solid var(--brand-primary-blue);
    font-size: 9pt;
    line-height: 1.4;
    color: #4b5160 !important;
    text-align: center;
    page-break-before: avoid;
    break-before: avoid;
  }
  .print-contact-footer strong {
    color: #14171f !important;
    font-weight: 600;
  }
}

/* ── Pinned-only PDF mode ──────────────────────────────────────────────────
 * Activated by adding `.print-pinned-only` to <body> immediately before
 * window.print(). Hides the entire screen UI and renders ONLY the
 * .pinned-pdf section — the editorial "Recommendation list" the reader
 * exports. Unset on the afterprint event. */

@media print {
  /* The pinned-only mode hides everything inside <main> except the
     plan PDF's own cover + recommendation list. The cover reuses
     `.print-cover` so the visual chrome matches the /report PDF;
     the list lives in `.pinned-pdf`. Everything else (interactive
     plan UI, hero, library) is suppressed. */
  body.print-pinned-only main > *:not(.pinned-pdf):not(.print-cover) {
    display: none !important;
  }
  body.print-pinned-only .pinned-pdf,
  body.print-pinned-only .print-cover {
    display: block !important;
  }

  /* Plan-cover modifier — the /report cover has a 56pt score numeral
     under the subtitle that anchors the page visually. The plan doesn't
     have a score, so we insert a centered lede paragraph in that slot
     and tighten the meta-strip top margin. Everything else (logo,
     title, business name, subtitle, meta) inherits the .print-cover
     rules unchanged.

     The cover is print-only AND pinned-only: the general
     `.print-cover { display: block }` rule above would otherwise leak
     the cover into the /plan page during ordinary Cmd+P. We hide it
     here and re-enable only when body.print-pinned-only is set. */
  .plan-cover {
    display: none !important;
  }
  body.print-pinned-only .plan-cover {
    display: block !important;
  }

  .plan-cover .cover-lede {
    font-size: 11.5pt;
    line-height: 1.55;
    color: #14171f !important;
    margin: 0.6em auto 0;
    max-width: 5.2in;
    text-align: center;
  }
  .plan-cover .cover-lede strong {
    color: #14171f !important;
    font-weight: 600;
  }
  /* Score numeral sat 0.9in below the subtitle on the report cover;
     without it on the plan, pull the meta strip up so the page reads
     balanced instead of bottom-heavy. */
  .plan-cover .meta {
    margin-top: 0.55in;
  }

  .pinned-pdf {
    padding: 0 !important;
    margin: 0 !important;
    /* Land the recommendation list on its own page after the cover. */
    page-break-before: always;
    break-before: page;
  }

  .pinned-pdf .pinned-pdf-empty {
    font-size: 11pt;
    color: #4b5160 !important;
    font-style: italic;
    text-align: center;
    margin: 1.2em 0 0;
  }

  /* The recommendation list — editorial left-aligned reading. */
  .pinned-pdf .pinned-pdf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pin;
    text-align: left;
  }

  .pinned-pdf .pinned-pdf-item {
    counter-increment: pin;
    padding: 1em 0 1.2em;
    border-top: 0.25pt solid #c7cad3;
    page-break-inside: avoid;
    break-inside: avoid;
    position: relative;
  }
  .pinned-pdf .pinned-pdf-item:first-child {
    border-top: 0.5pt solid #14171f;
  }
  .pinned-pdf .pinned-pdf-item:last-child {
    border-bottom: 0.5pt solid #14171f;
  }

  /* Per-item metric eyebrow — matches the Vizaeo-blue section eyebrow
     rhythm used on every [data-section-label] header in the /report
     PDF. (Previously orange; aligned to blue so the two artifacts share
     the same eyebrow language.) */
  .pinned-pdf .pinned-pdf-item-meta {
    display: flex;
    gap: 0.5em;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-primary-blue) !important;
    font-weight: 700;
    margin: 0 0 0.3em;
  }

  .pinned-pdf .pinned-pdf-item-title {
    font-size: 13pt;
    font-weight: 600;
    margin: 0 0 0.35em;
    line-height: 1.25;
    border-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
  }
  .pinned-pdf .pinned-pdf-item-title::before {
    content: counter(pin) '. ';
    color: var(--brand-primary-blue); /* Vizaeo blue number prefix */
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
  }

  .pinned-pdf .pinned-pdf-item-detail {
    font-size: 10pt;
    line-height: 1.55;
    color: #14171f !important;
    margin: 0;
    max-width: 5.6in;
  }

  /* "Why this for you" + "Sources" subheads inside each pinned item.
     Smaller than the section eyebrow, Vizaeo-blue, tracked for the
     editorial reading rhythm. */
  .pinned-pdf .pinned-pdf-subhead {
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-primary-blue) !important;
    margin: 0.85em 0 0.3em;
  }

  .pinned-pdf .pinned-pdf-item-justification {
    margin: 0;
    max-width: 5.6in;
  }
  .pinned-pdf .pinned-pdf-item-justification p {
    margin: 0;
    font-size: 9.5pt;
    line-height: 1.5;
    color: #14171f !important;
  }

  .pinned-pdf .pinned-pdf-item-citations {
    margin: 0;
  }
  .pinned-pdf .pinned-pdf-item-citations ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pinned-pdf .pinned-pdf-citation {
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 0.5em;
    padding: 0 0 0 0.5em;
    border-left: 1.5pt solid var(--brand-primary-blue);
    max-width: 5.6in;
  }
  .pinned-pdf .pinned-pdf-citation:last-child {
    margin-bottom: 0;
  }
  .pinned-pdf .pinned-pdf-citation-publisher {
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1f2f4a !important;
    margin: 0 0 0.18em;
  }
  .pinned-pdf .pinned-pdf-citation-quote {
    font-size: 9.5pt;
    font-style: italic;
    line-height: 1.45;
    color: #14171f !important;
    margin: 0 0 0.2em;
  }
  .pinned-pdf .pinned-pdf-citation-attribution {
    font-size: 8pt;
    color: #4b5160 !important;
  }

  /* Pinned-only mode: report's methodology + tail mark don't belong
     on the recommendation list. The cover stays — that's the artifact
     parity we want. */
  body.print-pinned-only .print-methodology {
    display: none !important;
  }
  body.print-pinned-only main::after {
    content: none !important;
  }
}