/* ============================================================
   Wunderlust — the pill primitive
   Standardised on the ai-help pattern: one shape, one set of
   metrics, one pressed state. Everything pill-shaped in this app
   composes from .p — the hero eyebrow, the category rail, the
   filter chips, the card badges and the footer pill. Before this
   file they were four near-identical rules drifting apart.

   Geometry is fixed here and never overridden downstream:
     radius 980px · icon-then-label · 5px gap · inline-flex
   Only fill, size and weight vary, via the modifier classes.
   ============================================================ */

.p {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font: 500 var(--fs-sm)/1.2 var(--font-ui);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}

/* Icons scale with the pill rather than sitting at a fixed 24px,
   which is what made the old chips look top-heavy. */
.p .ms { font-size: 16px; }

.p:hover { color: var(--text); border-color: var(--text-3); }

/* --- Pressed / selected ----------------------------------- */
/* ai-help fills the pill with the accent and drops the border. Here
   the fill is --accent-press, not --accent-fill: the pill's label is
   small text and needs 4.5:1, where a button background only needed
   3:1. Measured in tools/pick_pressed_fill.py. */
.p[aria-pressed="true"] {
  background: var(--accent-press);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-press) 34%, transparent);
}
.p[aria-pressed="true"]:hover { color: var(--on-accent); }

/* --- Size modifiers --------------------------------------- */
.p-sm { padding: 3px 9px; gap: 4px; font-size: var(--fs-xs); }
.p-sm .ms { font-size: 14px; }

/* The rail pill. Its height is driven by the colour dot, not the
   label, so the dot is what had to shrink to make it sleek — trimming
   padding alone would have left a tall pill with cramped text. */
.p-lg { padding: 5px 14px 5px 6px; gap: 8px; }

/* --- Static badge: reads as a label, not a control -------- */
.p-static { cursor: default; }
.p-static:hover { color: var(--text-2); border-color: var(--line); }

/* --- Caps label: eyebrow, sponsor tag, footer pill -------- */
.p-caps {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Translucent: sits over the hero illustration --------- */
.p-glass {
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  border-color: color-mix(in srgb, var(--meadow-deep) 22%, transparent);
  color: var(--meadow-deep);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: default;
}
:root[data-mode="dark"] .p-glass {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: color-mix(in srgb, #9FD8A8 26%, transparent);
  color: #9FD8A8;
}
.p-glass .ms { font-size: 15px; }

/* --- Accent fill: the one pill that is always filled ------ */
/* Both gradient stops must clear AA on their own — a gradient is only
   as accessible as its lightest point under the text. Measured in
   tools/pick_gradient_stops.py: press 4.57:1, ink 5.60:1. The obvious
   mid -> blossom ramp bottoms out at 2.64:1 and was rejected. */
.p-accent {
  background: linear-gradient(135deg, var(--accent-press), var(--accent));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent-press) 60%, transparent);
}
.p-accent:hover {
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent-press) 60%, transparent);
}

/* --- Free-price tint -------------------------------------- */
.p-free {
  background: color-mix(in srgb, var(--meadow) 20%, transparent);
  border-color: color-mix(in srgb, var(--meadow-deep) 20%, transparent);
  color: var(--meadow-deep);
}
.p-free:hover { color: var(--meadow-deep); }
:root[data-mode="dark"] .p-free { color: #A6DCAF; }