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

.dossier {
  --dsr-rule: var(--color-text);
  --dsr-hair: var(--color-neutral-300);
  --dsr-good: var(--mint); --dsr-good-ink: var(--mint-text);
  --dsr-warn: var(--amber); --dsr-warn-ink: var(--amber-text);
  --dsr-bad:  var(--coral); --dsr-bad-ink:  var(--coral-text);
}
.dossier .num, .dossier .seo-kpi b { font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.dsr-caps {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-700);
}

/* ── A section's opening lines ─────────────────────────────────────────
   The pass summary of its scored points (or, on the plan and the
   progress sections, the figure the section turns on), the data status,
   the generic ToDo button — with the reading help as a note beside. */
.dsr-head { margin-bottom: var(--space-4); }
.dsr-lead { margin: 0 0 var(--space-2); font-size: 15px; max-width: 72ch;
  color: var(--color-neutral-800); }
.dsr-lead > b {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dsr-lead > b small { font-size: 15px; font-weight: 600; color: var(--color-neutral-600); }
/* The quality badge (§4.20) beside the standing's number, and the
   condition badge beside each point of the history line. */
.dsr-lead > b .badge { vertical-align: middle; margin-left: var(--space-2); }
.seo-history-point .badge { vertical-align: middle; margin-left: 4px; }
.dossier .seo-section-status { margin: 0 0 var(--space-2); }
/* The "How to read" lists inside a help note. */
.dsr-note-list { margin: 0 0 6px; padding-left: 1.1em; }
.dsr-note-list li + li { margin-top: 4px; }
.dsr-note-list:last-child { margin-bottom: 0; }

/* ── Register tables ───────────────────────────────────────────────────
   Rules only: no fill, no zebra, uppercase heads on a rule, your own row
   banded in accent. */
.dossier .rs-evidence .table { border-collapse: collapse; font-size: 13.5px; }
.dossier .rs-evidence .table th {
  background: var(--color-bg); border-bottom: 1px solid var(--dsr-rule);
  padding: var(--space-3) var(--space-3) var(--space-2) 0; letter-spacing: 0.12em;
}
.dossier .rs-evidence .table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--dsr-hair);
  /* A register is read down its columns: the figures have to line up
     whatever digits they are made of. */
  font-variant-numeric: tabular-nums;
}
.dossier .rs-evidence .table th:last-child,
.dossier .rs-evidence .table td:last-child { padding-right: 0; }
.dossier .rs-evidence .table tbody tr:hover { background: var(--color-neutral-100); }
.dossier .seo-data-title {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-700);
  border-bottom: 2px solid var(--dsr-rule); padding-bottom: var(--space-2);
  margin: var(--space-8) 0 var(--space-3);
}
/* A table's title with its reading notes beside it: the block keeps the
   title's space above, so the note lines up with the title. */
.dsr-block { margin-top: var(--space-8); }
.dsr-block > .seo-data-title { margin-top: 0; }

/* Status pills keep the shared palette but lose their fill — on a page made
   of rules, four filled pills per row is the only noise left. */
.dossier .rs-evidence .seo-status {
  border-radius: 0; background: none; padding: 1px 0;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800;
}
.dossier .rs-evidence .seo-status--good { color: var(--dsr-good-ink); }
.dossier .rs-evidence .seo-status--warn { color: var(--dsr-warn-ink); }
.dossier .rs-evidence .seo-status--bad  { color: var(--dsr-bad-ink); }
.dossier .rs-evidence .seo-status--info { color: var(--color-neutral-600); }
.dossier .rs-evidence .seo-meter { border-radius: 0; height: 6px; }
.dossier .rs-evidence .seo-meter span { border-radius: 0; }

/* The finding block — the one place an entry raises its voice, and what an
   entry says when its figure would be a rectangle drawn at zero. */
.dsr-finding {
  border-left: 3px solid var(--color-accent); padding-left: var(--space-4);
  margin: var(--space-4) 0 var(--space-6); max-width: 72ch;
}
.dsr-finding > b { display: block; font-size: 17px; margin-bottom: 2px; }
.dsr-finding > span { color: var(--color-neutral-800); }

