/* Head-to-head comparison pages (site redesign): "tale of the tape", a mirrored stat sheet.
   Extends review.css (tokens, type, light/dark, legacy adapters). Everything is scoped to .rv.fc-cmp
   (body class set by the comparison templates), so reviews and legacy pages are untouched.
   Data comes from view_utils/comparison_sheet.py; markup from templates/wagtail/snippets/cmp/. */

/* ---------- tokens (comparison-only) ---------- */
.rv.fc-cmp {
  /* logos sit on review.css's --logo-tile (light in both themes) */
  /* secondary copy on the ink band: paper at reduced strength (≥4.5:1 on ink in both themes) */
  --cmp-on-ink-2: color-mix(in srgb, var(--paper) 74%, var(--ink));
  --cmp-spine: minmax(150px, 240px);
}

.rv.fc-cmp ::selection { background: var(--accent-soft); color: var(--ink); }
.rv.fc-cmp .cmp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- title ---------- */
.rv.fc-cmp .cmp-head { padding: 18px 0 0; }
.rv.fc-cmp main .cmp-head h1 {
  margin: 0; font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.04em; text-align: left;
  text-wrap: balance; max-width: 22ch;
}
.rv.fc-cmp .cmp-head .rv-dek { margin-top: 12px; max-width: 52ch; }

/* ---------- the band: contender | vs + tally | contender ---------- */
.rv.fc-cmp .cmp-tape {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--cmp-spine) minmax(0, 1fr);
  margin: 24px 0 0; border-radius: var(--r); background: var(--ink); color: var(--paper); overflow: hidden;
}
.rv.fc-cmp .cmp-side { position: relative; display: grid; gap: 18px; align-content: start; padding: 24px 28px 30px; min-width: 0; }
/* each side ends in its bank's brand strip (Brand Strip Rule), drawn out from the spine */
.rv.fc-cmp .cmp-side::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--brand);
  transform-origin: 100% 50%; animation: cmp-strip .7s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}
.rv.fc-cmp .cmp-s2::after { transform-origin: 0 50%; }
@keyframes cmp-strip { from { transform: scaleX(0); } }
.rv.fc-cmp .cmp-tape .cmp-s2 { justify-items: end; text-align: right; }

.rv.fc-cmp .cmp-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rv.fc-cmp .cmp-s2 .cmp-id { flex-direction: row-reverse; }
.rv.fc-cmp .cmp-logo {
  flex: none; display: grid; place-items: center; width: 64px; height: 48px; padding: 8px; border-radius: 10px;
  background: var(--logo-tile);
}
.rv.fc-cmp .cmp-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rv.fc-cmp main .cmp-name {
  margin: 0; min-width: 0; color: var(--paper); font: 800 clamp(22px, 2.2vw, 30px)/1.05 var(--sans); letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.rv.fc-cmp .cmp-name b { font-weight: 800; color: var(--paper); }
.rv.fc-cmp .cmp-name span { font-weight: 500; color: var(--cmp-on-ink-2); margin-inline-start: .26em; }

.rv.fc-cmp .cmp-stats { display: flex; gap: 28px; margin: 0; }
.rv.fc-cmp .cmp-s2 .cmp-stats { flex-direction: row-reverse; }
.rv.fc-cmp .cmp-stats dt { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cmp-on-ink-2); margin-bottom: 8px; }
.rv.fc-cmp .cmp-stats dd { margin: 0; font: 600 30px/1 var(--mono); letter-spacing: -.04em; color: var(--paper); font-feature-settings: "tnum"; }
.rv.fc-cmp .cmp-stats small { font-size: 14px; letter-spacing: 0; color: var(--cmp-on-ink-2); }

.rv.fc-cmp .cmp-act { display: grid; gap: 8px; justify-items: start; }
.rv.fc-cmp .cmp-s2 .cmp-act { justify-items: end; }
.rv.fc-cmp .cmp-tape .ref { color: var(--cmp-on-ink-2); line-height: 1.35; }
.rv.fc-cmp .cmp-tape :focus-visible { outline-color: var(--paper); }
/* DESIGN Buttons: inside an ink block the button inverts to paper fill + ink text (as the offer band); the band is
   light in the dark theme, so these tokens keep the CTA the inverse of the band in both. Cobalt stays in pick-if. */
.rv.fc-cmp main .cmp-tape .rv-btn-primary, .rv.fc-cmp main .cmp-tape .rv-btn-primary:hover {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
}

.rv.fc-cmp .cmp-vs {
  display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px 8px 30px; text-align: center;
  border-inline: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.rv.fc-cmp .cmp-vs-word { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cmp-on-ink-2); }
