/* Comparison card — .pd-cc-*, one component with two mounts.

   design_handoff_similar_paddles_card. Rendered into the "Similar paddles" /
   "Where to go from here" sections of every detail page by
   scripts/generate-paddle-pages.mjs, and into "Other options" on
   /paddles/browse/compare by assets/paddle-compare.js.

   Split out of paddle-finder.css (where it lived inside the .pd-* detail
   scope) so the two mounts share one definition and one token block instead of
   paddle-compare.css keeping a hand-synced copy.

   The --cc-* block below is this component's own palette and is deliberately
   page-local rather than style.css tokens — the high-fidelity-handoff rule in
   DESIGN.md. It is defined ONCE, here; do not copy it into a page sheet.

   Percentile firewall: this component is one of the two sanctioned exceptions
   (the other is the /compare page itself). Its spec bars print deltas and a
   % match derived from licensed percentiles, by an explicit fidelity-over-
   firewall call. Do not add a third exception.

   Needs, and does not define: .pn-tag (paddle-shared.css). */

/* ==========================================================================
   Comparison card — "Similar paddles" + "Where to go from here"
   design_handoff_similar_paddles_card. ONE card renders both sections: four
   spec bars carrying a ghost tick for THIS page's paddle, a signed per-axis
   delta, a standout line, a price delta, and two weighted actions (Compare into
   the head-to-head tray + Buy).

   HIGH-FIDELITY, page-local palette. The handoff ships its own exact hexes
   (card #FBF9F3, teal #14584F, the four bar fills, the delta colours), and the
   design's identity lives in these values — per the high-fidelity-handoff
   convention they are recreated literally here rather than mapped onto the
   site's warm-teal tokens. The section chrome (h2/caption) deliberately KEEPS
   the page's existing .pd-section scale so the two tail sections read as one
   page, not a transplant. Fonts follow the site stack the handoff told us to
   substitute: Source Serif 4 / Manrope / Space Mono.
   ========================================================================== */

/* The card's page-local design tokens, defined ONCE — for all three mounts.
   They used to be declared twice: here under .pd-recos/.pd-similar, and again
   under .h2h-others in paddle-compare.css behind a "keep in sync with that
   block" comment, which is a comment doing a build system's job.

   Listed as three mount points rather than promoted to :root, even though this
   sheet only loads on the two pages that render the card. :root LEAKS them, and
   the leak is not theoretical: .affiliate-note--card asks for var(--cc-muted)
   and sits outside these sections, so at :root the section disclosure silently
   went from inherited ink to a lighter grey — the opposite of the contrast call
   made for .h2h-cta-note and .pn-note ("a disclosure that can't comfortably be
   read isn't one"). Add a mount here when a third surface renders the card. */
.pd-recos,
.pd-similar,
.h2h-others {
  --cc-surface: #fbf9f3;
  --cc-well: #f1ede3;
  --cc-track: #e3dfd3;
  --cc-ink: #1a1a18;
  --cc-ink-2: #3c3a33;
  --cc-ink-3: #4a4740;
  --cc-muted: #6e6b60;
  --cc-muted-2: #8a8778;
  --cc-muted-3: #9a9688;
  --cc-muted-4: #a8a496;
  --cc-teal: #14584f;
  --cc-teal-tint: rgba(20, 88, 79, 0.1);
  --cc-teal-hair: rgba(20, 88, 79, 0.38);
  --cc-brand: #5f6b2e;
  --cc-better: #5f6b2e;
  --cc-worse: #b0725a;
  --cc-tick: #57534a;
  --cc-hair: rgba(26, 26, 24, 0.1);
  --cc-hair-strong: rgba(26, 26, 24, 0.16);
  --cc-dash: rgba(26, 26, 24, 0.3);
  margin-top: var(--space-3);
}

/* ---------- section header + CTA ---------- */

/* The section heading + caption. Once carried a "Compare 2 paddles" CTA on the
   right (idle/ready pair); that navigation now lives in the floating compare
   dock, so the header is just the text block. */
.pd-cc-head-text {
  min-width: 0;
}

/* The caption sits right above the anchor legend, so it drops its own bottom
   gap here and lets the anchor line own the spacing. */
.pd-cc-head .pd-caption {
  margin-bottom: 0;
}

/* ---------- anchor legend ---------- */

.pd-cc-anchor {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 20px;
}

/* Not decoration — its dash pattern matches the ghost tick, keying the mark as
   "your paddle." */
.pd-cc-anchor-rule {
  flex: none;
  width: 16px;
  height: 0;
  border-top: 1.5px dashed #a9a496;
}

.pd-cc-anchor-text {
  font: 400 11.5px/1 var(--font-mono);
  color: var(--cc-muted-2);
}

/* ---------- card row ---------- */

/* A responsive grid: two roomy cards per row at the content width, collapsing to
   one on a phone. auto-fill + minmax(min(...)) makes the columns fill the width
   without overflowing a narrow viewport, and a lone odd card stays half-width
   rather than stretching across. The min column (400px) is what pins it to two
   up — three 400px cards don't fit either surface (detail ~1064, compare 940).
   The --picks modifier is now identical to the base and kept only as a hook. */
.pd-cc-row,
.pd-cc-row--picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 20px;
}

/* ---------- card ---------- */

.pd-cc-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--cc-surface);
  border: 1px solid var(--cc-hair);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 26, 24, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-cc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(26, 26, 24, 0.1);
}

.pd-cc-card.is-comparing {
  border-color: var(--cc-teal);
}

/* ---------- image well + badge ---------- */

.pd-cc-wellwrap {
  position: relative;
}

