/* The report document.
 *
 * This is the only stylesheet in the product sized in points. The report is a printed
 * A4 document that is also readable in a browser — not a web page with a print
 * stylesheet bolted on — so the type scale, the margins and the rules are all set in
 * pt and the screen view simply shows the same sheet.
 *
 * The token layer still supplies every colour, font family and weight. What it does
 * not supply is the point scale: the design system's ramp is a screen ramp in px, and
 * a document needs its own. Those sizes live here, once.
 */

:root {
  --doc-width: 8.27in;          /* A4 */
  --doc-margin: 0.85in;
  --doc-body: 12pt;
  --doc-lh: 1.62;

  /* The figures. A chart needs two things a token file cannot give it: the unlit
     part of a track, which is a role rather than a colour, and a plain number.
     Both are aliases — neither introduces a literal. */
  --doc-chart-track: var(--line);

  /* The gauge circle's radius is 15.9155, which makes its circumference 100 user
     units — so a dash of n units is n per cent, and --doc-dial is that number.
     The template sets it per gauge; this is the empty dial. */
  --doc-gauge-circumference: 100;
  --doc-dial: 0;
}

.docPage { background: var(--surface-sunken); }

.doc {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--doc-width);
  margin: var(--space-8) auto;
  padding: var(--doc-margin);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-subtle);
  box-shadow: var(--shadow-md);
}

.doc__body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--doc-body);
  line-height: var(--doc-lh);
  color: var(--text-body);
}

.doc .sample-note { margin-bottom: var(--space-6); }

/* The findings notice sits with the document, not above it: it is a caveat on the
   contents, so it prints. The sample banner is marketing and does not. */
.doc__wipNote {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--line-subtle);
  border-left: 3px solid var(--warn-solid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-bg);
  font-size: 10.5pt;
  color: var(--warn-fg);
  break-inside: avoid;
}
.doc .sample-note a { color: var(--ember-700); text-decoration: underline; }

.doc a { color: inherit; text-decoration: none; }
.doc__contentsLink:hover .doc__contentsTitle { color: var(--text-link); text-decoration: underline; }

/* ----------------------------------------------------------- running head and foot */

/* On screen these sit once at the top and bottom of the one long sheet, because a
   browser has no pages to run across. In the PDF there are pages, and the print engine
   draws the foot into the margin of every one of them from the @page rule at the end of
   this file, so the document is fetched with ?print=1 and renders without this pair —
   see reportDocument({ chrome }). */
.doc__running {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 9pt;
  line-height: 1.3;
  color: var(--text-muted);
}

.doc__running--head {
  font-weight: var(--weight-medium);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--line-subtle);
}

.doc__running--foot {
  padding-top: var(--space-2);
  margin-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--line-subtle);
}

.doc__runningMark { font-weight: 800; letter-spacing: var(--tracking-display); color: var(--text-strong); }
.doc__runningMeta { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- the cover */

.doc__cover { padding-bottom: 24pt; }

.doc__eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9.5pt;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: 16pt;
}

.doc__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 30pt;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0 0 12pt;
}

.doc__lede {
  font-size: 13pt;
  line-height: 1.55;
  margin: 0 0 22pt;
  max-width: 33em;
}

.doc__meta { width: 100%; border-collapse: collapse; break-inside: avoid; font-size: 11pt; line-height: var(--lh-normal); }
.doc__meta td { padding: 7pt 0; border-top: var(--border-hairline) solid var(--line-subtle); }
.doc__meta tr:last-child td { border-bottom: var(--border-hairline) solid var(--line-subtle); }
.doc__metaKey { color: var(--text-muted); width: 30%; }
.doc__metaValue { color: var(--text-strong); }

.doc__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border-hairline) solid var(--line-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 24pt;
}

.doc__stat { padding: 14pt 12pt; border-right: var(--border-hairline) solid var(--line-subtle); }
.doc__stat:last-child { border-right: 0; }

