/* CarDecision — UX laws layer (HIG / Material 3 / Nielsen) */

:root {
  --touch-min: 48px;
  --cd-space-1: 0.5rem;
  --cd-space-2: 0.75rem;
  --cd-space-3: 1rem;
  --cd-space-4: 1.5rem;
  --cd-space-5: 2rem;
  --cd-radius: 14px;
  --cd-focus: #E85D04;
}

/* Aesthetic–Usability: calmer surfaces, clearer type hierarchy */
.section-head h2,
.cw-block-head h2,
.hero h1 {
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.section-head p,
.cw-block-head p,
.hero > .container > p,
.form-hint {
  max-width: 42rem;
}

/* Hick’s Law — fewer primary choices in first viewport actions */
.hero-actions,
.cd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-space-2);
}
.hero-actions .btn-primary,
.cd-nav-actions .cd-cta {
  min-height: var(--touch-min);
  min-width: 9.5rem;
  padding-inline: 1.15rem;
  border-radius: 12px !important;
}

/* Consistent action button radius sitewide */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-touch {
  border-radius: 12px;
}
.hero-actions {
  margin-top: var(--cd-space-3);
  gap: var(--cd-space-2);
}
.meta-row {
  margin: var(--cd-space-2) 0 0;
  gap: 0.45rem;
}

/* Fitts’s Law — large, reachable targets (interactive only) */
.cd-pill-link,
.cd-drawer-card,
.cd-dock a,
.cd-dock button,
.cw-brand,
.chip[role="button"],
.chip-action,
.btn {
  min-height: var(--touch-min);
}
/* Status chips stay compact — avoid inflated meta-row gaps */
.meta-row .chip,
.hero .chip,
.chip:not([role="button"]):not(.chip-action) {
  min-height: 0;
  padding: 0.35rem 0.7rem;
  line-height: 1.25;
}
.cd-pill-link,
.cd-drawer-card,
.cw-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.95rem;
}
.cd-dock a,
.cd-dock button {
  min-width: var(--touch-min);
}

/* Jakob’s Law + Consistency — familiar car-site patterns */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--brand-muted, #5B6B7A);
  margin-bottom: var(--cd-space-2);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Law of Proximity — group related controls */
.filter-bar,
.cd-filter-cluster,
.form-row,
.calc-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-space-2);
  align-items: end;
}
.form-group,
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--cd-space-3);
}
.form-group label,
.field label,
.form-label {
  font-weight: 650;
  font-size: 0.9rem;
}

/* Recognition over recall — persistent context chips */
.context-chips,
.cd-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--cd-space-2) 0 var(--cd-space-3);
}
.context-chips a,
.cd-suggest-chips a,
.cd-suggest-chips button {
  border: 1px solid var(--outline, var(--brand-line));
  background: var(--surface, #fff);
  color: var(--brand-ink, #0B1F33);
  border-radius: 999px;
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
/* Hero overrides live in cd-ui-polish.css (white text on frosted chips) */

/* Visual hierarchy — primary vs quiet surfaces */
.result-card,
.car-card,
.cw-brand {
  border-radius: var(--cd-radius);
}
.notice,
.confidence-note,
.data-confidence {
  border-left: 3px solid var(--brand-accent, #E85D04);
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--brand-accent, #E85D04) 8%, transparent);
  border-radius: 0 12px 12px 0;
}

/* User control & freedom — sticky escape / undo affordances */
.cd-back-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--cd-space-3);
}
.cd-chat-toggle,
.theme-toggle,
.cd-menu-btn {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

/* Accessibility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 3px solid var(--cd-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Error prevention + recovery */
.field-error, .form-error {
  color: var(--brand-danger, #B42318);
  font-size: 0.85rem;
}
.empty-state, .error-state {
  text-align: center;
  padding: var(--cd-space-5) var(--cd-space-3);
  border: 1px dashed var(--outline, var(--brand-line));
  border-radius: var(--cd-radius);
  background: var(--surface, #fff);
}
.empty-state .btn,
.error-state .btn {
  margin-top: var(--cd-space-2);
}

/* Responsive — Material adaptive + thumb zone */
@media (max-width: 860px) {
  .cd-nav-actions .cd-search { display: none; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cd-chat-root {
    bottom: calc(var(--bottom-nav-h, 72px) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }
  main {
    padding-bottom: calc(var(--bottom-nav-h, 72px) + 1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Match real world — money & units read clearly */
.price, .money, .ex-showroom {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* Aesthetic + minimalist — reduce chrome noise */
.ad-slot:empty,
.ad-reserved:empty { display: none !important; }