/* Moved from websites/templates/websites/_seo_briefing_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

/* ---- The document ground: paper, not a stack of surfaces ---- */
.bf-doc { --bf-measure: 78ch; counter-reset: bf-exhibit; }

/* The facts row of the configuration section: set as a ruled masthead
   line instead of a filled box. */
.bf-meta { display: flex; flex-wrap: wrap; gap: var(--space-6);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) 0; margin: 0; font-size: 13px; }
.bf-meta > div { min-width: 150px; }
.bf-meta dt { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 3px; }
.bf-meta dd { margin: 0; font-weight: 600; }

/* ---- The verdict paragraph of the "Scores & progress" section ---- */
.bf-quote { margin-top: var(--space-6); border-left: 4px solid var(--color-accent);
  padding-left: var(--space-6); margin: 0; }
/* The verdict is a computed paragraph, not a one-line pull quote — it runs
   to twenty lines on a site with problems. Above the body scale so it reads
   as the standfirst it is, but not at display weight: a 500-pixel wall of
   semibold is not read, it is skipped. */
.bf-quote p { font-size: 17.5px; line-height: 1.45;
  letter-spacing: -0.005em; font-weight: 500; margin: 0 0 var(--space-3);
  max-width: 62ch; }
.bf-quote .bf-quote-note { font-size: 12.5px; line-height: 1.6; font-weight: 400;
  color: var(--color-neutral-700); max-width: 68ch; }

/* ---- The ledger: the marks out of 100, with dot leaders ---- */
.bf-ledger { padding: var(--space-6) 0 var(--space-4); }
.bf-ledger-title, .bf-figures-title { font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-neutral-700); font-weight: 800;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 6px;
  margin: 0 0 var(--space-2); }
.bf-row { display: flex; align-items: baseline; gap: var(--space-3);
  padding: 9px 0; border-bottom: 1px dotted var(--color-neutral-400); }
.bf-row:last-child { border-bottom: 2px solid var(--color-text); }
.bf-row .bf-row-name { font-size: 15px; font-weight: 600; }
.bf-row .bf-row-leader { flex: 1 1 auto; min-width: var(--space-4); }
.bf-row .bf-row-bar { width: min(200px, 26vw); height: 9px; flex: 0 0 auto;
  background: var(--color-neutral-300); align-self: center; }
.bf-row .bf-row-bar span { display: block; height: 100%; }
.bf-row .bf-row-v { width: 56px; text-align: right; font-size: 17px;
  font-weight: 800; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* The mark's word is a condition badge (§4.19); the cell only sizes it. */
.bf-row .bf-row-st { width: 112px; text-align: right; flex: 0 0 auto; }
.bf-good { color: var(--mint-text); } .bf-warn { color: var(--amber-text); } .bf-bad { color: var(--coral-text); }
.bf-bg-good { background: var(--mint); } .bf-bg-warn { background: var(--amber); }
.bf-bg-bad { background: var(--coral); } .bf-bg-info { background: var(--color-neutral-500); }

/* The counts that are not marks out of 100 — authority, traffic, gaps…
   Bordered tiles with a real gap, never a painted grid gap: the last row of
   an auto-fit grid is rarely full and the leftover paints as a grey slab
   (§4.7.2). */
.bf-figures { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-4); }
.bf-figure-cell { border: 1px solid var(--color-divider);
  padding: var(--space-3); }
.bf-figure-cell b { display: block; font-size: 21px; line-height: 1.1;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-figure-cell span { display: block; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-neutral-700); margin-top: 4px; }

/* ---- Data tables become numbered exhibits ---- */
.bf-doc .seo-data-title { font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 800; color: var(--color-neutral-700);
  margin: var(--space-6) 0 var(--space-2); }
.bf-doc .seo-data-title::before { counter-increment: bf-exhibit;
  content: "Exhibit " counter(bf-exhibit) " — "; color: var(--color-accent); }
