/* Sharestack Report Studio -- the client-facing document.
 *
 * This is the file that matters. Headless Edge loads the report HTML and prints
 * it to PDF; what this stylesheet says is what the client receives. It is
 * self-contained -- no @import, no CDN, no webfont, no framework -- because the
 * machine doing the export has no internet and a half-loaded stylesheet would
 * ship a broken report to a paying client.
 *
 * It is loaded two ways and has to behave in both:
 *   <link rel="stylesheet" href="print.css" media="print">   base.html, next to screen.css
 *   <link rel="stylesheet" href="print.css">                 report_print.html, the PDF
 *                                                            source and the standalone
 *                                                            HTML export
 * So the visual rules sit at top level and only the genuinely paged behaviour
 * (the repeating footer, zeroing the page padding) is wrapped in @media print.
 * screen.css keeps its responsive rules inside @media screen, so the two never
 * fight over the ~794px-wide page box.
 *
 * Type sizes are measured off the ten reference PDFs: 9.4pt body, 16.5pt cover
 * title, 12.75pt page-opening heading, 8.25pt small, 7.1pt footer. The --fs-*
 * multipliers are identical to screen.css, so the preview and the PDF are one
 * drawing at two scales -- what you see really is what you send.
 */

/* --------------------------------------------------------------- the page */

@page {
  size: A4;
  /* Deeper at the foot than the head: that band holds the running footer. */
  margin: 14mm 16mm 19mm;
}

/* US Letter, which is what the reference reports were printed on. The renderer
   adds class="paper-letter" to <body>; nothing else changes. */
@page letter-page {
  size: Letter;
  margin: 0.55in 0.65in 0.75in;
}
body.paper-letter { page: letter-page; }

/* ------------------------------------------------------------------ tokens */

:root {
  --brand:        #267864;   /* CUSP primary (rgb 38 120 100) */
  --brand-deep:   #1e5f50;   /* darker green for headings */
  --brand-mid:    #2f8f78;
  --brand-light:  #94c6b2;   /* CUSP primary-label */
  --brand-pale:   #d3e7df;
  --brand-tint:   #eef6f3;

  --ink:          #0b0b0b;
  --body:         #52514e;
  --muted:        #898781;
  --rule:         #e1e0d9;
  --panel:        #fcfcfb;
  --paper:        #ffffff;

  --good:         #1e7d3c;
  --good-ink:     #006300;
  --good-bar:     #1baf7a;
  --bad:          #c23a2b;
  --warn:         #a86a12;
  --neutral:      #52514e;
  --accent:       #eb6834;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
          Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Without this the browser drops every background when printing and the tiles,
   bars and tinted panels come out blank -- the most common way a report like
   this ships broken. print-color-adjust inherits, so html covers the tree. */
html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background: #fff;
}

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  font-family: var(--font);
  color: var(--body);
  font-size: 9.4pt;
  line-height: 1.52;
}

/* ------------------------------------------------------- hide the app chrome */

/* Everything the operator uses to build the report, and nothing a client should
   ever see. .print-keep is the escape hatch for the rare control that has to
   survive (a ticked box inside a printed checklist, say). */
nav,
form,
button,
input,
select,
textarea,
.no-print,
.topbar,
.topnav,
.flashes,
.doctoolbar,
.pagehead,
.rail,
.dropzone,
.dropzone-controls,
.results,
.reload-hint,
.prose-editor,
.prose-help,
.prose-preview,
.slot,
.block-unavailable,
.empty,
.btn,
.linkish,
.covrow,
.covgrid,
.covcount,
.previewbanner,
.clientbar,
.clientgreeting,
.clientfoot {
  display: none !important;
}

.print-keep,
.print-keep * { display: revert !important; }

/* An editable prose block prints as plain prose: no dashed edges, no tint, no
   leftover focus ring from the editor. */
[contenteditable] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 .8em !important;
  min-height: 0 !important;
}

a { color: inherit; text-decoration: none; }
/* A printed URL is noise: the templates spell out any address that matters. */
a[href]::after { content: ""; }

