/* ================================================================
   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);
}

/* Faster-tier upgrade that costs no more over year 1 than the current bill. */
.badge-upgrade {
  background: #DCEEF5;
  color: #1E6E8C;
}
html[data-theme="dark"] .badge-upgrade {
  background: rgba(30, 110, 140, 0.25);
  color: #8FCBE0;
}

/* 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);
}
/* Post-promo price JUMP - the ongoing price lands above the user's current
   bill, so this line carries a real warning: icon + bold figure, one line. */
.deal-tile-promo--jump {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.deal-tile-promo--jump .sf-icon { flex: 0 0 auto; margin-top: 2px; }
.deal-tile-promo--jump strong { font-weight: 700; }
/* Intro price stripped: the provider only gives it to new customers
   (retention-policy-au), so the card shows the ongoing price and says why. */
.deal-tile-promo--newcust {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-dim);
  line-height: 1.45;
}
.deal-tile-promo--newcust .sf-icon { flex: 0 0 auto; margin-top: 2px; color: var(--text-muted); }

/* Same-provider plan move - a short tag: the recommendation stays with the
   user's current provider (July 2026). */
.deal-tile-provider-move {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -4px 0 var(--space-2);
  padding: 3px 9px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 999px;
  line-height: 1.3;
}
.deal-tile-provider-move svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Icon-led plan-fact checklist (deal-card redesign, July 2026): one short
   fact per row in the details drawer, replacing the dot-separated blob. */
.deal-feature-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.deal-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.4;
}
.deal-feature-list li > .sf-icon { flex: 0 0 auto; margin-top: 2px; }
.deal-feature-row--check > .sf-icon { color: var(--green); }
.deal-feature-row--info > .sf-icon { color: var(--text-muted); }
.deal-feature-row--alert > .sf-icon { color: var(--orange); }

.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);
}

/* Stacked layout used on the recommended tile so the primary CTA gets full
   width and the "See full plan" link sits as a calm secondary action below,
   instead of as a squeezed pill next to the big black button. */
.deal-tile-actions--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.deal-tile-actions--stacked .btn-primary {
  width: 100%;
}

.deal-tile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border-radius: var(--radius-md, 12px);
  transition: color 150ms ease, background 150ms ease;
}

.deal-tile-link:hover,
.deal-tile-link:focus-visible {
  color: var(--text-dim);
  background: var(--bg-soft, rgba(0, 0, 0, 0.03));
}

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

/* Recommended hero summary. The saving figure is the lede, rendered in
   Instrument Serif italic at hero scale so the value-prop hits the user
   on first glance. The context line below is calm supporting text. */
.deal-recommend-summary {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.deal-saving-headline {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl, 2rem);
  line-height: 1.1;
  color: var(--good-ink, var(--green));
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.deal-saving-context {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.4;
}

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

/* ── Negotiate-first alternative (energy + internet) ────────────
   One calm row directly under the savings headline: switching stays
   the headline, this is the other way to take the win. Speaks the
   deal-tile card language but tinted (surface-2) so it reads as the
   secondary of the two choices. */
.deal-negotiate-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.45;
  text-align: left;
  transition: all var(--duration) var(--ease);
}