/* The conclusion's own heading is prose, not an exhibit: no number. */
.bf-doc .bf-conclusion-title { margin: var(--space-6) 0 var(--space-2);
  font-size: 20px; }
/* Same for shared partials that borrow .seo-data-title for a prose heading. */
.bf-doc .bf-noexhibit .seo-data-title::before { content: none; }

/* The cover-level asides ("How to read this report", the profile gate) are
   the only boxes left on the page: hairline on the paper, not a filled
   surface, so they read as notes rather than as another card stack. */
.bf-doc > .card { background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-4); }

/* ══════════════════════════════════════════════════════════════════════
   THE SECTION INTERIOR

   Every section used to answer its question the same way: a four-column
   check table with the recommendation squeezed into a 320px cell (§4.7.1
   point 4), followed by a data table. Below, the two halves each section
   shares — a head that states its own verdict, and findings written as
   records rather than table rows — then the lenses that replace a table
   where the data is not a list of numbers.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- The section head: the score as a position, then the verdict ---- */
.bf-sechead { margin-bottom: var(--space-4); }
.bf-sechead-top { display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; }
.bf-sechead-score { font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bf-sechead-score small { font-size: 12px; font-weight: 600;
  color: var(--color-neutral-600); }
/* A score is a position on the same scale every check is judged against,
   so the scale is drawn and the score marked on it. */
.bf-scale { display: flex; height: 6px; margin: var(--space-2) 0 var(--space-2);
  position: relative; background: var(--color-neutral-200); }
.bf-scale i { display: block; height: 100%; opacity: 0.45; }
.bf-scale .bf-scale-bad { flex: 50; background: var(--coral); }
.bf-scale .bf-scale-warn { flex: 30; background: var(--amber); }
.bf-scale .bf-scale-good { flex: 20; background: var(--mint); }
.bf-scale b { position: absolute; top: -5px; width: 3px; height: 16px;
  background: var(--color-text); transform: translateX(-1px); }
.bf-scale-labels { display: flex; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-neutral-600); }
.bf-scale-labels span:nth-child(1) { flex: 50; }
.bf-scale-labels span:nth-child(2) { flex: 30; }
.bf-scale-labels span:nth-child(3) { flex: 20; }
.bf-scale-labels span:nth-child(4) { flex: 0 0 auto; }
.bf-tallyline { display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-size: 12px; font-weight: 600; margin: var(--space-2) 0 0; }
.bf-tallyline span b { font-variant-numeric: tabular-nums; }
.bf-sechead-sum { margin: var(--space-2) 0 0; max-width: var(--bf-measure);
  color: var(--color-neutral-800); }

/* ---- Findings: a record per check, not a row ---- */
/* Each record is a UI kit check card (§21): Ground on the white section
   card, rounded, its severity as a 5px stripe on the left. */
.bf-findings { display: grid; gap: 12px; margin: var(--space-4) 0 0; }
.bf-finding { padding: 16px 20px 16px 24px; border-radius: var(--r-inner);
  background: var(--ground); box-shadow: inset 5px 0 0 var(--slate); }
.bf-finding--bad { box-shadow: inset 5px 0 0 var(--coral); }
.bf-finding--warn { box-shadow: inset 5px 0 0 var(--amber); }
.bf-finding--good { box-shadow: inset 5px 0 0 var(--mint); }
.bf-finding--info { box-shadow: inset 5px 0 0 var(--blue); }
.bf-finding-top { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-1); }
.bf-finding-top h3 { flex: 1 1 320px; margin: 0; font-size: 16px;
  letter-spacing: -0.01em; }
.bf-finding-score { font-size: 15px; font-weight: 800; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
.bf-finding-score small { font-size: 11px; font-weight: 600;
  color: var(--color-neutral-600); }
/* The three parts of a finding, each on its own line at full measure —
   this is the space the advice never had inside a table cell. */
.bf-part { display: grid; grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--space-3); padding: 3px 0; font-size: 13.5px; line-height: 1.55; }
.bf-part dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-600); padding-top: 4px; }
.bf-part dd { margin: 0; max-width: 84ch; overflow-wrap: anywhere; }
.bf-part--found dd { font-weight: 600; }
.bf-part--do dd { border-left: 2px solid var(--color-accent);
  padding-left: var(--space-3); }