.pd-cc-well {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 224px;
  padding-bottom: 10px;
  background: var(--cc-well);
  text-decoration: none;
}

.pd-cc-img {
  max-width: 200px;
  max-height: 204px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(26, 26, 24, 0.16));
}

.pd-cc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 6px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}

.pd-cc-badge--match {
  color: var(--cc-teal);
  background: var(--cc-teal-tint);
}

.pd-cc-badge--pick {
  color: #fbf9f3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pd-cc-badge--top {
  background: var(--cc-teal);
}

.pd-cc-badge--value {
  background: var(--cc-brand);
}

/* ---------- card body ---------- */

/* flex:1 + actions margin-top:auto keeps every card's footer on one line across
   a row of uneven-length names. */
.pd-cc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 15px 15px 0;
}

.pd-cc-brand {
  margin-bottom: 7px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-brand);
}

/* min-height holds two lines at 19px/1.22 so the bars start on the same row
   across cards whether the name wraps or not. */
.pd-cc-name {
  margin: 0 0 10px;
  min-height: 46px;
  font: 600 19px/1.22 var(--font-headline);
  color: var(--cc-ink);
  text-wrap: pretty;
}

.pd-cc-name a {
  color: inherit;
  text-decoration: none;
}

.pd-cc-name a:hover {
  color: var(--cc-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Play-style + shape chips, right under the name. The name owns the gap above;
   this owns the gap down to the standout. Uses the shared .pn-tag so the play
   style is the same tint it is in the hero title block. */
.pd-cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.pd-cc-standout {
  margin: 0 0 13px;
  font: 400 13px/1.35 var(--font-body);
  color: var(--cc-ink-3);
  text-wrap: pretty;
}

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

.pd-cc-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-cc-bar {
  display: grid;
  grid-template-columns: 54px 1fr 46px;
  align-items: center;
  gap: 8px;
}

.pd-cc-bar-label {
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--cc-muted-3);
}

.pd-cc-track {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--cc-track);
}

.pd-cc-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
}

.pd-cc-bar--spin .pd-cc-fill {
  background: #1d6a60;
}
.pd-cc-bar--power .pd-cc-fill {
  background: #c0522f;
}
.pd-cc-bar--control .pd-cc-fill {
  background: #144a44;
}
.pd-cc-bar--forgive .pd-cc-fill {
  background: #5f6b2e;
}

/* Overhangs the track 3px top and bottom; the −1px pull centres the 2px mark on
   its value. Decorative — announced only through the bar's aria-label. */
.pd-cc-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--cc-tick);
  opacity: 0.5;
  transform: translateX(-1px);
}

.pd-cc-delta {
  font: 700 10.5px/1 var(--font-mono);
}

.pd-cc-delta.is-better {
  color: var(--cc-better);
}
.pd-cc-delta.is-worse {
  color: var(--cc-worse);
}
.pd-cc-delta.is-same,
.pd-cc-delta.is-na {
  color: var(--cc-muted-4);
}

/* A bar with no anchor to compare against — /paddles/browse/compare, where the
   page has TWO anchors so a delta has no single referent. The renderer emits
   this class instead of the page scoping the component from outside
   (.h2h-others .pd-cc-bar), so "this card has no delta column" is a fact the
   card carries rather than a rule its host remembers to apply. */
.pd-cc-bar--solo {
  grid-template-columns: 54px 1fr;
}

/* ---------- price ---------- */

.pd-cc-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}

.pd-cc-price-val {
  font: 700 19px/1 var(--font-mono);
  color: var(--cc-ink);
}

.pd-cc-price-delta {
  font: 400 11.5px/1 var(--font-mono);
}

.pd-cc-price-delta.is-better {
  color: var(--cc-better);
}
.pd-cc-price-delta.is-worse {
  color: var(--cc-worse);
}
.pd-cc-price-delta.is-same {
  color: var(--cc-muted-4);
}

/* ---------- actions ---------- */

.pd-cc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding: 14px 0 15px;
}

.pd-cc-compare,
.pd-cc-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 8px;
  border-radius: 9px;
  font: 500 12.5px/1.2 var(--font-display);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.pd-cc-compare {
  background: transparent;
  color: var(--cc-teal);
  border: 1px solid var(--cc-teal-hair);
}

.pd-cc-compare:hover {
  background: rgba(20, 88, 79, 0.08);
}

.pd-cc-compare.is-on {
  background: var(--cc-teal);
  color: #fbf9f3;
  border-color: var(--cc-teal);
}

/* The label is "Buy {Brand}", so a long brand (e.g. "Buy Honolulu Pickleball")
   used to overflow and get centre-clipped. It now wraps to a second line instead
   — the grid makes the Compare button match its height, so the pair stays even. */
.pd-cc-buy {
  background: transparent;
  color: var(--cc-ink-2);
  border: 1px solid var(--cc-hair-strong);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
}

.pd-cc-buy:hover {
  background: var(--cc-ink);
  color: #fbf9f3;
  border-color: var(--cc-ink);
}

/* ---------- per-section disclosure ---------- */

/* Commission disclosure — the .affiliate-note skin for a card section.
   Sentence and class come from assets/paddle-cta.js; only the look is here. */
.affiliate-note--card {
  margin: 14px 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cc-muted);
}

.affiliate-note--card a {
  color: var(--cc-teal);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

/* style.css's global block flattens transition-duration but cannot undo a
   transform that only exists in a :hover rule — the lift would land instantly
   instead of not at all. */
@media (prefers-reduced-motion: reduce) {
  .pd-cc-card:hover {
    transform: none;
  }
}