.deal-negotiate-alt:hover,
.deal-negotiate-alt:active {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.deal-negotiate-alt strong { font-weight: 600; }
.deal-negotiate-alt .deal-negotiate-alt-stay { color: var(--text-dim); }
.deal-negotiate-alt .sf-icon-sm { flex: none; color: var(--text-muted); }

/* Honest stand-in where the negotiate row would sit, for providers that
   refuse retention deals (retention-policy-au): same quiet card language,
   but plain text - there is nothing to tap. */
.deal-negotiate-noretention {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.45;
}
.deal-negotiate-noretention .sf-icon-sm { flex: none; margin-top: 2px; color: var(--text-muted); }

/* ── First-step quick-checks gate ───────────────────────────── */
.deal-checks-gate {
  margin-bottom: var(--space-4);
}

.deal-checks-gate-intro {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.deal-checks-skip {
  width: 100%;
  margin-top: var(--space-3);
  color: var(--text-muted);
}

/* ── Flat ranked list ───────────────────────────────────────── */
/* Tiles stack and lean on the existing `.deal-tile + .deal-tile` margin for
   spacing; the wrapper just groups them for in-place re-renders. */
.deal-ranked-list {
  display: block;
}

/* Always-visible "Plan details" on the recommended tile (replaces the old
   collapsed <details>). The denser "How is this priced?" stays collapsed. */
.deal-tile-details-open {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.deal-tile-details-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ── Solo Switch Rating badge + breakdown ───────────────────── */
.deal-tile-rating {
  margin-top: var(--space-3);
}

.deal-tile-rating-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

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

.rating-star {
  color: var(--orange, #d97706);
}

.rating-why-link {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.rating-why-intro {
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.rating-pillar {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.rating-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 500;
}

.rating-pillar-score {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.rating-pillar-na {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.rating-pillar--missing .rating-pillar-head {
  color: var(--text-muted);
}

.rating-pillar-why {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.deal-tile-external-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-top: var(--space-2);
}

.external-rating-source {
  color: var(--text-muted);
}

/* Sourced per-provider caveat inside the rating "Why" drawer
   (retention-policy-au). */
.rating-pillar--caveat .rating-pillar-head { color: var(--orange); }
.rating-caveat-source {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Advisor suggestion tile ────────────────────────────────── */
.deal-tile--advisor {
  border-color: var(--accent, #2563eb);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
}

.deal-tile-advisor-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent, #2563eb);
  margin-bottom: var(--space-3);
}

.deal-tile-advisor-reason {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.55;
  margin: var(--space-2) 0 var(--space-3);
}

.deal-tile-advisor-stated {
  font-size: var(--text-xs);
  color: var(--text-muted);
  align-self: center;
}

/* Home banner when the advisor has an unactioned suggestion */
.advisor-home-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.advisor-home-banner-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.4;
}

.advisor-home-banner-text strong {
  color: var(--accent, #2563eb);
}

/* 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 (ship blend: 28px rings + connecting line) ── */
.status-tracker {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-2) 0;
}

.status-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding: 12px 0;
}
.status-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 42px;
  bottom: -8px;
  width: 2px;
  background: var(--line);
}
.status-step:last-child::before { display: none; }

.status-step-indicator {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

.status-step.completed .status-step-indicator {
  background: var(--good-ink);
  border-color: var(--good-ink);
  color: var(--surface);
}

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

.status-step-label {
  font-size: 14.5px;
  font-weight: 500;
  padding-top: 4px;
}

.status-step.completed .status-step-label {
  color: var(--ink-2);
}

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

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 120, 86, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(224, 120, 86, 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(--surface-2);
  border: 1px solid var(--line);
  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;
  margin-top: 4px;
  margin-bottom: 8px;
}

.setup-consent-card-terms {
  font-size: var(--text-xs);
  margin-top: 6px;
  text-align: right;
}
.setup-consent-terms-link {
  color: var(--accent);
  text-decoration: underline;
}
.setup-consent-terms-link:hover { color: var(--accent-ink); }

/* ── Negotiate brief ───────────────────────────────────────── */
.neg-brief {
  margin: 16px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.neg-brief-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
}

.neg-brief-row + .neg-brief-row { border-top: 1px solid var(--line); }

.neg-brief-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.neg-brief-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 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: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent-ink);
}

.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;
}

/* ── 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;
}

/* Bullet list inside a .review-warning callout, used by the pre-switch
   "Heads up before you switch" panel above the recommended deal tile.
   Explicit list-style so the markers always render even when the parent
   resets list-style globally. */
.review-warning-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.5;
  list-style: disc outside;
}

.review-warning-list li {
  padding: 2px 0;
  margin-left: 0;
}

.review-warning-list li::marker {
  color: var(--orange);
}

/* Pre-switch warning sits above the recommended tile (no top margin, just
   bottom spacing) so the user reads the heads-up before they tap Switch. */
.pre-switch-warning {
  margin: 0 0 var(--space-3);
  align-items: flex-start;
}

/* The "Plan details" disclosure on the recommended tile uses .value-checklist.
   Tighten the body padding so the features paragraph sits flush with the
   chevron above it. */
.deal-tile-features-collapsed {
  padding-top: var(--space-2);
}

/* ── 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);
}

/* ── Seamless tie-break badge ──────────────────────────────────
   A plan moved above a slightly cheaper one because switching to it is
   easier (js/utils/seamless-rank.js). Green, since it is good news, and
   it always carries what it costs. */
.deal-tile-source-badge.badge-seamless {
  background: var(--green-soft);
  color: var(--green-dark);
}

/* ── 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. */
/* Full hairline border, no coloured left spine: a 3px left border plus a
   corner radius used to render as a floating "(" curve on dark surfaces
   (July 2026 design pass). */
.deal-tile-breakdown {
  margin-top: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  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;
}

/* ── Value ↔ price lens (telco deals) ───────────────────────────
   Three-zone segmented control: Best value / Balanced / Best price.
   Reads as one slider-like track; the active zone inverts (ink-on-paper)
   to match the filter-chip toggle language. A one-line hint under the
   track says what the current ordering means in plain English. */
.deal-lens {
  margin: var(--space-3) 0 var(--space-2);
}
.deal-lens-track {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--surface);
}
.deal-lens-opt {
  appearance: none;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 0; /* keeps the whole segment a comfortable thumb target */
  border-radius: 999px;
  cursor: pointer;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.deal-lens-opt:hover { color: var(--ink); }
.deal-lens-opt.active {
  background: var(--ink);
  color: var(--text-inverse);
}
.deal-lens-hint {
  margin-top: 5px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Prepaid / postpaid toggle (mobile) ──────────────────────────────
   One quiet switch under the sort tabs, tied to the bill's own payment type
   ("Show prepaid plans" on a postpaid bill, off by default). Restyled July
   2026 (round 2) as a soft card row speaking the same language as the deal
   cards, instead of a bare hairline row that read as an afterthought. */
.deal-paytype {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: var(--space-2) 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.deal-paytype-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.deal-paytype-count { color: var(--text-muted); font-weight: 400; }
.deal-paytype-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-deep);
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.deal-paytype-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 140ms var(--ease);
}
.deal-paytype-switch[aria-checked="true"] {
  background: var(--good-ink);
  border-color: var(--good-ink);
}
.deal-paytype-switch[aria-checked="true"]::after {
  transform: translateX(19px);
  border-color: var(--good-ink);
}
.deal-paytype-switch:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── Internet speed picker ("Need more speed?") ──────────────────────
   Same soft card row as .deal-paytype, with a chip rail instead of a
   switch: one chip per faster retail tier plus a "Yours" chip back to the
   bill's own speed. Chips scroll sideways on narrow screens rather than
   wrapping the card taller. */
.deal-speed-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--space-2) 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.deal-speed-picker .deal-paytype-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.deal-speed-picker-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.deal-speed-picker-chips::-webkit-scrollbar { display: none; }
.deal-speed-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.deal-speed-chip--on {
  color: #fff;
  background: var(--good-ink);
  border-color: var(--good-ink);
}
.deal-speed-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── Usage-basis caption (beta, default, no toggle) ──────────────────
   A quiet one-line note under the savings headline saying what the figure is
   based on (the user's usage over time), with a small Beta chip on the estimate
   so it's clear this is still being proven. No control - just a statement. */
.deal-usage-basis {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-muted);
}
.deal-usage-basis .sf-icon { flex: 0 0 auto; color: var(--ink-3); }
.deal-basis-beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  line-height: 1;
}

/* Unit-cost line under the tile price ("$1.20/GB", "34.2c/kWh") - on
   every deal card (north star, July 2026). It is a button: tapping it
   opens the working behind the figure (source and calculation). The
   dotted underline is the only "tappable" hint so it stays quiet. */
.deal-tile-unit-cost {
  display: inline-block;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 3px;
}

/* ── 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: color-mix(in srgb, var(--ink) 25%, transparent);
}

.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;
}

/* ── "What's different from your current plan?" (telco) ─────────
   Reuses the rate-comparison grid inside a breakdown <details>. The
   current column stays plain (no strike-through - a "no change" row
   must not read as a loss); per-row verdict chips make better / no
   change / worse explicit. */
.deal-tile-compare summary { min-height: 44px; }
.deal-tile-compare .deal-tile-rate-comparison {
  margin-top: 8px;
  border: none;
  background: transparent;
  padding: 0;
}
/* Value cells carry words (modem clauses, provider names), not just numbers -
   they must wrap rather than force the grid past the card edge on a phone. */
.deal-tile-compare .rate-cell {
  white-space: normal;
  overflow-wrap: break-word;
}
.deal-tile-rate-comparison .rate-cell--yours { color: var(--text-dim); }
.compare-verdict {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.compare-verdict--same { color: var(--text-muted); }
.compare-verdict--better { color: var(--green); }
.compare-verdict--worse { color: var(--red); }
.compare-unknown {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* Plain-English footnote under the comparison table (what the speed tier
   means day to day - jargon pass, July 2026). */
.compare-note {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: var(--leading-relaxed);
}

/* Facts the bill can't answer (contract, fees, modem) - listed once under
   the comparison as label · value, instead of a column of "not on your
   bill" placeholders (July 2026 design pass). */
.compare-facts { margin-top: 10px; }
.compare-facts-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.compare-fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border);
}
.compare-fact-row:last-child { border-bottom: none; }
.compare-fact-row span:first-child { color: var(--text-dim); flex-shrink: 0; }
.compare-fact-row span:last-child { text-align: right; color: var(--ink); overflow-wrap: break-word; min-width: 0; }

/* ── "Compared with your bill" (energy) ─────────────────────────
   Same grid as the telco comparison, plus a summing Total row and a
   quiet "est." marker on the deal column (the left column is the
   printed bill; the right is our estimate at the same usage). */
.deal-tile-rate-comparison .rate-row--total {
  border-top: 1px solid var(--border);
  border-bottom: none;
  margin-top: 2px;
  padding-top: 6px;
  font-weight: 600;
}
.deal-tile-rate-comparison .rate-row--total .rate-label { color: var(--ink); }
.compare-est {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
}

/* "The rates behind this" - per-unit rate sub-rows woven into the dollars
   comparison itself, hidden until the text-weight toggle below the table
   is tapped. One table, two depths: people who check c/kWh find the rate
   card indented under each dollar line; everyone else never sees a rate.
   When open, each parent row hands its divider to its last sub-row so the
   group reads as one line item. */
.deal-tile-rate-comparison .rate-subrow { display: none; }
.deal-tile-compare.show-rates .rate-subrow {
  display: grid;
  padding: 0 0 4px;
  border-bottom: none;
}
.deal-tile-compare.show-rates .rate-row--parent {
  border-bottom: none;
  padding-bottom: 2px;
}
.deal-tile-compare.show-rates .rate-subrow--last {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.rate-subrow .rate-label {
  padding-left: 12px;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}
.rate-subrow .rate-cell {
  font-size: 11px;
  color: var(--text-muted);
}
.rate-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.rate-detail-toggle::after {
  content: '⌄';
  transition: transform 150ms var(--ease);
}
.rate-detail-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Promo-headlined price: "for N months" qualifier beside the figure */
.deal-tile-price-after {
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-left: 4px;
}

/* The reassurance sentence under a headlined promo is good news - set it in
   quiet ink, not the promo line's warning amber. */
.deal-tile-promo-note {
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}

/* Speed prompt: chip matching the speed read off the scanned bill */
.add-provider-chip--suggested {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.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;
}

/* Prepaid telco plans: an unmissable badge (sits under the plan name, never
   hidden behind a disclosure) so a postpaid customer can see at a glance that
   the recommendation is a prepaid plan. */
.deal-tile-prepaid-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: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--orange-soft);
  color: var(--orange);
  line-height: 1.4;
}