.bf-finding--good .bf-part--do dd { border-left-color: var(--mint); }
.bf-finding--info .bf-part--do dd { border-left-color: var(--color-neutral-500); }

/* Cleared checks fold: a section is read for what is wrong with it, but a
   printed report hides nothing (the print block opens every <details>). */
.bf-cleared { margin-top: 0; padding: 0 20px; border: 0; border-radius: var(--r-inner);
  background: var(--mint-bg); }
.bf-cleared > summary { cursor: pointer; list-style: none;
  padding: 12px 0; font: 900 14px var(--font); color: var(--mint-text); }
.bf-cleared > summary::-webkit-details-marker { display: none; }
.bf-cleared > summary::before { content: "▸ "; }
.bf-cleared[open] > summary::before { content: "▾ "; }
.bf-cleared-list { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3);
  padding: 0; list-style: none; font-size: 12.5px; }
.bf-cleared-list li { display: flex; justify-content: space-between;
  gap: var(--space-2); border-bottom: 1px dotted var(--color-neutral-300);
  padding: 3px 0; }
.bf-cleared-list b { font-variant-numeric: tabular-nums; color: var(--mint-text); }

/* ---- Lens: a distribution (where the ranked searches sit) ---- */
.bf-dist { display: flex; height: 54px; border: 1px solid var(--color-text);
  margin: var(--space-2) 0; }
.bf-dist div { display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--space-2); overflow: hidden; min-width: 0; color: var(--white); }
.bf-dist b { font-size: 17px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.bf-dist span { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-dist-empty { flex: 1; background: repeating-linear-gradient(45deg,
  var(--color-neutral-200) 0 6px, var(--color-neutral-100) 6px 12px); }
.bf-dist-key { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2); font-size: 12px; }
.bf-dist-key div { border-top: 3px solid var(--color-neutral-400);
  padding-top: var(--space-1); }
.bf-dist-key b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.bf-dist-key p { margin: 2px 0 0; color: var(--color-neutral-700);
  font-size: 11.5px; line-height: 1.45; }

/* ---- Lens: composition (a label and a count, ranked) ----
   A two-column label/count table makes the reader compare numbers by
   reading them. These are compositions — the question is always "is this
   spread or dominated by one entry", which is a shape, so it is drawn. */
.bf-comp { margin: var(--space-2) 0 var(--space-4); }
.bf-comp-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-divider); padding-bottom: 5px;
  margin: 0 0 var(--space-2); }
.bf-comp-row { display: grid; grid-template-columns: minmax(90px, 22%) 1fr 64px;
  gap: var(--space-3); align-items: center; padding: 4px 0; font-size: 13px; }
.bf-comp-row .bf-comp-name { overflow-wrap: anywhere; font-weight: 600; }
.bf-comp-row .bf-comp-bar { height: 12px; background: var(--color-neutral-200); }
.bf-comp-row .bf-comp-bar i { display: block; height: 100%;
  background: var(--color-neutral-800); }
.bf-comp-row:first-of-type .bf-comp-bar i { background: var(--color-text); }
.bf-comp-row .bf-comp-n { text-align: right; font-weight: 800;
  font-variant-numeric: tabular-nums; }

/* The referral tiles the AI-visibility section borrows from the scored
   reports: square and bordered here, like every other figure in the
   briefing (§4.7.1 point 1). */
.bf-doc .seo-kpis { gap: var(--space-2); }
.bf-doc .seo-kpi { border-radius: 0; background: transparent;
  border: 1px solid var(--color-divider); border-top-width: 3px;
  text-align: left; padding: var(--space-3); }
