/* 11-picks.css — Picks page rebuild (transparency rework) and Taste Profile.
 *
 * Replaces the old recommendation card with an editorial pick card that
 * surfaces an LLM-written reason and a multi-signal trail. Per DESIGN.md:
 *   - No `border-left` >1px stripes (the old `.top-pick` violated this).
 *   - No translateY card lift on hover; amber glow + border shift only.
 *   - No gradient text or gradient bars.
 *   - Editorial pacing: generous spacing, serif for wine names, eyebrow labels.
 */

/* ─── Picks page header ─── */

.picks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding-top: var(--space-5);
}

.picks-header__title {
  flex: 1 1 auto;
  min-width: 0;
}

.picks-header__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--ivory-300);
}

.picks-header__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
  margin: 0 0 var(--space-2);
}

.picks-header__sub {
  color: var(--ivory-300);
  font-size: 0.95rem;
  margin: 0;
  max-width: 48ch;
  line-height: 1.55;
}

/* Inline education: "How these picks are chosen" — a <details> drawer
   that sits below the sub headline. Closed by default so the editorial
   header stays clean; opens to one paragraph explaining the model's
   inputs. Surfaced because the loading state can't explain itself and
   the page promises "a short reason on every bottle" without saying
   what shapes the reasons. */
.picks-header__how {
  margin-top: var(--space-3);
  max-width: 56ch;
}

.picks-header__how > summary {
  /* Suppress the native disclosure marker per the Safari hardening
     pattern. Two separate rules so an unknown ::marker doesn't
     invalidate the WebKit-specific rule. */
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory-300);
  border-bottom: 1px solid rgba(184, 173, 158, 0.25);
  padding-bottom: 2px;
  transition: color var(--duration-normal, 200ms) ease,
              border-color var(--duration-normal, 200ms) ease;
}

.picks-header__how > summary::-webkit-details-marker { display: none; }
.picks-header__how > summary::marker { display: none; content: ""; }

.picks-header__how > summary:hover,
.picks-header__how > summary:focus-visible {
  color: var(--amber-300);
  border-color: rgba(212, 168, 83, 0.4);
}

.picks-header__how[open] > summary {
  color: var(--ivory-100);
  border-color: transparent;
}

.picks-header__how > p {
  margin: var(--space-3) 0 0;
  color: var(--ivory-300);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 56ch;
}

.picks-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.picks-header__count-form {
  display: inline-block;
}

.picks-header__taste-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ivory-200);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.picks-header__taste-link:hover,
.picks-header__taste-link:focus-visible {
  color: var(--amber-400);
  border-bottom-color: var(--amber-400);
  text-decoration: none;
}

.picks-header__taste-link .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.picks-header__taste-link:hover .icon {
  transform: translateX(3px);
}

/* ─── Top Pick (rebuilt: no side stripe, no card-in-card) ─── */

.recommendations .top-pick {
  position: relative;
  background: var(--noir-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  margin-bottom: var(--space-7);
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric amber pool, far-right. Decorative; not a stripe. */
.recommendations .top-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 520px 360px at 95% 0%,
    rgba(212, 168, 83, 0.10),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.top-pick__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--amber-400);
}

.top-pick__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
  margin: 0 0 var(--space-1);
}

.top-pick__vintage {
  color: var(--ivory-400);
  font-weight: 400;
}

.top-pick__producer {
  font-family: var(--font-body);
  color: var(--ivory-300);
  margin: 0 0 var(--space-4);
  font-size: 1rem;
}

.top-pick__reason {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ivory-200);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
}

.top-pick__reason--pending {
  color: var(--ivory-400);
  font-style: italic;
}

.top-pick__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.top-pick__cta {
  /* Per the "One Voice" rule from DESIGN.md, amber attention items must
     stay rare. The top-pick eyebrow + match% + active sort pill already
     compete on this view; the CTA stays ivory at rest and warms to amber
     only on hover/focus. */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ivory-200);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-medium);
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.top-pick__cta:hover,
.top-pick__cta:focus-visible {
  color: var(--amber-400);
  border-bottom-color: var(--amber-400);
  text-decoration: none;
  outline: none;
}

.top-pick__cta .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.top-pick__cta:hover .icon {
  transform: translateX(3px);
}

.top-pick__match {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ivory-200);
  letter-spacing: -0.01em;
}

/* ─── Pick list (replaces Bootstrap row/col grid) ─── */

.pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.pick-list__item {
  margin: 0;
}

/* ─── Pick card (the central new component) ─── */

.pick-card {
  position: relative;
  background: var(--noir-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
}

.pick-card:hover,
.pick-card:focus-within {
  border-color: var(--border-accent-hover);
  box-shadow: var(--shadow-glow);
}

.pick-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  /* Both children need shrink room — the type badge can be a long word
     ("Sparkling"), the % match is fixed-ish; allow either to flex. */
  min-width: 0;
}

.pick-card__head > * {
  min-width: 0;
}

.pick-card__type {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.pick-card__match {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--amber-400);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.pick-card__match-unit {
  font-size: 0.7em;
  color: var(--ivory-400);
  margin-left: 1px;
}

.pick-card__title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pick-card__title-link:hover .pick-card__title,
.pick-card__title-link:focus-visible .pick-card__title {
  color: var(--amber-300);
}

.pick-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ivory-100);
  margin: 0 0 var(--space-1);
  transition: color var(--duration-normal) ease;
  /* Long German wine names, "Trockenbeerenauslese", multi-word producer
     houses — all need to wrap, not overflow the card. */
  overflow-wrap: anywhere;
  hyphens: auto;
  /* Cap at 3 lines so a 90-char single name doesn't dominate the card. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pick-card__meta {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ivory-300);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pick-card__sep {
  margin: 0 0.4em;
  color: var(--ivory-400);
}

.pick-card__producer {
  color: var(--ivory-200);
}

.pick-card__region {
  color: var(--ivory-400);
}

.pick-card__reason {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ivory-200);
  margin: 0 0 var(--space-3);
  max-width: 50ch;
  /* Cap at 4 lines on the collapsed card so an over-eager LLM
     explanation can't swallow the whole layout. The expanded view
     shows the full text. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pick-card__reason--pending {
  color: var(--ivory-400);
}

.pick-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.pick-card__expand {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ivory-300);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.pick-card__expand:hover,
.pick-card__expand:focus-visible {
  color: var(--amber-400);
  border-bottom-color: var(--amber-400);
  outline: none;
}

.pick-card__expand .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.pick-card__expand[aria-expanded="true"] .icon,
.pick-card__expand:hover .icon {
  transform: translateY(2px);
}

.pick-card__quick {
  display: flex;
  gap: var(--space-2);
}

.pick-card__quick-action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--ivory-400);
  cursor: pointer;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              background var(--duration-normal) ease;
}

.pick-card__quick-action:hover {
  color: var(--amber-400);
  border-color: var(--border-accent-hover);
  background: rgba(212, 168, 83, 0.06);
}

.pick-card__quick-action--dismiss:hover {
  color: var(--rouge-400);
  border-color: rgba(139, 41, 66, 0.35);
  background: rgba(139, 41, 66, 0.05);
}

.pick-card__quick-action .icon {
  width: 14px;
  height: 14px;
}

/* ─── Inline accordion (the "why" expansion) ─── */

.pick-expanded {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pick-expanded--collapsed {
  display: none;
}

.pick-expanded--error {
  display: block;
  background: rgba(139, 41, 66, 0.06);
  border-color: rgba(139, 41, 66, 0.20);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.pick-expanded__error-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ivory-300);
  margin: 0;
}

/* HTMX disables interactive elements by adding the `disabled` attribute
   when `hx-disabled-elt` is set. Visually communicate the inflight state. */
.pick-card__expand[disabled],
.pick-card__expand[aria-disabled="true"] {
  opacity: 0.5;
  cursor: progress;
}

.pick-expanded__reason {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ivory-200);
  margin: 0;
  max-width: 56ch;
}

.pick-expanded__based-on {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pick-expanded__based-on-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pick-expanded__based-on-link {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  color: var(--ivory-200);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.pick-expanded__based-on-link:hover {
  color: var(--amber-300);
  border-bottom-color: var(--amber-300);
  text-decoration: none;
}

.pick-expanded__based-on-name {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ivory-100);
}

.pick-expanded__based-on-producer {
  color: var(--ivory-400);
}

.pick-expanded__collapse {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ivory-300);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-2);
  transition: color var(--duration-normal) ease;
}

.pick-expanded__collapse:hover,
.pick-expanded__collapse:focus-visible {
  color: var(--amber-400);
  outline: none;
}

