/* Head-to-head compare — the verdict-first editorial module (design "3a").
   Rendered by assets/paddle-compare.js into #paddle-compare-app on
   /paddles/browse/compare.

   PAGE-LOCAL PALETTE. Colours and spacing are the handoff's literal values (a
   self-contained cream/green editorial palette, close kin to the site tokens
   but pitched a shade warmer so the card reads as its own object). That is why
   this sheet carries hardcoded hexes outside :root where most carry none —
   scripts/check-consistency.mjs holds the budget, and this line is the
   declaration it requires. Fonts are the SITE faces —
   the handoff's Martian Mono → Space Mono (--font-mono), DM Sans → Manrope
   (--font-display/body), Source Serif 4 unchanged — so no third font family
   loads. Everything is scoped under .h2h to keep the generic .tip class from
   colliding with anything else. */

/* ---------------------------------------------------------- the mount ---
   .ph-wrap is the container paddle-compare.js renders into, and .ph-empty is
   what it writes when the URL names no paddles. Both moved here from
   paddle-finder.css when that file was split: this page is their only
   consumer, and the rest of the old .ph-* head-to-head component (the summary
   cards and mirrored metric bars) was dead code deleted in the same pass. */

.ph-wrap {
  padding-block: var(--space-2) var(--space-4);
}

.ph-empty {
  padding: var(--space-3) var(--space-2);
  border: 1px dashed var(--rule-25);
  border-radius: var(--radius-m);
  text-align: center;
  color: var(--ink-soft);
}

/* The card floats on a sand ground so its #F6F2E7 face separates from the page;
   the site's default --fog (#f7f2e7) is too close to the card to give an edge. */
.h2h-section {
  background: #e9e5d8;
}

/* Static page header (title + lede). Present for the empty/error/dead-module
   cases; hidden once the module renders and its verdict becomes the H1. */
.ph-wrap.h2h-mounted .h2h-fallback {
  display: none;
}

.h2h {
  max-width: 940px;
  margin: 0 auto;
  background: #f6f2e7;
  border: 1px solid rgba(34, 50, 43, 0.14);
  border-radius: 10px;
  padding: 40px 44px 32px;
  color: #22322b;
  font-family: var(--font-body);
}

/* Swap fade — ~150ms, skipped under prefers-reduced-motion (handled in JS). */
/* ---------------------------------------------------------------- header */

.h2h-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.h2h-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #77762f;
}
.h2h-verdict {
  margin: 10px 0 0;
  font-family: var(--font-headline);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #22322b;
}
.h2h-mark {
  box-shadow: inset 0 -12px 0 #d9e353;
}
.h2h-blurb {
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5c594c;
}

/* ---------------------------------------------------- recommendation cards */

.h2h-recos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
.h2h-reco {
  background: #fdfcf6;
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  /* Flex column so the CTA can pin to the bottom — the grid already stretches
     both cards to the taller one's height, so this lines the two buy buttons up
     regardless of how many bullets each card carries. */
  display: flex;
  flex-direction: column;
}
.h2h-reco--win {
  border: 2px solid #a3b02f;
}
.h2h-reco--lose,
/* Both cards when the pair couldn't be separated (tie on Total, or neither
   paddle has the bench data to score one). Neither gets the winner's 2px
   border, because neither won. */
.h2h-reco--even {
  border: 1px solid rgba(34, 50, 43, 0.15);
}
.h2h-reco-badge {
  position: absolute;
  top: -9px;
  left: 20px;
  background: #d9e353;
  color: #3a3f14;
  font-family: var(--font-mono);
  font-size: 8.5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.h2h-reco-title {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  color: #22322b;
}
.h2h-reco-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #3f4430;
}

/* CTA row — filled lime on the winner, outlined on the loser. */
.h2h-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto; /* pin to the card bottom so both CTAs align across the pair */
  padding-top: 14px; /* ...but never let it butt against the bullets on the taller card */
  flex-wrap: wrap;
}
.h2h-cta {
  display: inline-block;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #22322b;
  text-decoration: none;
  border: 1px solid rgba(34, 50, 43, 0.4);
}
.h2h-cta--win {
  background: #d9e353;
}
.h2h-cta--lose,
/* No pick was made, so neither buy button gets the filled treatment that reads
   as an endorsement — matched pair, same weight. */