/* Recommendations read as a numbered programme, not as bullets. */
.dossier .seo-plan-group h3 {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 800; border-bottom: 1px solid var(--dsr-rule);
  padding-bottom: var(--space-2);
}
.dossier .seo-plan { padding-left: 0; list-style: none; counter-reset: dsr-step; }
/* The counter is absolutely positioned, NOT a grid column. As a
   two-column grid the `li` made every one of its children a grid item, so a
   recommendation with a title, three labelled parts and a mark form had them
   dealt alternately into the 44px number column — 44px-wide paragraphs, and
   the page scrolling sideways to fit them. */
.dossier .seo-plan > li {
  position: relative; padding: var(--space-3) 0 var(--space-3) 44px;
  margin: 0; border-bottom: 1px solid var(--dsr-hair);
}
.dossier .seo-plan > li::before {
  counter-increment: dsr-step; content: counter(dsr-step);
  position: absolute; left: 0; top: var(--space-3);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--color-neutral-400);
}
.dossier .seo-advice {
  border-radius: 0; background: none; border-left-width: 2px;
  padding: 0 0 0 var(--space-3);
}

/* The competitor / conclusion cards inside a section keep their frame —
   they are quoted material, and a hairline box is how a dossier quotes. */
.dossier .seo-ai-qa, .dossier .seo-fix { border-radius: 0; }
.cmp-card details summary { cursor: pointer; color: var(--color-accent); }
.cmp-metrics { font-size: 12px; }
/* Chips for the short-label lists — .tag/.tag-accent come from akoore.css. */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-1);
             margin-top: var(--space-2); }