.doc__statFigure {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22pt;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.doc__statLabel { font-size: 9.5pt; line-height: 1.35; color: var(--text-muted); margin-top: 5pt; }

/* ---------------------------------------------------------------- the contents */

/* The contents has a sheet to itself: a break before it so it does not run on from
   the cover's figures, and a break after it so section 1 starts clean. Both are inert
   on screen — a browser has no pages — which is the same idiom .doc__section uses, so
   the screen stays one continuous document and only the PDF gets the sheet. */
.doc__contentsPage {
  break-before: page;
  break-after: page;
  break-inside: avoid;
  /* On screen the breaks do nothing, so the sheet's worth of air has to come from
     somewhere: this is what keeps section 1's head off the last contents row. In print
     it falls at the foot of a page that ends anyway. */
  margin-bottom: 24pt;
}

/* Alone on a sheet, the heading carries it: the weight of a section title rather than
   the small caps label it was when it sat under the cover's figures. */
.doc__contentsHead {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 17pt;
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  margin: 0 0 4pt;
  padding-bottom: 8pt;
  border-bottom: var(--border-thick) solid var(--ink-900);
}

.doc__contents {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12pt;
  line-height: 1.4;
}

.doc__contentsItem { break-inside: avoid; }

/* A row is title, leader, locator. The two baseline declarations are one rule with a
   fallback: a title long enough to wrap should hand its leader to the *last* line, the
   way a printed contents does, and `last baseline` is what says so — an engine that
   does not know it keeps the first-baseline alignment above. */
.doc__contentsLink {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 5pt;
  padding: 8pt 0;
}

.doc__contentsTitle { flex: 0 1 auto; min-width: 0; color: var(--text-strong); }

/* The locator. It is the section number, not a page number: Chromium's print engine
   has no target-counter, so nothing here can resolve which sheet a section lands on,
   and the section number is what the whole report cross-references anyway. Mono so
   one and two digit numbers sit on the same right edge; brand-coloured, like the
   number printed at the head of the section it points at. */
.doc__contentsN {
  flex: 0 0 auto;
  min-width: 2em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: var(--weight-medium);
  color: var(--text-brand);
}

/* The dot leader.
 *
 * Glyphs, not a repeating gradient and not a dotted border. Chromium writes text into
 * the PDF as embedded vector glyphs, so the leader stays crisp at any zoom and at any
 * dpi; a gradient tile is rasterised at print resolution and moires along the row, and
 * a hairline dotted border is a sub-point rule the engine is free to round away. The
 * span is empty in the markup and the dots come from ::before, so the row carries no
 * punctuation for a screen reader to read out and nothing has to guess the width.
 *
 * The string is longer than the widest possible row and the excess is clipped.
 * direction: rtl moves the clip to the *left* end, which is the end nobody looks at:
 * the dot nearest the number is always a whole dot.
 */
/* flex-basis is 0, not auto: the dot string is far wider than any row, and a leader
   sized from its own content would take the whole line and wrap the title beside it. */
.doc__contentsLeader {
  flex: 1 1 0;
  min-width: 10pt;
  overflow: hidden;
  direction: rtl;
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.doc__contentsLeader::before { content: ".................................................................................................................................."; white-space: nowrap; }

/* -------------------------------------------------------------------- a section */

/* Every numbered section starts a fresh sheet. Thirteen sections, thirteen page
   breaks: the report is meant to be read as a document, not scrolled. */
.doc__section { break-before: page; }
.doc__section:first-of-type { break-before: auto; }

/* On screen the breaks do nothing, and a section ending in a margin-less element (a
   footnote) put the next head flush against it. Print keeps the fresh sheet instead. */
@media screen {
  .doc__section + .doc__section { margin-top: 40pt; }
}

.doc__sectionHead {
  display: flex;
  align-items: baseline;
  gap: 12pt;
  margin-bottom: 6pt;
  padding-bottom: 8pt;
  border-bottom: var(--border-thick) solid var(--ink-900);
}

.doc__sectionN {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12pt;
  line-height: 1;
  color: var(--text-brand);
}

.doc__sectionTitle {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 17pt;
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  margin: 0;
}

.doc__intro { margin: 0 0 18pt; max-width: 34em; }

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

.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5pt;
  line-height: 1.45;
  margin-bottom: 20pt;
}

.doc__table:last-child { margin-bottom: 0; }
.doc__table--dense { font-size: 10pt; line-height: 1.4; }

.doc__table th {
  text-align: left;
  padding: 0 8pt 7pt 0;
  border-bottom: 1.5px solid var(--ink-900);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9pt;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc__table th + th { padding-left: 8pt; }
.doc__table th:last-child { padding-right: 0; }

.doc__table tr { break-inside: avoid; }

.doc__table td {
  padding: 9pt 8pt 9pt 0;
  border-bottom: var(--border-hairline) solid var(--line-subtle);
  vertical-align: top;
}

.doc__table td + td { padding-left: 8pt; }
.doc__table td:last-child { padding-right: 0; }
.doc__table--dense td { padding-top: 8pt; padding-bottom: 8pt; }

/* A cell holding something the crawler emitted — an address, a count, a tag. */
.doc__cellMono { font-family: var(--font-mono); font-size: 9.5pt; }
.doc__table--dense .doc__cellMono { font-size: 9pt; }

/* Score semantics own these three colours, and a cell's colour always comes from its
   finding, never from a choice made in a template. */
.doc__cell--fail { color: var(--fail-fg); font-weight: var(--weight-semibold); }
.doc__cell--warn { color: var(--warn-fg); font-weight: var(--weight-semibold); }
.doc__cell--pass { color: var(--pass-fg); font-weight: var(--weight-semibold); }
.doc__cell--muted { color: var(--text-muted); font-weight: var(--weight-semibold); }
.doc__cell--strong { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* -------------------------------------------------------------------- callouts */

.doc__callout {
  border: var(--border-hairline) solid var(--line-subtle);
  border-left: 3px solid var(--signal-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14pt 16pt;
  background: var(--surface-sunken);
  break-inside: avoid;
  max-width: 36em;
  margin-top: 20pt;
  /* Every other block in this document carries its air underneath it — .doc__table,
     .doc__tree, .doc__split, .doc__rules all end in `margin-bottom: 20pt` — and the
     callout carried its air on top instead. That reads correctly for as long as a
     callout is the last block in a section, and nowhere else: the coverage section runs
     callout then table and the verdict runs callout then rules, and both of those had
     the following block flush against the callout's bottom border, because a table and
     a rules list have no top margin to collapse against. It carries both now. Adjacent
     margins collapse, so callout after table and callout after callout are still 20pt
     and not 40. */
  margin-bottom: 20pt;
}

.doc__callout:first-child { margin-top: 0; }
.doc__callout:last-child { margin-bottom: 0; }
.doc__calloutTitle { margin: 0 0 6pt; font-weight: var(--weight-semibold); font-size: 11.5pt; line-height: 1.4; color: var(--text-strong); }
.doc__calloutBody { margin: 0; font-size: 11pt; }

.doc__footnote { margin: 14pt 0 0; font-size: 10.5pt; color: var(--text-muted); max-width: 36em; }
.doc__closing { margin: 0; font-size: 11pt; max-width: 36em; }
.doc__code { font-family: var(--font-mono); font-size: 0.92em; }

/* ------------------------------------------------------------------- the tree */

.doc__tree {
  border: var(--border-hairline) solid var(--line-subtle);
  border-radius: var(--radius-sm);
  padding: 16pt 18pt;
  font-family: var(--font-mono);
  font-size: 10pt;
  line-height: 1.85;
  color: var(--text-body);
  break-inside: avoid;
  margin-bottom: 20pt;
}

.doc__treeRoot { color: var(--text-strong); font-weight: var(--weight-bold); }
.doc__treeNote { font-family: var(--font-sans); color: var(--text-muted); }

/* --------------------------------------------------------- notes, pillars, risks */

.doc__notes .doc__note,
.doc__stack .doc__stackItem {
  border-top: var(--border-hairline) solid var(--line-subtle);
  break-inside: avoid;
  padding: 14pt 0;
}

.doc__notes .doc__note { padding: 12pt 0; }
.doc__notes .doc__note:last-child,
.doc__stack .doc__stackItem:last-child { border-bottom: var(--border-hairline) solid var(--line-subtle); }
.doc__stackItem--tight { padding: 13pt 0; }

.doc__noteTitle {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 12.5pt;
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0;
}

.doc__noteBody { margin: 5pt 0 0; max-width: 36em; font-size: 11pt; }

.doc__stackHead { display: flex; flex-wrap: wrap; gap: 10pt; align-items: baseline; margin-bottom: 5pt; }

.doc__pillarTitle {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 13pt;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
}

.doc__stackBody { margin: 0 0 6pt; font-size: 11pt; max-width: 36em; }
.doc__stackMeta { margin: 0; font-size: 10.5pt; color: var(--text-muted); }

/* --------------------------------------------------------------- a page brief */

/* The heading over a group of briefs. The pages list is a complete map and comes in two
   halves, one page per thing the site sells and then the pages a buyer reads around
   them, so it needs a divider that is not a section heading: a section heading carries a
   number, and these two groups are one numbered section. A rule and small caps, the same
   vocabulary .doc__label already uses inside a brief. `break-after: avoid` keeps it off
   the bottom of a sheet, where it would head nothing. */
.doc__groupHead {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 10pt;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: var(--border-hairline) solid var(--line-subtle);
  padding-top: 8pt;
  margin: 0 0 14pt;
  break-after: avoid;
}

/* A brief is one unit: its chips, title, reason and the two columns must not be
   split across sheets, or the reader gets a heading with no brief under it. */
.doc__brief { margin-bottom: 22pt; break-inside: avoid; }
.doc__briefChips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10pt; margin-bottom: 6pt; }

.doc__rank {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9pt;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-inverse);
  background: var(--ink-900);
  padding: 4pt 7pt;
  border-radius: 3pt;
}

.doc__gaps { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 10pt; line-height: 1; }
.doc__briefAddress { font-family: var(--font-mono); font-size: 9.5pt; color: var(--text-muted); }

.doc__briefTitle {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15pt;
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  margin: 0 0 8pt;
}

.doc__briefWhy { margin: 0 0 10pt; max-width: 34em; }

/* The labelled lines between the reason and the two columns: who the page is for, and
   the page the subject is buried in today.

   They cannot be .doc__label, which is the small-caps heading over a column and owns a
   block of its own with 8pt under it, and they cannot be .doc__stackMeta, which is the
   cluster line inside a pillar. What these are is a label and its value on one line,
   wrapping as prose, and nothing in the sheet did that yet.

   The wrapper carries the gap the reason used to carry, so a brief with neither line
   keeps the spacing it had: 10pt under the reason instead of 14pt, and the 14pt before
   the columns comes from here. A brief with both grows by the two lines and nothing
   else, which matters because .doc__brief is break-inside: avoid, so a brief that grows
   too tall pushes a whole sheet rather than splitting across two. */
.doc__briefMeta { margin: 0 0 14pt; max-width: 34em; }

.doc__briefMetaLine { margin: 0; font-size: 10.5pt; line-height: 1.45; }
.doc__briefMetaLine + .doc__briefMetaLine { margin-top: 4pt; }

.doc__briefMetaLabel {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9pt;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 7pt;
}

.doc__briefCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--border-hairline) solid var(--line-subtle);
  border-bottom: var(--border-hairline) solid var(--line-subtle);
  break-inside: avoid;
}