.h2h-cta--even {
  background: transparent;
  border-color: rgba(34, 50, 43, 0.35);
  font-weight: 600;
}
.h2h-cta:hover {
  background: #22322b;
  color: #f6f2e7;
  border-color: #22322b;
  text-decoration: none;
}
/* The point-of-link affiliate disclosure, so it has to read as real text:
   #8b887c was 3.46:1 on the card and failed WCAG AA (4.5:1). --ink-soft is
   5.99:1. Same call as the grid's .pn-note in paddle-catalog.css. */
.h2h-cta-note {
  font-size: 11px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------ fingerprint + table */

.h2h-analysis {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  margin-top: 30px;
  align-items: center;
}
.h2h-radar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #77762f;
  text-align: center;
}
.h2h-radar-svg {
  width: 100%;
  margin-top: 6px;
}
.h2h-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #8b887c;
  margin-top: 4px;
}
.h2h-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.h2h-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.h2h-dot--a {
  background: #17594a;
}
.h2h-dot--b {
  background: #8c9a2b;
}

.h2h-table-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #77762f;
}
/* ---------- head-to-head bar chart ---------- */

/* The radar's legend chip, left-aligned under the section label so the bar chart
   names its own two colours (the radar carries the same legend on its side). */
.h2h-legend--table {
  justify-content: flex-start;
  margin-top: 8px;
}

.h2h-bars {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Metric label (col 1, vertically centred against the pair) + two stacked bars. */
.h2h-bar-metric {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
}
.h2h-bar-metric > .tip {
  font-size: 12px;
  font-weight: 500;
}
.h2h-bar-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* One paddle's bar: a track that fills the row, then the 0–10 rating at the end.
   Same track + fill language as the card bars, in the paddle's series colour. */
.h2h-bar {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 8px;
  align-items: center;
}
.h2h-bar-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(34, 50, 43, 0.1);
}
.h2h-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}
.h2h-bar--a .h2h-bar-fill {
  background: #17594a;
}
.h2h-bar--b .h2h-bar-fill {
  background: #8c9a2b;
}
/* The loser's fill sits back a touch so the winning bar reads first. */
.h2h-bar:not(.is-win) .h2h-bar-fill {
  opacity: 0.5;
}
.h2h-bar-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  text-align: right;
  color: #8b887c;
}
.h2h-bar--a.is-win .h2h-bar-num {
  color: #17594a;
  font-weight: 700;
}
.h2h-bar--b.is-win .h2h-bar-num {
  color: #4a4e1b;
  font-weight: 700;
}

/* ---------- numeric strip (weight / price / total / value) ---------- */

/* A bar would misrepresent these (own units, lower-wins on weight/price), so
   they stay numeric under the chart. */
.h2h-nums {
  margin-top: 18px;
  border-top: 1px solid rgba(34, 50, 43, 0.2);
  padding-top: 4px;
}
.h2h-num-row {
  display: grid;
  grid-template-columns: 1fr 74px 74px;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
}
.h2h-num-row > .tip {
  justify-self: start;
  font-size: 12px;
  font-weight: 500;
}
/* Value columns carry the paddle colour, so they map to the bars/legend without
   a header; the winner is the bold, saturated one. */
.h2h-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  text-align: right;
  justify-self: end;
}
.h2h-num--a {
  color: #3a5c51;
}
.h2h-num--b {
  color: #5c6535;
}
.h2h-num--a.is-win {
  color: #14483c;
  font-weight: 700;
}
.h2h-num--b.is-win {
  color: #3a3f14;
  font-weight: 700;
}
/* The Total row is the sum of the five bars — a stronger divider + bold label
   set it apart from the two spec rows above it. */
.h2h-num-row--total {
  margin-top: 3px;
  border-top: 1px dashed rgba(34, 50, 43, 0.16);
  padding-top: 9px;
}
.h2h-num-row--total > .tip {
  font-weight: 700;
}

