/* Shared paddle-surface primitives — the small things more than one of the
   /paddles/browse surfaces renders, and none of them owns.

   Two components, both split out of paddle-finder.css:
     .pn-tag*   the play-style / spec chip — catalog cards, detail title
                blocks and the head-to-head all render it
     .pd-back   the "back to all paddles" link — detail pages and the
                head-to-head (which is why it is not in paddle-detail.css)

   Deliberately its own file rather than a copy in each sheet: a chip redefined
   three times is a chip that drifts the first time someone changes a tint,
   which is exactly how the .legal-* shell went wrong (see DESIGN.md). Loaded by
   /paddles/browse, the 514 detail pages, /paddles/browse/compare and — for the
   chip alone — the quiz at /paddles, whose pick cards wear .pn-tag--quiz.

   Every colour is a style.css token — no page-local palette here. */

/* ==========================================================================
   Shared primitives — the reason this is one file
   ========================================================================== */

/* Play-style / spec chip. Base is the OUTLINED variant, because that is what
   the detail title block needs for its USAP and year chips; the tinted
   play-style variants below fill it in. Both live on .pn-tag so a chip looks
   identical whether it is on a catalog card, a detail title, or a
   head-to-head summary card. */
.pn-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.6em;
  /* --rule-16, not --line-strong: a chip is a label, not a form control, and
     the 0.22 step is reserved for boundaries you can click into. */
  border: 1px solid var(--rule-16);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The quiz's variant of the chip: mono type on a tinted ground, a shade smaller.
   Defined HERE, and deliberately BEFORE the play-style tints below, because
   both set `background` — at equal specificity the later rule wins, so a
   .pn-tag--quiz.pn-tag--power chip would lose its clay if this sat after them.
   It was a whole second class family (.pq-tag*) until the four play-style tints
   turned out to be byte-identical copies of the four below. */
.pn-tag--quiz {
  /* gap and line-height are RESET, not re-set: the quiz's chip predates the
     shared one and simply inherited the page's leading, which is what keeps it
     23.1px tall rather than 22.2px. Copying the ambient number here instead
     would be a magic constant that silently detaches the first time the body
     leading moves. */
  gap: normal;
  line-height: inherit;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: normal;
  background: rgba(var(--ink-rgb), 0.04);
}

/* Tint background + -deep text is the sitewide badge pairing (.level-badge,
   .badge-most-loved). The border goes transparent rather than being removed so
   a tinted and an outlined chip in the same row stay the same height. */
.pn-tag--power {
  background: var(--poppy-tint);
  border-color: transparent;
  color: var(--poppy-deep);
}

.pn-tag--control {
  background: var(--bay-tint);
  border-color: transparent;
  color: var(--bay-deep);
}

.pn-tag--allcourt {
  background: var(--kitchen-tint);
  border-color: transparent;
  color: var(--optic-text);
}

/* "Unrated" is the absence of a play style, not a fourth play style, so it
   gets ink at low alpha rather than a fourth accent — nine paddles should not
   introduce a colour to the palette. */
.pn-tag--unrated {
  background: rgba(var(--ink-rgb), 0.07);
  border-color: transparent;
  color: var(--ink-soft);
}

/* The way out of a paddle page, back to the catalog. Two mounts: the 514 detail
   pages (top of .pd-wrap) and /paddles/browse/compare (top of .ph-wrap). Lives
   here rather than in paddle-detail.css because the compare page does not load
   that sheet — it renders exactly one .pd-* class, this one. */
.pd-back {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bay);
  text-decoration: none;
}

.pd-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Coupon chip — the discount code beside a coupon-attributed buy link
   ========================================================================== */

/* Printed by couponChip() in paddle-cta.js, one per buy CTA whose brand pays
   by code rather than by tracked link (see the `coupon` key in
   assets/affiliate-map.json). It lives in this shared sheet, not in a
   per-surface one, for the reason at the top of this file: the same chip
   appears on catalog cards, detail heroes, the head-to-head and the quiz, and
   a chip redefined four times is a chip that drifts.

   For a coupon-only brand the code IS the revenue mechanism — an untagged link
   plus an uncopied code earns nothing — so the whole thing is built as a
   control you can obviously press. The first version leaned on a small-caps
   "COPY" next to the code and readers did not see it as a button: monospace
   text with a label beside it scans as two pieces of information, not as an
   affordance. What fixed it was giving the action its own zone — a hairline
   divider, an icon, a real border and a hover state. */
.pn-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pn-coupon-save {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: var(--bay-tint);
  color: var(--bay-deep);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The lead label when a brand's discount AMOUNT isn't confirmed yet. Same slot
   as the saving, but neutral rather than the teal savings tint — a badge that
   looks like a number without being one invites the reader to supply their own.
   It names the control; it doesn't advertise a figure. */
.pn-coupon-save--plain {
  background: transparent;
  padding-left: 0;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

.pn-coupon-btn {
  display: inline-flex;
  align-items: stretch;
  /* No gap: the divider on .pn-coupon-action is what separates the two zones,
     and padding inside each zone is what keeps them off it. */
  gap: 0;
  /* A touch target on a phone, and tall enough that the two zones read as one
     bar rather than as text with a suffix. */
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.75rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.pn-coupon-btn:hover {
  border-color: var(--bay);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.06);
}

.pn-coupon-btn:hover .pn-coupon-action {
  background: var(--bay);
  color: var(--paper);
}

.pn-coupon-btn:focus-visible {
  outline: 2px solid var(--bay);
  outline-offset: 2px;
}

.pn-coupon-btn:active {
  transform: translateY(1px);
}

.pn-coupon-code {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6em;
  /* Dashed on the CODE alone, not the whole control: it is the one skeuomorph
     that reads as "coupon" before any word is processed, and confining it here
     leaves the action zone looking like the button it is. */
  border-right: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* The codes are single unbroken tokens ("pickleballbayarea"), which overflow
     a 254px catalog card unless they are allowed to break mid-word. */
  overflow-wrap: anywhere;
  text-align: left;
}

.pn-coupon-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: none;
  padding: 0 0.6em;
  background: var(--bay-tint);
  color: var(--bay-deep);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.pn-coupon-icon {
  flex: none;
}

/* One icon at a time. Swapped in CSS off .is-copied so the JS handler only has
   the status text to keep in sync. */
.pn-coupon-icon--done,
.pn-coupon-btn.is-copied .pn-coupon-icon--copy {
  display: none;
}

.pn-coupon-btn.is-copied .pn-coupon-icon--done {
  display: inline;
}

.pn-coupon-btn.is-copied {
  border-color: var(--bay);
}

.pn-coupon-btn.is-copied .pn-coupon-action {
  background: var(--bay);
  color: var(--paper);
}

/* Per-surface sizing. Only the two extremes need a modifier — the catalog card
   at 254px, where the chip has to stack, and the detail hero, where it sits
   under a full-width primary button and can afford to match it. */
.pn-coupon--grid {
  gap: 0.35rem;
  margin-top: 0.375rem;
}

.pn-coupon--grid .pn-coupon-btn {
  width: 100%;
}

.pn-coupon--grid .pn-coupon-code {
  flex: 1 1 auto;
  padding: 0.35em 0.6em;
}

.pn-coupon--hero {
  margin-top: 0.75rem;
}

.pn-coupon--hero .pn-coupon-save,
.pn-coupon--hero .pn-coupon-code {
  font-size: 0.8125rem;
}

.pn-coupon--hero .pn-coupon-btn {
  min-height: 38px;
}