.pick-expanded__collapse .icon {
  width: 12px;
  height: 12px;
}

/* ─── Signal trail (reusable on cards, top pick, expanded view) ─── */

.signal-trail {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.signal-trail__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.signal-trail__label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-300);
  white-space: nowrap;
}

.signal-trail__bar {
  width: 36px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.signal-trail__fill {
  display: block;
  height: 100%;
  background: var(--amber-400);
  border-radius: 1px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-trail--wide .signal-trail__label {
  font-size: 0.65rem;
}

.signal-trail--wide .signal-trail__bar {
  width: 56px;
}

/* ─── Eyebrow ivory variant (base .eyebrow lives in 04-typography.css) ─── */

.eyebrow--ivory {
  color: var(--ivory-300);
}

/* ─── Taste Profile page ─── */

.taste {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  max-width: 980px;
}

.taste__hero {
  margin-bottom: var(--space-8);
}

.taste__eyebrow {
  margin-bottom: var(--space-3);
}

.taste__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
  margin: 0 0 var(--space-4);
}

.taste__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ivory-200);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}

.taste__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ivory-300);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.taste__back-link:hover {
  color: var(--amber-400);
  border-bottom-color: var(--amber-400);
  text-decoration: none;
}

.taste__back-link .icon {
  width: 12px;
  height: 12px;
}

.taste__section {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.taste__section:last-child {
  border-bottom: 0;
}

.taste__section-eyebrow {
  margin-bottom: var(--space-2);
}

.taste__section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
  margin: 0 0 var(--space-5);
}

.taste__empty {
  color: var(--ivory-400);
  font-style: italic;
  margin: 0;
}

.taste__tune-lede {
  color: var(--ivory-300);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}

.taste__tune-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.taste__tune-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--amber-400);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 168, 83, 0.4);
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.taste__tune-link:hover {
  color: var(--amber-300);
  border-bottom-color: var(--amber-300);
  text-decoration: none;
}

.taste__tune-link .icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.taste__tune-link:hover .icon {
  transform: translateX(3px);
}

/* ─── Affinity constellation (typographic, not a chart) ─── */

.taste-constellation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: baseline;
}

.taste-constellation__item {
  /* `--w` is set inline (0..1) by the template; sizes the link typographically. */
  --weight: clamp(0.45, var(--w, 0.5), 1);
  margin: 0;
}

.taste-constellation__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25em;
  text-decoration: none;
  color: var(--ivory-100);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              opacity var(--duration-normal) ease;
}

.taste-constellation__link:hover,
.taste-constellation__link:focus-visible {
  color: var(--amber-300);
  border-bottom-color: var(--amber-300);
  text-decoration: none;
  outline: none;
}

.taste-constellation__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Scale typographically by weight: range 1.1rem .. 2.6rem. */
  font-size: calc(1.1rem + (var(--weight) * 1.5rem));
  line-height: 1.05;
  /* Lower-affinity items fade slightly. */
  opacity: calc(0.7 + var(--weight) * 0.3);
  /* "Côtes-du-Rhône-Villages Plan-de-Dieu" needs to wrap, not break the row. */
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}

.taste-constellation__meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-400);
}

/* ─── Drinking window strip (Taste Profile) ─── */

.taste__lede--small {
  font-size: 1rem;
  font-style: normal;
  font-family: var(--font-body);
  color: var(--ivory-300);
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-5);
}

.window-strip {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.window-strip::-webkit-scrollbar {
  display: none;
}

.window-strip__year {
  --weight: clamp(0, var(--w, 0), 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 56px;
  text-align: center;
  font-family: var(--font-body);
}

.window-strip__dot {
  /* Size scales with the weight: 6px when count is zero, up to 28px at peak.
     The current year always reads as the focal point, even when its count
     happens to match a neighbor. */
  width: calc(6px + var(--weight) * 22px);
  height: calc(6px + var(--weight) * 22px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--duration-normal) ease;
}

.window-strip__year--now .window-strip__dot {
  background: var(--amber-400);
  box-shadow: 0 0 0 4px rgba(212, 168, 83, 0.10);
}

.window-strip__year--empty .window-strip__dot {
  background: rgba(255, 255, 255, 0.04);
}

.window-strip__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-400);
  font-feature-settings: "tnum" 1;
}

.window-strip__year--now .window-strip__label {
  color: var(--amber-400);
}

