/* The two-ship compare picker (web/templates/partials/compare-picker.php). Self-contained:
   works on a light or a dark (.section--dark, .cmp-hero) background. */

.cmp-picker {
  display: grid; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius-l);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-s);
  color: var(--ink);
}
.cmp-picker__title { font-size: var(--step-1); color: var(--ink); }
.cmp-picker__row { display: grid; gap: var(--s-2); align-items: end; }
.cmp-picker__field { display: grid; gap: var(--s-1); min-width: 0; }
.cmp-picker__field label { font-size: var(--step--2); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cmp-picker .input { font-size: max(16px, var(--step-0)); }   /* 16px stops iOS zooming on focus */
.cmp-picker__field:first-child .input { border-left: 4px solid var(--cyan); }
.cmp-picker__field:nth-child(3) .input { border-left: 4px solid var(--amber); }
.cmp-picker .input[aria-invalid="true"] { border-color: var(--amber-ink); box-shadow: 0 0 0 3px rgba(168, 74, 12, 0.18); }
.cmp-picker__vs {
  justify-self: center; font: italic 700 var(--step--1)/1 var(--font-display); color: var(--muted);
}
.cmp-picker__go { margin-top: var(--s-2); }
.cmp-picker[aria-busy="true"] .cmp-picker__go { opacity: 0.7; pointer-events: none; }

@media (min-width: 48rem) {
  .cmp-picker { padding: var(--s-5); }
  .cmp-picker__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--s-3); }
  .cmp-picker__vs { padding-bottom: 0.85em; }
  .cmp-picker__go { margin-top: 0; padding-block: 0.8em; }
}