/* Up-front-payment caveat for non-monthly prepaid (90-day, annual): the headline
   price is a per-month equivalent, so spell out the real billing mechanics. */
.deal-tile-prepaid-caveat {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 4px;
  margin-bottom: var(--space-2);
}
.deal-tile-prepaid-caveat svg {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--orange);
}

/* ── 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: var(--good-soft);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  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: var(--good-ink);
  margin-top: 1px;
}

/* ── Secure ID capture (mobile switches; feature-flagged, dark) ─────
   See docs/secure-id-capture-plan.md. Reuses the app's trust palette
   (--good / --good-soft / --good-ink) and the coral accent for action. */
.secure-id { display: flex; flex-direction: column; gap: var(--space-4); }
.secure-id-step {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--good-ink); background: var(--good-soft);
  padding: 4px 10px; border-radius: var(--radius-full);
}
.secure-id-head h3 { margin: 10px 0 4px; }
.secure-id-sub { font-size: var(--text-sm); line-height: 1.5; color: var(--text-dim); margin: 0; }

.secure-id-promises {
  background: var(--good-soft); border-radius: var(--radius-lg);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
}
.secure-id-promises-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--good-ink); }
.secure-id-promises-head .sf-icon { color: var(--good-ink); }
.secure-id-promise { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-sm); color: var(--text); line-height: 1.4; }
.secure-id-promise .sf-icon { color: var(--good-ink); flex: 0 0 auto; margin-top: 1px; }

