/*
 * TripPulse UI-1 — canonical visual foundation.
 * Loaded after the legacy stylesheet so the redesign can move in small,
 * reversible phases without changing product state or DOM contracts.
 */

:root {
  color-scheme: light;

  /* Color */
  --tp-color-bg-primary: #f6f8f7;
  --tp-color-bg-elevated: #edf2ef;
  --tp-color-surface: rgba(255, 255, 255, 0.9);
  --tp-color-surface-strong: #ffffff;
  --tp-color-surface-soft: rgba(18, 54, 43, 0.045);
  --tp-color-border: rgba(22, 62, 49, 0.13);
  --tp-color-border-strong: rgba(23, 157, 112, 0.34);
  --tp-color-text-primary: #10231c;
  --tp-color-text-secondary: #3e584f;
  --tp-color-text-muted: #71847d;
  --tp-color-primary: #18a976;
  --tp-color-primary-strong: #07845b;
  --tp-color-secondary: #3f82e3;
  --tp-color-secondary-soft: #50b8cf;
  --tp-color-success: #168c66;
  --tp-color-warning: #b87819;
  --tp-color-danger: #cf514b;
  --tp-color-conflict: #b83e62;
  --tp-color-neutral: #72827c;

  /* Typography */
  --tp-font-family: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tp-font-display: clamp(2.25rem, 5vw, 4.75rem);
  --tp-font-h1: clamp(2rem, 4vw, 3.5rem);
  --tp-font-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --tp-font-h3: clamp(1.125rem, 1.7vw, 1.5rem);
  --tp-font-body: 1rem;
  --tp-font-small: 0.875rem;
  --tp-font-meta: 0.75rem;
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-semibold: 600;
  --tp-weight-bold: 700;
  --tp-leading-tight: 1.18;
  --tp-leading-body: 1.62;

  /* Space */
  --tp-space-1: 0.25rem;
  --tp-space-2: 0.5rem;
  --tp-space-3: 0.75rem;
  --tp-space-4: 1rem;
  --tp-space-5: 1.5rem;
  --tp-space-6: 2rem;
  --tp-space-7: 3rem;
  --tp-space-8: 4rem;

  /* Shape */
  --tp-radius-sm: 0.625rem;
  --tp-radius-md: 1rem;
  --tp-radius-lg: 1.5rem;
  --tp-radius-xl: 2rem;
  --tp-radius-pill: 999px;

  /* Elevation */
  --tp-shadow-card: 0 14px 38px rgba(24, 55, 45, 0.08);
  --tp-shadow-elevated: 0 28px 80px rgba(24, 55, 45, 0.16);
  --tp-glow-ai: 0 0 0 1px rgba(24, 169, 118, 0.08), 0 20px 70px rgba(24, 169, 118, 0.12);
  --tp-glow-orb: 0 0 72px rgba(80, 184, 207, 0.2), 0 0 130px rgba(63, 130, 227, 0.1);

  /* Motion */
  --tp-motion-fast: 140ms;
  --tp-motion-normal: 220ms;
  --tp-motion-slow: 360ms;
  --tp-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout references; media queries below use the equivalent fixed values. */
  --tp-breakpoint-desktop: 1200px;
  --tp-breakpoint-tablet: 1024px;
  --tp-breakpoint-mobile: 640px;
  --tp-shell-gutter: clamp(1rem, 3vw, 2.5rem);
  --tp-content-max: 73.75rem;

  /* Compatibility aliases used by the existing UI. */
  --bg: var(--tp-color-bg-primary);
  --bg-soft: var(--tp-color-bg-elevated);
  --panel: var(--tp-color-surface);
  --panel-strong: var(--tp-color-surface-strong);
  --panel-light: var(--tp-color-surface-soft);
  --text: var(--tp-color-text-primary);
  --text-soft: var(--tp-color-text-secondary);
  --text-muted: var(--tp-color-text-muted);
  --text-dim: var(--tp-color-text-muted);
  --muted: var(--tp-color-text-muted);
  --line: var(--tp-color-border);
  --line-bright: var(--tp-color-border-strong);
  --cyan: var(--tp-color-primary);
  --blue: var(--tp-color-secondary);
  --violet: var(--tp-color-secondary-soft);
  --green: var(--tp-color-success);
  --danger: var(--tp-color-danger);
  --radius-sm: var(--tp-radius-sm);
  --radius-md: var(--tp-radius-md);
  --radius-lg: var(--tp-radius-lg);
  --shadow-lg: var(--tp-shadow-elevated);
  --transition: var(--tp-motion-normal) var(--tp-ease-standard);
}