/* One card per competitor, in the landscape section. */
.dsr-cards { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dsr-cards > .cmp-card { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Per-entry figures. Each section of this report asks a different kind of
   question, and a table answers only one of them well ("what are the
   values"). Where the question is "where do I stand" the answer is a
   position on a scale, and it is drawn. The registers stay underneath —
   the drawing is the reading, the table is the reference.
   ══════════════════════════════════════════════════════════════════ */

/* — Check points: ruled blocks, not table cells —
   A recommendation is a paragraph; a 320px cell is not where one goes
   (§4.7.1 point 4). Reading order is the reader's: name and mark, what was
   found, what to do, and only then what the check verifies. */
.dsr-checks { margin-top: var(--space-8); }
.dsr-check { border-top: 1px solid var(--dsr-hair); border-left: 3px solid var(--color-neutral-400);
  padding: var(--space-3) 0 var(--space-4) var(--space-4); }
.dsr-check--good { border-left-color: var(--dsr-good); }
.dsr-check--warn { border-left-color: var(--dsr-warn); }
.dsr-check--bad  { border-left-color: var(--dsr-bad); }
.dsr-check-head { display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; }
.dsr-check-head h4 { font-size: 18px; letter-spacing: -.01em; margin: 0;
  flex: 1 1 auto; min-width: 0; }
.dsr-check-score { font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.dsr-check-score i { font-style: normal; font-size: 13px; color: var(--color-neutral-600); }
.dsr-check--good .dsr-check-score { color: var(--dsr-good-ink); }
.dsr-check--warn .dsr-check-score { color: var(--dsr-warn-ink); }
.dsr-check--bad  .dsr-check-score { color: var(--dsr-bad-ink); }
.dsr-check-found { margin: var(--space-2) 0 0; max-width: 78ch; font-size: 15px; }
.dsr-check-advice { margin: var(--space-3) 0 0; max-width: 78ch; font-size: 14px;
  color: var(--color-neutral-800); }
.dsr-check-advice .dsr-caps { display: block; margin-bottom: 2px;
  color: var(--color-neutral-600); }
/* What the check verifies is reference — true every time, read once. */
.dsr-check-what { margin: var(--space-3) 0 0; max-width: 78ch; font-size: 12px;
  color: var(--color-neutral-600); }

/* — A ruled fact strip: the numbers that frame an entry — */
.dsr-strip { display: flex; flex-wrap: wrap; border-top: 2px solid var(--dsr-rule);
  border-bottom: 1px solid var(--dsr-hair); margin: var(--space-4) 0; }
.dsr-strip > div { flex: 1 1 130px; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-left: 1px solid var(--dsr-hair); padding-left: var(--space-4); }
.dsr-strip > div:first-child { border-left: 0; padding-left: 0; }
.dsr-strip b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.dsr-strip span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-600); }
.dsr-strip .dsr-ok b { color: var(--dsr-good-ink); }
.dsr-strip .dsr-no b { color: var(--dsr-bad-ink); }

/* — Authority: the power ladder —
   The whole section in one line: the true 0-1000 axis, one diamond per
   competitor, your mark on it, and the ground to your left shaded because
   that ground is the only place a better page wins outright. */
.dsr-ladder { margin: var(--space-6) 0 var(--space-4); }
.dsr-track { position: relative; height: 116px; }
.dsr-zone { position: absolute; top: 52px; height: 30px;
  /* A label longer than its own zone must clip, never paint past the end
     of the axis — the zone is a measurement, and text spilling out of it
     reads as a wider zone. */
  overflow: hidden; }
.dsr-zone-win { left: 0; background: color-mix(in srgb, var(--dsr-good) 14%, transparent);
  border-left: 1px solid var(--dsr-good); border-right: 1px dashed var(--dsr-good); }
.dsr-zone-lose { background: color-mix(in srgb, var(--color-neutral-500) 12%, transparent); }
.dsr-zone b { position: absolute; bottom: 6px; left: 8px; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.dsr-zone-win b { color: var(--dsr-good-ink); }
.dsr-zone-lose b { color: var(--color-neutral-700); }
.dsr-track-line { position: absolute; left: 0; right: 0; top: 82px; height: 1px;
  background: var(--color-neutral-400); }
.dsr-mark { position: absolute; top: 76px; width: 11px; height: 11px;
  background: var(--color-neutral-600); transform: translateX(-50%) rotate(45deg); }
.dsr-mark--beat { background: var(--dsr-good); }
.dsr-mark:hover { background: var(--color-text); }
.dsr-median { position: absolute; top: 68px; width: 2px; height: 27px;
  background: var(--color-neutral-500); transform: translateX(-50%); }
.dsr-you { position: absolute; top: 0; transform: translateX(-50%); text-align: center; z-index: 3; }
.dsr-you-flag { background: var(--color-accent); color: var(--white); font-size: 10px;
  font-weight: 800; letter-spacing: .12em; padding: 3px 9px; white-space: nowrap; }
.dsr-you-val { font-size: 28px; font-weight: 800; line-height: 1; margin-top: 5px;
  font-variant-numeric: tabular-nums; }
.dsr-you-stem { width: 2px; height: 18px; background: var(--color-accent); margin: 4px auto 0; }
.dsr-tag { position: absolute; top: 92px; font-size: 10px; white-space: nowrap;
  transform: translateX(-50%); color: var(--color-neutral-600); }
.dsr-tag--beat { color: var(--dsr-good-ink); font-weight: 600; }
.dsr-axis { position: relative; border-top: 1px solid var(--dsr-rule); height: 20px;
  margin-top: var(--space-2); }
.dsr-axis i { position: absolute; top: 4px; font-size: 10px; font-style: normal;
  color: var(--color-neutral-600); transform: translateX(-50%); letter-spacing: .06em; }

/* — Visibility: one bar, cut by who earns the traffic — */
.dsr-share { display: flex; height: 46px; border: 1px solid var(--dsr-rule);
  margin: var(--space-4) 0 var(--space-2); }
.dsr-share > div { position: relative; border-right: 1px solid var(--color-bg);
  background: var(--color-neutral-300); min-width: 2px; }
.dsr-share > div:last-child { border-right: 0; }
.dsr-share > div:nth-child(even) { background: var(--color-neutral-400); }
.dsr-share .dsr-seg-own { background: var(--color-accent); }
.dsr-share .dsr-seg-tail { background: repeating-linear-gradient(45deg,
  var(--color-neutral-200) 0 5px, var(--color-neutral-300) 5px 10px); }
.dsr-share-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: 12px; }
.dsr-share-key > span { display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; }
.dsr-share-key i { width: 10px; height: 10px; flex: 0 0 auto; align-self: center;
  background: var(--color-neutral-300); }
.dsr-share-key .k2 { background: var(--color-neutral-400); }
.dsr-share-key .kown { background: var(--color-accent); }
.dsr-share-key .ktail { background: repeating-linear-gradient(45deg,
  var(--color-neutral-200) 0 4px, var(--color-neutral-300) 4px 8px); }
.dsr-share-key b { font-weight: 800; }
.dsr-share-key .dsr-self { color: var(--color-accent); font-weight: 800; }

/* — Proximity: how close each competitor's business is to yours —
   A table of eight percentages answers "what are the values"; the question
   here is "who is close", so each row is a position on one scale with the
   direct-rival threshold drawn on it. */
.dsr-prox { border-top: 2px solid var(--dsr-rule); }
.dsr-prox-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(180px, 2fr) 96px;
  gap: var(--space-4); align-items: center; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--dsr-hair); }