/* The layout wrappers exist to make room for app chrome that is now hidden. */
.wrap, .reportwrap, .reportlayout, .reportlayout.with-rail, .documentcol,
.dz-inner, .period-form {
  display: block !important;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* ================================================================ DOCUMENT */

.document {
  --fs-title:  1.76em;   /* 16.5pt -- cover title */
  --fs-banner: 1.36em;   /* 12.75pt -- a heading that opens a page */
  --fs-head:   1.12em;   /* 10.5pt -- exhibit headings */
  --fs-sub:    0.96em;   /* 9.0pt  -- labels inside exhibits */
  --fs-prose:  0.92em;   /* 8.6pt  -- "What this means" prose */
  --fs-small:  0.88em;   /* 8.25pt -- tables, captions */
  --fs-tiny:   0.76em;   /* 7.1pt  -- footer, data notes */
  --fs-tile:   1.68em;   /* 15.75pt -- the big number on a tile */

  font-size: 9.4pt;
  line-height: 1.52;
  color: var(--body);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0 0 4mm;   /* keeps the last line clear of the running footer */
  font-variant-numeric: tabular-nums;
}

.document p { margin: 0 0 .8em; orphans: 3; widows: 3; }
.document p:last-child { margin-bottom: 0; }

.document h2 {
  font-size: var(--fs-head);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.6mm;
}
.document h3 {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.3mm;
}

/* A heading never ends a page on its own. */
h1, h2, h3, h4,
.cover-title, .section-banner, .barset > .bar-label, .wincard-title {
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Square bullets, as in the reference reports' "Other findings" lists. */
.document ul { margin: 2.2mm 0 0; padding: 0; list-style: none; }
.document ul li {
  position: relative;
  padding-left: 3.6mm;
  margin-bottom: 2.2mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.document ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 3pt;
  height: 3pt;
  background: var(--body);
}

/* Each exhibit is one block. Most sit on an off-white card exactly like the
   reference reports; the cover, the tiles and the notes deliberately do not.
   break-inside: avoid keeps an exhibit whole -- and when one is genuinely
   taller than a page the browser breaks it anyway, with the table header
   repeating, which is the behaviour we want as a fallback. */
.block {
  --pad-x: 4.6mm;
  --pad-y: 3.4mm;
  background: var(--panel);
  border: 0.75pt solid var(--rule);
  border-radius: 3pt;
  padding: var(--pad-y) var(--pad-x) 4mm;
  margin: 0 0 4.4mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.block > *:last-child { margin-bottom: 0; }
.block-cover,
.block-kpi_tiles,
.block-data_notes,
.block-next_steps {
  --pad-x: 0mm;
  --pad-y: 0mm;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.block-exec_summary {
  background: var(--brand-tint);
  border-color: var(--brand-pale);
}
/* A block the renderer knows is long (a full category table) is allowed to flow
   across the page break instead of being pushed whole onto the next page. */
.block.is-long {
  page-break-inside: auto;
  break-inside: auto;
}

/* -------------------------------------------------------------- cover block */

.cover {
  margin: 0 0 4mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cover-title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.2pt;
  color: var(--brand-deep);
  margin: 0 0 1.6mm;
}
.cover-sub {
  font-size: var(--fs-head);
  color: var(--body);
  margin: 0 0 1.2mm;
}
.cover-dates {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

/* --------------------------------------------------- headings that open a page */

/* The reference reports start each major section at the top of a fresh page,
   under a navy heading with a rule beneath it. */
.section-banner,
.block.starts-page > h2:first-child {
  font-size: var(--fs-banner);
  font-weight: 700;
  color: var(--brand-deep);
  /* The rule runs the full width of the exhibit card rather than stopping at
     its padding, so the heading reads as the top of a section and not as a
     label inside a box. --pad-* is 0 on the blocks that carry no card. */
  margin: calc(1mm - var(--pad-y, 0mm)) calc(-1 * var(--pad-x, 0mm)) 3.4mm;
  padding: 0 var(--pad-x, 0mm) 1.6mm;
  border-bottom: 1.5pt solid var(--brand-deep);
}
.section-banner,
.block.starts-page {
  page-break-before: always;
  break-before: page;
}
/* ...except the first one, which would otherwise emit a blank opening page. */
.document > *:first-child,
.section-banner.first,
.block.starts-page:first-child,
.no-break {
  page-break-before: auto;
  break-before: auto;
}

/* ------------------------------------------------------------------- prose */

/* "What this means" always follows an exhibit, so it carries its own air above
   rather than relying on whatever came before it to provide it. */
.prose {
  font-size: var(--fs-prose);
  color: var(--body);
  margin-top: 3mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.block > .prose:first-of-type:first-child { margin-top: 0; }
.block-exec_summary .prose.lead { margin-top: 0; }
.prose p { margin: 0 0 .8em; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
/* The executive summary is one dense paragraph, a shade larger than body copy
   and never bulleted -- the house style in all ten reference reports. */
.prose.lead { font-size: 1.02em; }
.prose.analyst { margin-top: 2.6mm; }
.block-next_steps .prose.analyst {
  border-left: 2.25pt solid var(--brand);
  padding-left: 3mm;
  margin-bottom: 2.6mm;
}

.caption, .legend, .footnote {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0 0 2.6mm;
}
.footnote { margin: 1.6mm 0 0; }

/* ---------------------------------------------------------------- KPI tiles */

/* Four across, always. A wrapped fifth tile or a 3+1 row is the tell-tale sign
   of a broken export, so this is a fixed four-column grid that cannot wrap. */
.tiles {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 4), minmax(0, 1fr));
  gap: 2.9mm;
  margin: 0 0 4.4mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.tile {
  background: var(--panel);
  border: 0.75pt solid var(--rule);
  border-radius: 3pt;
  padding: 2.4mm 1.8mm 2.6mm;
  text-align: center;
  min-width: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.tile-label {
  font-size: var(--fs-small);
  color: var(--body);
  margin-bottom: 0.8mm;
  overflow-wrap: break-word;
}
.tile-value {
  font-size: var(--fs-tile);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.2mm;
}
/* A figure we could not compute prints as an em dash, never as a zero. */
.tile-value.missing, .missing { color: var(--muted); }
.tile-delta {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--neutral);
  white-space: nowrap;
}

/* Sentiment. The class comes from the metric's good_direction, set by the
   template -- NEVER from the arrow glyph, because a rising cost per lead is an
   up arrow AND a red chip. */
.tile-delta.good, .bar-caption.good, .bigstat-delta.good, .document .good { color: var(--good-ink); }
.tile-delta.bad,  .bar-caption.bad,  .bigstat-delta.bad,  .document .bad  { color: var(--bad); }
.tile-delta.neutral, .bar-caption.neutral, .bigstat-delta.neutral,
.document .neutral { color: var(--neutral); }

/* -------------------------------------------------------- paired comparison */

/* Every bar in this document is a plain element with an inline percentage
   width. There is no charting library on this machine and none is needed: each
   exhibit is one dimension deep, and a plain bar prints perfectly. */
.bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.6mm 7mm;
}
.barset {
  min-width: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.barset > .bar-label {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.4mm;
}
.bar-pair { margin: 0; }
.bar-row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 4em;
  align-items: center;
  gap: 2mm;
  margin-bottom: 1mm;
}
.bar-tag, .bar-row > .bar-label {
  font-size: var(--fs-small);
  color: var(--body);
  text-align: right;
  white-space: nowrap;
}
.bar {
  display: block;
  height: 8pt;
  min-width: 1.5pt;
  border-radius: 1.5pt;
  background: var(--brand);
}
.bar.prior   { background: var(--brand-light); }
.bar.current { background: var(--brand); }
.bar-val {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.bar-caption {
  font-size: var(--fs-small);
  color: var(--neutral);
  margin-top: 0.8mm;
}

/* ---------------------------------------------------------- share breakdown */

.shares { margin: 0; }
.share-row {
  display: grid;
  grid-template-columns: minmax(6em, 13em) minmax(0, 1fr) 3.6em auto;
  align-items: center;
  gap: 2.6mm;
  margin-bottom: 1.9mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.share-row:last-child { margin-bottom: 0; }
.share-name { font-size: var(--fs-sub); color: var(--ink); overflow-wrap: break-word; }
.share-bar {
  display: block;
  background: #f0efe9;
  border-radius: 1.5pt;
  overflow: hidden;
}
.share-bar > i {
  display: block;
  height: 8.5pt;
  min-width: 1.5pt;
  background: var(--brand);
  border-radius: 1.5pt;
}
/* Successive rows step down through the blues so a share breakdown reads as one
   picture rather than four identical bars. */
.share-row:nth-child(2) .share-bar > i { background: var(--brand-mid); }
.share-row:nth-child(3) .share-bar > i { background: var(--brand-light); }
.share-row:nth-child(4) .share-bar > i { background: var(--muted); }
.share-row:nth-child(5) .share-bar > i { background: var(--accent); }
.share-pct {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.share-val {
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.shares.tight .share-row { margin-bottom: 1.4mm; }
.shares.tight .share-bar > i { height: 6.5pt; }

/* -------------------------------------------------------------- single stat */

.bigstat {
  display: flex;
  align-items: baseline;
  gap: 2.6mm;
  flex-wrap: wrap;
  margin-bottom: 1.6mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bigstat-value {
  font-size: var(--fs-tile);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.bigstat-delta { font-size: var(--fs-sub); font-weight: 700; color: var(--neutral); }
.bigstat-prior { font-size: var(--fs-small); color: var(--muted); }

.statbar {
  background: var(--rule);
  border-radius: 1.5pt;
  overflow: hidden;
  margin-bottom: 2.6mm;
}
.statbar > i {
  display: block;
  height: 9pt;
  min-width: 1.5pt;
  background: var(--good-bar);
  border-radius: 1.5pt;
}

/* ------------------------------------------------------------------- funnel */

.funnel {
  margin: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.funnel-step {
  display: grid;
  grid-template-columns: 11.5em minmax(0, 1fr) 3.6em;
  align-items: center;
  gap: 2.6mm;
  margin-bottom: 2.2mm;
}
.funnel-step:last-child { margin-bottom: 0; }
.funnel-label { font-size: var(--fs-sub); color: var(--ink); }
.funnel-bar {
  display: block;
  height: 9.5pt;
  min-width: 1.5pt;
  border-radius: 1.5pt;
  background: var(--brand);
}
/* One shade darker at each step down the funnel. */
.funnel-step:nth-of-type(1) .funnel-bar { background: #6da7ec; }
.funnel-step:nth-of-type(2) .funnel-bar { background: #3987e5; }
.funnel-step:nth-of-type(3) .funnel-bar { background: #256abf; }
.funnel-step:nth-of-type(4) .funnel-bar { background: #184f95; }
.funnel-step:nth-of-type(5) .funnel-bar { background: #123c72; }
.funnel-val {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------ report tables */

/* Light horizontal rules only. Vertical borders turn a readable table into a
   spreadsheet screenshot. */
.tablewrap { overflow: visible; }
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
/* If a table really is taller than a page, the header repeats on the next one
   and no row is ever split down the middle. */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr { page-break-inside: avoid; break-inside: avoid; }

.report-table th {
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  padding: 1.3mm 2.1mm;
  border-bottom: 0.75pt solid var(--rule);
  vertical-align: bottom;
}
.report-table th:first-child { color: var(--ink); }
.report-table td {
  padding: 1.6mm 2.1mm;
  border-bottom: 0.75pt solid var(--rule);
  color: var(--body);
  vertical-align: top;
}
.report-table td:first-child { color: var(--ink); }
.report-table th:first-child, .report-table td:first-child { padding-left: 0; }
.report-table th:last-child, .report-table td:last-child { padding-right: 0; }
.report-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report-table tr.total-row td {
  font-weight: 700;
  color: var(--ink);
  border-top: 0.75pt solid var(--rule);
  border-bottom: 0;
  background: rgba(31, 95, 169, .045);
}

/* ------------------------------------------------------------ wins & cards */

.document .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2mm 7mm;
}
.wincard {
  border-left: 2.25pt solid var(--good);
  padding: 0.5mm 0 0.5mm 3mm;
  font-size: var(--fs-prose);
  color: var(--body);
  min-width: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.wincard-title { color: var(--ink); font-weight: 700; margin-bottom: 0.6mm; }
.wincard-body { color: var(--body); }
.block-next_steps .wincard { border-left-color: var(--brand); }

/* --------------------------------------------------------------- data notes */

.datanotes {
  font-size: var(--fs-tiny);
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.datanotes h3 { font-size: var(--fs-small); color: var(--body); margin-bottom: 1mm; }
.datanotes p { margin-bottom: .6em; }

/* ------------------------------------------------------------ running footer */

.docfooter {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  border-top: 0.75pt solid var(--rule);
  margin: 4mm 0 0;
  padding-top: 1.4mm;
  font-size: 7.1pt;
  color: var(--muted);
  background: #fff;
}
.docfooter > span:last-child { white-space: nowrap; }

@media print {
  /* The document owns the whole sheet; the page margins are the only padding. */
  body.printdoc { background: #fff; padding: 0; }
  body.printdoc .document { max-width: none; margin: 0; }

  /* A fixed element repeats on every printed page in Chromium/Edge, which is
     how the same footer line lands at the foot of all six pages. It must sit at
     bottom: 0 -- the bottom edge of the page's content area, and the only
     offset that repeats: pushing it into the page margin with a negative bottom
     makes Edge treat it as overflow and reprint it at the TOP of the following
     page instead (measured, not assumed). Chromium reserves no space for it, so
     the @page bottom margin above is deep enough that the footer lands in white
     space under the last exhibit.
     CSS cannot count pages, so "Page 3 of 6" is the renderer's job -- either it
     writes the number into the footer, or the export uses Edge's own footer
     template and adds class="edge-footer" to <body> so this one steps aside. */
  .docfooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5.5mm;
    align-items: flex-start;
    margin: 0;
  }
  body.edge-footer .docfooter { display: none; }
}

/* ---------------------------------------------------------- organic search
   Same parts as on screen. The team's notes carry no-print, so only spacing
   is needed here. */
.organic-part { margin-top: 4mm; }
.block-organic_summary .footnote,
.block-organic_pages .footnote { margin-top: 2mm; }


/* ------------------------------------------------- figures typed in from Semrush
   The two sections built from typed figures: same parts as on screen, in
   points. The team's line about who typed them carries no-print. */
.typed-tiles { margin-bottom: 3.2mm; }
.typed-part { margin-top: 4mm; }
.toxbar {
  display: flex;
  height: 8.5pt;
  margin: 1.6mm 0 2.4mm;
  background: var(--rule);
  border-radius: 1.5pt;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}
.toxbar > i { display: block; height: 100%; }
.toxbar > i.risky, .toxkey-swatch.risky { background: var(--bad); }
.toxbar > i.maybe, .toxkey-swatch.maybe { background: var(--accent); }
.toxbar > i.clear, .toxkey-swatch.clear { background: var(--brand-light); }
.toxkey { margin: 0 0 1mm; }
.toxkey-row {
  display: grid;
  grid-template-columns: 7pt minmax(0, 1fr) 4.5em 4.5em;
  align-items: center;
  gap: 2.4mm;
  margin-bottom: 1.3mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.toxkey-swatch { display: block; width: 7pt; height: 7pt; border-radius: 1.5pt; }
.toxkey-name { font-size: var(--fs-sub); color: var(--ink); }
.toxkey-count {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.toxkey-share { font-size: var(--fs-small); color: var(--muted); text-align: right; white-space: nowrap; }
.semrush-own { font-size: var(--fs-prose); color: var(--body); margin: 2.6mm 0 0; }
.semrush-score {
  display: flex;
  align-items: baseline;
  gap: 2.6mm;
  flex-wrap: wrap;
  margin: 3.6mm 0 1mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.semrush-score-label { font-size: var(--fs-sub); font-weight: 700; color: var(--ink); }
.semrush-score-value { font-size: var(--fs-tile); font-weight: 700; line-height: 1.1; color: var(--ink); }
.semrush-score-date { font-size: var(--fs-small); color: var(--muted); }