/* Air Market - v6 recommendations (W5).  Paired JS: assets/js/v6/recommend.js.
   Every rule scoped under :root[data-v6="on"] - see store-v6-core.css for the
   layer-flag contract. Tokens only, cursors via var(--cur-*), no hardcoded hex,
   no U+2014.

   This sheet owns the shared row primitives (.v6-rec-head, .v6-rec-cards,
   .v6-rec-cell, .v6-dismiss, .v6-rec-why) that BOTH the recommendation rows and
   me.js's personalization strips render into - the two feature sheets always
   load together under the flag, so the shared bones live in one place rather
   than drifting in two. store-v6-me.css adds only what is strip-specific. */

/* ------------------------------------------------------------ the row shell */

:root[data-v6="on"] .v6-recs { display: block; }

:root[data-v6="on"] .v6-rec,
:root[data-v6="on"] .v6-strip {
  margin: var(--space-32) 0 0;
}

:root[data-v6="on"] .v6-rec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0 0 var(--space-16);
  flex-wrap: wrap;
}

/* The heading IS the reason (§6.1), so it carries the section's weight. */
:root[data-v6="on"] .v6-rec-h {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--text-h4-size, 1.125rem);
  line-height: var(--text-h4-line, 1.3);
  font-weight: 650;
  color: var(--color-text-primary);
}

/* "Why you're seeing this" - a quiet text affordance, never competing with the
   heading. The anti-dark-pattern wall is one dialog, opened from here. */
:root[data-v6="on"] .v6-rec-why {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-main);
  font-size: var(--text-body-s-size, 0.8125rem);
  color: var(--color-text-link, var(--color-brand-600));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: var(--cur-pointer);
  white-space: nowrap;
}
:root[data-v6="on"] .v6-rec-why:hover { color: var(--color-brand-700); }

/* ---------------------------------------------------------------- the cards
   A one-line scroller on every width: a row is a row, and on a phone (the
   surface these are opened from) it scrolls horizontally rather than reflowing
   into a wall. */

:root[data-v6="on"] .v6-rec-cards {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-8);
  -webkit-overflow-scrolling: touch;
}

:root[data-v6="on"] .v6-rec-cell {
  position: relative;
  flex: 0 0 15rem;
  max-width: 15rem;
  scroll-snap-align: start;
}
:root[data-v6="on"] .v6-rec-cell .a-card { width: 100%; height: 100%; }

/* ------------------------------------------------------------- the dismissal
   A recommendation you cannot refuse is an advertisement (§7.2). Small, honest,
   and out of the way until the row is hovered or focused within. */

:root[data-v6="on"] .v6-dismiss {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 1;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  padding: 2px var(--space-8);
  font-family: var(--font-main);
  font-size: var(--text-caption-size, 0.75rem);
  line-height: 1.4;
  cursor: var(--cur-pointer);
  opacity: 0;
  transition: opacity var(--v3-ease, 160ms ease), background 160ms ease;
}
:root[data-v6="on"] .v6-rec-cell:hover .v6-dismiss,
:root[data-v6="on"] .v6-rec-cell:focus-within .v6-dismiss,
:root[data-v6="on"] .v6-dismiss:focus { opacity: 1; }
:root[data-v6="on"] .v6-dismiss:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
}
/* Touch has no hover: keep the control reachable there. */
@media (hover: none) {
  :root[data-v6="on"] .v6-dismiss { opacity: 1; }
}

/* ------------------------------------------------------------- the comparison
   "Others that do this job" is a compact side-by-side on quality, running cost
   and one internet line - not cards, because it exists for the "which of these
   two" moment (§6.2). Never a price: SHOW_PRICING stays false. */

:root[data-v6="on"] .v6-compare {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
:root[data-v6="on"] .v6-compare-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-main);
  font-size: var(--text-body-s-size, 0.8125rem);
}
:root[data-v6="on"] .v6-compare-row:first-child { border-top: 0; }
:root[data-v6="on"] .v6-compare-hd {
  background: var(--color-surface-sunken);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption-size, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:root[data-v6="on"] .v6-compare-row.is-anchor { background: var(--color-surface-sunken); }
:root[data-v6="on"] .v6-compare-name {
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}
:root[data-v6="on"] .v6-compare-name:hover { text-decoration: underline; }
:root[data-v6="on"] .v6-compare-tag {
  font-weight: 500;
  font-size: var(--text-caption-size, 0.75rem);
  color: var(--color-text-tertiary);
}
:root[data-v6="on"] .v6-compare-cell { color: var(--color-text-secondary); }
:root[data-v6="on"] .v6-compare-row .v6-dismiss {
  position: static;
  opacity: 1;
  justify-self: end;
  grid-column: 4;
}

/* The comparison reflows to a stacked card per row on a phone, each cell
   labelled by its column header via the data-k hook. */
@media (max-width: 640px) {
  :root[data-v6="on"] .v6-compare-hd { display: none; }
  :root[data-v6="on"] .v6-compare-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  :root[data-v6="on"] .v6-compare-cell[data-k]::before {
    content: attr(data-k) ": ";
    color: var(--color-text-tertiary);
    text-transform: capitalize;
  }
  :root[data-v6="on"] .v6-compare-row .v6-dismiss { grid-column: 1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-v6="on"] .v6-dismiss { transition: none; }
}