.bf-doc .seo-kpi b { font-size: 21px; }

/* ---- Lens: gates (which AI engines your robots.txt lets in) ---- */
.bf-gates { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2); margin: var(--space-2) 0; }
.bf-gate { border: 1px solid var(--color-divider); padding: var(--space-3);
  border-top-width: 4px; }
.bf-gate--good { border-top-color: var(--mint); }
.bf-gate--warn { border-top-color: var(--amber); }
.bf-gate--bad { border-top-color: var(--coral); }
.bf-gate--info { border-top-color: var(--color-neutral-400); }
.bf-gate-verdict { font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; }
.bf-gate h4 { margin: var(--space-1) 0 2px; font-size: 17px; }
.bf-gate .bf-gate-owner { font-size: 11px; color: var(--color-neutral-700);
  margin: 0 0 var(--space-2); }
.bf-gate .bf-gate-role { font-size: 11.5px; line-height: 1.45; margin: 0;
  color: var(--color-neutral-800); }
.bf-gate-cites { display: inline-block; margin-top: var(--space-2);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; border: 1px solid var(--color-divider);
  padding: 2px 7px; }

/* ---- Lens: presence (where you are, where you are not) ---- */
.bf-presence { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); margin: var(--space-2) 0; }
.bf-presence-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--space-2);
  border-bottom: 2px solid var(--color-text); margin-bottom: var(--space-1); }
.bf-presence-col > .bf-presence-head > h4 { font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; border: 0;
  padding-bottom: 5px; margin: 0; }
.bf-presence-count { font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.bf-presence-col--missing .bf-presence-head { border-bottom-color: var(--color-accent); }
.bf-presence-col--missing .bf-presence-head > h4,
.bf-presence-col--missing .bf-presence-count { color: var(--color-accent); }
/* The toolbar belongs to its column, not to the page: it is one of two. */
.bf-presence-col .table-tools { margin: 0 0 var(--space-1);
  padding: 0; border: 0; justify-content: flex-start; }
.bf-presence-item { border-bottom: 1px solid var(--color-divider);
  padding: var(--space-2) 0; font-size: 13px; }
/* Already quoted by the assistants: on the missing side that is the most
   expensive absence on the page, on the present side the asset to keep
   current. Same mark, opposite colour, so the eye finds both at once. */
.bf-presence-item--cited { border-left: 3px solid var(--mint);
  padding-left: var(--space-2); margin-left: -3px; }
.bf-presence-col--missing .bf-presence-item--cited { border-left-color: var(--coral); }
.bf-presence-tag { display: inline-block; margin-left: var(--space-1);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid currentColor;
  padding: 1px 6px; white-space: nowrap; }
.bf-presence-tag--good { color: var(--mint-text); }
.bf-presence-tag--warn { color: var(--coral-text); }
/* Authority on the fixed 0-1000 scale, never fitted to the rows present:
   a market of weak surfaces has to look weak. Width from Python. */
.bf-presence-meter { display: block; height: 4px; margin-top: 5px;
  background: var(--color-neutral-200); }
.bf-presence-meter i { display: block; height: 100%;
  background: var(--color-neutral-700); }
.bf-presence-col--missing .bf-presence-meter i { background: var(--color-accent); }
.bf-presence-item .bf-presence-name { display: flex; gap: var(--space-2);
  align-items: baseline; justify-content: space-between; }
.bf-presence-item a { overflow-wrap: anywhere; }
.bf-presence-item .bf-presence-meta { font-size: 11px;
  color: var(--color-neutral-700); margin-top: 2px; }
.bf-presence-rank { font-size: 11px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }

/* ---- Lens: per-page health (one row per page, weakest first) ---- */
.bf-pagegrid { margin: var(--space-2) 0; }
.bf-pagerow { display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.1fr);
  gap: var(--space-3); align-items: center;
  border-bottom: 1px solid var(--color-divider); padding: var(--space-2) 0; }