html {
  background: var(--tp-color-bg-primary);
  scrollbar-color: rgba(83, 112, 102, 0.45) rgba(232, 239, 235, 0.86);
  scrollbar-width: thin;
}

.tp-ui-foundation {
  min-width: 320px;
  color: var(--tp-color-text-primary);
  background:
    radial-gradient(circle at 50% -15%, rgba(80, 184, 207, 0.12), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(63, 130, 227, 0.07), transparent 31%),
    linear-gradient(180deg, #fbfcfb 0%, #f4f7f5 48%, #f7f9f8 100%);
  font-family: var(--tp-font-family);
  font-size: var(--tp-font-body);
  font-weight: var(--tp-weight-regular);
  line-height: var(--tp-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.tp-ui-foundation *,
.tp-ui-foundation *::before,
.tp-ui-foundation *::after {
  box-sizing: border-box;
}

.tp-ui-foundation :where(main, section, article, aside, header, footer, nav, form, div) {
  min-width: 0;
}

.tp-ui-foundation :where(img, video, canvas, svg) {
  max-width: 100%;
}

.tp-ui-foundation :where(p, li, dd) {
  text-wrap: pretty;
}

.tp-ui-foundation :where(dd, small, code, pre) {
  overflow-wrap: anywhere;
}

.tp-ui-foundation ::selection {
  color: #ffffff;
  background: rgba(24, 169, 118, 0.88);
}

.tp-ui-foundation ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tp-ui-foundation ::-webkit-scrollbar-track {
  background: rgba(232, 239, 235, 0.86);
}

.tp-ui-foundation ::-webkit-scrollbar-thumb {
  border: 3px solid rgba(232, 239, 235, 0.86);
  border-radius: var(--tp-radius-pill);
  background: rgba(83, 112, 102, 0.45);
}

.tp-ui-foundation ::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 169, 118, 0.62);
}

/* Type hierarchy */
.tp-ui-foundation :where(h1, h2, h3) {
  color: var(--tp-color-text-primary);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.tp-ui-foundation h1 {
  font-size: var(--tp-font-h1);
}

.tp-ui-foundation h2 {
  font-size: var(--tp-font-h2);
}

.tp-ui-foundation h3 {
  font-size: var(--tp-font-h3);
}

.tp-ui-foundation :where(p, li, label, input, select, textarea, button) {
  font-size: inherit;
}

.tp-ui-foundation :where(small, .section-kicker, .gateway-step, .offer-fact span) {
  font-size: var(--tp-font-meta);
  letter-spacing: 0.04em;
}

/* Application shell and brand */
.tp-ui-foundation .page-noise {
  opacity: 0.018;
}

.tp-ui-foundation :where(.site-header, .results-shell) {
  border-color: var(--tp-color-border);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--tp-shadow-card);
  backdrop-filter: blur(22px) saturate(118%);
}

.tp-ui-foundation .site-header {
  color: var(--tp-color-text-secondary);
}

.tp-ui-foundation .brand {
  gap: var(--tp-space-2);
}

.tp-ui-foundation .brand-mark {
  filter: drop-shadow(0 0 18px rgba(24, 169, 118, 0.22));
}

.tp-ui-foundation :where(.brand-name, .destination-brandline strong) {
  color: var(--tp-color-text-primary);
  letter-spacing: -0.035em;
}

.tp-ui-foundation :where(.brand-ai, .destination-brandline em) {
  color: var(--tp-color-secondary);
}

.tp-ui-foundation .brand-ai {
  border-color: rgba(63, 130, 227, 0.2);
  background: rgba(80, 184, 207, 0.09);
}

.tp-ui-foundation :where(.main-nav a, .my-trippulse-button, .sidebar-toggle) {
  min-height: 44px;
  border-radius: var(--tp-radius-md);
  transition:
    color var(--tp-motion-fast) var(--tp-ease-standard),
    background-color var(--tp-motion-fast) var(--tp-ease-standard),
    border-color var(--tp-motion-fast) var(--tp-ease-standard),
    transform var(--tp-motion-fast) var(--tp-ease-standard);
}

.tp-ui-foundation :where(.main-nav a:hover, .my-trippulse-button:hover, .sidebar-toggle:hover) {
  color: var(--tp-color-text-primary);
  border-color: rgba(24, 169, 118, 0.22);
  background: rgba(24, 169, 118, 0.075);
}

/* Canonical card foundation plus compatibility surfaces. */
.tp-card,
.tp-ui-foundation :where(
  .assistant-card,
  .offer-card,
  .travel-dna-card,
  .confidence-card,
  .panel-section,
  .panel-live-placeholder,
  .tripdna-control-center,
  .finalist-decision-map,
  .df-progress,
  .df-trip,
  .df-question,
  .df-alert,
  .df-receipt,
  .coa-top,
  .coa-overview > div,
  .coa-overview > aside,
  .coa-section,
  .coa-receipt,
  .dc-hero,
  .dc-grid > section,
  .dc-runner,
  .dc-differences,
  .dc-counterfactual,
  .dc-evidence,
  .must-know,
  .trip-pulse-analysis,
  .tp-analysis-module,
  .offer-inbox-panel,
  .conversation-history-shell
) {
  border: 1px solid var(--tp-color-border);
  border-radius: var(--tp-radius-lg);
  color: var(--tp-color-text-primary);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 248, 0.94));
  box-shadow: var(--tp-shadow-card);
}