.secure-id-doctype { display: flex; gap: 8px; flex-wrap: wrap; }
.secure-id-chip {
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  padding: 7px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border-light); background: var(--surface);
  color: var(--text-dim); cursor: pointer;
}
.secure-id-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.secure-id-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.secure-id-field { display: flex; flex-direction: column; gap: 5px; }
.secure-id-field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.secure-id-field-label em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.secure-id-input {
  font: inherit; font-size: var(--text-base);
  padding: 11px 13px; width: 100%;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
}
.secure-id-input:focus { outline: none; border-color: var(--accent); }

.secure-id-have {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
  font-size: var(--text-xs); color: var(--good-ink); line-height: 1.4;
}
.secure-id-have .sf-icon { color: var(--good); flex: 0 0 auto; margin-top: 1px; }

.secure-id-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-sm); color: var(--text-dim); line-height: 1.4; cursor: pointer;
}
.secure-id-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

.secure-id-foot { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: 0; line-height: 1.5; }
.secure-id-error { font-size: var(--text-sm); color: var(--red); text-align: center; margin: 0; line-height: 1.4; }

.secure-id--center { align-items: center; text-align: center; }
.secure-id-success {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--good-soft); display: flex; align-items: center; justify-content: center;
}
.secure-id-success .sf-icon svg { width: 32px; height: 32px; color: var(--good-ink); }
.secure-id-status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-xs); color: var(--text-dim);
  background: var(--surface-2); padding: 7px 13px; border-radius: var(--radius-full);
}
.secure-id-status .sf-icon { color: var(--good-ink); }