.dsr-prox-name { min-width: 0; overflow-wrap: anywhere; }
.dsr-prox-name a { font-weight: 600; }
.dsr-prox-name span { display: block; font-size: 11px; color: var(--color-neutral-600); }
.dsr-prox-scale { position: relative; height: 26px; border-bottom: 1px solid var(--color-neutral-400); }
.dsr-prox-fill { position: absolute; left: 0; bottom: 0; height: 12px;
  background: var(--color-neutral-500); }
.dsr-prox-row.is-bad .dsr-prox-fill { background: var(--dsr-bad); }
.dsr-prox-row.is-warn .dsr-prox-fill { background: var(--dsr-warn); }
.dsr-prox-thresh { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--dsr-bad); }
.dsr-prox-thresh::after { content: "direct rival"; position: absolute; top: -2px; left: 4px;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  color: var(--dsr-bad-ink); white-space: nowrap; }
.dsr-prox-val { text-align: right; font-variant-numeric: tabular-nums; }
.dsr-prox-val b { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.dsr-prox-dims { grid-column: 2 / 4; display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: -6px; }
.dsr-dim { font-size: 10px; letter-spacing: .06em; color: var(--color-neutral-700); }
.dsr-dim i { display: block; width: 54px; height: 4px; background: var(--color-neutral-300);
  margin-top: 3px; }
.dsr-dim i b { display: block; height: 100%; background: var(--color-neutral-700); }

/* — Head to head: how far each fight is from being won —
   The bar is the gap over the widest gap the work queue admits, so the
   column compares. Absolute positions stay as text underneath: they say
   where the fight is, the bar says how much of it is left. */
.dsr-gap { min-width: 104px; }
.dsr-gap > b { font-size: 17px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.dsr-gap > i { display: block; height: 6px; background: var(--color-neutral-300);
  margin: 4px 0 3px; }
.dsr-gap > i > span { display: block; height: 100%; background: var(--dsr-warn); }
.dsr-gap-abs { font-size: 10.5px; color: var(--color-neutral-600); white-space: nowrap; }
/* The actions of a lost fight (_fight_row_actions.html): the to-do pair
   and the Ads draft form stack as one item, nothing wraps mid-button;
   the page-state chip sits under the page's link; the section's Audit
   button follows its title. */
.dsr-fight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.dsr-fight-ads { display: inline; margin: 0; }
.dsr-fight-ads .btn { white-space: nowrap; }
.dsr-fight-page-state { display: inline-block; margin-left: 4px; vertical-align: middle; }
.dsr-fight-audit { margin: 0; }

/* — The work queue (section "fights"): one ranked card per fight — */
.dsr-queue-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.dsr-queue-head .dsr-lead { margin: 0; }
.dsr-fight-list { margin-top: var(--space-4); }
.dossier .dsr-fight-list .rank-item { background: var(--color-bg); border-radius: 0; border-color: var(--dsr-hair); padding: var(--space-2) var(--space-3);
  grid-template-columns: 2rem minmax(0, 2.4fr) 8.5rem 8rem auto; column-gap: var(--space-3); row-gap: 6px; }
.dossier .dsr-fight-list .rank-num { font-size: 15px; }
.dossier .dsr-fight-list .rank-item:hover { background: var(--color-neutral-100); }
@media (max-width: 720px) {
  /* Phone: the fight cards stack like every ranked card (akoore.css). */
  .dossier .dsr-fight-list .rank-item { grid-template-columns: 2rem minmax(0, 1fr); }
  .dossier .dsr-fight-list .rank-id, .dossier .dsr-fight-list .dsr-fight-pages, .dossier .dsr-fight-list .dsr-fight-pages > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
.dossier .dsr-fight-list .rank-title { font-size: 15px; }
.dossier .dsr-fight-list .rank-title .seo-status { margin-left: 4px; vertical-align: middle; }
.dsr-fight-pages { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 4px; font-size: 12.5px; }
.dsr-fight-pages > span { white-space: nowrap; }
.dsr-fight-pages a { overflow-wrap: anywhere; }
.dsr-fight-pages .dsr-caps { font-size: 9.5px; margin-right: 2px; }
.dossier .dsr-fight-list .rank-score .seo-meter { width: 100%; height: 6px; border-radius: 0; margin: 3px 0 2px; }
.dossier .dsr-fight-list .rank-score .seo-meter span { border-radius: 0; }
.dossier .dsr-fight-list .rank-score .dsr-gap-abs { display: block; }
.dossier .dsr-fight-list .rank-act { width: 160px; min-width: 160px; gap: 4px; }
.dossier .dsr-fight-list .rank-act .btn { padding: 4px 6px; font-size: 12px; white-space: nowrap; }
.dossier .dsr-fight-list .rank-act .ask-advice-btn__icon { display: none; }
.dossier .dsr-fight-list .rank-act .todo-actions { gap: 4px; }
.dossier .dsr-fight-list .rank-act .dsr-fight-actions { flex-direction: column; align-items: stretch; }
.dossier .dsr-fight-list .rank-act .todo-actions { display: grid; grid-template-columns: 1fr 1fr; }
.dossier .dsr-fight-list .rank-act .btn { width: 100%; justify-content: center; padding-left: 6px; padding-right: 6px; }
.dossier .dsr-fight-list .rank-act .dsr-fight-ads { display: block; }
.dossier .dsr-fight-list .rank-fact { border-radius: 0; }

/* — The scoreboard (section "overlap"): the record, the filter, the rows — */
.dsr-record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  border-top: 1px solid var(--dsr-rule); border-bottom: 1px solid var(--dsr-hair); padding: var(--space-3) 0; }
.dsr-record > div { min-width: 0; }
.dsr-record b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dsr-record b small { font-size: 14px; font-weight: 600; color: var(--color-neutral-600); }
.dsr-record .dsr-record-bad { color: var(--dsr-bad); }
.dsr-record span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 800; color: var(--color-neutral-700); }
.dsr-h2h-filter { margin: var(--space-4) 0 var(--space-2); }
.dossier .rs-evidence .dsr-h2h td { vertical-align: top; }
.dsr-h2h-search { font-weight: 600; overflow-wrap: anywhere; }
.dsr-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--color-neutral-600); }
.dsr-sub a { margin-left: 4px; }
.dsr-pos { white-space: nowrap; }
.dsr-pos b { font-size: 16px; font-weight: 800; }
/* The actions of a lost row as a 2×2 block of compact buttons, so the
   column stays ~150px and the search keeps its width. */