.rv.fc-cmp main .cmp-tally { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 600 56px/1 var(--mono); letter-spacing: -.05em; color: var(--cmp-on-ink-2); }
.rv.fc-cmp .cmp-tally b { font-weight: 600; color: var(--cmp-on-ink-2); }
.rv.fc-cmp .cmp-tally b.is-lead { color: var(--paper); }
.rv.fc-cmp .cmp-tally span { font-size: 30px; }
.rv.fc-cmp main .cmp-tally-note { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--cmp-on-ink-2); }

/* ---------- compact bar once the band has scrolled away (cmp.js toggles .on) ---------- */
.rv.fc-cmp .cmp-bar {
  position: fixed; top: var(--hdr); left: 0; right: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  transform: translateY(-110%); visibility: hidden; transition: transform .2s cubic-bezier(.2, .7, .2, 1), visibility 0s .2s;
}
.rv.fc-cmp .cmp-bar.on { transform: none; visibility: visible; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.rv.fc-cmp .cmp-bar-in {
  width: min(1240px, 100% - 32px); margin-inline: auto; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) var(--cmp-spine) minmax(0, 1fr); padding: 10px 0; font-size: 14px; color: var(--ink);
}
.rv.fc-cmp .cmp-bar-a, .rv.fc-cmp .cmp-bar-b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv.fc-cmp .cmp-bar-b { text-align: right; }
.rv.fc-cmp .cmp-bar b { font-weight: 700; }
.rv.fc-cmp .cmp-bar-s { font-weight: 600; color: var(--muted); margin-inline: 4px; }
.rv.fc-cmp .cmp-bar-t { text-align: center; font-family: var(--mono); font-feature-settings: "tnum"; font-size: 18px; font-weight: 600; color: var(--muted); }
.rv.fc-cmp .cmp-bar-t .is-lead { color: var(--ink); }

/* ---------- the sheet: left value | label on the spine | right value ---------- */
.rv.fc-cmp .cmp-sheet { margin-top: 44px; }
.rv.fc-cmp .cmp-sheet-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.rv.fc-cmp main .cmp-sheet-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); }
.rv.fc-cmp .cmp-tools[hidden] { display: none; }
.rv.fc-cmp .cmp-rule { margin: 10px 0 18px; max-width: 68ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rv.fc-cmp .cmp-rule-mark { display: inline-grid; place-items: center; vertical-align: -3px; width: 20px; height: 20px; border-radius: 6px; background: var(--pos-soft); color: var(--pos); }

.rv.fc-cmp table.cmp-t { display: block; width: 100%; margin: 0; border-collapse: collapse; color: var(--ink); }
.rv.fc-cmp .cmp-t :is(thead, tbody) { display: block; }
.rv.fc-cmp .cmp-t tr {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--cmp-spine) minmax(0, 1fr);
  grid-template-areas: "a l b"; align-items: stretch;
}
.rv.fc-cmp .cmp-t :where(th, td) { border: 0; padding: 0; background: none; vertical-align: middle; }

.rv.fc-cmp .cmp-gh th {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) var(--cmp-spine) minmax(0, 1fr); align-items: end;
  padding: 30px 0 10px; border-bottom: 1px solid var(--ink);
}
.rv.fc-cmp .cmp-g:first-of-type .cmp-gh th { padding-top: 8px; }
.rv.fc-cmp .cmp-gl {
  text-align: center; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.rv.fc-cmp .cmp-gl small { display: block; margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.rv.fc-cmp .cmp-gn { font: 600 18px/1 var(--mono); letter-spacing: -.03em; color: var(--muted); }
.rv.fc-cmp .cmp-gn.is-lead { color: var(--pos); }
.rv.fc-cmp .cmp-gn2 { text-align: right; }

.rv.fc-cmp .cmp-r { border-bottom: 1px solid var(--line); }
.rv.fc-cmp .cmp-l {
  grid-area: l; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px;
  background: var(--sunk); text-align: center; font: 500 14px/1.3 var(--sans); color: var(--ink-2);
}
.rv.fc-cmp .cmp-tie { font: 600 13px/1 var(--mono); color: var(--muted); }
.rv.fc-cmp .cmp-v {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 16px 11px 0;
  font: 500 15px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere;
}
.rv.fc-cmp .cmp-v.is-num { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -.01em; }
.rv.fc-cmp .cmp-v1 { grid-area: a; }
.rv.fc-cmp .cmp-v2 { grid-area: b; flex-direction: row-reverse; text-align: right; padding: 11px 0 11px 16px; }
.rv.fc-cmp .cmp-v:is(.k-n, .k-d) { color: var(--muted); }
/* the better value: green, bold, a check and a tinted tag (colour is never the only cue) */
.rv.fc-cmp .cmp-v.win { color: var(--pos); font-weight: 600; }
.rv.fc-cmp .cmp-v.win > span { background: var(--pos-soft); border-radius: 6px; padding: 3px 8px; }  /* outer value only, not its .num runs */
.rv.fc-cmp .cmp-ck { flex: none; }
/* "Only differences" (cmp.js) */
.rv.fc-cmp .cmp-t.diff .cmp-r[data-same], .rv.fc-cmp .cmp-t.diff .cmp-g[data-all-same] { display: none; }

/* ---------- pick A if / pick B if ---------- */
.rv.fc-cmp .cmp-pick { margin-top: 56px; }
.rv.fc-cmp main .cmp-pick h2 { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 28px); text-wrap: balance; }
.rv.fc-cmp .cmp-pick-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rv.fc-cmp .cmp-pick-col {
  display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); position: relative; overflow: hidden;
}
.rv.fc-cmp main .cmp-pick-col h3 { margin: 0; }
.rv.fc-cmp .cmp-pick-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-cmp .cmp-pick-col li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.rv.fc-cmp .cmp-pick-col li::before {
  content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pos-soft); color: var(--pos); font: 700 14px/1 var(--mono);
}
.rv.fc-cmp .cmp-pick-col li p { margin: 0; }
.rv.fc-cmp .cmp-pick-col .cmp-act { margin-top: auto; padding-top: 4px; }