.doc__briefCol { padding: 12pt 0 12pt 16pt; }
.doc__briefCol--divided { padding: 12pt 16pt 12pt 0; border-right: var(--border-hairline) solid var(--line-subtle); }

.doc__label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9pt;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8pt;
}

.doc__briefList { margin: 0; padding-left: 1.3em; font-size: 11pt; line-height: var(--lh-normal); }
.doc__briefList li + li { margin-top: 5pt; }
ul.doc__briefList { padding-left: 1.1em; }

/* What the owner has to supply for this page: a third labelled list, under the two
   columns rather than beside them.

   It is a row of the same grid and spans both tracks, because .doc__briefCols is a hard
   two columns and a third would take the questions and the contents down to a third of
   the text block each. It belongs inside the grid rather than after it so that the
   hairline under .doc__briefCols closes the whole block, the way it does on a brief with
   no evidence: as a sibling below it the list would sit outside the frame and read as a
   note about the brief instead of part of it.

   Its own border-top is the only new rule it needs. The label and the list are
   .doc__label and .doc__briefList, which is what the two columns above already use, and
   the 12pt padding is theirs too, so a brief with evidence grows by exactly this row and
   nothing about the rest of it moves. That matters because .doc__brief is
   break-inside: avoid: a brief that grows pushes a whole sheet rather than splitting. */