.tp-ui-foundation .conversation-history-shell > summary {
  color: var(--tp-color-text-muted);
}

.tp-ui-foundation :where(.conversation-history-message, .living-history-message) {
  color: var(--tp-color-text-primary);
  background: rgba(18, 54, 43, 0.035);
}

.tp-ui-foundation :where(.conversation-history-message, .living-history-message) p {
  color: var(--tp-color-text-primary);
}

.tp-ui-foundation :where(.conversation-history-message, .living-history-message) small {
  color: var(--tp-color-primary-strong);
}

.tp-card--interactive,
.tp-ui-foundation :where(.offer-card, .main-nav a, .profile-status-chip) {
  transition:
    transform var(--tp-motion-normal) var(--tp-ease-standard),
    border-color var(--tp-motion-normal) var(--tp-ease-standard),
    box-shadow var(--tp-motion-normal) var(--tp-ease-standard);
}

.tp-card--interactive:hover,
.tp-ui-foundation :where(.offer-card:hover, .profile-status-chip:hover) {
  border-color: rgba(24, 169, 118, 0.28);
  box-shadow: var(--tp-glow-ai);
  transform: translateY(-2px);
}

.tp-card--decision {
  border-color: rgba(24, 169, 118, 0.3);
  background: linear-gradient(145deg, rgba(238, 250, 245, 0.96), rgba(250, 253, 252, 0.98));
}

.tp-card--warning {
  border-color: color-mix(in srgb, var(--tp-color-warning) 38%, transparent);
}

.tp-card--evidence {
  border-color: color-mix(in srgb, var(--tp-color-secondary) 30%, transparent);
}

.tp-card--selected {
  border-color: var(--tp-color-primary);
  box-shadow: var(--tp-glow-ai);
}

/* Keep practical-reality modules inside the same light surface language. */
.tp-ui-foundation :where(
  .must-know > header h3,
  .mk-card-toggle strong,
  .tp-analysis-head h3,
  .tp-analysis-module summary strong,
  .tp-edge-phase h5,
  .tp-alert-card > header strong,
  .offer-inbox-head h3,
  .offer-inbox-verdict h4
) {
  color: var(--tp-color-text-primary);
}

.tp-ui-foundation :where(
  .must-know > header p,
  .mk-card-toggle small,
  .tp-analysis-head p,
  .tp-edge-phase p,
  .tp-alert-card > p,
  .offer-inbox-head p,
  .offer-inbox-boundary
) {
  color: var(--tp-color-text-secondary);
}

.tp-ui-foundation :where(.mk-card, .tp-edge-phase, .tp-alert-card, .offer-inbox-verdict) {
  border-color: var(--tp-color-border);
  color: var(--tp-color-text-primary);
  background: rgba(255, 255, 255, 0.76);
}

/* Buttons */
.tp-button,
.tp-ui-foundation :where(
  .primary-button,
  .secondary-button,
  .offer-action,
  .secondary-offer-action,
  .panel-primary,
  .decision-primary,
  .decision-secondary,
  .results-offer-inbox,
  .alpha-actions button,
  .df-actions button,
  .composer-send
) {
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-md);
  font-family: var(--tp-font-family);
  font-weight: var(--tp-weight-bold);
  line-height: 1.2;
  transition:
    color var(--tp-motion-fast) var(--tp-ease-standard),
    background-color var(--tp-motion-fast) var(--tp-ease-standard),
    border-color var(--tp-motion-fast) var(--tp-ease-standard),
    box-shadow var(--tp-motion-fast) var(--tp-ease-standard),
    transform var(--tp-motion-fast) var(--tp-ease-standard);
}