.window-strip__count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ivory-300);
  font-feature-settings: "tnum" 1;
}

.window-strip__year--empty .window-strip__count {
  /* Hide zeros — too much visual noise when most years are empty.
     Reserve the row height with visibility: hidden, not display: none. */
  visibility: hidden;
}

/* ─── Recent influence (Taste Profile) ─── */

.recent-influence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.recent-influence__item {
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.recent-influence__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.recent-influence__wine {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ivory-100);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
  overflow-wrap: anywhere;
}

.recent-influence__wine:hover {
  color: var(--amber-300);
  border-bottom-color: var(--amber-300);
  text-decoration: none;
}

.recent-influence__score {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--amber-400);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.recent-influence__score-unit {
  font-size: 0.7em;
  color: var(--ivory-400);
}

.recent-influence__producer {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ivory-400);
  margin: 0 0 var(--space-2);
}

.recent-influence__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ivory-200);
  margin: 0;
  max-width: 50ch;
}

/* ─── Responsive ─── */

@media (max-width: 720px) {
  .picks-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .picks-header__actions {
    width: 100%;
    justify-content: space-between;
  }

  .pick-list {
    grid-template-columns: 1fr;
  }

  .recommendations .top-pick {
    padding: var(--space-5);
  }

  .top-pick__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .taste-constellation__name {
    /* Tighten the maximum so phones don't get giant words. */
    font-size: calc(1rem + (var(--weight) * 1rem));
  }
}

/* ─── Stagger reveal on the pick list (respects reduced motion via 06-animations.css) ─── */

.pick-list.stagger > .pick-list__item {
  animation: cellar-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pick-list.stagger > .pick-list__item:nth-child(1) { animation-delay: 0.04s; }
.pick-list.stagger > .pick-list__item:nth-child(2) { animation-delay: 0.10s; }
.pick-list.stagger > .pick-list__item:nth-child(3) { animation-delay: 0.16s; }
.pick-list.stagger > .pick-list__item:nth-child(4) { animation-delay: 0.22s; }
.pick-list.stagger > .pick-list__item:nth-child(5) { animation-delay: 0.28s; }
.pick-list.stagger > .pick-list__item:nth-child(6) { animation-delay: 0.34s; }
.pick-list.stagger > .pick-list__item:nth-child(n+7) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .pick-list.stagger > .pick-list__item {
    animation: none;
  }
  .signal-trail__fill {
    transition: none;
  }
}

/* ─── Cellar-native HTMX indicator (replaces the bootstrap spinner-border) ─── */

.cellar-indicator {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--amber-400) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: cellar-indicator-slide 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--duration-fast, 200ms) ease-out;
}

/* HTMX adds .htmx-request on the indicator during in-flight requests. The
   .htmx-indicator default rule also handles opacity, but explicit is clearer
   and keeps this file self-contained. */
.cellar-indicator.htmx-request,
.htmx-request .cellar-indicator {
  opacity: 1;
}

@keyframes cellar-indicator-slide {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cellar-indicator {
    animation: none;
    background-position: 50% 0;
  }
}

/* ─── Loading skeleton — silhouettes that mirror the loaded pick grid ─── */

.recs-skeleton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}

/* Page-level loading bar at the top of #recommendations-results during
   lazy-load. Companion to .cellar-indicator (which lives in the
   header for count/sort changes). This one anchors to the results
   region so the user has a *spatial* sense of work in flight, not
   just the local indicator near the count selector. */
.recs-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(212, 168, 83, 0.06);
}

.recs-progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--amber-400) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  animation: recs-progress-slide 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes recs-progress-slide {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .recs-progress-bar::before {
    animation: none;
    background-position: 50% 0;
    opacity: 0.5;
  }
}

/* Determinate variant: a real-ish fill driven by JS toward 92% over the
   loading window, completing when the skeleton swaps out. Overrides the
   indeterminate slide. */
.recs-progress-bar--determinate::before {
  animation: none;
  inset: 0 auto 0 0;
  width: var(--recs-progress, 4%);
  background: var(--amber-400);
  background-size: auto;
  transition: width var(--recs-progress-duration, 8s) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .recs-progress-bar--determinate::before {
    transition: none;
  }
}

.recs-skeleton__cancel {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory-400);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.recs-skeleton__cancel:hover,
.recs-skeleton__cancel:focus-visible {
  color: var(--ivory-200);
}