/* ── No-better-deals verdict (proof-led, July 2026 design pass) ──
   One green tick, one serif verdict line, one proof sentence. The
   provider list is the evidence, one tap away, as a quiet two-column
   grid instead of a screen-long list. */
.deal-verdict {
  text-align: center;
  padding: 24px 0 8px;
}
.deal-verdict-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.deal-verdict-headline {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.deal-verdict-sub {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 auto;
}
.checked-providers {
  margin-top: 14px;
  text-align: left;
}
.checked-providers .value-checklist-summary { justify-content: center; }
.checked-providers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  padding: 8px 4px 2px;
}
.checked-provider {
  font-size: var(--text-xs);
  color: var(--text-dim);
  padding: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checked-providers-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: 8px;
  text-align: center;
}

/* "We keep watching" reassurance + notification ask under a verdict. */
.deal-watch-card {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}
.deal-watch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.deal-watch-title .sf-icon-sm { color: var(--good-ink, var(--green)); }
.deal-watch-text {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}
.deal-watch-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.deal-watch-actions .btn { flex: 1; }
.deal-watch-card .submitted-notif-done { margin-top: 10px; }

/* ── Compact telco deal cards (Andy's mock, July 2026 round 2) ──
   Glanceable card: badge + rating corners, avatar provider row, price
   with a green yearly delta, one facts line, any loss in the open, and
   everything else behind "See full plan details". */