.doc__briefSupply {
  grid-column: 1 / -1;
  border-top: var(--border-hairline) solid var(--line-subtle);
  padding: 12pt 0;
}

/* --------------------------------------------------------------- selling vs answering */

.doc__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--border-hairline) solid var(--line-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 20pt;
}

.doc__splitCol { padding: 16pt 18pt; }
.doc__splitCol--divided { border-right: var(--border-hairline) solid var(--line-subtle); }
.doc__splitBody { margin: 0 0 8pt; font-size: 11pt; }
.doc__splitList { margin: 0; padding-left: 1.1em; font-size: 10.5pt; line-height: 1.55; }
.doc__splitList--mono { font-family: var(--font-mono); }

/* -------------------------------------------------------------- the linking rules */

.doc__rules { margin: 0 0 20pt; padding-left: 1.4em; font-size: 11.5pt; line-height: 1.6; max-width: 36em; }
.doc__rules li + li { margin-top: 9pt; }
.doc__ruleLead { font-weight: var(--weight-semibold); color: var(--text-strong); }

/* --------------------------------------------------------------------- figures */

/* Four ways of showing a number. They share one rule: the colour comes from the
   finding's tone and every tone is a status token, so no template ever picks one.
   Sizes are in pt like the rest of the sheet. The gauge's SVG is the exception and
   only because a viewBox is unitless — it carries no size to make literal.

   All four print. Nothing here is drawn by script, no background is load-bearing
   beyond printBackground, and the gauge is vector, so the PDF gets the same figure
   the screen does. */