.recs-cancelled {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.recs-cancelled__headline {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ivory-100);
  margin: var(--space-2) 0 var(--space-1);
}

.recs-cancelled__body {
  color: var(--ivory-300);
  margin: 0 0 var(--space-4);
}

.recs-skeleton__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.recs-skeleton__card {
  position: relative;
  background: var(--noir-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  /* Reserve roughly the same vertical real-estate as a loaded pick-card so
     the page doesn't reflow when content arrives. */
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}

.recs-skeleton__card--hero {
  min-height: 340px;
  grid-column: 1 / -1;
  align-items: flex-start;
  flex-direction: row;
  gap: var(--space-5);
}

/* The 2px kicker on top of every pick-card. The loaded view uses wine-type
   colors at 50% opacity — we don't know the type yet, so we soften to a
   generic ivory at 30%. */
.recs-skeleton__kicker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ivory-400);
  opacity: 0.3;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.recs-skeleton__hero-glass {
  flex: 0 0 auto;
  width: 40px;
  height: 60px;
  opacity: 0.6;
}

.recs-skeleton__hero-glass svg {
  width: 100%;
  height: 100%;
}

.recs-skeleton__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  width: 100%;
}

.recs-skeleton__row {
  display: block;
  background: var(--noir-800);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.recs-skeleton__row::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  animation: recs-skeleton-shimmer 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.recs-skeleton__row--label {
  width: 38%;
  height: 10px;
}

.recs-skeleton__row--title {
  width: 78%;
  height: 18px;
}

.recs-skeleton__row--body {
  width: 92%;
  height: 12px;
}

/* Stagger the shimmer across siblings + cards so it doesn't look like
   every card is pulsing in lockstep. */
.recs-skeleton__card:nth-child(2) .recs-skeleton__row::after { animation-delay: 0.06s; }
.recs-skeleton__card:nth-child(3) .recs-skeleton__row::after { animation-delay: 0.12s; }
.recs-skeleton__card:nth-child(4) .recs-skeleton__row::after { animation-delay: 0.18s; }
.recs-skeleton__card:nth-child(5) .recs-skeleton__row::after { animation-delay: 0.24s; }
.recs-skeleton__card:nth-child(6) .recs-skeleton__row::after { animation-delay: 0.30s; }
.recs-skeleton__card:nth-child(7) .recs-skeleton__row::after { animation-delay: 0.36s; }
.recs-skeleton__card:nth-child(n+8) .recs-skeleton__row::after { animation-delay: 0.42s; }
.recs-skeleton__row:nth-child(2)::after { animation-delay: 0.10s; }
.recs-skeleton__row:nth-child(3)::after { animation-delay: 0.20s; }

@keyframes recs-skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.recs-skeleton__copy {
  /* .cellar-pulse owns the animation; this gives the copy a token-driven
     color so we can drop the legacy `text-muted` class. */
  color: var(--ivory-300);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .recs-skeleton__row::after {
    animation: none;
  }
}

@media (max-width: 640px) {
  .recs-skeleton__list {
    grid-template-columns: 1fr;
  }
  .recs-skeleton__card--hero {
    flex-direction: column;
  }
}

/* ─── Editorial error state for the recs grid ─── */

.recs-error {
  background: var(--noir-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  max-width: 480px;
  margin: var(--space-5) auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.recs-error__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ivory-100);
  margin: 0;
  letter-spacing: -0.01em;
}

.recs-error__body {
  color: var(--ivory-300);
  font-size: 0.95rem;
  margin: 0;
  max-width: 36ch;
}

.recs-error__retry {
  margin-top: var(--space-2);
}

/* ─── Keyboard shortcuts overlay (H-7) ─── */
.recs-shortcuts {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(10, 10, 10, 0.7);
}

.recs-shortcuts[hidden] {
  display: none;
}

.recs-shortcuts__panel {
  background: var(--noir-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 22rem;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.recs-shortcuts__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ivory-100);
  margin: 0 0 var(--space-4);
}

.recs-shortcuts__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 var(--space-5);
}

.recs-shortcuts__list dt {
  margin: 0;
  white-space: nowrap;
}

.recs-shortcuts__list dd {
  margin: 0;
  color: var(--ivory-300);
  font-size: 0.9rem;
}

.recs-shortcuts__list kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 4px);
  background: var(--noir-800);
  color: var(--ivory-100);
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  text-align: center;
}