.deal-compact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--space-3);
  min-height: 22px;
}
.deal-compact-rating {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.deal-compact-rating .rating-star { color: #d4a017; }
.deal-compact-provider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}
.deal-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
}
/* Provider logo (served same-origin by the provider-icon function) laid over
   the initials; the initials show through until it loads, and a delegated
   error handler removes the img on 404 so they show again. */
.deal-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  /* Opaque white behind the logo: favicons are drawn for light backgrounds,
     and it stops the fallback initials showing through transparent icons. */
  background: #fff;
  border-radius: inherit;
}
.deal-compact-provider-text { min-width: 0; }
.deal-compact-provider-text .deal-tile-plan {
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-compact-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.deal-compact-price-side { text-align: right; flex: 0 0 auto; }
.deal-compact-delta {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.deal-compact-delta--worse { color: var(--purple); }
.deal-compact-delta--neutral { color: var(--text-dim); }
.deal-compact-unit {
  display: block;
  margin-left: auto;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.deal-compact-facts {
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: var(--space-2);
}
.deal-compact-loss {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--orange, #b45309);
}
.deal-compact-loss .sf-icon-xs { flex: 0 0 auto; margin-top: 1px; }
.deal-compact-loss--fail { color: var(--red); }
.deal-compact-loss--unknown { color: var(--text-muted); font-weight: 400; }
.deal-tile--compact .deal-tile-actions { margin-top: var(--space-4); }

/* "See full plan details" - the drawer holding the comparison table,
   plan details, rating breakdown and (on alternatives) the actions. */
.deal-full-details { margin-top: var(--space-2); }
.deal-full-details > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  min-height: 40px;
  padding: 10px 0 6px;
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
.deal-full-details > summary:hover,
.deal-full-details[open] > summary { color: var(--ink); }
.deal-full-details > summary::-webkit-details-marker { display: none; }
.deal-full-details-body { padding-top: 4px; }
.deal-full-details-body .deal-tile-actions { margin-top: var(--space-3); }

/* Prepaid chip in the badge slot when no ranking badge claims it. */
.badge-prepaid {
  background: var(--surface-2);
  color: var(--text-dim);
}

/* Heads-up strip above the recommended card: one calm tinted panel,
   bold lead, plain sentences (replaces the boxed warning list). */
.deal-heads-up {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding: 14px 16px;
  background: rgba(212, 160, 23, 0.10);
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.55;
}
.deal-heads-up .sf-icon-sm { color: #b8860b; flex: 0 0 auto; margin-top: 2px; }
.deal-heads-up p { margin: 0; }
.deal-heads-up-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.deal-heads-up-list li { margin-top: 4px; }

/* Quiet trust line under the deal list. */
.deal-trust-note {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Results-screen "who we checked" disclosure (item: no-switch switch).
   Same component as the empty-verdict one, just spaced off the list. */
.checked-providers--results { margin-top: var(--space-3); }