.bf-pagerow-url { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.bf-pagerow-meter { display: flex; align-items: center; gap: var(--space-2); }
.bf-pagerow-meter .bf-row-bar { width: 74px; }
.bf-pagerow-meter b { font-size: 14px; font-variant-numeric: tabular-nums; }
.bf-pagerow-missing { display: flex; gap: var(--space-1); flex-wrap: wrap;
  font-size: 10.5px; }
.bf-miss { border: 1px solid var(--coral); color: var(--coral-text); padding: 1px 6px;
  font-weight: 600; white-space: nowrap; }
.bf-miss--warn { border-color: var(--amber); color: var(--amber-text); }
.bf-miss--ok { border-color: var(--color-neutral-300);
  color: var(--color-neutral-600); font-weight: 400; }

@media (max-width: 900px) {
  .bf-presence { grid-template-columns: 1fr; gap: var(--space-4); }
  .bf-pagerow { grid-template-columns: 1fr; gap: var(--space-1); }
  .bf-part { grid-template-columns: 1fr; gap: 0; }
  .bf-part dt { padding-top: var(--space-2); }
}

/* ---- Closing stamp: what the printed page needs at the end ---- */
.bf-stamp { border-top: 6px solid var(--color-text); margin-top: var(--space-8);
  padding-top: var(--space-3); display: flex; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; font-size: 11px;
  color: var(--color-neutral-700); }
.bf-stamp b { color: var(--color-text); }

@media (max-width: 900px) {
  .bf-quote { border-left-width: 3px; padding-left: var(--space-4); }
  .bf-row .bf-row-bar { display: none; }
  .bf-row .bf-row-st { width: auto; }
}

/* ---- Print / PDF: the document is the point, so it prints as one ---- */
@media print {
  .bf-stamp { border-color: var(--navy); }
  .bf-quote p { font-size: 14px; }
  .bf-ledger, .bf-figures { break-inside: avoid; page-break-inside: avoid; }
  .bf-figure-cell { border-color: var(--slate); background: none; }
  .bf-doc .seo-data-title { font-size: 9px; }
  .bf-stamp { display: flex !important; }
  /* Status colours survive the dropped backgrounds. */
  .bf-row .bf-row-bar { border: 1px solid var(--slate); }
}

/* ——— Figures added by DOC_REPORT_GRAPHS.md ————————————————————————
   Four sections that answered their question with a sentence over a
   distribution someone had already counted. All widths arrive from
   websites/website_report_visuals.py as rounded percentages — never
   computed here, per §4.7.2. */

/* Form A — ranked composition bar. Same three-column grid as .bf-comp
   above, with a share column the older one does not need. */
.bf-doc .bf-rank { margin: var(--space-2) 0 var(--space-4); }
.bf-doc .bf-rank-title { font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 800; margin: 0 0 var(--space-2);
  color: var(--color-neutral-600); }
.bf-doc .bf-rank-row { display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr 62px; gap: var(--space-2);
  align-items: center; padding: 3px 0; font-size: 13px; }
.bf-doc .bf-rank-name { overflow-wrap: anywhere; font-weight: 600; }
.bf-doc .bf-rank-bar { height: 12px; background: var(--color-neutral-200); }
.bf-doc .bf-rank-bar i { display: block; height: 100%;
  background: var(--color-neutral-800); }
.bf-doc .bf-rank-row:first-of-type .bf-rank-bar i { background: var(--color-text); }
.bf-doc .bf-rank-n { text-align: right; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.bf-doc .bf-rank-tail { font-size: 12px; color: var(--color-neutral-600);
  margin: var(--space-1) 0 0; }

/* The per-area profile: a ranked bar whose track carries the two band
   edges every check in the report is graded against, so a reader sees
   not just the order but which side of "to improve" each area sits. */
.bf-doc .bf-profile .bf-rank-bar { position: relative; height: 14px; }
.bf-doc .bf-profile .bf-rank-bar i.good { background: var(--mint); }
.bf-doc .bf-profile .bf-rank-bar i.warn { background: var(--amber); }
.bf-doc .bf-profile .bf-rank-bar i.bad { background: var(--coral); }
.bf-doc .bf-edge { position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--color-text); opacity: 0.45; }
.bf-doc .bf-profile-key { font-size: 11px; color: var(--color-neutral-600);
  margin: var(--space-1) 0 0; }

/* Form C — count histogram, over the report's own verdict bands. */
.bf-doc .bf-hist { display: flex; align-items: flex-end; gap: var(--space-2);
  height: 90px; margin: var(--space-2) 0 var(--space-1);
  border-bottom: 2px solid var(--color-text); padding-bottom: 0; }
.bf-doc .bf-hist-col { flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; }
.bf-doc .bf-hist-col b { font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.bf-doc .bf-hist-col i { display: block; width: 100%; min-height: 2px;
  background: var(--color-neutral-300); }
.bf-doc .bf-hist-col.good i { background: var(--mint); }
.bf-doc .bf-hist-col.warn i { background: var(--amber); }
.bf-doc .bf-hist-col.bad i { background: var(--coral); }
.bf-doc .bf-hist-key { display: flex; gap: var(--space-2); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-600); }
.bf-doc .bf-hist-key span { flex: 1; text-align: center; }

/* Form B — the three-way AI split. One bar, segments summing to every
   tested question; the own slice keeps a min-width so 0% is still
   findable, which is the slice a reader looks for first. */
.bf-doc .bf-split { display: flex; height: 46px; margin: var(--space-2) 0;
  border: 1px solid var(--color-text); }
.bf-doc .bf-split div { display: flex; flex-direction: column;
  justify-content: center; padding: 0 var(--space-2); min-width: 3px;
  overflow: hidden; }
.bf-doc .bf-split b { font-size: 15px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.bf-doc .bf-split span { font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.bf-doc .bf-split .own { background: var(--mint); color: var(--white); }
.bf-doc .bf-split .others { background: var(--color-neutral-700); color: var(--white); }
.bf-doc .bf-split .none { background: var(--color-neutral-200);
  color: var(--color-text); }
.bf-doc .bf-split .miss { background: var(--coral); color: var(--white); }

/* Form E — the authority ladder, reused whole from the competitor report
   but re-dressed for the briefing's paper. Geometry comes from
   authority_ladder(); only the ink is local. */
.bf-doc .bf-ladder { margin: var(--space-3) 0 var(--space-2); }
.bf-doc .bf-ladder-track { position: relative; height: 54px;
  border-bottom: 2px solid var(--color-text); }
.bf-doc .bf-ladder-win { position: absolute; top: 0; bottom: 0; left: 0;
  background: rgba(31, 157, 77, 0.13); }
.bf-doc .bf-ladder-mark { position: absolute; bottom: -5px; width: 9px;
  height: 9px; margin-left: -4.5px; transform: rotate(45deg);
  background: var(--color-neutral-700); }
.bf-doc .bf-ladder-mark.beat { background: var(--mint); }
.bf-doc .bf-ladder-you { position: absolute; top: 0; bottom: -7px; width: 2px;
  margin-left: -1px; background: var(--coral); }
.bf-doc .bf-ladder-label { position: absolute; bottom: 12px; font-size: 10px;
  transform: translateX(-50%); white-space: nowrap;
  color: var(--color-neutral-600); }
.bf-doc .bf-ladder-you-label { position: absolute; top: 0; font-size: 10px;
  font-weight: 800; transform: translateX(-50%); white-space: nowrap;
  color: var(--coral); }
.bf-doc .bf-ladder-axis { display: flex; justify-content: space-between;
  font-size: 10px; color: var(--color-neutral-600); margin-top: 3px;
  font-variant-numeric: tabular-nums; }
@media (max-width: 1139px) { .bf-doc .bf-ladder-label { display: none; } }

/* A figure that cannot be drawn says why, and where to go instead. */
.bf-doc .bf-nofig { border-left: 3px solid var(--color-neutral-400);
  padding: var(--space-1) var(--space-3); margin: var(--space-2) 0;
  color: var(--color-neutral-600); font-size: 13px; }

@media print {
  .bf-doc .bf-rank-bar i, .bf-doc .bf-hist-col i, .bf-doc .bf-split div,
  .bf-doc .bf-ladder-win, .bf-doc .bf-ladder-mark, .bf-doc .bf-ladder-you {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bf-doc .bf-rank, .bf-doc .bf-hist, .bf-doc .bf-split,
  .bf-doc .bf-ladder { break-inside: avoid; }
}

/* ——— Forms C, D, F, G, H, I, K — the second wave of figures —————————
   All geometry from websites/report_figures.py. Nothing here computes. */

/* Form G — scatter with quadrants. */
.bf-doc .bf-plot { position: relative; height: 260px; margin: var(--space-2) 0;
  border-left: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text); }
.bf-doc .bf-plot-dot { position: absolute; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--color-neutral-500); }
.bf-doc .bf-plot-dot.top3   { background: var(--mint); }
.bf-doc .bf-plot-dot.page1  { background: var(--blue-deep); }
.bf-doc .bf-plot-dot.close  { background: var(--amber); }
.bf-doc .bf-plot-dot.deep   { background: var(--color-neutral-400); }
.bf-doc .bf-plot-dot.easy   { background: var(--mint); }
.bf-doc .bf-plot-dot.rest   { background: var(--color-neutral-400); }
.bf-doc .bf-plot-vline { position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--color-text); opacity: 0.35; }
.bf-doc .bf-plot-hline { position: absolute; left: 0; right: 0; height: 1px;
  background: var(--color-text); opacity: 0.35; }
.bf-doc .bf-plot-zone { position: absolute; background: rgba(31,157,77,0.10); }
.bf-doc .bf-plot-ax { display: flex; justify-content: space-between;
  font-size: 10px; color: var(--color-neutral-600); margin-top: 2px; }
.bf-doc .bf-plot-yl { font-size: 10px; color: var(--color-neutral-600);
  margin: 0 0 2px; }

/* Form H — one stacked bar per entity, all the same width. */
.bf-doc .bf-multi-row { display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr 74px; gap: var(--space-2);
  align-items: center; padding: 3px 0; font-size: 12.5px; }
.bf-doc .bf-multi-name { overflow-wrap: anywhere; }
.bf-doc .bf-multi-bar { display: flex; height: 13px;
  background: var(--color-neutral-200); }
.bf-doc .bf-multi-bar i { display: block; min-width: 1px; }
/* One colour per segment key, shared by the bars and the legend swatches
   so the key cannot drift from the thing it explains. */
.bf-doc .bf-multi-bar i.p1,     .bf-doc .bf-key i.p1     { background: var(--mint-text); }
.bf-doc .bf-multi-bar i.p2_3,   .bf-doc .bf-key i.p2_3   { background: var(--mint); }
.bf-doc .bf-multi-bar i.p4_10,  .bf-doc .bf-key i.p4_10  { background: #7fc79a; }
.bf-doc .bf-multi-bar i.p11_20, .bf-doc .bf-key i.p11_20 { background: var(--color-neutral-400); }
.bf-doc .bf-multi-bar i.covered,   .bf-doc .bf-key i.covered   { background: var(--mint); }
.bf-doc .bf-multi-bar i.uncovered, .bf-doc .bf-key i.uncovered { background: var(--coral); }
.bf-doc .bf-multi-n { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; }
.bf-doc .bf-key { display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: 10.5px; color: var(--color-neutral-600); margin: var(--space-1) 0 0; }
.bf-doc .bf-key i { display: inline-block; width: 9px; height: 9px;
  margin-right: 4px; vertical-align: -1px; }

/* Form D — two histograms on one baseline, one filled, one outlined. */
.bf-doc .bf-over { display: flex; align-items: flex-end; gap: var(--space-2);
  height: 110px; border-bottom: 2px solid var(--color-text);
  margin: var(--space-2) 0 var(--space-1); }
.bf-doc .bf-over-col { flex: 1; position: relative; height: 100%;
  display: flex; align-items: flex-end; }
.bf-doc .bf-over-own { width: 100%; background: var(--color-neutral-700);
  min-height: 1px; }
.bf-doc .bf-over-other { position: absolute; left: 0; right: 0; bottom: 0;
  border: 2px solid var(--coral); border-bottom: 0; min-height: 2px; }

/* Form F — dumbbell. */
.bf-doc .bf-dumb-row { display: grid;
  grid-template-columns: minmax(130px, 32%) 1fr 60px; gap: var(--space-2);
  align-items: center; padding: 5px 0; font-size: 12.5px; }
.bf-doc .bf-dumb-track { position: relative; height: 14px; }
.bf-doc .bf-dumb-track::before { content: ""; position: absolute; left: 0;
  right: 0; top: 50%; height: 1px; background: var(--color-neutral-200); }
.bf-doc .bf-dumb-rule { position: absolute; top: 50%; height: 2px;
  margin-top: -1px; background: var(--color-neutral-500); }
.bf-doc .bf-dumb-rule.win { background: var(--mint); }
.bf-doc .bf-dumb-dot { position: absolute; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); }
.bf-doc .bf-dumb-dot.you { background: var(--coral); }
.bf-doc .bf-dumb-dot.them { background: var(--color-neutral-700); }

/* Form I — funnel; the loss rail is magnified and says so. */
.bf-doc .bf-funnel { display: flex; gap: var(--space-2);
  margin: var(--space-2) 0; }
.bf-doc .bf-funnel-st { flex: 1; text-align: center; }
.bf-doc .bf-funnel-band { height: 74px; display: flex; align-items: flex-end; }
.bf-doc .bf-funnel-band i { display: block; width: 100%;
  background: var(--color-neutral-700); min-height: 2px; }
.bf-doc .bf-funnel-rail { height: 20px; display: flex; align-items: flex-start;
  margin-top: 2px; }
.bf-doc .bf-funnel-rail i { display: block; width: 100%; background: var(--coral); }
.bf-doc .bf-funnel-st b { display: block; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.bf-doc .bf-funnel-st span { font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-neutral-600); }

/* Form K — gained against lost, by month. */
.bf-doc .bf-flow { display: flex; align-items: center; gap: 2px;
  height: 108px; margin: var(--space-2) 0 0; }
.bf-doc .bf-flow-col { flex: 1; height: 100%; display: flex;
  flex-direction: column; justify-content: center; }
.bf-doc .bf-flow-up, .bf-doc .bf-flow-dn { display: flex; height: 50%; }
.bf-doc .bf-flow-up { align-items: flex-end; }
.bf-doc .bf-flow-up i { width: 100%; background: var(--mint); min-height: 0; }
.bf-doc .bf-flow-dn i { width: 100%; background: var(--coral); min-height: 0; }
.bf-doc .bf-flow-axis { border-top: 1px solid var(--color-text); }

@media print {
  .bf-doc .bf-presence-meter i, .bf-doc .bf-presence-item--cited,
  .bf-doc .bf-plot-dot, .bf-doc .bf-multi-bar i, .bf-doc .bf-over-own,
  .bf-doc .bf-dumb-dot, .bf-doc .bf-dumb-rule, .bf-doc .bf-funnel-band i,
  .bf-doc .bf-funnel-rail i, .bf-doc .bf-flow-up i, .bf-doc .bf-flow-dn i {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bf-doc .bf-plot, .bf-doc .bf-over, .bf-doc .bf-funnel,
  .bf-doc .bf-flow { break-inside: avoid; }
}