.dossier .rs-evidence .dsr-h2h th:first-child, .dossier .rs-evidence .dsr-h2h td:first-child { min-width: 170px; }
.dossier .rs-evidence .dsr-h2h th:last-child, .dossier .rs-evidence .dsr-h2h td:last-child { width: 176px; }
.dossier .rs-evidence .dsr-h2h td:nth-child(5) .seo-status { white-space: normal; }
.dossier .rs-evidence .dsr-h2h .dsr-fight-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 176px; }
.dossier .rs-evidence .dsr-h2h .dsr-fight-actions .todo-actions { display: contents; }
.dossier .rs-evidence .dsr-h2h .dsr-fight-actions .dsr-fight-ads { display: block; }
.dossier .rs-evidence .dsr-h2h .dsr-fight-actions .btn { width: 100%; justify-content: center; padding: 4px 6px; font-size: 12px; white-space: nowrap; }
.dossier .rs-evidence .dsr-h2h .dsr-fight-actions .ask-advice-btn__icon { display: none; }
@media (max-width: 720px) {
  .dsr-record { grid-template-columns: 1fr 1fr; }
  .dossier .dsr-fight-list .rank-act { min-width: 0; }
}

/* — The backlog: its shape before its rows — */
.dsr-triage { display: flex; height: 34px; border: 1px solid var(--dsr-rule);
  margin: var(--space-4) 0 var(--space-2); }