.h2h-strip {
  margin-top: 10px;
  background: #efebdd;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: #77764f;
}
.h2h-caption {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8b887c;
}

/* ---------------------------------------------------------- other options */

.h2h-others {
  margin-top: 28px;
  border-top: 1px solid rgba(34, 50, 43, 0.14);
  padding-top: 20px;

}
.h2h-others-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #77762f;
}

/* A little air under the OTHER OPTIONS label. The row's wrap + the 288px card
   sizing come from .pd-cc-row / .pd-cc-card in paddle-finder.css. */
.h2h-others .pd-cc-row {
  margin-top: 14px;
}

/* Two anchors on this page (A and B), so an option card carries no single
   "your paddle" to measure against and prints no per-axis delta. Collapse the
   bar's three-column grid (label · track · delta) to label · track so the track
   fills the freed width rather than leaving the delta column empty. */


/* Sits between the two reco cards and the fingerprint/table, so it needs air on
   both sides rather than only above. --ink-soft, not #8b887c: that measured
   3.46:1 on the card and failed WCAG AA — same call as .h2h-cta-note and the
   grid's .pn-note. A disclosure that can't comfortably be read isn't one. */
/* Commission disclosure — the .affiliate-note skin for this page.
   Sentence and class come from assets/paddle-cta.js; only the look is here. */
.affiliate-note--h2h {
  margin: 16px 0 4px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ links */

.h2h a:not(.h2h-cta):not(.btn) {
  color: #17594a;
  text-decoration: none;
  font-weight: 600;
}
.h2h a:not(.h2h-cta):not(.btn):hover {
  color: #0e3f34;
  text-decoration: underline;
}

/* --------------------------------------------------------------- tooltips */

.h2h .tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(34, 50, 43, 0.45);
}
.h2h .h2h-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  width: 230px;
  background: #22322b;
  color: #f6f2e7;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 9px 11px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  text-align: left;
  border-bottom: none;
}
.h2h .tip:hover .h2h-tip,
.h2h .tip:focus-within .h2h-tip,
.h2h .tip.is-open .h2h-tip {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------- mobile (≤640px) */

@media (max-width: 640px) {
  .h2h {
    padding: 22px 18px;
    border-radius: 10px;
  }
  .h2h-kicker {
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }
  .h2h-verdict {
    font-size: 26px;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .h2h-mark {
    box-shadow: inset 0 -9px 0 #d9e353;
  }
  .h2h-blurb {
    font-size: 12px;
    line-height: 1.55;
  }

  .h2h-recos {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }
  .h2h-reco {
    padding: 16px;
  }
  .h2h-reco-title {
    font-size: 17px;
  }
  .h2h-reco-bullets {
    font-size: 12px;
    line-height: 1.65;
  }
  /* Full-width block CTAs; note centred under the button. */
  .h2h-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 12px;
  }
  .h2h-cta {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 13.5px;
  }
  .h2h-cta-note {
    text-align: center;
    /* Not 10.5px — see the AA note on the base rule. A disclosure that shrinks
       on the surface most people read it on is the wrong direction. */
    font-size: 11px;
  }

  .h2h-analysis {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
    align-items: stretch;
  }
  .h2h-radar-label {
    font-size: 9px;
  }
  .h2h-legend {
    font-size: 9px;
  }
  .h2h-dot {
    width: 7px;
    height: 7px;
  }

  .h2h-bar-metric {
    grid-template-columns: 78px 1fr;
    gap: 10px;
  }
  .h2h-bar-metric > .tip,
  .h2h-num-row > .tip {
    font-size: 12px;
  }
  .h2h-bar-num,
  .h2h-num {
    font-size: 11px;
  }
  .h2h-num-row {
    grid-template-columns: 1fr 60px 60px;
    gap: 8px;
  }
  .h2h-strip {
    font-size: 9px;
    line-height: 1.6;
  }
  .h2h-caption {
    font-size: 10px;
  }

  .affiliate-note--h2h {
    /* Not 10.5px — phones are where most of these links get tapped. */
    font-size: 11px;
  }
  .h2h .h2h-tip {
    width: min(230px, 72vw);
  }
}