.tp-button--primary,
.tp-ui-foundation :where(.primary-button, .offer-action, .panel-primary, .decision-primary, .composer-send) {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tp-color-primary-strong), var(--tp-color-primary));
  box-shadow: 0 10px 28px rgba(24, 169, 118, 0.2);
}

.tp-ui-foundation .gateway-ai-compose .composer-send {
  border-color: transparent;
}

.tp-button--secondary,
.tp-ui-foundation :where(.secondary-button, .secondary-offer-action, .decision-secondary, .results-offer-inbox) {
  color: var(--tp-color-text-primary);
  border-color: rgba(24, 169, 118, 0.24);
  background: rgba(24, 169, 118, 0.07);
}

.tp-button--ghost {
  color: var(--tp-color-text-secondary);
  border-color: var(--tp-color-border);
  background: transparent;
}

.tp-button--danger {
  color: #8f2d2a;
  border-color: rgba(255, 125, 120, 0.3);
  background: rgba(207, 81, 75, 0.1);
}

.tp-ui-foundation :where(button:not(:disabled):active, .tp-button:not(:disabled):active) {
  transform: translateY(1px);
}

.tp-ui-foundation :where(button:disabled, .tp-button:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

/* Inputs and existing chat composer foundation. */
.tp-field,
.tp-ui-foundation :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .textarea-control,
  .chat-composer,
  .gateway-chat-composer
) {
  border-color: var(--tp-color-border);
  border-radius: var(--tp-radius-md);
  color: var(--tp-color-text-primary);
  background-color: rgba(255, 255, 255, 0.92);
}

.tp-ui-foundation :where(input, select, textarea) {
  min-height: 44px;
  caret-color: var(--tp-color-primary);
}

.tp-ui-foundation :where(input, textarea)::placeholder {
  color: var(--tp-color-text-muted);
  opacity: 0.86;
}

.tp-ui-foundation :where(.textarea-control, .chat-composer, .gateway-chat-composer):focus-within {
  border-color: rgba(24, 169, 118, 0.56);
  box-shadow: 0 0 0 4px rgba(24, 169, 118, 0.09), var(--tp-shadow-card);
}

/* Chips */
.tp-chip,
.tp-ui-foundation :where(.memory-chip, .preference-chip, .profile-status-chip, .df-chips span) {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: var(--tp-space-2);
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--tp-color-border);
  border-radius: var(--tp-radius-pill);
  color: var(--tp-color-text-secondary);
  background: rgba(18, 54, 43, 0.045);
  font-size: var(--tp-font-meta);
  font-weight: var(--tp-weight-semibold);
  line-height: 1.25;
}

.tp-chip--preference,
.tp-ui-foundation .preference-chip {
  border-color: rgba(63, 130, 227, 0.22);
  color: #295f9f;
  background: rgba(63, 130, 227, 0.075);
}

.tp-chip--confirmed,
.tp-ui-foundation :where(.profile-status-chip.is-complete, .df-chips span) {
  border-color: rgba(100, 220, 168, 0.25);
  color: #0d6849;
  background: rgba(100, 220, 168, 0.08);
}

.tp-chip--unknown {
  border-color: rgba(242, 189, 103, 0.27);
  color: #81510d;
  background: rgba(242, 189, 103, 0.09);
}

.tp-chip--removable {
  padding-right: 0.5rem;
}

.tp-chip--priority {
  border-color: rgba(24, 169, 118, 0.34);
  color: #0d6c4b;
  background: rgba(24, 169, 118, 0.09);
}

.tp-chip--hard {
  border-color: rgba(255, 125, 120, 0.28);
  color: #913b37;
  background: rgba(255, 125, 120, 0.085);
}

/* Semantic status foundation. Text and labels remain supplied by renderers. */
.tp-ui-foundation :where([data-status="AVAILABLE"], [data-status="SUPPORTED"], .is-supported, .is-confirmed, .is-available) {
  --tp-status-color: var(--tp-color-success);
  color: #0d6849;
  border-color: rgba(100, 220, 168, 0.32);
  background-color: rgba(100, 220, 168, 0.085);
}