.dsr-triage > div { display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-right: 1px solid var(--dsr-rule); overflow: hidden; white-space: nowrap; }
.dsr-triage > div:last-child { border-right: 0; }
.dsr-triage-go { background: var(--dsr-good); color: var(--white); }
.dsr-triage-maybe { background: var(--dsr-warn); color: var(--white); }
.dsr-triage-no { background: var(--color-neutral-300); color: var(--color-neutral-800); }
.dsr-triage-rest { flex: 1 1 auto; }
.dsr-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px; background: var(--dsr-hair); border: 1px solid var(--dsr-hair);
  margin-top: var(--space-3); }
.dsr-theme { background: var(--color-bg); padding: var(--space-3) var(--space-4); }
.dsr-theme h4 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 var(--space-1);
  overflow-wrap: anywhere; }
.dsr-theme-bar { height: 6px; background: var(--color-neutral-300); margin: var(--space-2) 0 6px; }
.dsr-theme-bar i { display: block; height: 100%; background: var(--dsr-good); }
.dsr-theme p { margin: 0; font-size: 11.5px; color: var(--color-neutral-700);
  overflow-wrap: anywhere; }
.dsr-theme .dsr-theme-figs { font-size: 12px; color: var(--color-text);
  font-variant-numeric: tabular-nums; }
.dsr-theme .dsr-theme-figs b { font-weight: 800; }

/* — The profiles: your side against theirs, one ruled block each — */
.dossier .cmp-card {
  border: 0; border-top: 1px solid var(--dsr-hair); border-left: 3px solid var(--color-neutral-400);
  border-radius: 0; padding: var(--space-3) 0 var(--space-4) var(--space-4);
  margin: 0 0 var(--space-4);
}
/* Your own side of a comparison, and the two syntheses the report writes
   for itself, are the only blocks that are not a competitor. They say so
   with the left rule rather than with a hardcoded border hue. */
.dossier .cmp-card--self { border-left-color: var(--color-accent); }
.dossier .cmp-card--written { border-left-color: var(--color-text); }
.dossier .cmp-card > h4 { font-size: 18px; letter-spacing: -.01em; overflow-wrap: anywhere;
  margin: 0 0 var(--space-1); }
/* The citation autopsies print the winning page's full address, and a
   70-character URL has no break opportunity in it — one of them was
   widening the whole document on a phone. */
.dossier .cmp-metrics, .dossier .cmp-card a { overflow-wrap: anywhere; }
.dossier .cmp-card details > summary { font-weight: 600; }
.dossier .chip-list .tag { border-radius: 0; font-size: 11px;
  background: var(--color-neutral-200); color: var(--color-neutral-800); }
.dossier .cmp-card--self .chip-list .tag { background: var(--color-accent-200);
  color: var(--color-accent-800); font-weight: 600; }

/* — Link sources: an outreach list reads as a queue — */
.dsr-queue { border-top: 2px solid var(--dsr-rule); }
.dsr-q { display: grid; grid-template-columns: 30px minmax(160px, 1.4fr) 120px 1fr auto;
  gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--dsr-hair); }
