/* ================================================================
   Solo Switch — Switch Flow
   "Switch for me" guided wizard
   Week 4 will populate fully. Foundation styles here.
   ================================================================ */

/* ── Deal Modal Header ──────────────────────────────────────── */
.deal-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deal-tiles-list {
  display: flex;
  flex-direction: column;
}

/* ── Deal Comparison Card ───────────────────────────────────── */
.deal-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
}

.deal-side {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}

.deal-side--current {
  opacity: 0.7;
}

.deal-side--new {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.deal-arrow {
  font-size: 20px;
  color: var(--text-muted);
}

.deal-provider {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.deal-amount {
  font-size: var(--text-xl);
  font-weight: 700;
}

.deal-plan {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Deal Tiles ─────────────────────────────────────────────── */
.deal-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.deal-tile + .deal-tile { margin-top: var(--space-3); }

.deal-tile:hover {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.deal-tile.selected {
  border-color: var(--primary);
}

/* Recommended deal — prominent green border + glow */
.deal-tile--recommended {
  border-color: rgba(74, 157, 110, 0.4);
  box-shadow: var(--glow-optimised);
}

.deal-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.deal-tile-provider { font-size: var(--text-base); font-weight: 600; }
.deal-tile-plan     { font-size: var(--text-sm); color: var(--text-dim); }

.deal-tile-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--green-soft);
  color: var(--green);
  line-height: 1.4;
}
.deal-tile-source-badge svg { width: 12px; height: 12px; }

.deal-tile-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-best-price {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge-best-value {
  background: var(--purple-soft);
  color: var(--purple);
}

.badge-recommended {
  background: var(--green-soft);
  color: var(--green);
}

/* Pricing row */
.deal-tile-pricing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.deal-tile-price {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.deal-tile-period {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.deal-tile-saving-label {
  font-size: var(--text-sm);
}

.deal-tile-value-extra {
  font-size: var(--text-sm);
  color: var(--purple);
}

/* Promo line */
.deal-tile-promo {
  font-size: var(--text-xs);
  color: var(--orange);
  margin-bottom: var(--space-2);
}

.deal-tile-features {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-relaxed);
}

.deal-tile-value-note {
  font-size: var(--text-xs);
  color: var(--purple);
  margin-top: var(--space-2);
}

.deal-tile-coverage-note {
  font-size: var(--text-xs);
  color: var(--green);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.deal-tile-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.deal-tile-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.deal-tile-actions .btn-primary { flex: 1; }
.deal-tile-actions .btn-secondary {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.deal-tile-saving {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--primary);
  margin-top: var(--space-3);
}

/* Recommended hero summary */
.deal-recommend-summary {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.deal-recommend-summary strong {
  color: var(--green);
  font-weight: 600;
}

/* "See other options" toggle */
.deal-alt-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-top: var(--space-3);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.deal-alt-toggle:hover {
  color: var(--text);
  border-color: var(--border-light);
}

.deal-alt-toggle .chevron {
  transition: transform var(--duration) var(--ease);
}

.deal-alt-toggle.expanded .chevron {
  transform: rotate(180deg);
}

.deal-alts {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--duration-slow) var(--ease),
              opacity var(--duration) var(--ease),
              margin var(--duration) var(--ease);
  margin-top: 0;
}

.deal-alts.expanded {
  max-height: 2000px;
  opacity: 1;
  margin-top: var(--space-3);
}

/* Fade-in for deal tiles */
.deal-tile--animate {
  opacity: 0;
  transform: translateY(12px);
}

.deal-tile--animate.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

/* ── Review Card ────────────────────────────────────────────── */
.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.review-card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.review-card strong {
  color: var(--text);
}

.review-detail {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.review-detail:last-child {
  border-bottom: none;
}

.review-detail-label {
  color: var(--text-secondary);
}

.review-detail-value {
  font-weight: 600;
}

/* ── Status Tracker ─────────────────────────────────────────── */
.status-tracker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.status-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.status-step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  border: 2px solid var(--border);
  color: var(--text-muted);
}

.status-step.completed .status-step-indicator {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.status-step.active .status-step-indicator {
  border-color: var(--amber);
  color: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
}

.status-step-label {
  font-size: var(--text-sm);
  font-weight: 500;
  padding-top: 2px;
}

.status-step.completed .status-step-label {
  color: var(--text-secondary);
}

.status-step.active .status-step-label {
  color: var(--text);
  font-weight: 600;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ── Review Payment Section ────────────────────────────────── */
.review-payment-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.review-payment-header {
  margin-bottom: 8px;
}

.review-payment-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.review-payment-why {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.review-payment-why strong {
  color: var(--text);
}

.review-payment-field {
  margin-bottom: 12px;
}

.review-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.review-field-input {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
  box-sizing: border-box;
}

.review-field-input:focus {
  outline: none;
  border-color: var(--accent);
}

.review-field-input::placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.review-field-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Side-by-side bank fields (AU: BSB + Account) */
.review-bank-row--split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12px;
}

.review-bank-row--split .review-payment-field {
  margin-bottom: 0;
}

/* Inline scan shortcut link */
.review-scan-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  margin-top: 6px;
  transition: opacity var(--duration-fast) ease;
}

.review-scan-link:hover { opacity: 0.8; }
.review-scan-link { transition: opacity 300ms ease; }

.review-scan-link .sf-icon-sm svg {
  width: 14px;
  height: 14px;
}

/* Skip payment link */
.review-skip-link {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: underline;
  margin-top: 16px;
  line-height: 1.5;
}

.review-skip-link:hover { color: var(--text-dim); }

/* Green highlight animation for enriched fields */
.review-card .review-field-enriched,
.review-detail.review-field-enriched {
  background: var(--green-soft, rgba(52, 211, 153, 0.15));
  transition: background 600ms ease;
}

/* ── Setup Sections ────────────────────────────────────────── */
.setup-section {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.setup-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.setup-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Inline Consent Card ──────────────────────────────────── */
.setup-consent-card {
  margin-top: 16px;
  padding: 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(59, 124, 138, 0.18);
  border-radius: var(--radius-lg, 16px);
}

.setup-consent-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}

.setup-consent-card-header .sf-icon-sm svg {
  color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.setup-consent-card-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.setup-consent-point {
  font-size: var(--text-xs);
  color: var(--text-dim);
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}

.setup-consent-point::before {
  content: '✓';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
}

.setup-consent-card-control {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Deal Confidence Nudges ────────────────────────────────── */
.deal-scan-nudge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  margin-top: 4px;
  margin-bottom: 12px;
}

.deal-scan-nudge:hover { opacity: 0.8; }

.deal-scan-nudge .sf-icon-sm svg {
  width: 14px;
  height: 14px;
}

.deal-nudge-card {
  text-align: center;
  padding: 24px 16px;
}

.deal-nudge-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}

.deal-nudge-icon .sf-icon svg {
  width: 24px;
  height: 24px;
}

/* ── Modal Step Transitions ────────────────────────────────── */
.modal-slide-forward {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.modal-slide-back {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 120ms ease, transform 120ms ease;
}

/* ── Consent Card (styles in onboarding.css — shared) ──────── */
/* No duplicate styles here. Consent card is defined in onboarding.css
   and shared between onboarding flow and switch flow consent modal. */

/* ── Quick Checks (Value Map — Layer 1) ──────────────────── */
.quick-checks {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
}

.quick-checks-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.quick-check-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  transition: max-height var(--duration, 300ms) var(--ease, ease),
              opacity var(--duration, 300ms) var(--ease, ease),
              padding var(--duration, 300ms) var(--ease, ease);
  overflow: hidden;
}

.quick-check-item:last-child { border-bottom: none; }

.quick-check-item.resolved {
  max-height: 0;
  opacity: 0;
  padding: 0;
  border: none;
}

.quick-check-resolved-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--green);
}

.quick-check-question {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.quick-check-actions {
  display: flex;
  gap: var(--space-2);
}

.quick-check-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg, #fff);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 150ms ease;
  min-height: 32px;
}

.quick-check-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.quick-check-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.quick-check-chip.selected-warning {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange);
}

.quick-check-tradeoff-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--orange-soft);
  border-radius: var(--radius, 8px);
  font-size: var(--text-xs);
  color: var(--orange);
  line-height: 1.4;
}

/* ── Deal compatibility banner (driven by Quick Check answers) ── */
.deal-compat {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius, 8px);
  font-size: var(--text-xs);
  line-height: 1.45;
  border: 1px solid transparent;
}
.deal-compat--compatible {
  background: var(--green-soft);
  border-color: rgba(34, 197, 94, 0.25);
}
.deal-compat--tradeoff {
  background: var(--orange-soft);
  border-color: rgba(234, 88, 12, 0.25);
}
.deal-compat--incompatible {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}
.deal-compat--unknown {
  background: var(--bg-elev, #f5f5f5);
  border-color: var(--border);
}
.compat-headline {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.compat-headline--ok       { color: var(--green); }
.compat-headline--tradeoff { color: var(--orange); }
.compat-headline--fail     { color: var(--red); }
.compat-headline--unknown  { color: var(--text-muted); }
.compat-line {
  margin-top: 2px;
  font-size: var(--text-xs);
}

/* Tile-level dimming for incompatible deals — keeps them visible
   so the user can see the tradeoff but de-emphasises them visually. */
.deal-tile--compat-incompatible {
  opacity: 0.78;
}
.deal-tile--compat-incompatible .deal-tile-saving-label {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* ── Value Checklist (Layer 2 — expandable on deal tile) ──── */
.value-checklist {
  margin-top: var(--space-3);
}

.value-checklist-summary {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 150ms ease;
}

.value-checklist-summary:hover { color: var(--text-dim); }
.value-checklist-summary::-webkit-details-marker { display: none; }

.value-checklist-summary::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast, 150ms) ease;
  flex-shrink: 0;
}

details.value-checklist[open] .value-checklist-summary::before {
  transform: rotate(45deg);
}

.value-checklist-items {
  padding: var(--space-2) 0 var(--space-1);
}

.value-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 3px 0;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.value-check-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.value-check-icon .sf-icon-xs svg {
  width: 12px;
  height: 12px;
}

.value-check-label {
  font-weight: 500;
  color: var(--text-dim);
}

.value-check-detail {
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  max-width: 55%;
}

.value-checklist-all-clear {
  color: var(--green);
}

/* ── Review Changes (in review/confirm card) ─────────────── */
.review-changes {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.review-changes-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.review-change {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.4;
}

.review-change--tradeoff { color: var(--orange); }
.review-change--clear    { color: var(--green); }
.review-change-icon      { flex-shrink: 0; margin-top: 2px; }

.review-change-icon .sf-icon-xs svg {
  width: 12px;
  height: 12px;
}

/* Blocker warning in review card */
.review-warning {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-3);
  background: var(--orange-soft);
  border: 1px solid rgba(201, 138, 61, 0.18);
  border-radius: var(--radius, 8px);
}

.review-warning-icon {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.review-warning-icon .sf-icon-sm svg {
  width: 16px;
  height: 16px;
}

.review-warning-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.review-warning-detail {
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── Rate-update tile (same plan, newer rates) ───────────────── */
.deal-tile-source-badge.badge-rate-update {
  background: var(--orange-soft);
  color: var(--orange);
}

.deal-tile--rate-update {
  border-color: rgba(217, 164, 65, 0.4);
}

.deal-tile-rate-comparison {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-soft, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.deal-tile-rate-comparison .rate-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  align-items: baseline;
  padding: 4px 0;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.deal-tile-rate-comparison .rate-row:last-child { border-bottom: none; }

.deal-tile-rate-comparison .rate-row--head {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.deal-tile-rate-comparison .rate-label {
  color: var(--text-dim);
  font-weight: 500;
}

.deal-tile-rate-comparison .rate-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ── Demand-tariff badge (catalog parity) ──────────────────────
   Plans whose tariff classification is "demand" are rare but visually
   confusable with cheap flat-rate plans. The badge pairs with the soft
   sort de-rank in find-deals-energy so users see the warning even when
   the plan still surfaces near the top. */
.deal-tile-source-badge.badge-demand {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ── Cost breakdown reveal ─────────────────────────────────────
   Per-bill attribution mirroring catalog-browse output. Compact, opt-in
   via <details>; left border in sage references the catalog modal's
   source-panel pattern. */
.deal-tile-breakdown {
  margin-top: var(--space-2);
  background: var(--surface-2);
  border-left: 3px solid var(--good);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--text-xs);
}
.deal-tile-breakdown summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}
.deal-tile-breakdown summary::-webkit-details-marker { display: none; }
.deal-tile-breakdown summary::after {
  content: '⌄';
  color: var(--text-muted);
  transition: transform 150ms var(--ease);
}
.deal-tile-breakdown[open] summary::after { transform: rotate(180deg); }
.deal-tile-breakdown-period {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11px;
}
.deal-tile-breakdown-rows {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}
.deal-tile-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.deal-tile-breakdown-row--credit { color: var(--good-ink); }
.deal-tile-breakdown-row--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-weight: 600;
}

/* ── Filter chips strip (catalog parity) ────────────────────────
   Renders only when there are >=4 deals. Inactive chips read like a
   secondary control; active chips invert (ink-on-paper) so the toggle
   state is unmistakable. AND logic — a tile must match all active
   filters to remain visible. */
.deal-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-2);
}
.deal-filter-chip {
  appearance: none;
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 100ms var(--ease), color 100ms var(--ease), border-color 100ms var(--ease);
}
.deal-filter-chip:hover { border-color: var(--ink); }
.deal-filter-chip.active {
  background: var(--ink);
  color: var(--text-inverse);
  border-color: var(--ink);
}

.deal-filter-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.deal-filter-empty[hidden] { display: none; }

.deal-tile-rate-comparison .rate-cell--head {
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.deal-tile-rate-comparison .rate-cell--current {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}

.deal-tile-rate-comparison .rate-cell--cheaper {
  color: var(--green);
  font-weight: 600;
}

.deal-tile-rate-comparison .rate-cell--dearer {
  color: var(--red);
  font-weight: 600;
}

.deal-tile-rate-comparison .rate-unit {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
  font-size: 9px;
}

.rate-net-effect {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}

.deal-tile-payment-terms {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Usage-envelope: range caveats, risky-tile demote, best-plan banner ── */
/* These appear when the bill discloses an atypical recent month. The tile
   and grid show honest savings ranges (vs point estimates) and demote any
   plan that would cost more than the user's current bill at typical usage. */

.deal-tile-saving-caveat {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
  font-style: italic;
}

.deal-tile-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--orange);
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-weight: 500;
}

.deal-tile-risk-chip svg { width: 12px; height: 12px; }

.deal-tile--risky {
  opacity: 0.75;
  background: var(--bg-soft, var(--bg));
}

.deal-tile--risky .deal-tile-provider,
.deal-tile--risky .deal-tile-plan,
.deal-tile--risky .deal-tile-price {
  color: var(--text-muted);
}

.deal-grid-best-plan-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-2) 0 var(--space-3) 0;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

.deal-grid-best-plan-banner svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #2563eb;
  margin-top: 1px;
}