/* ------------------------------------------------------------------- gauge */

.doc__gauge {
  display: flex;
  align-items: center;
  gap: 18pt;
  margin: 0 0 20pt;
  padding: 16pt 18pt;
  border: var(--border-hairline) solid var(--line-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  max-width: 36em;
  break-inside: avoid;
}

.doc__gaugeDial { flex: 0 0 auto; width: 62pt; height: 62pt; }

/* Both circles stroke currentColor, so each one's class is the only thing that
   decides its colour: the track is always neutral, the arc is always the tone. */
.doc__gaugeTrack { color: var(--doc-chart-track); }
.doc__gaugeArc { stroke-dasharray: var(--doc-dial) var(--doc-gauge-circumference); }

.doc__gaugeArc--pass { color: var(--pass-solid); }
.doc__gaugeArc--warn { color: var(--warn-solid); }
.doc__gaugeArc--fail { color: var(--fail-solid); }
.doc__gaugeArc--info { color: var(--info-solid); }
.doc__gaugeArc--muted { color: var(--line-strong); }

.doc__gaugeText { margin: 0; }

.doc__gaugeValue {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26pt;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.doc__gaugeOf {
  font-size: 14pt;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-normal);
}

.doc__gaugeLabel {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 9pt;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6pt;
}

.doc__gaugeNote { margin: 7pt 0 0; font-size: 10.5pt; line-height: 1.45; color: var(--text-body); }

/* -------------------------------------------------------------------- bars */

.doc__bars { margin: 0 0 20pt; max-width: 34em; break-inside: avoid; }

.doc__bar { break-inside: avoid; padding: 10pt 0; border-bottom: var(--border-hairline) solid var(--line-subtle); }
.doc__bar:first-child { padding-top: 0; }
.doc__bar:last-child { border-bottom: 0; padding-bottom: 0; }

.doc__barHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; margin-bottom: 5pt; }

.doc__barLabel {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 11pt;
  line-height: 1.3;
  color: var(--text-strong);
}

.doc__barValue { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 11pt; line-height: 1.3; }

.doc__barTrack {
  height: 7pt;
  border-radius: var(--radius-pill);
  background: var(--doc-chart-track);
  overflow: hidden;
}

/* Not scored is not zero. An empty solid track would read as a bar of length nought,
   so the unscored row loses the track's fill entirely and says so in outline. */
.doc__barTrack--unscored {
  background: none;
  border: var(--border-hairline) dashed var(--line-strong);
}

.doc__barFill { height: 100%; border-radius: var(--radius-pill); }
.doc__barFill--pass { background: var(--pass-solid); }
.doc__barFill--warn { background: var(--warn-solid); }
.doc__barFill--fail { background: var(--fail-solid); }
.doc__barFill--info { background: var(--info-solid); }
.doc__barFill--muted { background: var(--line-strong); }

.doc__barNote { margin: 5pt 0 0; font-size: 10pt; line-height: 1.45; color: var(--text-muted); }

/* ------------------------------------------------------------------- ratio */

.doc__ratio { margin: 0 0 20pt; max-width: 34em; break-inside: avoid; }

.doc__ratioBar {
  display: flex;
  height: 14pt;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--doc-chart-track);
}

.doc__ratioSeg { display: block; height: 100%; }
.doc__ratioSeg--pass { background: var(--pass-solid); }
.doc__ratioSeg--warn { background: var(--warn-solid); }
.doc__ratioSeg--fail { background: var(--fail-solid); }
.doc__ratioSeg--info { background: var(--info-solid); }
.doc__ratioSeg--muted { background: var(--line-strong); }