.dsr-q-no { font-size: 12px; font-weight: 800; color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums; }
.dsr-q-dom { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.dsr-q-dom span { display: block; font-size: 11px; font-weight: 400;
  color: var(--color-neutral-600); }
.dsr-q-power { font-size: 12px; font-variant-numeric: tabular-nums; }
.dsr-q-power i { display: block; height: 5px; background: var(--color-neutral-300);
  margin-top: 4px; }
.dsr-q-power i b { display: block; height: 100%; background: var(--color-neutral-700); }
.dsr-q-links { font-size: 12px; color: var(--color-neutral-800); overflow-wrap: anywhere; }
.dsr-q-eg { display: block; color: var(--color-neutral-600); font-size: 11px; }
.dsr-q--skip { opacity: .5; }
.dsr-q--prize { border-left: 3px solid var(--dsr-good); padding-left: var(--space-3); }

/* — AI answers: one question is one entry, won or lost — */
.dsr-qa { border-left: 3px solid var(--dsr-bad); padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--dsr-hair); }
.dsr-qa--won { border-left-color: var(--dsr-good); }
.dsr-qa-q { font-size: 16px; font-weight: 600; margin: 0 0 var(--space-1);
  overflow-wrap: anywhere; }
.dsr-qa-meta { font-size: 12px; color: var(--color-neutral-700); margin: 0;
  overflow-wrap: anywhere; }
.dsr-qa-meta a { overflow-wrap: anywhere; }

/* — The landscape's overlap bar — form A, in the dossier's ink. Geometry
   from competitor_report_visuals.overlap_field(); nothing computed here. */
.dossier .dsr-ov { margin: var(--space-3) 0 var(--space-2); }
.dossier .dsr-ov-row { display: grid;
  grid-template-columns: minmax(140px, 32%) 1fr 70px; gap: var(--space-3);
  align-items: center; padding: 4px 0; font-size: 13px;
  border-bottom: 1px solid var(--dsr-hair); }
.dossier .dsr-ov-name { overflow-wrap: anywhere; }
.dossier .dsr-ov-bar { height: 10px; background: transparent;
  border-bottom: 1px solid var(--dsr-hair); position: relative; }
.dossier .dsr-ov-bar i { position: absolute; left: 0; bottom: 0; height: 10px;
  background: var(--dsr-ink); }
.dossier .dsr-ov-row:first-of-type .dsr-ov-bar i { background: var(--dsr-red, var(--coral-text)); }
.dossier .dsr-ov-n { text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; }

@media (max-width: 1140px) {
  /* The ladder labels collide once the axis is short. The diamonds and the
     "you" mark still carry the whole message; the names are in the register
     under the entry, which is where a reader looks them up anyway. */
  .dsr-tag { display: none; }
  .dsr-track { height: 100px; }
}
@media (max-width: 900px) {
  .dsr-prox-row { grid-template-columns: 1fr 80px; gap: var(--space-2); }
  .dsr-prox-scale { grid-column: 1 / 3; }
  .dsr-prox-dims { grid-column: 1 / 3; }
  .dsr-q { grid-template-columns: 24px 1fr; gap: var(--space-2) var(--space-3); }
  .dsr-q-power, .dsr-q-links, .dsr-q > .dsr-q-tags { grid-column: 2; }
  .dsr-you-flag { font-size: 9px; padding: 2px 6px; }
  /* Neither zone is wide enough for its sentence at this width. The two
     counts they carry are in the fact strip right under the drawing, so
     nothing is lost by dropping them here. */
  .dsr-zone b { display: none; }
}

@media print {
  .dossier .rs-evidence .seo-status { border: 0; }
  /* The drawings are the part of a section that survives being printed —
     force the fills the engine drops by default, and keep each figure whole
     on one sheet. */
  .dsr-ladder, .dsr-share, .dsr-triage, .dsr-theme, .dsr-qa, .dsr-strip, .dossier .dsr-ov {
    break-inside: avoid; page-break-inside: avoid;
  }
  .dsr-share, .dsr-triage, .dsr-share > div, .dsr-triage > div,
  .dsr-mark, .dsr-you-flag, .dsr-prox-fill, .dsr-theme-bar i, .dossier .dsr-ov-bar i {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .dsr-tag { display: none; }
}