/* ---------- prose: TOC rail + a 68ch column ---------- */
.rv.fc-cmp .cmp-layout { padding: 56px 0 24px; margin-top: 56px; border-top: 1px solid var(--line); }
.rv.fc-cmp .cmp-toc-h { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv.fc-cmp .cmp-prose { max-width: 68ch; }
.rv.fc-cmp .cmp-prose .rv-byline { margin: 0 0 8px; padding-top: 0; border-top: 0; }
.rv.fc-cmp main .cmp-prose h2 { margin: 48px 0 14px; padding: 0; text-wrap: balance; }
.rv.fc-cmp main .cmp-prose h3 { margin: 28px 0 10px; }
.rv.fc-cmp .cmp-prose p { margin: 0 0 1em; }
.rv.fc-cmp .cmp-prose .table-responsive, .rv.fc-cmp .cmp-prose table { max-width: 100%; }
/* editor tables (CustomTableBlock): legacy face, navy headers that fail in dark. Restyle as a ledger table. */
.rv.fc-cmp .cmp-prose table { border-collapse: collapse; width: 100%; margin: 18px 0 24px; font-size: 14px; }
.rv.fc-cmp main .cmp-prose table :is(th, td) {
  font-family: var(--sans); color: var(--ink-2); background: none; text-align: left; vertical-align: top;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); line-height: 1.4;
}
.rv.fc-cmp main .cmp-prose table th { font-weight: 600; color: var(--ink); }
/* the legacy .w-tr-head row draws a thick cobalt rule: one 1px ink rule instead */
.rv.fc-cmp main .cmp-prose table thead th { border: 0; border-bottom: 1px solid var(--ink); box-shadow: none; background: none; }
/* legacy wagtail CSS paints a 4px cobalt border-bottom on tr.w-tr-head with !important; only !important removes it */
.rv.fc-cmp main .cmp-prose table thead tr { border: 0 !important; background: none; }
.rv.fc-cmp main .cmp-prose table td:not(:first-child) { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -.01em; }
.rv.fc-cmp main .cmp-prose table caption { caption-side: bottom; padding-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); text-align: left; }
.rv.fc-cmp .cmp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 12px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.rv.fc-cmp .cmp-meta .num { font-size: inherit; }
.rv.fc-cmp .cmp-pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 18px 0 8px; }
.rv.fc-cmp .cmp-pc-col { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.rv.fc-cmp main .cmp-pc-col h3 { margin: 0 0 14px; font-size: 19px; }
.rv.fc-cmp .cmp-pc-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rv.fc-cmp .cmp-pc-col li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-cmp .cmp-pc-col li::before { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 14px/1 var(--mono); }
.rv.fc-cmp .cmp-pc-col li.pl::before { content: "+"; background: var(--pos-soft); color: var(--pos); }
.rv.fc-cmp .cmp-pc-col li.mi::before { content: "–"; background: var(--neg-soft); color: var(--neg); }
.rv.fc-cmp .cmp-prose .cmp-note { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- more comparisons + also read ---------- */
.rv.fc-cmp .cmp-more { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.rv.fc-cmp main .cmp-more h2, .rv.fc-cmp main .cmp-read h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); }
.rv.fc-cmp .cmp-pills { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rv.fc-cmp main .cmp-pills a {
  display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink); font-size: 14px; text-decoration: none;
}
.rv.fc-cmp main .cmp-pills a:hover { border-color: var(--ink); color: var(--ink); }
.rv.fc-cmp .cmp-read { margin-bottom: 64px; }
.rv.fc-cmp .cmp-read .rv-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* the review TOC turns into a sticky pill bar here; on comparisons the compact tally bar owns that spot */
  .rv.fc-cmp .rv-toc { display: none; }
  .rv.fc-cmp .cmp-layout { padding-top: 40px; }
}
@media (max-width: 760px) {
  .rv.fc-cmp .cmp-tape { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-cmp .cmp-side { padding: 22px 20px 26px; }
  .rv.fc-cmp .cmp-vs {
    grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 14px; padding: 14px 20px;
    border-inline: 0; border-block: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  }
  .rv.fc-cmp main .cmp-tally { font-size: 40px; }
  .rv.fc-cmp .cmp-tally span { font-size: 21px; }
  .rv.fc-cmp .cmp-pick-cols { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-cmp .cmp-read .rv-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* rows stack: the label line, then both values under it, still mirrored */
  .rv.fc-cmp { --cmp-spine: 72px; }
  .rv.fc-cmp .cmp-t tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l l" "a b"; }
  .rv.fc-cmp .cmp-gh th { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .rv.fc-cmp .cmp-l { background: none; padding: 12px 0 2px; font-size: 14px; color: var(--muted); }
  .rv.fc-cmp .cmp-v { padding: 4px 8px 12px 0; font-size: 14px; }
  .rv.fc-cmp .cmp-v2 { padding: 4px 0 12px 8px; }
  /* the band: tally on top, the two contenders still facing each other side by side, one shared disclosure */
  .rv.fc-cmp .cmp-tape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv.fc-cmp .cmp-vs { grid-column: 1 / -1; grid-row: 1; padding: 8px 16px; border-block-start: 0; }
  .rv.fc-cmp .cmp-s1 { grid-column: 1; grid-row: 2; }
  .rv.fc-cmp .cmp-s2 { grid-column: 2; grid-row: 2; border-inline-start: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
  .rv.fc-cmp .cmp-side { gap: 10px; padding: 14px 12px 12px; }
  .rv.fc-cmp .cmp-side::after { inset: 0 0 auto 0; }  /* brand strip sits under the tally row */
  .rv.fc-cmp .cmp-id { align-items: flex-start; gap: 8px; }
  .rv.fc-cmp .cmp-side { grid-template-rows: auto auto 1fr; }
  .rv.fc-cmp .cmp-act { align-self: end; }
  .rv.fc-cmp .cmp-logo { width: 28px; height: 28px; padding: 3px; border-radius: 6px; }
  .rv.fc-cmp main .cmp-name { font-size: 16px; line-height: 1.15; letter-spacing: -.02em; }
  .rv.fc-cmp .cmp-name span { display: block; margin: 2px 0 0; }
  .rv.fc-cmp .cmp-stats, .rv.fc-cmp .cmp-s2 .cmp-stats { flex-direction: column; gap: 8px; }
  .rv.fc-cmp .cmp-stats dt { margin-bottom: 4px; }
  .rv.fc-cmp .cmp-stats dd { font-size: 21px; }
  .rv.fc-cmp .cmp-stats small { font-size: 11px; }
  .rv.fc-cmp .cmp-act, .rv.fc-cmp .cmp-s2 .cmp-act { justify-items: stretch; }
  .rv.fc-cmp .cmp-act .rv-btn { justify-content: center; padding: .7em .8em; font-size: 14px; }
  .rv.fc-cmp .cmp-tape { margin-top: 18px; }
  .rv.fc-cmp .cmp-sheet { margin-top: 18px; }
  .rv.fc-cmp .cmp-rule { margin-bottom: 6px; }
  .rv.fc-cmp .cmp-bar-in { font-size: 14px; }
  .rv.fc-cmp .cmp-bar-s { display: none; }
  .rv.fc-cmp .cmp-bar-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .rv.fc-cmp .cmp-l { padding-top: 10px; }
  .rv.fc-cmp .cmp-v { padding-bottom: 10px; }
  .rv.fc-cmp .cmp-v2 { padding-bottom: 10px; }
}

/* ---------- touch + motion ---------- */
@media (pointer: coarse) {
  .rv.fc-cmp main .cmp-pills a { min-height: 44px; }
  .rv.fc-cmp .cmp-tools .rv-switch { min-height: 44px; }
  .rv.fc-cmp .cmp-act .rv-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv.fc-cmp .cmp-side::after { animation: none; }
  .rv.fc-cmp .cmp-bar, .rv.fc-cmp .cmp-bar.on { transition: none; }
}

/* end-of-page referral disclosure, above the related comparisons */
.rv.fc-cmp .cmp-disc .rv-disc-end { margin-top: 48px; }