.tp-ui-foundation :where([data-status="PARTIAL"], [data-status="UNKNOWN"], .is-partial, .is-unknown) {
  --tp-status-color: var(--tp-color-warning);
  color: #81510d;
  border-color: rgba(242, 189, 103, 0.34);
  background-color: rgba(242, 189, 103, 0.085);
}

.tp-ui-foundation :where([data-status="CONFLICTED"], [data-status="ERROR"], .is-conflicted, .is-error) {
  --tp-status-color: var(--tp-color-conflict);
  color: #8f2949;
  border-color: rgba(255, 111, 145, 0.34);
  background-color: rgba(255, 111, 145, 0.085);
}

.tp-ui-foundation :where([data-status="NOT_EXECUTED"], [data-status="OUT_OF_SCOPE"], .is-not-executed, .is-out-of-scope) {
  --tp-status-color: var(--tp-color-neutral);
  color: #52645d;
  border-color: rgba(145, 160, 173, 0.28);
  background-color: rgba(145, 160, 173, 0.075);
}

.tp-ui-foundation :where([data-status="UNAVAILABLE"], .is-unavailable) {
  --tp-status-color: var(--tp-color-danger);
  color: #913b37;
  border-color: rgba(255, 125, 120, 0.34);
  background-color: rgba(255, 125, 120, 0.085);
}

.tp-ui-foundation :where([data-status="PROVIDER_ERROR"], .is-provider-error) {
  --tp-status-color: var(--tp-color-conflict);
  color: #8f2949;
  border-color: rgba(255, 111, 145, 0.38);
  background: repeating-linear-gradient(135deg, rgba(255, 111, 145, 0.09) 0 8px, rgba(255, 111, 145, 0.035) 8px 16px);
}

/* Modals, overlays, drawers and popovers */
.tp-ui-foundation :where(.analysis-overlay, .hotel-panel-backdrop, .compare-backdrop) {
  background-color: rgba(16, 35, 28, 0.42);
  backdrop-filter: blur(14px) saturate(112%);
}

.tp-ui-foundation :where(.analysis-modal, .compare-modal, .hotel-panel, .my-trippulse-panel, .alpha-tester-panel) {
  border-color: var(--tp-color-border);
  border-radius: var(--tp-radius-xl);
  color: var(--tp-color-text-primary);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 248, 0.99));
  box-shadow: var(--tp-shadow-elevated);
}

.tp-ui-foundation :where(.analysis-orb, .brand-mark, .hero-globe, .interactive-globe) {
  filter: drop-shadow(0 0 26px rgba(80, 184, 207, 0.18));
}

/* One visible keyboard language across legacy and new components. */
.tp-ui-foundation :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(24, 169, 118, 0.88);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(24, 169, 118, 0.12);
}

@media (max-width: 1024px) {
  :root {
    --tp-shell-gutter: clamp(0.875rem, 2.5vw, 1.5rem);
    --tp-font-display: clamp(2.1rem, 7vw, 3.75rem);
  }

  .tp-ui-foundation :where(.destination-gateway, .results-shell, .compare-modal, .hotel-panel) {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --tp-shell-gutter: 0.875rem;
    --tp-font-body: 0.9375rem;
    --tp-font-h1: clamp(1.9rem, 9vw, 2.65rem);
    --tp-font-h2: clamp(1.4rem, 7vw, 1.9rem);
  }

  .tp-ui-foundation :where(.destination-gateway, .results-shell) {
    max-width: calc(100vw - 1rem);
  }

  .tp-ui-foundation :where(.analysis-modal, .compare-modal, .hotel-panel, .my-trippulse-panel, .alpha-tester-panel) {
    max-width: calc(100vw - 1rem);
    border-radius: var(--tp-radius-lg);
  }

  .tp-ui-foundation :where(.primary-button, .secondary-button, .offer-action, .secondary-offer-action, .panel-primary, .decision-primary, .decision-secondary) {
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  :root {
    --tp-shell-gutter: 0.75rem;
    --tp-radius-lg: 1.125rem;
    --tp-radius-xl: 1.375rem;
  }

  .tp-ui-foundation :where(.destination-gateway, .results-shell) {
    max-width: calc(100vw - 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tp-ui-foundation *,
  .tp-ui-foundation *::before,
  .tp-ui-foundation *::after {
    scroll-behavior: auto;
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
  }
}