/* Mobile-first responsive foundation. Loaded last so every screen shares the same rules. */
:root {
  --mobile-gutter: clamp(.9rem, 4vw, 1.35rem);
  --touch-target: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
button, input, select, textarea { min-width: 0; max-width: 100%; font: inherit; }
.app, .content, .page, .page > *, .panel, article, section, div { min-width: 0; }

@media (max-width: 700px) {
  .app { width: 100%; min-height: 100dvh; }
  .sidebar { display: none !important; }
  .content { width: 100%; max-width: 100%; margin-left: 0 !important; }
  .topbar {
    width: 100%; min-height: 4rem; padding: max(.65rem, env(safe-area-inset-top)) var(--mobile-gutter) .65rem;
    gap: .6rem;
  }
  .mobile-brand { min-width: 0; flex: 1; }
  .mobile-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .search, .topbar .mode, .topbar .theme-toggle { display: none !important; }
  .top-actions { flex: 0 0 auto; gap: .35rem; }
  .top-actions .iconbtn, .top-actions .avatar { width: 2.45rem; height: 2.45rem; flex: 0 0 2.45rem; }

  .page {
    width: 100%; max-width: none; padding: clamp(1rem, 4vw, 1.4rem) var(--mobile-gutter)
      calc(7rem + env(safe-area-inset-bottom));
  }
  h1 { font-size: clamp(1.85rem, 8.3vw, 2.65rem) !important; line-height: 1.05 !important; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1.12; overflow-wrap: anywhere; }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.35rem); line-height: 1.2; }
  .lead { max-width: 100%; font-size: clamp(.76rem, 3.3vw, .9rem); line-height: 1.55; }
  .eyebrow, .pill, badge, .status-ready, .status-pending { letter-spacing: .12em; overflow-wrap: anywhere; }

  .hero-row, .section-title, .panel-head, .finance-head, .route-head {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: .9rem !important;
  }
  .hero-row > button, .section-title > button { width: 100%; min-height: var(--touch-target); }
  .button-row, .modal-actions, .lodging-actions {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr)) !important;
    width: 100%; gap: .55rem !important;
  }
  .button-row > *, .modal-actions > *, .lodging-actions > * { width: 100%; min-height: var(--touch-target); }

  .trip-hero {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; min-height: 0 !important;
    padding: clamp(1.25rem, 5vw, 1.7rem) !important; gap: 1.25rem;
  }
  .trip-hero > div:first-child { max-width: 100%; }
  .trip-hero h2 { margin-top: 1rem; }
  .trip-hero p { display: flex; flex-wrap: wrap; gap: .25rem; }
  .progress-line { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
  .countdown { position: static !important; inset: auto !important; transform: none !important; text-align: left !important; width: auto !important; }
  .countdown b { font-size: clamp(3rem, 17vw, 5rem) !important; line-height: .9; }

  .metric-grid, .dashboard-grid, .dashboard-metrics, .finance-metrics, .finance-grid, .flights-grid,
  .today-grid, .pretrip-grid, .restaurant-grid, .wishlist-grid, .document-grid, .lodging-grid,
  .timing-summary, .comparison-board, .compact-route-layout, .route-layout, .settings-grid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; gap: .8rem !important;
  }
  .metric, .panel, .flight-editor, .compact-summary-card, .document-card, .restaurant-card, .wishlist-card,
  .lodging-card, .timing-summary > *, .exchange-strip, .next-stop {
    width: 100%; max-width: 100%; min-height: 0; height: auto; padding: clamp(1rem, 4vw, 1.3rem);
    overflow-wrap: anywhere;
  }
  .metric > b, .big-money, .period-head b { font-size: clamp(1.35rem, 7vw, 2rem) !important; overflow-wrap: anywhere; }
  .side-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }

  .agenda-task { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .85rem; }
  .agenda-task-meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .agenda-task-meta button { grid-column: 1 / -1; width: 100%; min-height: var(--touch-target); }
  .agenda-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .flight-route, .flight-meta { width: 100%; }
  .flight-route { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: .5rem !important; }
  .flight-meta { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .45rem; }

  .form-row, .place-form .form-row, .finance-entry .form-row, .trip-form .form-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .75rem !important;
  }
  label, label input, label select, label textarea { width: 100%; }
  input, select, textarea { font-size: 1rem !important; }

  .modal-backdrop {
    align-items: end !important; padding: max(.65rem, env(safe-area-inset-top)) .65rem
      calc(.65rem + env(safe-area-inset-bottom)) !important; overflow: hidden;
  }
  .form-modal, .place-modal, .compare-modal, .search-modal, .notice-modal, .notifications-modal {
    width: 100% !important; max-width: none !important; max-height: calc(100dvh - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; border-radius: 1.25rem !important; padding: 1.25rem !important;
  }
  .compare-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .expense-labels { display: none !important; }
  .expense-editor {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: .65rem !important;
    align-items: start !important;
  }
  .expense-editor .expense-main, .expense-editor > select, .expense-editor .expense-value { grid-column: 2 / -1; width: 100%; }
  .expense-editor .delete-button { grid-column: 3; grid-row: 1; }
  .expense-value { display: grid !important; grid-template-columns: minmax(4.5rem, .45fr) minmax(0, 1fr); }
  .expense-value small { grid-column: 1 / -1; }
  .period-head { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .period-head > div:last-child { text-align: left !important; }
  .bar-row { grid-template-columns: minmax(5rem, .7fr) minmax(0, 1fr) !important; gap: .5rem !important; }
  .bar-row b { grid-column: 1 / -1; text-align: right; }

  .compact-card-list { width: 100%; }
  .summary-card-open { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: .7rem !important; }
  .summary-facts { grid-column: 2 / -1; text-align: left !important; align-items: start !important; }
  .compact-map-preview, .map-panel, .lodging-map-card { width: 100%; position: static !important; }
  .map-canvas, .lodging-map, .interactive-mini-map { width: 100%; min-height: clamp(15rem, 75vw, 22rem); }
  .route-summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; gap: .5rem !important; }
  .route-summary > button { grid-column: 1 / -1; width: 100%; }

  .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .document-card { padding: .75rem; }
  .document-card h3, .document-card p { overflow-wrap: anywhere; }
  .document-preview { aspect-ratio: 4 / 3; height: auto !important; }
  .document-filters, .traveler-filters, .category-filters { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

  .calendar-days { width: 100%; max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; }
  .calendar-days > * { scroll-snap-align: start; }
  .comparison-board { overflow: visible !important; }

  .bottom-nav {
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; max-width: 100%;
    padding: .45rem max(.35rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
  }
  .bottom-nav button { min-width: 0; padding: .35rem .1rem; font-size: clamp(.58rem, 2.6vw, .72rem); overflow: hidden; }
  .bottom-nav button span { font-size: 1rem; }
  .fab { right: var(--mobile-gutter) !important; bottom: calc(5.3rem + env(safe-area-inset-bottom)) !important; }
  .quick-menu { left: var(--mobile-gutter); right: var(--mobile-gutter) !important; bottom: calc(9rem + env(safe-area-inset-bottom)) !important; width: auto !important; }
  .save-status { left: var(--mobile-gutter) !important; right: auto !important; bottom: calc(5.65rem + env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 7rem); }
  .mobile-more-sheet { width: 100%; max-width: 100%; max-height: min(80dvh, 42rem); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 350px) {
  :root { --mobile-gutter: .75rem; }
  .document-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .route-summary { grid-template-columns: minmax(0, 1fr) !important; }
  .route-summary > button { grid-column: auto; }
  .agenda-task-meta { grid-template-columns: minmax(0, 1fr); }
  .bottom-nav button { font-size: .56rem; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .sidebar { width: clamp(12.5rem, 22vw, 14.875rem); }
  .content { margin-left: clamp(12.5rem, 22vw, 14.875rem); width: auto; }
  .page { padding-inline: clamp(1.25rem, 3vw, 2rem); }
  .metric-grid, .timing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-grid, .compact-route-layout, .lodging-grid { grid-template-columns: minmax(0, 1fr); }
  .document-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}