.doc__ratioKeys { margin: 10pt 0 0; }

.doc__ratioKey {
  display: flex;
  align-items: baseline;
  gap: 8pt;
  padding: 5pt 0;
  font-size: 10.5pt;
  line-height: 1.4;
  border-bottom: var(--border-hairline) solid var(--line-subtle);
}

.doc__ratioKey:last-child { border-bottom: 0; }

.doc__ratioSwatch {
  flex: 0 0 auto;
  width: 8pt;
  height: 8pt;
  border-radius: 2pt;
  align-self: center;
}

.doc__ratioSwatch--pass { background: var(--pass-solid); }
.doc__ratioSwatch--warn { background: var(--warn-solid); }
.doc__ratioSwatch--fail { background: var(--fail-solid); }
.doc__ratioSwatch--info { background: var(--info-solid); }
.doc__ratioSwatch--muted { background: var(--line-strong); }

.doc__ratioKeyLabel { flex: 1 1 auto; color: var(--text-body); }
.doc__ratioCount { font-family: var(--font-sans); font-weight: var(--weight-semibold); color: var(--text-strong); }
.doc__ratioPct { font-family: var(--font-mono); font-size: 9.5pt; color: var(--text-muted); min-width: 3.2em; text-align: right; }

.doc__ratioNote { margin: 8pt 0 0; font-size: 10pt; color: var(--text-muted); }

/* ------------------------------------------------------------------------- print */

/* The running foot, and the sheet number.
 *
 * The document itself carries no page numbers and cannot: Chromium implements
 * `counter(page)` inside an @page margin box and nothing else, so a number is
 * knowable only to the print engine, only after it has paginated, and only in the
 * margin. `target-counter()` — the property that would tell the contents which sheet
 * a section landed on — was measured against this Chromium and is not supported: the
 * whole declaration is dropped. That is why the contents is located by section number
 * and this foot is not.
 *
 * The margin box inherits from the root element, so var() reaches it and the tokens
 * hold: the name is set in the document's own Figtree and the number in its mono,
 * neither of them a literal. That is the reason the foot is drawn here rather than
 * handed to puppeteer as a headerTemplate/footerTemplate, which Chromium renders as a
 * separate document with no stylesheet, no webfonts and no tokens — a second renderer
 * to keep in sync, for the same two lines.
 *
 * Nothing runs across the cover: a sheet with the customer's domain set in 34pt does
 * not need our name 8.5pt under it, and page 1 of 31 under a cover reads as a manual.
 */
@page {
  size: A4;
  margin: 0.85in;

  @bottom-left {
    content: "AnteSEO \00a0\00b7\00a0 anteseo.com";
    font-family: var(--font-sans);
    font-size: 8.5pt;
    color: var(--text-muted);
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: var(--text-muted);
  }
}

@page :first {
  @bottom-left { content: ""; }
  @bottom-right { content: ""; }
}

/* A4 on a phone.
 *
 * The sheet is 8.27in wide with 0.85in of margin on each side, which on a 390px screen
 * leaves about 230px of content — and a three-column findings table does not fit in it.
 * It did not scroll either: nothing here declared an overflow, so the columns simply
 * ran off the side of the screen with the rest of the page fixed, which is how a report
 * read on the phone it was emailed to loses its right-hand column.
 *
 * Two changes and no markup: the sheet's margin becomes a screen margin, and each table
 * becomes its own scroll box so the document stays put while one table moves. Screen
 * only — the print rules below still get the real A4 sheet.
 */
@media screen and (max-width: 48rem) {
  .doc {
    padding: var(--space-5) var(--space-4);
    margin: var(--space-4) auto;
  }

  .doc__table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

@media print {
  /* The sheet becomes the page: the paper, the margin and the shadow all belong to
     the print engine now, not to a card floating on a desk. */
  .docPage { background: none; }

  .doc {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  /* The sample banner and the running chrome are screen furniture: on screen they sit
     once at the top and bottom of the one long sheet, because there is no page to run
     across. In the PDF the print engine draws the foot into the margin of every sheet
     from the @page rule above, so the in-flow pair would be a second copy stranded at
     the end of the document. */
  .sample-note, .doc__running { display: none; }

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