:root {
  color-scheme: light;
  /* Fallback only -- app.js measures the topbar's real rendered height
     (padding + text + safe-area all vary by device/font) and overrides
     this, so sticky elements below it line up exactly with no gap. */
  --topbar-h: 72px;
  /* app.js keeps these in sync with window.visualViewport so the
     bottom dock rises above the on-screen keyboard on mobile instead
     of staying pinned behind it. */
  --kb-offset: 0px;
  --vvh: 100vh;
  --bg: #eef0f2;
  --bg-elevated: #ffffff;
  --text: #171b24;
  --text-muted: #5b6472;
  --border: #d7dce2;
  --accent: #26399e;
  --accent-soft: #dfe4f7;
  --accent-text: #1c2a78;
  /* The colour theme (Settings > Colours) overrides these; the defaults are the
     original indigo. --accent-2 is the secondary: logo, loading screen, Add. */
  --accent-2: #ec7a55;
  --accent-2-btn: #e06a45;
  --on-accent-2: #ffffff;
  --grad-a: #4b63d6;
  --grad-b: #2e44b3;
  --accent-ring: rgba(38, 57, 158, 0.25);
  --accent-glow: rgba(38, 57, 158, 0.9);
  --danger: #bb2f28;
  --danger-soft: #fbe3e1;
  --success: #1c7048;
  --success-soft: #ddf0e4;
  --warning: #8a5d00;
  --warning-soft: #f6e6c8;
  --flight: #1f6fb0;
  --flight-soft: #dceaf7;
  --mode-train: #159960;
  --mode-train-soft: #dbf3e6;
  --mode-car: #c2670a;
  --mode-car-soft: #f8e6cf;
  --mode-boat: #0e8fa0;
  --mode-boat-soft: #d8eff2;
  --shadow: 0 1px 2px rgba(10, 14, 24, 0.05), 0 3px 10px rgba(10, 14, 24, 0.06);
  --lift: 0 1px 2px rgba(10, 14, 24, 0.07), 0 6px 16px rgba(10, 14, 24, 0.06);
  --radius: 8px;
  /* Vertical space between consecutive cards on the Stops timeline
     (stops and legs alike) -- one shared value so every gap is
     actually the same size, and the connector arrow between them
     (assets/style.css, .timeline > * ::after) centers itself against
     this instead of a separately-tracked number. */
  --card-gap: 32px;
  --header-bg: linear-gradient(135deg, #14192b, #090c16);
  --header-text: #eef0f2;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --map-color: #171b24;
  --map-opacity: 0.045;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0e16;
    --bg-elevated: #141a29;
    --text: #e7eaf0;
    --text-muted: #939ba9;
    --border: #262d3f;
    --accent: #6f85e8;
    --accent-soft: #1f2a4a;
    --accent-text: #a9b6f2;
    --danger: #e2685c;
    --danger-soft: #3a1f1c;
    --success: #6cc296;
    --success-soft: #1a3327;
    --warning: #e0ab54;
    --warning-soft: #3a2c14;
    --flight: #6fb3f0;
    --flight-soft: #163350;
    --mode-train: #58d69a;
    --mode-train-soft: #123625;
    --mode-car: #f0a355;
    --mode-car-soft: #3a2410;
    --mode-boat: #52c7d8;
    --mode-boat-soft: #103338;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.28);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
    --header-bg: linear-gradient(135deg, #090c16, #05060b);
    --header-text: #e7eaf0;
    --map-color: #a9b6f2;
    --map-opacity: 0.055;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e16;
  --bg-elevated: #141a29;
  --text: #e7eaf0;
  --text-muted: #939ba9;
  --border: #262d3f;
  --accent: #6f85e8;
  --accent-soft: #1f2a4a;
  --accent-text: #a9b6f2;
  --danger: #e2685c;
  --danger-soft: #3a1f1c;
  --success: #6cc296;
  --success-soft: #1a3327;
  --warning: #e0ab54;
  --warning-soft: #3a2c14;
  --flight: #6fb3f0;
  --flight-soft: #163350;
  --mode-train: #58d69a;
  --mode-train-soft: #123625;
  --mode-car: #f0a355;
  --mode-car-soft: #3a2410;
  --mode-boat: #52c7d8;
  --mode-boat-soft: #103338;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.28);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3);
  --header-bg: linear-gradient(135deg, #090c16, #05060b);
  --header-text: #e7eaf0;
  --map-color: #a9b6f2;
  --map-opacity: 0.055;
}

@property --nav-w { syntax: "<length>"; inherits: true; initial-value: 64px; }
:root {
  /* Left-hand nav width: a slim labelled icon rail on phones, then the
     full rail (expanded) or an icon-only one (collapsed) from tablet up
     -- which of those two is chosen by html[data-nav], set from the
     user's saved choice or the screen width (index.html / app.js). */
  --nav-w: 50px;
  --nav-total: calc(var(--nav-w) + env(safe-area-inset-left, 0px));
  --rail-accent: #9fb2ff;
}
@media (min-width: 640px) {
  :root { --nav-w: 72px; }
  html[data-nav="expanded"] { --nav-w: 232px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { transition: --nav-w 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* No native pull-to-refresh / rubber-band at the page edge: on Android
   Chrome a pull-down at the top reloads the whole app (and throws away
   whatever you were doing), and on iOS the bounce exposes the light page
   background above the dark top bar. The app has its own pull-to-refresh
   instead (app.js), which refreshes the data without a reload. */
html { overscroll-behavior-y: none; }
/* Tapping twice quickly on a button/link shouldn't zoom the page -- pinch
   zoom stays available, which is why the viewport meta no longer
   forbids it. */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
[hidden] { display: none !important; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
/* The nav lives in a fixed rail down the left edge (see .nav-rail), so
   the page itself just keeps that strip clear -- the top bar, content
   and banners all sit in what's left of the viewport. --nav-offset is 0
   until the rail is actually showing (not on the sign-in screen). */
body { --nav-offset: 0px; }
body.has-nav { --nav-offset: var(--nav-total); padding-left: var(--nav-total); }
body.has-nav .topbar { padding-left: 16px; }
/* Freezes the page behind the open chat panel -- position:fixed with
   top offset by the scroll position (set/restored in app.js) is the
   standard trick for actually preventing background scroll on mobile,
   where overflow:hidden alone doesn't reliably stop it. */
body.scroll-locked { position: fixed; left: 0; right: 0; }

.bg-world-map {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--map-color);
}
.bg-world-map svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115%;
  min-width: 760px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: var(--map-opacity);
}
@media (max-width: 640px) {
  .bg-world-map svg { width: 220%; min-width: 0; }
}

.offline-banner {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--warning-soft);
  color: var(--warning);
  border-bottom: 1px solid var(--border);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
  background: var(--header-bg);
  color: var(--header-text);
}
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trip-select {
  appearance: none;
  background: rgba(255,255,255,0.1);
  color: var(--header-text);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  max-width: 38vw;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-select option { color: #171b24; }
.loading { padding: 48px 20px; text-align: center; color: var(--text-muted); }

main { max-width: 840px; margin: 0 auto; padding: 16px; }
@media (max-width: 639px) { main { padding: 12px; } }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
main.tab-fade-in { animation: tabFadeIn 0.22s ease; }
@media (prefers-reduced-motion: reduce) { main.tab-fade-in { animation: none; } }

.hero {
  position: relative;
  background: var(--header-bg);
  color: var(--header-text);
  border-radius: 14px;
  padding: 26px 22px 22px;
  margin-bottom: 16px;
  box-shadow: var(--lift);
  overflow: hidden;
}
.hero.hero-photo {
  background-size: cover;
  background-position: center;
}
.hero-emoji { font-size: 18px; line-height: 1; opacity: 0.9; }
.hero-emoji-icon { width: 26px; height: 26px; }
.hero-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  margin: 8px 0 3px;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero-dest { font-size: 14px; opacity: 0.9; margin-bottom: 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
.hero-pill {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 5px 11px;
}

.trip-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.trip-progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  flex-shrink: 0;
}
.trip-progress-day { font-family: var(--font-mono); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.count-up { font-variant-numeric: tabular-nums; }
.trip-progress-where { font-size: 12.5px; opacity: 0.75; margin-top: 1px; }


.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-muted);
  margin: 22px 2px 10px;
}
.section-title:first-child { margin-top: 4px; }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.card-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.card-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.card-detail { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

.progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  margin-top: 10px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }

.person-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.person-progress-row:first-of-type { border-top: 1px solid var(--border); }
.person-progress-label { font-size: 13px; font-weight: 600; flex-shrink: 0; width: 56px; }
.person-progress-track { flex: 1; margin-top: 0; }
.person-progress-count { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Finances tab */
.finance-summary-grid { display: flex; gap: 18px; }
.finance-summary-cell { flex: 1; padding: 4px 0; }
.finance-summary-label { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.finance-summary-value { font-family: var(--font-mono); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--accent-text); letter-spacing: -0.01em; }
.finance-summary-diff {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.finance-summary-diff.over { color: var(--danger); }
.finance-summary-diff.under { color: var(--success); }
.finance-balance-line { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 8px 0; }
.finance-balance-amount { font-family: var(--font-mono); }
.finance-toggle-row { margin: 4px 0 10px; }
.finance-toggle-note { margin-bottom: 10px; }
.finance-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}
.finance-item-row-divider { border-top: 1px solid var(--border); }
.finance-item-main { min-width: 0; }
.finance-item-name { font-weight: 600; font-size: 14px; }
.finance-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.finance-item-amounts { text-align: right; flex-shrink: 0; }
.finance-item-amount { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.finance-item-amount.is-est { color: var(--text-muted); font-weight: 600; }
.finance-item-est-note { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.finance-item-paidby { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.finance-unconverted-note { margin-top: 10px; }
.finance-list-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.finance-list-head-row .section-title { margin-bottom: 0; }
.finance-list-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.finance-tool-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.finance-cashref-card { margin-top: 10px; }
.finance-cashref-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  font-variant-numeric: tabular-nums;
}
.finance-cashref-row span:not(.finance-cashref-currency) { text-align: right; font-family: var(--font-mono); font-size: 13px; }
.finance-cashref-currency { font-weight: 700; display: flex; flex-direction: column; }
.finance-cashref-country { font-weight: 500; font-size: 11px; color: var(--text-muted); text-transform: none; letter-spacing: normal; }
.finance-budget { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.finance-budget-label { font-size: 12.5px; color: var(--text-muted); }
.finance-budget-over { color: var(--danger); font-weight: 600; }
.progress-fill.is-over { background: var(--danger); }
.finance-paid-total { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.finance-category-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13.5px;
}
.finance-category-total { font-family: var(--font-mono); font-weight: 600; }
/* The country total sits as a footer under that country's rows, not a
   header above them -- moved per feedback that a leading banner read
   wrong before you'd even seen the line items it was summing. */
.finance-country-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px -16px 0;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}
.finance-country-heading:last-child { margin-bottom: -14px; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.finance-country-total { font-family: var(--font-mono); font-weight: 700; text-transform: none; letter-spacing: normal; }
.finance-group-gap { height: 4px; }
.finance-item-secondary { font-size: 12px; color: var(--text-muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
/* Same .booked-badge pill used for flights/hotels elsewhere -- this is
   just also a click-to-toggle button here, so it needs button chrome
   reset on top of the badge's own look. */
.finance-paid-toggle {
  appearance: none;
  border: none;
  font-family: inherit;
  margin-top: 6px;
  cursor: pointer;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.check-row:last-child { border-bottom: none; }
.check-row input { width: 19px; height: 19px; accent-color: var(--accent); flex-shrink: 0; }
.check-row.checked .task-text { color: var(--text-muted); text-decoration: line-through; }
/* Destructive suggestions (delete) get their own tint and checkbox
   color so a permanent action doesn't blend in with ordinary ones in
   the same list. */
.check-row-danger { background: var(--danger-soft); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.check-row-danger input { accent-color: var(--danger); }
.card-warning {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 4px;
}
.card-warning .mode-icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

.empty-state { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 14px; }
.auth-gate { display: flex; justify-content: center; padding: 40px 16px; }

.when-badge {
  font-size: 11px;
  font-weight: 800;
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.when-urgent { color: var(--danger); background: var(--danger-soft); }
.when-soon { color: var(--warning); background: var(--warning-soft); }
.when-later { color: var(--success); background: var(--success-soft); }

/* ---------- left-hand navigation rail ---------- */

/* A fixed full-height rail down the left edge on every screen size:
   dark like the top bar so the two read as one frame around the
   content. Phone: a slim icon-over-label rail. Tablet/desktop: the full
   labelled rail with grouped sections, or -- collapsed -- icons only
   with tooltips. No backdrop-filter/transform on purpose: either would
   turn this into the containing block for the (fixed) chat panel
   nested inside it. */
.nav-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nav-total);
  padding-left: env(safe-area-inset-left, 0px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--header-bg);
  color: rgba(238, 240, 242, 0.66);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 10px 0 30px -18px rgba(8, 10, 20, 0.5);
}

.nav-rail-head {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: env(safe-area-inset-top, 0px) 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.nav-rail-logo {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f67da, #26399e);
  color: #fff;
  font: 800 16px/1 var(--font-display);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.nav-rail-trip { min-width: 0; display: none; }
.nav-rail-trip-name {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-rail-trip-sub {
  margin-top: 1px;
  font-size: 11.5px;
  color: rgba(238, 240, 242, 0.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tabbar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar { display: none; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-group-label { display: none; }

.tab {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 7px;
  border-radius: 11px;
  font-family: var(--font);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.12s ease, color 0.15s ease; }
.tab-icon svg { width: 100%; height: 100%; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tab:active .tab-icon { transform: scale(0.88); }
.tab.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tab.active .tab-icon { color: var(--rail-accent); }
/* The notch on the rail's inner edge -- where the page meets the rail --
   marks the current section. */
.tab.active::before {
  content: "";
  position: absolute;
  right: -3px; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--rail-accent);
  box-shadow: 0 0 10px var(--rail-accent);
}
.tab:focus-visible, .nav-toggle:focus-visible, .chat-bar:focus-visible {
  outline: 2px solid var(--rail-accent);
  outline-offset: -2px;
}
/* Needs-attention count (overdue checklist items) -- a small pill on the
   icon's corner in the compact rails, inline at the end of the row when
   expanded. */
.tab-badge {
  position: absolute;
  top: 3px; right: 6px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #e2685c;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #0e1220;
}

.nav-rail-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-toggle {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(238, 240, 242, 0.6);
  font: 600 12.5px var(--font);
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s ease; }
html[data-nav="collapsed"] .nav-toggle svg { transform: rotate(180deg); }
.nav-toggle-label { display: none; }

/* Hover/focus label for the icon-only rail -- one floating element
   (app.js) rather than a pseudo-element per tab, since the rail
   scrolls and would clip anything that pokes out sideways. */
.nav-tip {
  position: fixed;
  z-index: 60;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: #0b0e1a;
  color: #fff;
  font: 600 12.5px var(--font);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Tablet and up: wider rail, label beside icon, trip header. */
@media (min-width: 640px) {
  .nav-rail-head { padding-left: 20px; }
  .tabbar { padding: 8px 10px; }
  .nav-toggle { display: flex; }
  .tab {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    height: 44px;
    padding: 0;
    font-size: 13.5px;
    letter-spacing: 0;
  }
  .tab-label { display: none; }
  .tab-icon { width: 20px; height: 20px; }
  .tab.active::before { right: -10px; }
  .tab-badge { top: 5px; right: 11px; }
  .nav-rail-foot { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }

  html[data-nav="expanded"] .nav-rail-trip { display: block; }
  html[data-nav="expanded"] .tab { justify-content: flex-start; padding: 0 12px; height: 40px; }
  html[data-nav="expanded"] .tab-label { display: block; flex: 1; text-align: left; }
  html[data-nav="expanded"] .tab-badge { position: static; margin-left: auto; box-shadow: none; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 6px; }
  html[data-nav="expanded"] .nav-group-label {
    display: block;
    padding: 14px 12px 6px;
    font: 700 10px/1 var(--font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(238, 240, 242, 0.36);
  }
  html[data-nav="expanded"] .nav-group + .nav-group { margin-top: 0; padding-top: 0; border-top: none; }
  html[data-nav="expanded"] .nav-group:first-child .nav-group-label { padding-top: 8px; }
  html[data-nav="expanded"] .nav-toggle { justify-content: flex-start; padding: 0 12px; }
  html[data-nav="expanded"] .nav-toggle-label { display: inline; }
}

/* ---------- chat dock ---------- */

/* The launcher is the rail's "Ask" button (bottom of the left-hand nav):
   icon-only in the compact rails, icon + label when expanded. The panel
   it opens is the only part that floats -- a bottom sheet on a phone, a
   corner card from tablet up -- and always stops short of the rail so
   navigation stays reachable while it's open. --kb-offset/--vvh are the
   real-measurement variables app.js keeps synced with the on-screen
   keyboard. */
.chat-dock { position: static; width: 100%; }
.chat-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  appearance: none;
  border: none;
  border-radius: 12px;
  /* Brighter than the dark rail around it, with a white ring and a glow, so it reads as
     the one thing to press rather than part of the background. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--grad-a) 55%, #ffffff), var(--grad-a));
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 18px 2px color-mix(in srgb, var(--grad-a) 60%, #b9c4ff),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.chat-bar:hover { filter: brightness(1.1); }
.chat-bar:active { transform: scale(0.97); }
.chat-bar.is-open { background: #ffffff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 18px 2px color-mix(in srgb, var(--grad-a) 45%, #b9c4ff); }
.chat-bar.is-open .mode-icon { color: color-mix(in srgb, var(--grad-a) 80%, #000); }
.chat-bar .mode-icon { color: #fff; width: 22px; height: 22px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.chat-bar-label { display: none; }
@media (min-width: 640px) {
  html[data-nav="expanded"] .chat-bar-label { display: inline; }
}
/* The open panel on a phone: a bottom sheet beside (not over) the rail. */
.chat-panel {
  position: fixed;
  left: var(--nav-total);
  right: 0;
  bottom: var(--kb-offset, 0px);
  width: auto;
  display: flex;
  flex-direction: column;
  /* Capped to the real visible area (--vvh, synced with
     window.visualViewport) as well as 72vh -- with the keyboard open,
     --vvh shrinks a lot and wins, so the panel never asks for more
     height than is actually visible above the keyboard. */
  max-height: min(72vh, calc(var(--vvh, 100vh) - 90px));
  background: var(--bg-elevated);
  border-top: 3px solid var(--accent-2);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.32);
  z-index: 35;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 800;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.chat-panel-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
}
.chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.chat-thread-empty { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.task-row.pending { opacity: 0.65; }
.chat-usage { padding: 4px 14px 0; font-size: 12px; color: var(--text-muted); }
.chat-usage.low { color: var(--warning); }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-row .form-input { flex: 1; }
.chat-input-row { align-items: flex-end; }
/* Standard chat-input sizing: starts at one line tall (matching every
   other text input, not a permanently oversized box), then grows with
   what's actually typed via JS on input, up to a cap, then scrolls
   internally -- the same behavior as iMessage/Slack/etc.'s input. */
/* The box, the attach button and Ask are one height, so the row reads as one line. */
.chat-input-row { --chat-ctl-h: 36px; }
.chat-input-row .chat-input-textarea {
  resize: none;
  box-sizing: border-box;
  min-height: var(--chat-ctl-h);
  height: var(--chat-ctl-h);
  max-height: 140px;
  padding-top: 7px; padding-bottom: 7px;
  line-height: 20px;
  font-family: var(--font);
}
.chat-input-row .btn, .chat-input-row .chat-attach-btn { box-sizing: border-box; height: var(--chat-ctl-h); min-height: var(--chat-ctl-h); padding-top: 0; padding-bottom: 0; }

.chat-attach-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 9px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-attach-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
.chat-attach-btn .mode-icon { width: 18px; height: 18px; }

/* A small strip above the input row, only shown once a photo's been
   picked -- same idea as any chat app's attach preview: see what
   you're about to send, and a clear way to back out before it does. */
.chat-attach-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.chat-attach-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.chat-attach-remove {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: auto;
}
.chat-attach-remove:hover { color: var(--danger); }

/* The photo as it actually appears in the sent chat bubble -- capped
   so a tall confirmation screenshot doesn't take over the thread. */
.ask-msg-photo {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.ask-msg-photo-caption { margin-top: 2px; }

/* The dot launcher (.chat-dock/.chat-bar above) is already the same on
   every screen size. Only the OPEN panel differs at desktop width:
   instead of the mobile full-width bottom sheet, it becomes the
   conventional floating card every chat widget uses on desktop
   (Intercom, Drift, Zendesk...), anchored in the same corner as the
   dot instead of stretching edge to edge. */
@media (min-width: 640px) {
  .chat-panel {
    right: auto;
    left: calc(var(--nav-total) + 14px);
    bottom: 14px;
    width: 380px;
    /* A fixed height (standard for a floating widget -- Intercom,
       Drift, etc. all size the panel once and keep it stable rather
       than reflowing the page as messages arrive), capped so it never
       exceeds what's actually visible. */
    height: 640px;
    max-height: calc(100vh - 28px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--lift);
    overflow: hidden;
  }
}

.icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn .mode-icon { vertical-align: 0; }
.icon-edit:hover { color: var(--accent-text); border-color: var(--accent-text); }
.icon-delete:hover { color: var(--danger); border-color: var(--danger); }

.add-row-btn {
  display: block;
  width: 100%;
  appearance: none;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--accent-text);
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  font-family: var(--font);
}
.add-row-btn:hover { border-color: var(--accent-text); background: var(--accent-soft); }

/* ---------- modal / form system ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  /* Lifted clear of the on-screen keyboard (see --kb-offset in app.js)
     so a bottom sheet's Save button isn't left behind it. */
  bottom: var(--kb-offset, 0px);
  overscroll-behavior: contain;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
}
.modal {
  background: var(--bg-elevated);
  color: var(--text);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  max-height: min(88vh, calc(var(--vvh, 100vh) - 16px));
  /* Only the body scrolls -- title and footer stay put, so a long form
     (transport legs now have 10+ fields) never scrolls the Save button
     out of reach along with everything else. */
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .modal { border-radius: 16px; }
}
.modal-title { font-size: 16px; font-weight: 800; padding: 18px 18px 4px; flex-shrink: 0; }
.wizard-progress { display: flex; gap: 4px; padding: 0 18px; flex-shrink: 0; }
.wizard-progress-seg { flex: 1; height: 4px; border-radius: 999px; background: var(--border); transition: background 0.2s; }
.wizard-progress-seg.filled { background: var(--accent); }
.wizard-progress-seg.current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wizard-step-label { font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 8px 18px 10px; flex-shrink: 0; }
.wizard-skip-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

/* Tappable emoji+label cards -- pace/budget/interests in the trip
   wizard's Vibe step. Grid wraps to fit whatever's in it (3 pace cards,
   3 budget cards, or 7 interest cards) rather than a fixed column count. */
.wizard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.wizard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.wizard-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.wizard-card:active { transform: translateY(0); }
.wizard-card.selected { border-color: var(--accent-text); background: var(--accent-soft); }
.wizard-card-emoji { line-height: 1; }
.wizard-card-emoji svg { width: 26px; height: 26px; vertical-align: 0; }
.wizard-card-label { font-size: 12px; font-weight: 700; color: var(--text); }
.wizard-card.selected .wizard-card-label { color: var(--accent-text); }
.wizard-card.selected .wizard-card-emoji { color: var(--accent-text); }
/* Selected-state badge -- a color change alone (border/background) is
   easy to miss at a glance and relies on color alone to read "picked,"
   so every selectable tile in the wizard also gets an explicit
   checkmark badge, same as a real checkbox would show. */
.wizard-card-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-elevated);
}
.wizard-card-check svg { width: 12px; height: 12px; }
.wizard-card-check-sm { top: -5px; right: -5px; width: 16px; height: 16px; }
.wizard-card-check-sm svg { width: 10px; height: 10px; }

/* Collapsed-by-default row that expands into the emoji grid below --
   keeps the decorative icon choice from competing with the trip name
   (the one field on this screen that actually matters) for attention. */
.wizard-emoji-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.wizard-emoji-toggle:hover { border-color: var(--accent); color: var(--text); }
.wizard-emoji-toggle-icon { display: inline-flex; }
.wizard-emoji-toggle-icon svg { width: 18px; height: 18px; vertical-align: -4px; }
.wizard-emoji-toggle span:nth-child(2) { flex: 1; }
.wizard-emoji-toggle-chevron { transition: transform 0.15s ease; margin-left: auto; }
.wizard-emoji-toggle-chevron.open { transform: rotate(180deg); }

/* Trip emoji picker -- just the icon, bigger and denser than the
   label+icon vibe cards since there's nothing else to show per option. */
.wizard-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.wizard-emoji-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  text-align: center;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.wizard-emoji-option svg { width: 22px; height: 22px; vertical-align: 0; }
.wizard-emoji-option:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.wizard-emoji-option:active { transform: translateY(0); }
.wizard-emoji-option.selected { border-color: var(--accent-text); background: var(--accent-soft); color: var(--accent-text); }

/* Compact add-another chips -- travelers and destinations in the
   wizard. Deliberately not the Settings-tab .settings-country-row
   pattern: those are full-width edit rows for a handful of persistent
   items, these are meant to be added several in a row without each one
   pushing the add-fields further down the modal. */
.wizard-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-text);
  max-width: 100%;
}
.wizard-chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.wizard-chip-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wizard-chip-remove {
  background: none;
  border: none;
  padding: 0 2px;
  margin-left: 2px;
  cursor: pointer;
  color: var(--accent-text);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.modal-body { padding: 10px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior-y: contain; flex: 1; min-height: 0; }
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row-anchor { position: relative; }
.places-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--lift);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  z-index: 10;
}
.places-ac-item {
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.places-ac-item:last-child { border-bottom: none; }
.places-ac-item:hover { background: var(--accent-soft); }
.form-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.form-input {
  font-family: var(--font);
  font-size: 14.5px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 3px var(--accent-soft);
}
textarea.form-input { resize: vertical; min-height: 60px; }
.form-multiselect {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  padding: 2px 10px;
}
.form-multiselect-option { padding: 9px 2px; font-size: 14.5px; }
.form-multiselect-option input { width: 17px; height: 17px; }
.modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.modal-spacer { flex: 1; }
.btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13.5px;
  font-family: var(--font);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-outline { border: 1px solid var(--border); color: var(--accent-text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
/* Nothing styled :disabled before -- a running action (AI review,
   any "...ing" button) looked identical to an idle one apart from its
   text. This is a real, visible "working" state on every button in
   the app, not just one. */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.toast {
  position: fixed;
  left: calc(50% + var(--nav-offset, 0px) / 2);
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: var(--danger); color: #fff; }

/* ---------- checklists ---------- */

.checklist-toolbar { display: flex; gap: 6px; margin-bottom: 12px; }
.seg-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 13px;
}
.seg-btn.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-text); }

.checklist-card { padding-bottom: 8px; transition: outline-color 0.1s ease, background-color 0.1s ease; outline: 2px solid transparent; outline-offset: -2px; }
.checklist-progress-track { height: 5px; margin: 8px 0 4px; }
.checklist-source-tag { font-size: 11px; color: var(--text-muted); background: var(--border); border-radius: 6px; padding: 2px 6px; }

/* Drag a checklist item onto another category's card to move it there
   (Pointer Events, not HTML5 drag-and-drop, so it works with touch on
   mobile too). The handle is a dedicated grip, not the row itself, so
   tapping/clicking the rest of the row still just toggles done. */
.checklist-drag-handle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  margin-left: -4px;
}
.checklist-item-dragging { opacity: 0.35; }
.checklist-drag-ghost {
  position: fixed;
  z-index: 9999;
  transform: translate(-50%, -50%) rotate(-1deg);
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-text);
  border-radius: 8px;
  box-shadow: var(--lift);
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checklist-drop-target {
  outline-color: var(--accent);
  background: var(--accent-soft);
}
/* Sits exactly between the two rows an item would land between --
   without this, "move between categories" and "rank within a
   category" look identical while dragging (just a highlighted card,
   no indication of WHERE in it). */
.checklist-drop-line {
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin: 2px 0;
}

.task-row { align-items: flex-start; }
.task-row input { margin-top: 2px; }
.task-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.task-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-text { font-size: 14.5px; line-height: 1.35; word-break: break-word; }

.avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
/* One neutral accent shared by every real traveler -- a fixed color per
   name isn't possible for an open-ended per-trip list. */
.avatar-traveler { background: var(--accent); }
/* Assigned to no one in particular -- "everyone"/unassigned. */
.avatar-everyone { background: var(--text-muted); }

/* ---------- stops ---------- */

.stops-summary {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.up-next-card .card-detail { line-height: 1.5; }

.ask-card { margin-bottom: 16px; }
.ai-checked-note { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* A real button, not a muted caption -- bordered so it reads as
   something to tap, not leftover metadata. */
.ai-result-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 10px 12px;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.ai-result-toggle:hover { border-color: var(--accent-text); }
.ai-result-toggle .chevron-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent-text);
  transition: transform 0.15s ease;
}
.ai-result-toggle.expanded .chevron-icon { transform: rotate(180deg); }
.ai-result-toggle-meta {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
}

/* Same "bordered row with a chevron" language as .ai-result-toggle --
   one consistent way the app says "there's more, tap to see it". */
.checklist-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.checklist-expand-btn:hover { background: var(--accent-soft); }
.checklist-expand-btn .chevron-icon { width: 14px; height: 14px; transition: transform 0.15s ease; }
.checklist-expand-btn.expanded .chevron-icon { transform: rotate(180deg); }

.ask-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ask-msg { display: flex; }
.ask-msg-user { justify-content: flex-end; }
.ask-msg-assistant { justify-content: flex-start; }
.ask-msg-bubble {
  max-width: 88%;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 9px 13px;
  border-radius: 12px;
}
.ask-msg-user .ask-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.ask-msg-assistant .ask-msg-bubble {
  background: color-mix(in srgb, var(--border) 35%, var(--bg-elevated));
  color: var(--text);
  border-bottom-left-radius: 3px;
}
/* Shared by every spot that renders renderMarkdownish() output --
   Ask's assistant bubbles, the itinerary review, the budget narrative. */
.ask-msg-assistant .ask-msg-bubble p,
.md-content p { margin: 0 0 12px; }
.ask-msg-assistant .ask-msg-bubble p:last-child,
.md-content p:last-child { margin-bottom: 0; }
.ask-msg-assistant .ask-msg-bubble ul,
.md-content ul,
.ask-msg-assistant .ask-msg-bubble ol,
.md-content ol { margin: 0 0 12px; padding-left: 20px; }
.ask-msg-assistant .ask-msg-bubble ul:last-child,
.md-content ul:last-child,
.ask-msg-assistant .ask-msg-bubble ol:last-child,
.md-content ol:last-child { margin-bottom: 0; }
.ask-msg-assistant .ask-msg-bubble li,
.md-content li { margin-bottom: 5px; }
.ask-msg-assistant .ask-msg-bubble li:last-child,
.md-content li:last-child { margin-bottom: 0; }
/* Same small-caps label language as .section-title-sm ("Day plan",
   "Activities") -- an AI reply's own headings read as native to the
   app instead of a raw markdown dump. */
.ask-msg-assistant .ask-msg-bubble .md-heading,
.md-content .md-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent-text);
  margin: 18px 0 8px;
}
.ask-msg-assistant .ask-msg-bubble .md-heading:first-child,
.md-content .md-heading:first-child { margin-top: 0; }
/* Full text color, not the muted caption gray .card-detail defaults
   to -- this is the report itself, not a footnote. */
.md-content { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ask-msg-thinking .ask-msg-bubble { opacity: 0.6; font-style: italic; }
.ask-input-row { margin-top: 10px; }
.route-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.route-strip::-webkit-scrollbar { display: none; }
.route-chip {
  flex-shrink: 0;
  appearance: none;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  white-space: nowrap;
}
.route-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.route-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 12px; }
.stop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 4px solid var(--accent);
  box-shadow: var(--lift);
  overflow: hidden;
}
.stop-photo {
  position: relative;
  margin: -14px -16px 0;
  height: 210px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.stop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stop-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
.stop-card .card-title { font-size: 17px; }
.stop-card-head { align-items: center; }
.stop-title-wrap { flex: 1; min-width: 0; }
.stop-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.stop-ai-check-btn { white-space: nowrap; }
.stop-plan-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stop-toggle-btn {
  appearance: none;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 8px;
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.stop-toggle-btn .expand-chevron { transition: transform 0.15s; }
.stop-toggle-btn .expand-chevron.open { transform: rotate(180deg); }
/* display:contents keeps this wrapper out of the card's flex layout
   (its children lay out as if they were direct children of the card)
   while still giving the whole visible summary one click target. */
.stop-card-summary { display: contents; }
.stop-card-clickable > * { cursor: pointer; }
.stop-card-clickable:hover .stop-toggle-btn { color: var(--accent-text); border-color: var(--accent-text); }
.stop-body { display: flex; flex-direction: column; gap: 10px; }
.stop-body.open { margin-top: 10px; }
/* Same fix as the country-group-body one: this shares the generic
   .expand-panel class (max-height: 3000px cap), which a stop with a
   full day plan + several activities + comments can exceed now that
   Details starts open by default -- silently clipping the rest,
   exactly like the earlier "why is Thailand cut off" bug. */
.stop-body.open {
  max-height: none;
}
.seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.stop-panel { display: flex; flex-direction: column; gap: 10px; }

/* The app's one collapse/expand pattern, reused for stop details and leg details */
.expand-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  border: 1px solid var(--accent-text);
  background: var(--bg-elevated);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  white-space: nowrap;
  margin-top: 10px;
}
.expand-chevron { display: inline-block; transition: transform 0.15s; }
.expand-chevron.open { transform: rotate(180deg); }

/* Shared reveal animation for anything gated behind a Details/Show
   toggle (stop details, leg details, country groups) -- a real expand
   instead of an instant display:none swap. */
.expand-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.expand-panel.open {
  max-height: 3000px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .expand-panel { transition: none; }
}
.section-title-sm {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.btn-small { padding: 7px 12px; font-size: 12.5px; }

.vote-buttons { display: flex; gap: 8px; }
.vote-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 14px;
}
.vote-btn.active.vote-up { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.vote-btn.active.vote-down { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }

.comment-thread, .night-suggestions { display: flex; flex-direction: column; gap: 8px; }
.comment-row, .suggestion-row {
  font-size: 13.5px;
  line-height: 1.4;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--border) 35%, var(--bg-elevated));
  border-radius: 9px;
}
.comment-author { font-weight: 700; margin-right: 6px; }

.inline-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-add-row .form-input { flex: 1; min-width: 120px; margin: 0; }
.suggest-nights-input { flex: 0 0 90px !important; min-width: 90px !important; }

/* All direct children of the timeline (stops, legs, country banners,
   country group bodies) get their spacing from ONE fixed margin-bottom
   below, not flex `gap` -- gap collapsed inconsistently once a card
   type (legs) also carried its own margin on top of it, so the same
   visual gap came out a different size depending on what followed
   what. One rule, applied to every card type, is what actually
   guarantees a uniform rhythm down the page -- and it's also what the
   connector arrow below is centered against, so gaps and arrows can't
   drift out of sync with each other. */
.timeline { display: flex; flex-direction: column; }
.timeline-item { margin: 0; }

.timeline > .timeline-item,
.timeline > .leg-pass-wrap,
.timeline > .country-section,
.country-group-body > .timeline-item,
.country-group-body > .leg-pass-wrap {
  margin-bottom: var(--card-gap);
  position: relative;
}
.timeline > .timeline-item:last-child,
.timeline > .leg-pass-wrap:last-child,
.timeline > .country-section:last-child,
.country-group-body > .timeline-item:last-child,
.country-group-body > .leg-pass-wrap:last-child {
  margin-bottom: 0;
}

/* A small connector between consecutive cards (stop or leg) within the
   same list -- a quiet visual cue that you're moving through a
   sequence as you scroll, not just a stack of unrelated boxes. Pure
   CSS (a sibling pseudo-element), so it only needs the card wrapper
   classes marked relative, no extra markup per gap. Centered in
   --card-gap exactly (badge height 22px, so equal clearance on both
   sides) -- if that variable ever changes, this stays centered
   automatically instead of needing its own number kept in sync.
   No connector after :last-child, matching the margin rule above --
   there's no gap there to sit in. */
.timeline > .timeline-item:not(:last-child)::after,
.timeline > .leg-pass-wrap:not(:last-child)::after,
.country-group-body > .timeline-item:not(:last-child)::after,
.country-group-body > .leg-pass-wrap:not(:last-child)::after {
  content: "⌄";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * (var(--card-gap) + 22px) / 2);
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
  box-shadow: var(--shadow);
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .timeline > .timeline-item:not(:last-child)::after,
  .timeline > .leg-pass-wrap:not(:last-child)::after,
  .country-group-body > .timeline-item:not(:last-child)::after,
  .country-group-body > .leg-pass-wrap:not(:last-child)::after {
    animation: connector-bob 1.8s ease-in-out infinite;
  }
}
@keyframes connector-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 3px); }
}
/* Each country is its own section: the divider inside it is
   position: sticky, so while you scroll through that country's own
   stops it stays pinned just under the top bar, and the moment you
   scroll past the bottom of THIS section (the wrapper below), it can
   no longer stick (a sticky element can't stick past its own
   container's edge) -- so the next section's own sticky divider
   takes over right as it reaches the top. That handoff is native
   browser behavior, not something driven by JS. */
.country-section { display: flex; flex-direction: column; gap: 16px; }
.country-group-body { display: flex; flex-direction: column; }

.booked-badge {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.booked-badge.is-booked { background: var(--success-soft); color: var(--success); }
.booked-badge.not-booked { background: var(--warning-soft); color: var(--warning); }
.leg-pass-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 4px;
}

/* Leg row: a real boarding pass -- a colored header strip with the
   route as big gate-style codes, a body of always-visible fields
   (no toggle -- a ticket doesn't hide its own details), and a torn
   stub at the bottom with a barcode and reference code. */
.leg-pass {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.leg-pass-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}
.leg-pass-route-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.leg-pass-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.leg-pass-mode-badge .mode-icon { width: 16px; height: 16px; color: #fff; }
.leg-pass-mode-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  margin-right: 2px;
}
.leg-pass-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leg-pass-code-arrow { font-size: 16px; opacity: 0.75; flex-shrink: 0; display: inline-flex; align-items: center; }
.leg-pass-glyph { width: 18px; height: 18px; }
.leg-pass-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.leg-pass-route-name {
  padding: 12px 20px 0;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.leg-pass-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 4px 20px 16px;
}
.leg-pass-field { display: flex; flex-direction: column; gap: 4px; min-width: 68px; }
.leg-pass-field-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.leg-pass-field-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.leg-pass-field-value .chip-vs-est { font-family: var(--font); font-weight: 400; font-size: 12px; }

.leg-pass-notes {
  padding: 0 20px 18px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}

.leg-pass-stub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 3px dashed var(--border);
}
.leg-pass-barcode {
  flex: 1;
  min-width: 0;
  height: 18px;
  background: repeating-linear-gradient(
    90deg,
    var(--text) 0px, var(--text) 2px,
    transparent 2px, transparent 3px,
    var(--text) 3px, var(--text) 4px,
    transparent 4px, transparent 6px,
    var(--text) 6px, var(--text) 9px,
    transparent 9px, transparent 11px,
    var(--text) 11px, var(--text) 12px,
    transparent 12px, transparent 15px
  );
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}
.leg-pass-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mode-icon { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -3px; }
.leg-pass-mode-icon { color: var(--accent-text); flex-shrink: 0; }

/* Hierarchy in the Stops tab: Country (this banner, top level) >
   Stop/city (photo card) > Activity (row inside a stop's Details).
   Each level gets a different structural treatment -- not just a
   different color -- so the nesting is legible at a glance. */
.country-divider {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  margin: 0;
  padding: 16px 18px 16px 20px;
  background: var(--bg-elevated);
  /* Full outline picks up the same per-country color as the stripe
     (soft tint, not full-strength) so the whole card reads as that
     country's banner, not just the left edge. */
  border: 1.5px solid color-mix(in srgb, var(--country-accent, var(--accent)) 45%, var(--border));
  border-radius: 10px;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--country-accent, var(--accent)) 16%, transparent), var(--lift);
  /* The accent stripe is a clipped pseudo-element, not a border-left --
     a border segment sitting next to a border-radius corner leaves a
     hairline seam where the page behind can show through once this
     layer is GPU-composited (see transform below). Painting it inside
     an overflow:hidden box means there's no seam to begin with. */
  overflow: hidden;
  isolation: isolate;
  /* iOS Safari/WebKit has a known repaint glitch with position: sticky
     elements that have their own border-radius + shadow -- a sliver of
     whatever just scrolled past can flash/ghost at the sticky edge.
     `contain: paint` is the actual fix (clips any stray repaint to this
     box); translateZ + backface-visibility force it onto its own GPU
     layer as backup insurance. */
  contain: paint;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Keeps the banner clear of the sticky top bar when it's scrolled
     into view on expand, instead of tucking in right underneath it. */
  scroll-margin-top: var(--topbar-h);
}
.country-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* Matches the accent stripe width on stop cards (.stop-card) so the
     two read as the same visual language. Color comes from the inline
     --country-accent custom property set per-country in JS. */
  width: 4px;
  background: var(--country-accent, var(--accent));
}
.country-divider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.country-divider-title-wrap { min-width: 0; }
.country-divider-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  font-size: 18px;
}
.country-pin { display: inline-flex; }
.country-pin .mode-icon { width: 18px; height: 18px; }
.country-divider-sub { color: var(--text-muted); font-size: 12px; font-weight: 600; margin-top: 5px; }
.country-divider-cities { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.country-divider-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.vote-buttons-sm .vote-btn { padding: 4px 10px; font-size: 11.5px; }

.activity-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--border) 35%, var(--bg-elevated));
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.activity-row.status-planned { border-left-color: var(--accent); }
.activity-row.status-booked { border-left-color: var(--success); }
.activity-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.activity-row-text { font-size: 13.5px; line-height: 1.4; }
.activity-row-controls { display: flex; align-items: center; gap: 8px; }
.activity-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.activity-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 35%, var(--bg-elevated));
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.activity-chip-price {
  font-family: var(--font-mono);
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: transparent;
}
.activity-chip-grade { font-weight: 800; border-color: transparent; }
.chip-vs-est { font-weight: 500; opacity: 0.7; margin-left: 3px; }
.activity-chip-grade.grade-a { color: var(--success); background: var(--success-soft); }
.activity-chip-grade.grade-b { color: var(--accent-text); background: var(--accent-soft); }
.activity-chip-grade.grade-c { color: var(--warning); background: var(--warning-soft); }
.activity-chip-grade.grade-skip { color: var(--danger); background: var(--danger-soft); }
.activity-chip-location {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: transparent;
}
.activity-chip-location .mode-icon { width: 11px; height: 11px; }
.activity-chip-location:hover { filter: brightness(0.95); }
.activity-chip-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: transparent;
}
.activity-chip-date .mode-icon { width: 11px; height: 11px; }
.activity-chip-walktime { color: var(--text-muted); }

.activity-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 2px;
}
.activity-status.status-idea { color: var(--text-muted); background: var(--border); }
.activity-status.status-planned { color: var(--accent-text); background: var(--accent-soft); }
.activity-status.status-booked { color: var(--success); background: var(--success-soft); }

.stop-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 7px;
  padding: 3px 8px;
  width: fit-content;
}
.status-past { color: var(--text-muted); background: var(--border); }
.status-now { color: var(--success); background: var(--success-soft); }
.status-upcoming { color: var(--accent-text); background: var(--accent-soft); }

/* Hotels tab */
.hotel-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
}
.hotel-row-divider { border-top: 1px solid var(--border); }
.hotel-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.hotel-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hotel-row-city { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hotel-row-city strong { font-size: 15px; font-weight: 700; }
.hotel-row-dates { font-size: 12.5px; color: var(--text-muted); }
.hotel-row-name { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Coverage bar -- a thin, flat (not pill-shaped) progress bar plus a
   right-aligned tabular fraction, used at the trip summary, country
   header, and per-stop level, all fed by the same stopLodgingStats()
   math so the numbers and colors always agree. Deliberately flat/
   compact rather than a big rounded bar with a badge next to it --
   this is a status readout, not a hero element. */
.coverage-bar-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.coverage-track {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 0;
  overflow: hidden;
}
.coverage-fill { height: 100%; border-radius: 2px; }
/* A card-width version of the same flat bar -- used where a coverage
   bar is the card's own headline stat (Trip readiness, Hotels summary)
   rather than a compact inline readout next to a fraction. Same flat
   shape and status colors, just full-width and a touch taller. */
.coverage-track-wide { width: 100%; height: 6px; margin-top: 10px; }
.coverage-fraction {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 34px;
  text-align: right;
}
.coverage-fill-full { background: var(--success); }
.coverage-fraction-full { color: var(--success); }
.coverage-fill-partial { background: var(--warning); }
.coverage-fraction-partial { color: var(--warning); }
.coverage-fill-none { background: var(--border); }
.coverage-fraction-none { color: var(--text-muted); }

.hotel-country-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card-badge-full { color: var(--success); background: var(--success-soft); }
.card-badge-partial { color: var(--warning); background: var(--warning-soft); }
.card-badge-none { color: var(--text-muted); background: var(--border); }

/* The collapsed-card version of lodging status -- name (or "not
   booked yet") on one line, nothing else. Full cost/address/note live
   in .stop-details-header instead, inside the expandable body. */
.stop-lodging-mini {
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stop-lodging-mini .mode-icon { color: var(--accent-text); flex-shrink: 0; }
.stop-lodging-mini-empty { color: var(--text-muted); font-style: italic; }

/* Everything that used to sit in the always-visible card summary --
   map link, full lodging card, voting -- lives here now, at the top
   of the expandable body instead. */
.stop-details-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.stop-lodging { font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.stop-lodging .mode-icon { color: var(--accent-text); }
.stop-lodging-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stop-lodging-dates { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.stop-lodging-detail { padding-left: 21px; }
.stop-lodging-empty { flex-direction: row; align-items: center; justify-content: space-between; font-style: italic; }
.stop-lodging-add {
  appearance: none;
  font-style: normal;
  border: none;
  background: none;
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

/* Plain colored text + icon, no tinted background box -- the card
   (or, for a per-stop note, the surrounding stop card) already
   separates it from the rest of the page, so a second layer of
   background/border on top just reads as a louder alert than the
   content warrants. Same flat approach as Overview's Advisories list. */
.trip-length-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--warning);
  margin-bottom: 10px;
}
.trip-length-warning .mode-icon { flex-shrink: 0; margin-top: 1px; }
.stop-advisory {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--warning);
  margin: 2px 0 6px;
}
.stop-advisory .mode-icon { flex-shrink: 0; margin-top: 1px; }

/* A summary row that drills into another tab -- reset button chrome
   back to a plain row, add a hover/active tint so it reads as
   navigable without needing an underlined "view" link. */
.overview-nav-row {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.1s ease;
}
.overview-nav-row:hover, .overview-nav-row:focus-visible { background: var(--accent-soft); }
.overview-nav-chevron { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; transform: rotate(-90deg); }
.overview-nav-card { cursor: pointer; transition: background-color 0.1s ease; }
.overview-nav-card:hover, .overview-nav-card:focus-visible { background: var(--accent-soft); }
.overview-nav-card .card-badge { margin-right: 4px; }

/* Overview > Advisories -- a plain list row (place label + text), not
   a tinted alert box per item; a thin left rule carries just enough
   "worth noting" weight without every row shouting. */
.advisory-row { padding: 10px 8px; }
.advisory-row-divider { border-top: 1px solid var(--border); }
.advisory-content { flex: 1; min-width: 0; }
.advisory-place {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warning);
  margin-bottom: 3px;
}
.advisory-text { font-size: 13.5px; color: var(--text); }
.advisory-chevron-wrap { flex-shrink: 0; padding-left: 8px; }

/* Overview > Bookings -- one row per booking type, reusing the same
   thin coverage-bar language as the Hotels tab. */
.overview-booking-row { gap: 8px; padding: 9px 8px; }
.overview-booking-row .mode-icon { color: var(--text-muted); flex-shrink: 0; }
.overview-booking-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.overview-booking-divider { border-top: 1px solid var(--border); }
.comment-toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
}
.comment-toggle-btn:hover { color: var(--accent-text); }

.day-plan { display: flex; flex-direction: column; gap: 6px; }
.day-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: color-mix(in srgb, var(--border) 35%, var(--bg-elevated));
}
.day-chip-date { font-weight: 700; color: var(--text-muted); flex-shrink: 0; width: 48px; }
.day-chip-type {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.day-chip-title { flex: 1; }
.day-travel { border-left-color: var(--accent); }
.day-travel .day-chip-type { color: var(--accent-text); }
.day-activity { border-left-color: var(--success); }
.day-activity .day-chip-type { color: var(--success); }
.day-rest { border-left-color: var(--text-muted); }
.day-rest .day-chip-type { color: var(--text-muted); }
.day-festival { border-left-color: var(--warning); }
.day-festival .day-chip-type { color: var(--warning); }

.day-timeline { display: flex; flex-direction: column; }
.timeline-divider {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-text);
  margin: 20px 4px 8px;
}
.timeline-divider:first-child { margin-top: 2px; }
.timeline-group-body {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--lift);
  overflow: hidden;
}
.timeline-day {
  border-left: 3px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-day:last-child { border-bottom: none; }
.timeline-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.timeline-day-date { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.timeline-day-place { font-size: 12px; color: var(--text-muted); }
.timeline-day-entry { font-size: 13px; }
.timeline-day-leg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.timeline-day-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }
.timeline-day-undated { font-size: 12px; color: var(--text-muted); font-style: italic; }

.full-map {
  position: relative;
  isolation: isolate;
  z-index: 0;
  height: calc(100vh - 220px);
  height: calc(100dvh - 220px); /* dvh accounts for mobile browsers' collapsing address bar -- 100vh alone can overshoot the real visible area */
  min-height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.locate-btn {
  /* 44px+ tall for a reliable touch target -- these float over the
     map itself, where a mis-tap pans/zooms instead of hitting the
     button, so there's less margin for error than a button in normal
     page flow. */
  padding: 11px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--lift);
  cursor: pointer;
  white-space: nowrap;
}
.locate-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); }
.locate-btn:active { transform: translateY(1px); }
.pin-spot-btn { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.pin-spot-btn:hover { filter: brightness(0.96); }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.map-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.map-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top-width: 3px;
  border-top-color: var(--border);
  border-top-style: solid;
}
.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-elevated);
}

/* Content of a Google Maps InfoWindow (a stop or a tagged activity) --
   deliberately plain, no card/shadow of its own, since Google already
   wraps it in its own bubble chrome. */
.map-info { font-family: var(--font); min-width: 160px; }
.map-info-title { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.map-info-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.map-info-row { font-size: 12.5px; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.map-info-row .mode-icon { width: 13px; height: 13px; flex-shrink: 0; }
.map-info-counts { color: var(--text-muted); }
.map-info-empty { color: var(--text-muted); font-style: italic; }
.map-info a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.map-info a:hover { text-decoration: underline; }
.map-info-activities {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
}
.map-info-activity { font-size: 12px; display: flex; align-items: center; gap: 5px; }
.map-info-activity .activity-status { font-size: 9.5px; padding: 1px 6px; }

/* ---------- settings ---------- */

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-toggle-label { font-size: 13.5px; }
.settings-toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.settings-country-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.settings-country-row-divider { border-top: 1px solid var(--border); }
.settings-rate-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.settings-country-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-country-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.settings-country-info { flex: 1; min-width: 0; }
.settings-country-info .settings-country-name { display: block; }
.settings-country-info .card-detail { margin-top: 2px; }

.traveler-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.traveler-avatar img { width: 100%; height: 100%; object-fit: cover; }
.traveler-avatar-initial { font-size: 15px; font-weight: 800; color: var(--accent-text); }
.traveler-avatar-upload { position: relative; cursor: pointer; flex-shrink: 0; }
.traveler-avatar-upload:hover .traveler-avatar { opacity: 0.8; }
.traveler-avatar-camera {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-elevated);
  pointer-events: none;
}
.traveler-avatar-camera svg { width: 10px; height: 10px; }
.traveler-avatar-remove {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--bg-elevated);
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ---------- Photos tab ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--border);
  cursor: pointer;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(10, 12, 18, 0.25);
}
.media-thumb-play .mode-icon { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }

.lightbox-backdrop { background: rgba(6, 7, 11, 0.92); align-items: center; }
.lightbox {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.lightbox-media { display: flex; align-items: center; justify-content: center; background: #000; max-height: 70vh; overflow: hidden; }
.lightbox-media img, .lightbox-media video { max-width: 100%; max-height: 70vh; display: block; }
.lightbox-info { padding: 12px 16px; }
.lightbox-caption { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.lightbox-meta { font-size: 12.5px; color: var(--text-muted); }
.lightbox-actions { padding: 0 16px 14px; display: flex; gap: 8px; }
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 12, 18, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Compact strip on a stop's own card (Stops tab), not the full grid --
   just enough to show there's something to see, tapping through to the
   Photos tab filtered to that stop. */
.stop-media-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.stop-media-strip .media-thumb { width: 64px; height: 64px; flex-shrink: 0; aspect-ratio: unset; }
.stop-media-strip-more {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Small inline thumbnail row on a Timeline day. */
.timeline-day-media { display: flex; gap: 6px; overflow-x: auto; margin-top: 2px; }
.timeline-day-media .media-thumb { width: 52px; height: 52px; flex-shrink: 0; aspect-ratio: unset; }

/* iOS Safari zooms the whole page in whenever a field under 16px is
   focused, and doesn't zoom back out -- the "page jumps and stays
   wonky after typing" effect. 16px on phones is the standard fix (and
   is why pinch zoom no longer needs to be disabled). */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ---------- pull to refresh ---------- */
.ptr {
  position: fixed;
  z-index: 25;
  top: calc(var(--topbar-h) + 6px);
  left: calc(50% + var(--nav-offset, 0px) / 2);
  width: 34px; height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--lift);
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-48px);
}
.ptr.is-pulling { transition: none; }
.ptr:not(.is-pulling) { transition: transform 0.2s ease, opacity 0.2s ease; }
.ptr-ring {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
}
.ptr.is-loading .ptr-ring { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.is-loading .ptr-ring { animation-duration: 1.6s; } }

/* ---------- overflow menu ---------- */
.more-btn { flex-shrink: 0; }
.more-menu {
  position: fixed;
  z-index: 70;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(10, 14, 30, 0.22), var(--lift);
}
.more-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: 600 14px var(--font);
  text-align: left;
  padding: 11px 12px 11px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.more-menu-item:hover, .more-menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.more-menu-item.danger { color: var(--danger); }
.more-menu-tick { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent-text); }
.more-menu-tick svg { width: 16px; height: 16px; }
.more-menu-divider { height: 1px; margin: 5px 6px; background: var(--border); }

/* ---------- profile-photo cropper ---------- */
.cropper-body { align-items: center; gap: 14px; }
.cropper-stage {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: #0d1017;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cropper-stage.dragging { cursor: grabbing; }
.cropper-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cropper-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.cropper-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(8, 10, 18, 0.62) 100%);
}
.cropper-mask::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.cropper-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; }
.cropper-zoom { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); }
.cropper-zoom input[type="range"] { flex: 1; accent-color: var(--accent); }
.cropper-zoom-icon { font-size: 20px; font-weight: 700; color: var(--text-muted); width: 20px; text-align: center; line-height: 1; }
.cropper-body ~ .modal-footer .btn { white-space: nowrap; }
.cropper-error { font-size: 13px; color: var(--danger); background: var(--danger-soft); padding: 10px 12px; border-radius: 10px; width: 100%; }

/* ---------- settings ---------- */
.settings-card { padding-top: 14px; padding-bottom: 14px; }
.settings-sub { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin: -2px 0 8px; }
.settings-add { margin-top: 10px; }
.settings-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.settings-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.settings-subhead small { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; opacity: 0.85; }
.kv-list { margin-top: 6px; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.kv-row:first-child { border-top: none; }
.kv-label { color: var(--text-muted); }
.kv-value { font-weight: 600; text-align: right; }
.role-chip {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.role-chip.admin { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.role-chip.pending { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.tag-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  appearance: none; cursor: pointer; font: 600 13px var(--font);
  padding: 7px 13px; border-radius: 999px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.tag-chip:hover { border-color: var(--accent); }
.tag-chip.add { background: transparent; border-style: dashed; color: var(--accent-text); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.danger-row + .danger-row { border-top: 1px solid var(--border); }
.danger-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.danger-text span { font-size: 12.5px; color: var(--text-muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.settings-country-info .settings-country-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-country-info .card-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-country-info .card-detail.clamp-2 { white-space: normal; }

/* ---------- checklists, decluttered ---------- */
.checklist-toolbar-main { align-items: center; justify-content: space-between; gap: 10px; }
.seg-group { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; min-width: 0; }
.seg-group .seg-btn { border: none; background: transparent; padding: 7px 14px; }
.seg-group .seg-btn.active { background: var(--accent-soft); color: var(--accent-text); }
.checklist-filter { flex-wrap: wrap; margin-top: -4px; }
.chip-btn {
  appearance: none; cursor: pointer; font: 600 12.5px var(--font);
  padding: 5px 12px; border-radius: 999px; background: transparent; color: var(--text-muted);
  border: 1px solid transparent;
}
.chip-btn:hover { color: var(--text); }
.chip-btn.active { background: var(--text); color: var(--bg); }
.check-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
.task-row { align-items: center; }
.task-body { cursor: pointer; padding: 3px 0; }
.task-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.checklist-drag-handle { opacity: 0.28; transition: opacity 0.15s ease; }
.task-row:hover .checklist-drag-handle { opacity: 0.8; }
.checklist-card .card-row { margin-bottom: 2px; }
.task-due { flex-shrink: 0; align-self: center; cursor: pointer; }

/* ---------- overview readiness ---------- */
.readiness-card { padding-bottom: 8px; }
.readiness-item + .readiness-item { border-top: 1px solid var(--border); }
.readiness-sub { font-size: 12px; color: var(--text-muted); padding: 0 8px 9px 36px; margin-top: -4px; }
.attn-chip {
  flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger);
}

.status-chip { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.status-chip svg { width: 13px; height: 13px; }
.status-chip.ok { background: var(--success-soft); color: var(--success); }
.status-chip.warn { background: var(--warning-soft); color: var(--warning); }
.hotel-add-btn { align-self: flex-start; }
.hotel-add-link { appearance: none; border: none; background: none; align-self: flex-start; padding: 2px 0; font: 700 12.5px var(--font); color: var(--accent-text); cursor: pointer; }
.status-chip-btn { appearance: none; border: none; cursor: pointer; font-family: var(--font); }
.status-chip-btn:hover { filter: brightness(0.96); }

/* ---------- finances, decluttered ---------- */
.finance-tool-row { justify-content: flex-end; align-items: center; }
.finance-item-row { align-items: center; }
.finance-item-row.is-editable { cursor: pointer; }
.finance-item-row.is-editable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.finance-item-main { flex: 1; }
.paid-toggle {
  appearance: none; border: none; background: none; padding: 4px; margin: -4px -4px -4px 0;
  cursor: pointer; flex-shrink: 0; color: var(--border); line-height: 0;
}
.paid-toggle svg { width: 24px; height: 24px; }
.paid-toggle:hover { color: var(--text-muted); }
.paid-toggle.is-paid { color: var(--success); }
.leg-booked-tick { display: inline-flex; color: var(--success); }
.leg-booked-tick svg { width: 15px; height: 15px; }

/* ---------- transport cards, decluttered ---------- */
.leg-pass-top { padding: 14px 16px; }
.leg-pass-fields { padding: 10px 16px 14px; gap: 18px; }
.leg-pass-notes { padding: 0 16px 14px; }
.leg-pass-field-value { font-size: 14px; }
.leg-pass-top-right .icon-btn { margin-left: auto; }
@media (max-width: 520px) {
  .leg-pass-top { flex-wrap: wrap; row-gap: 8px; }
  .leg-pass-route-line { flex-wrap: nowrap; flex: 1 1 100%; }
  .leg-pass-mode-label { display: none; }
  .leg-pass-code { font-size: 19px; }
  .leg-pass-top-right { flex: 1 1 100%; }
}

.tab-badge.warn { background: #e3a93c; color: #2b1d02; }

/* ---------- forms: collapsible sections + mobile hardening ---------- */
.form-section-toggle {
  appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: none; border-top: 1px solid var(--border); background: transparent; color: var(--accent-text);
  font: 700 13.5px var(--font); text-align: left; padding: 12px 2px 4px; cursor: pointer; margin-top: 2px;
}
.form-section-toggle .chevron-icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.form-section-toggle.open .chevron-icon { transform: rotate(180deg); }
.form-section-body { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

/* A phone should never pan a form sideways: nothing inside a sheet may
   be wider than the sheet, and the iOS date/time pickers (which report
   a width of their own) are told to size to the field. */
html { overflow-x: clip; }
.modal-body { max-width: 100%; }
.modal-body { overflow-x: hidden; }
.form-row { min-width: 0; }
.form-row > * { min-width: 0; max-width: 100%; }
.form-input, select.form-input, input.form-input { min-width: 0; max-width: 100%; }
input[type="date"].form-input, input[type="time"].form-input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-height: 42px; text-align: left;
}
input[type="date"].form-input::-webkit-date-and-time-value,
input[type="time"].form-input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
select.form-input { -webkit-appearance: none; appearance: none; min-height: 42px; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23939ba9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.form-multiselect { max-width: 100%; }

.wizard-step { display: flex; flex-direction: column; gap: 14px; }
.wizard-step > .card-detail { margin: 0; }

/* A toast shouldn't sit on top of a sheet's Save/Cancel buttons. */
body:has(.modal-backdrop) .toast { top: calc(14px + env(safe-area-inset-top)); bottom: auto; }

/* ---------- change review, history, trip health ---------- */
.change-preview { display: flex; flex-direction: column; gap: 10px; }
.change-summary { font-weight: 700; font-size: 14.5px; }
.change-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.change-row { display: grid; grid-template-columns: 74px 1fr; column-gap: 8px; row-gap: 2px; padding: 9px 11px; font-size: 13px; border-top: 1px solid var(--border); }
.change-row:first-child { border-top: none; }
.change-type { grid-row: 1 / span 2; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.change-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-delta { color: var(--text-muted); font-size: 12.5px; }
.change-delta s { opacity: 0.75; }
.change-delta b { color: var(--text); }
.change-more { appearance: none; border: none; background: none; align-self: flex-start; padding: 2px 0; font: 700 12.5px var(--font); color: var(--accent-text); cursor: pointer; }
.change-note { font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 9px; }
.change-note.warn { background: var(--warning-soft); color: var(--warning); }
.change-note.error { background: var(--danger-soft); color: var(--danger); }
.change-note.info { background: var(--accent-soft); color: var(--accent-text); }
.change-note ul { margin: 4px 0 0; padding-left: 18px; }
.proposal-card { color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px; width: 100%; box-shadow: var(--shadow); }
.proposal-title { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.proposal-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.proposal-state { font-size: 12.5px; font-weight: 700; margin-right: auto; }
.proposal-state.ok { color: var(--success); }
.proposal-state.muted, .muted { color: var(--text-muted); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.proposal-undo { appearance: none; border: 0; background: none; color: var(--accent-text); font: 700 12.5px var(--font); padding: 4px 2px; cursor: pointer; }
.proposal-undo:hover { text-decoration: underline; }
.history-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.history-row.undone .history-summary { text-decoration: line-through; color: var(--text-muted); }
.history-text { flex: 1; min-width: 0; }
.history-summary { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.history-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.history-source { font-weight: 800; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.history-source.ai { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.health-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.health-row:first-child { border-top: none; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--warning); }
.health-row.error .health-dot { background: var(--danger); }
.health-row.info .health-dot { background: var(--text-muted); }
.health-text { flex: 1; min-width: 0; }
.health-ok { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; font-size: 14px; }
.health-ok svg { width: 20px; height: 20px; }

/* ---------- photo multi-select ---------- */
.media-thumb { position: relative; }
.media-grid.selecting .media-thumb { cursor: pointer; }
.media-grid.selecting .media-thumb:not(.selected) img { opacity: 0.7; }
.media-select-mark { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; color: rgba(255,255,255,0.9); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.media-select-mark svg { width: 100%; height: 100%; }
.media-thumb.selected { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.media-thumb.selected .media-select-mark { color: #fff; }
.media-thumb.selected .media-select-mark svg { fill: var(--accent); }

/* ---------- traveler faces, used wherever a person is named ---------- */
.person-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; vertical-align: middle;
  background: var(--accent); color: #fff; font-weight: 800; line-height: 1;
}
.person-avatar-sm { width: 20px; height: 20px; font-size: 10px; }
.person-avatar-md { width: 28px; height: 28px; font-size: 12px; }
.person-avatar.everyone { border-radius: 999px; width: auto; min-width: 20px; padding: 0 6px; background: var(--text-muted); }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-avatar.has-photo { background: var(--border); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.chip-btn .person-avatar { outline: 1.5px solid var(--bg-elevated); }
.finance-item-paidby { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.readiness-people { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.readiness-person { display: inline-flex; align-items: center; gap: 6px; }
.form-multiselect-option .person-avatar { margin-right: 2px; }

/* ---------- featured photo ---------- */
.media-thumb-star { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; color: #f5c542; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)); pointer-events: none; }
.media-thumb-star svg { width: 100%; height: 100%; }
.feature-btn { display: inline-flex; align-items: center; gap: 5px; }
.feature-btn .star-icon { width: 14px; height: 14px; color: var(--text-muted); }
.feature-btn.on { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.feature-btn.on .star-icon { color: #e0a800; }
.health-fixes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 10px 19px; }

/* ---------- checklist views, done toggle, stacked faces ---------- */
.seg-group { flex-wrap: nowrap; max-width: 100%; }
.seg-group .seg-btn { padding: 7px 10px; white-space: nowrap; }
.seg-count { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 3px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; }
.seg-btn.active .seg-count { background: var(--danger); }
.done-toggle {
  appearance: none; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font: 700 12.5px var(--font); color: var(--text-muted); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 8px;
}
.done-toggle svg { width: 16px; height: 16px; }
.done-toggle:hover { color: var(--text); }
.done-toggle.on { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.empty-good { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--success); font-weight: 700; }
.empty-good svg { width: 20px; height: 20px; }
.card-detail-good { display: flex; align-items: center; gap: 6px; color: var(--success); font-weight: 700; }
.card-detail-good svg { width: 16px; height: 16px; }
.person-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.person-stack .person-avatar { box-shadow: 0 0 0 1.5px var(--bg-elevated); }
.person-stack .person-avatar + .person-avatar { margin-left: -7px; }
.person-stack-more { margin-left: 4px; font-size: 10.5px; font-weight: 800; color: var(--text-muted); }
.finance-item-split { display: flex; justify-content: flex-end; margin-top: 4px; }
.task-row .person-stack, .task-row .person-avatar { align-self: center; }
.timeline-day { scroll-margin-top: calc(var(--topbar-h) + 8px); }
.timeline-day.is-today { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); }
@media (max-width: 480px) {
  .checklist-filter { gap: 4px; flex-wrap: nowrap; }
  .checklist-filter .chip-btn { padding: 4px 9px 4px 5px; font-size: 12px; gap: 5px; }
  .checklist-filter .chip-btn:first-child { padding-left: 10px; }
  .seg-group .seg-btn { padding: 7px 8px; font-size: 12px; }
  .seg-count { margin-left: 2px; min-width: 15px; line-height: 15px; font-size: 10px; }
}

.tab-badge.info { background: #3f70bf; color: #fff; }
.seg-count.amber { background: #e3a93c; color: #2b1d02; }
.seg-count.info { background: #3f70bf; color: #fff; }
.hotel-filter { margin: 10px 0 4px; flex-wrap: wrap; }

/* ---------- needs attention ---------- */
.attention-card { padding-bottom: 6px; }
.attention-list { display: flex; flex-direction: column; margin-top: 4px; }
.attention-row {
  appearance: none; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: none; border-top: 1px solid var(--border); padding: 11px 2px;
  color: var(--text); font: 600 14px var(--font); cursor: pointer;
}
.attention-row:first-child { border-top: none; }
.attention-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.attention-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--warning); }
.attention-row.danger .attention-dot { background: var(--danger); }
.attention-row.info .attention-dot { background: #3f70bf; }
.attention-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.attention-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.attention-chev { flex-shrink: 0; color: var(--text-muted); display: flex; }
.attention-chev .chevron-icon { transform: rotate(-90deg); }
.attention-calm { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; font-size: 14px; padding: 8px 0 10px; }
.attention-calm svg { width: 20px; height: 20px; }

/* ---------- search ---------- */
.search-btn {
  appearance: none; cursor: pointer; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); color: var(--header-text); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
}
.search-btn:hover { background: rgba(255,255,255,0.18); }
.search-btn svg { width: 17px; height: 17px; }
.search-backdrop { align-items: flex-start; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px 12px; }
.search-panel {
  width: 100%; max-width: 560px; margin-top: 4vh; display: flex; flex-direction: column; overflow: hidden;
  max-height: min(78vh, calc(var(--vvh, 100vh) - 40px));
  background: var(--bg-elevated); color: var(--text); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border);
}
.search-input {
  appearance: none; width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text);
  font: 500 16px var(--font); padding: 16px 18px; outline: none;
}
.search-results { overflow-y: auto; overscroll-behavior-y: contain; padding: 6px; }
.search-group { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 4px; }
.search-result {
  appearance: none; display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--text); padding: 9px 10px; border-radius: 9px; cursor: pointer; font-family: var(--font);
}
.search-result.active { background: var(--accent-soft); }
.search-result-title { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.search-result-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ---------- trip counter + update notice ---------- */
.trip-count {
  appearance: none; cursor: pointer; flex-shrink: 0; margin-left: -2px;
  font: 800 11.5px var(--font); letter-spacing: 0.02em; color: var(--header-text);
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 6px 9px;
}
.trip-count:hover { background: rgba(255,255,255,0.24); }
.update-banner {
  white-space: nowrap;
  position: fixed; z-index: 90; left: calc(50% + var(--nav-offset, 0px) / 2); transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px;
  background: var(--text); color: var(--bg); border-radius: 999px; padding: 9px 9px 9px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); max-width: calc(100vw - 24px);
}
.update-banner-btn { appearance: none; border: none; cursor: pointer; background: var(--accent); color: #fff; font: 800 12.5px var(--font); border-radius: 999px; padding: 7px 14px; }
@media (max-width: 420px) { .brand-name { display: none; } }
/* On a phone the trip switcher takes the room and the buttons sit together at the right. */
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .topbar-actions { flex: 1; min-width: 0; }
  .trip-select { order: -1; flex: 1 1 auto; max-width: none; }
}

/* ---------- form additions: chips, picks, inline error, toast action ---------- */
.form-req { color: var(--danger); font-weight: 800; }
.form-chips, .form-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.form-chip { border: 1px solid var(--border); background: var(--bg); padding: 6px 12px; font-size: 13px; }
.form-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.form-error { margin: 0 18px 8px; padding: 9px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 600; line-height: 1.4; flex-shrink: 0; }
.toast.toast-action { display: flex; align-items: center; gap: 14px; padding-right: 8px; }
.toast-btn { appearance: none; border: none; cursor: pointer; background: rgba(255,255,255,0.18); color: inherit; font: 800 12.5px var(--font); border-radius: 999px; padding: 6px 12px; }

/* ---------- quick add ---------- */
.add-btn {
  appearance: none; cursor: pointer; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-2-btn); color: var(--on-accent-2); border: 1px solid rgba(255,255,255,0.35); border-radius: 50%;
}
.add-btn:hover { filter: brightness(1.1); }
.add-btn svg { width: 18px; height: 18px; }
.add-btn[hidden], .search-btn[hidden] { display: none; }
.account-btn svg { width: 18px; height: 18px; }
.qa-header { padding: 0 18px 10px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.qa-types { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-type { flex-shrink: 0; }
.qa-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.qa-suggest-label { font-weight: 700; }
.qa-suggest-chip { border-style: dashed; }
.form-hint { margin-top: 6px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.form-hint:empty { display: none; }

/* ---------- day sheet + tappable timeline days ---------- */
.timeline-day-tap { cursor: pointer; }
.timeline-day-tap:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.timeline-day-tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline-day-head { align-items: center; }
.timeline-day-add {
  appearance: none; cursor: pointer; margin-left: 4px; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  border: 1px dashed var(--border); background: transparent; color: var(--muted); font: 600 18px/1 var(--font); display: grid; place-items: center;
}
.timeline-day-add:hover { color: var(--accent); border-color: var(--accent); }
.day-sheet .modal-title { display: flex; flex-direction: column; gap: 2px; }
.ds-place { font-size: 13px; font-weight: 600; color: var(--muted); }
.ds-body { display: flex; flex-direction: column; gap: 4px; }
.ds-title { margin-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ds-title:first-child { margin-top: 0; }
.ds-row {
  appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); min-height: 44px;
}
button.ds-row { cursor: pointer; }
button.ds-row:hover { border-color: var(--accent); }
.ds-row svg { width: 18px; height: 18px; flex-shrink: 0; }
.ds-row-text { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ds-row-todo { border-style: dashed; }
.ds-row-cta { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.ds-muted { color: var(--muted); font-weight: 500; }
.ds-more, .ds-empty { font-size: 13px; padding: 6px 2px; color: var(--muted); }
.ds-move { flex-shrink: 0; border: 1px solid var(--border); background: var(--bg-elevated); padding: 5px 11px; font-size: 12.5px; font-weight: 700; }

.qa-paste svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.qa-banner { font-size: 12.5px; font-weight: 600; color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; padding: 7px 10px; }
.pb-hint { margin: 0 0 8px; }
.pb-text { width: 100%; resize: vertical; min-height: 120px; }
.pb-actions { margin-top: 8px; }
.pb-thumbs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pb-thumb { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }

/* ---------- loading state: the map logo, route flowing to its end ---------- */
.loading:has(.logo-loader) { padding: 0; }
.logo-loader { display: grid; place-items: center; min-height: 55vh; }
.logo-loader svg { width: 104px; height: auto; opacity: 0; animation: logo-in .45s ease .25s forwards; }
.logo-route { animation: logo-flow 1.15s linear infinite; }
.logo-end { transform-box: fill-box; transform-origin: center; animation: logo-pulse 1.8s ease-in-out infinite; }
@keyframes logo-in { to { opacity: 1; } }
@keyframes logo-flow { to { stroke-dashoffset: calc(var(--p) * -1); } }
@keyframes logo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .logo-route, .logo-end { animation: none; } .logo-loader svg { animation-duration: .01s; } }

/* ---------- rail logo + the Settings > Logo picker ---------- */
.nav-rail-logo { background: none; box-shadow: none; border-radius: 0; width: 36px; height: 36px; font-size: 0; }
.nav-rail-logo svg { width: 100%; height: 100%; display: block; }
.colours-top { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.colours-mark { width: 84px; flex-shrink: 0; }
.colours-mark svg { display: block; width: 100%; height: auto; }
.colours-now { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.colours-name { font-weight: 800; font-size: 16px; }
.colours-pair { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); font-weight: 600; flex-wrap: wrap; }
.colours-pair i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 5px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.palette { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px 8px; border: 2px solid var(--border); border-radius: 16px; background: var(--bg-elevated); font: 700 12px var(--font); color: var(--text); min-height: 76px; }
.palette:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.palette.active { border-color: var(--accent); background: var(--accent-soft); }
.swatch { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.swatch::before, .swatch::after { content: ""; position: absolute; left: 0; right: 0; }
.swatch::before { top: 0; height: 50%; background: var(--p); }
.swatch::after { bottom: 0; height: 50%; background: var(--s); }
.colours-custom { margin-top: 14px; }
.colours-custom > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 0; list-style: none; color: var(--accent-text); display: flex; align-items: center; min-height: 44px; }
.colours-custom > summary::-webkit-details-marker { display: none; }
.colours-custom > summary::after { content: "›"; margin-left: 6px; transition: transform .15s; }
.colours-custom[open] > summary::after { transform: rotate(90deg); }
.colour-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; min-height: 56px; }
.colour-row + .colour-row { border-top: 1px solid var(--border); }
.colour-row input[type=color] { width: 52px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); cursor: pointer; flex-shrink: 0; }
.colour-row .colour-text { display: flex; flex-direction: column; gap: 2px; }
.colour-row .colour-text b { font-size: 14px; }
.colour-row .colour-text span { font-size: 12.5px; color: var(--text-muted); }
.colours-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ---------- form polish: spacing rhythm, side-by-side fields, quick-add header ---------- */
.modal-title { padding: 20px 20px 6px; letter-spacing: -0.01em; }
.modal-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-body { padding: 8px 20px 14px; gap: 16px; }
.form-label { font-size: 12px; letter-spacing: 0.01em; }
.form-row { gap: 6px; }
.form-input { min-height: 44px; padding: 10px 12px; border-radius: 10px; box-shadow: none; }
.form-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.form-input { min-height: 72px; line-height: 1.45; }
.form-input::placeholder { color: var(--muted); opacity: 0.8; }
.form-error { margin: 0 20px 10px; }

/* Two (or three) short fields on one line. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.form-grid > .form-row { min-width: 0; }
.form-grid .form-hint { grid-column: 1 / -1; }

/* A date box folded away behind "Other date" while day chips are on offer. */
.form-input.is-collapsed { display: none !important; }
.form-chip { min-height: 34px; padding: 6px 13px; }
.form-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-picks, .form-chips { gap: 8px; margin-top: 0; }
/* Day chips: one tidy scrolling line on a phone instead of a ragged wrap. */
.form-picks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px; scroll-padding: 0 20px; }
.form-picks::-webkit-scrollbar { display: none; }
.form-picks .form-chip { flex-shrink: 0; white-space: nowrap; }
.form-grid .form-picks { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }

/* Sections: quiet text links, closer to the fields they belong to. */
.form-section-toggle { border-top: 1px solid var(--border); padding: 14px 0 2px; margin-top: 0; font-size: 13px; color: var(--text-muted); }
.form-section-toggle.open, .form-section-toggle:hover { color: var(--accent-text); }
.form-section-body { gap: 16px; padding-top: 10px; }

/* Footer: toggle left, actions right, primary button always easy to hit. */
.modal-footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
.modal-footer .btn { min-height: 44px; padding: 0 20px; }
.modal-footer .btn-primary { min-width: 92px; }
.form-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; min-height: 44px; }
.form-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.form-toggle:has(input:checked) { color: var(--text); }

/* Quick add header */
.qa-header { padding: 4px 20px 12px; gap: 10px; }
.qa-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px; }
.qa-types::-webkit-scrollbar { display: none; }
.qa-types .form-chip { flex-shrink: 0; white-space: nowrap; }
.qa-types .form-chip:not(.active) { border-color: transparent; background: var(--bg); }
.qa-paste {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: none; background: transparent; color: var(--accent-text); font: 700 12.5px var(--font); padding: 6px 2px;
}
.qa-paste:hover { text-decoration: underline; }
.qa-paste svg { width: 14px; height: 14px; }
.qa-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.qa-suggest::-webkit-scrollbar { display: none; }
.qa-suggest > * { flex-shrink: 0; white-space: nowrap; }
.qa-suggest-chip { padding: 4px 11px; min-height: 30px; font-size: 12.5px; }
.form-hint { margin-top: 2px; }
.form-hint .form-chip { padding: 4px 11px; min-height: 30px; }
@media (max-width: 330px) {
  .form-grid { grid-template-columns: 1fr; }
}
.form-picks { max-width: none; }

/* ---------- clarity pass: assistant, overview, stops, timeline, finances, settings ---------- */
.chat-panel-header { color: var(--text); font-size: 14px; }
.chat-thread-empty { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.chat-suggest-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chat-suggest-chips .form-chip { text-align: left; white-space: normal; line-height: 1.35; }

/* Stop cards: a slim photo banner instead of a 210px slab, so a whole trip scans in a screen or two. */
.stop-photo { height: 96px; }

.attention-row-static { cursor: default; display: flex; align-items: center; gap: 10px; }
.attention-row-static:hover { background: transparent; }
.attention-row-static .attention-text { flex: 1; min-width: 0; }
.attention-row-static .btn { flex-shrink: 0; }

.empty-state-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; }
.empty-state-title { font-size: 16px; font-weight: 800; color: var(--text); }

.timeline-day-entry { color: var(--text); }
.timeline-day-undated { font-style: normal; }
.timeline-place-link { color: var(--accent-text); font-weight: 700; white-space: nowrap; }

.finance-settle {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font: 600 14px var(--font); color: var(--text); cursor: pointer; padding: 12px 16px; margin-top: 12px;
  border-left: 4px solid var(--accent);
}
.finance-settle-link { color: var(--accent-text); font-weight: 700; font-size: 12.5px; flex-shrink: 0; }

.settings-fold {
  appearance: none; border: none; background: transparent; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; font-family: var(--font);
}
.settings-fold .chevron-icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.settings-fold.open .chevron-icon { transform: rotate(180deg); }

/* Trip switcher: reads as a dropdown, and only rings on keyboard focus. */
.trip-select {
  padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.trip-select:focus { outline: none; }
.trip-select:focus-visible { outline: 2px solid var(--accent-2, #fff); outline-offset: 2px; }
.wizard-skip-link { font-size: 13px; padding: 8px 0; align-self: flex-start; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- touch targets ----------
   On touch screens every control gets a 44px (Apple/Material) hit area. Small
   icon buttons and inline links keep their look and grow an invisible margin;
   chips, segmented buttons and rows get real height. */
@media (pointer: coarse) {
  .icon-btn, .timeline-day-add, .paid-toggle, .vote-btn, .stop-toggle-btn, .hotel-add-link, .status-chip-btn,
  .comment-toggle-btn, .activity-chip-location, .route-chip, .settings-fold, .leg-pass-top-right .icon-btn { position: relative; }
  .icon-btn::after, .timeline-day-add::after, .paid-toggle::after { content: ""; position: absolute; inset: -9px; }
  .hotel-add-link::after, .status-chip-btn::after, .comment-toggle-btn::after, .activity-chip-location::after,
  .settings-fold::after, .stop-toggle-btn::after, .vote-btn::after, .route-chip::after { content: ""; position: absolute; inset: -11px -6px; }
  .btn-small, .seg-btn, .chip-btn { min-height: 40px; }
  .add-row-btn, .attention-row, .overview-nav-row, .checklist-expand-btn { min-height: 44px; }
  .add-btn, .search-btn { width: 40px; height: 40px; }
  .check-row input[type="checkbox"] { width: 28px; height: 28px; }
}

.load-error { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.load-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.search-result-type { float: right; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-left: 8px; }

.ds-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- wide screens ----------
   A phone-width column leaves most of a laptop screen empty. From ~1180px the
   content widens: card pages flow into two columns, Stops gets a sticky index of
   its stops beside the list, and everything else just gets more room. */
.stop-index { display: none; }
.stops-split { display: block; }
@media (min-width: 1180px) {
  main { max-width: 1180px; }
  main[data-layout="columns"] { column-count: 2; column-gap: 28px; }
  main[data-layout="columns"] > * { break-inside: avoid; }
  main[data-layout="columns"] > .section-title { break-after: avoid; }
  main[data-layout="columns"] > .hero { column-span: all; margin-bottom: 8px; }
  main[data-layout="single"] > .day-timeline, main[data-layout="single"] > .finance-list-head-row { max-width: 840px; margin-left: auto; margin-right: auto; }
  .stops-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
  .stop-index {
    display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 16px);
    max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; padding: 4px 0 16px;
  }
  .stop-index-country { margin: 14px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
  .stop-index-country:first-child { margin-top: 0; }
  .stop-index-item {
    appearance: none; cursor: pointer; position: relative; text-align: left; display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px; border: none; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; background: none; font: inherit; color: var(--text);
  }
  .stop-index-item:hover { background: var(--accent-soft); }
  .stop-index-item.active { border-left-color: var(--accent); background: var(--accent-soft); }
  .stop-index-name { font-weight: 700; font-size: 14px; padding-right: 14px; }
  .stop-index-sub { font-size: 12px; color: var(--text-muted); }
  .stop-index-flag { position: absolute; right: 10px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
  .stops-main .route-strip { display: none; }
}

.settings-tabs { margin-bottom: 14px; }
@media (min-width: 1180px) { main[data-layout="columns"] > .settings-tabs { column-span: all; } }
[hidden].section-title, .settings-card[hidden] { display: none; }

/* ---------- export + printing ---------- */
.settings-export-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.settings-export-text span { font-size: 12.5px; color: var(--text-muted); }
#print-root { display: none; }
@media print {
  @page { margin: 14mm; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing #print-root { display: block; }
  .print-doc { font: 10.5pt/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #111; }
  .print-doc h1 { font-size: 22pt; margin: 0 0 2pt; }
  .pd-sub { margin: 0 0 10pt; color: #444; }
  .print-doc h2 { font-size: 13pt; margin: 14pt 0 5pt; padding-bottom: 2pt; border-bottom: 1.5pt solid #111; break-after: avoid; }
  .print-doc h3 { font-size: 11pt; margin: 0 0 3pt; display: flex; justify-content: space-between; gap: 12pt; }
  .pd-place { font-weight: 500; color: #444; }
  .pd-day { break-inside: avoid; padding: 6pt 0; border-bottom: 0.5pt solid #bbb; }
  .pd-day ul { margin: 0; padding-left: 14pt; }
  .pd-table { width: 100%; border-collapse: collapse; }
  .pd-table th { text-align: left; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.04em; color: #555; border-bottom: 1pt solid #111; padding: 3pt 4pt; }
  .pd-table td { vertical-align: top; padding: 4pt; border-bottom: 0.5pt solid #ccc; }
  .pd-table tr { break-inside: avoid; }
  .pd-muted { color: #555; }
  .pd-flag { font-weight: 700; color: #a00; }
  .pd-tag { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.04em; border: 0.5pt solid #555; border-radius: 3pt; padding: 0 3pt; }
  .pd-sleep { margin: 4pt 0 0; }
  .pd-empty { margin: 0; }
  .pd-cols { columns: 2; margin: 0; padding-left: 14pt; }
  .pd-foot { margin-top: 14pt; font-size: 9pt; color: #555; }
  .pd-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .pd-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; break-inside: avoid; }
}

.empty-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.attention-card > .btn { margin-top: 10px; }

/* ---- check-ins and the family's Overview ---- */
.checkin { padding: 16px; }
.checkin-featured { padding: 18px; border: 1px solid var(--accent-soft); box-shadow: var(--lift); }
.checkin-head { display: flex; align-items: center; gap: 12px; }
.checkin-mood {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
}
.checkin-mood svg { width: 30px; height: 30px; }
.checkin-featured .checkin-mood { width: 56px; height: 56px; }
.checkin-featured .checkin-mood svg { width: 34px; height: 34px; }
.mood-great { background: var(--success-soft); color: var(--success); }
.mood-tired { background: var(--warning-soft); color: var(--warning); }
.mood-rough { background: var(--danger-soft); color: var(--danger); }
.checkin-mood-chip { display: inline-flex; align-items: center; gap: 6px; }
.checkin-mood-chip svg { width: 20px; height: 20px; flex: none; }
.checkin-mood-chip:not(.active).chip-mood-great svg { color: var(--success); }
.checkin-mood-chip:not(.active).chip-mood-tired svg { color: var(--warning); }
.checkin-mood-chip:not(.active).chip-mood-rough svg { color: var(--danger); }
.checkin-who { min-width: 0; }
.checkin-name { font-weight: 700; }
.checkin-sub { color: var(--text-muted); font-size: 13px; }
.checkin-mood-label { margin-top: 10px; font-weight: 600; color: var(--accent-text); }
.checkin-note { margin: 8px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkin-featured .checkin-note { font-size: 18px; }
.checkin-photo {
  display: block; width: 100%; margin-top: 12px; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--accent-soft); cursor: pointer;
}
.checkin-photo img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.checkin-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.checkin-heart, .checkin-comments-btn, .checkin-delete {
  font: inherit; font-size: 14px; background: none; border: 0; padding: 6px 4px; min-height: 36px; cursor: pointer; color: var(--text-muted);
}
.checkin-heart { display: inline-flex; align-items: center; gap: 6px; }
.checkin-heart .mode-icon { width: 22px; height: 22px; }
.checkin-heart.on { color: var(--danger); }
.checkin-heart:disabled { opacity: 0.6; }
.checkin-comments-btn:hover, .checkin-delete:hover { color: var(--text); text-decoration: underline; }
.checkin-delete { margin-left: auto; }
.checkin-thread { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.checkin-comment { padding: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.checkin-comment-when { margin-left: 8px; color: var(--text-muted); font-size: 12px; }
.checkin-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.checkin-comment-form input { flex: 1; min-width: 0; }
.checkin-feed { display: grid; gap: 12px; }
.checkin-more { justify-self: center; }
.checkin-empty { text-align: center; padding: 24px 16px; }
.checkin-empty-icon { color: var(--accent); }
.checkin-empty-icon svg { width: 40px; height: 40px; }
.checkin-empty-title { margin-top: 6px; font-weight: 700; font-size: 17px; }
.checkin-empty-sub { margin-top: 4px; color: var(--text-muted); }
.checkin-owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qa-types.checkin-moods { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.checkin-photo-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.checkin-photo-name { color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fam-today { padding: 16px; }
.fam-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fam-today-day { font-weight: 700; font-size: 17px; }
.fam-today-place { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 600; }
.fam-today-place svg { width: 16px; height: 16px; }
.fam-rows { display: grid; gap: 2px; }
.fam-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; overflow-wrap: anywhere; }
.fam-row-icon { flex: none; display: inline-flex; width: 22px; justify-content: center; color: var(--accent); }
.fam-row-icon svg { width: 18px; height: 18px; }
.fam-quiet { color: var(--text-muted); padding: 6px 0; }
.fam-coming { padding: 6px 16px; }
.fam-day { padding: 10px 0; }
.fam-day-divider { border-top: 1px solid var(--border); }
.fam-day-title { font-weight: 700; }
.fam-day-place { margin-left: 8px; color: var(--text-muted); font-weight: 500; }

.fam-trail { padding: 16px 8px 12px; overflow-x: auto; }
.fam-trail-track { display: flex; list-style: none; margin: 0; padding: 0 8px; min-width: min-content; }
.fam-stop { position: relative; flex: 1 0 92px; text-align: center; padding-top: 22px; font-size: 12px; color: var(--text-muted); }
.fam-stop::before { content: ""; position: absolute; z-index: 0; top: 6px; left: -50%; right: 50%; height: 3px; background: var(--border); }
.fam-stop:first-child::before { display: none; }
.fam-stop-dot { position: absolute; z-index: 1; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--bg-elevated); border: 3px solid var(--border); }
.fam-stop-done::before, .fam-stop-here::before { background: var(--accent); }
.fam-stop-done .fam-stop-dot { background: var(--accent); border-color: var(--accent); }
.fam-stop-here { color: var(--text); font-weight: 700; }
.fam-stop-here .fam-stop-dot { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 0 5px var(--accent-soft); }
.fam-stop-name { display: block; padding: 0 4px; overflow-wrap: anywhere; }

/* ---- Settings: compact tabs, people, small buttons ---- */
.settings-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; padding: 7px 12px; }
.settings-tab svg { width: 16px; height: 16px; flex: none; }
.person-avatar { background: hsl(var(--av-h, 212) 60% 90%); }
.person-avatar .traveler-avatar-initial { color: hsl(var(--av-h, 212) 55% 28%); }
:root[data-theme="dark"] .person-avatar { background: hsl(var(--av-h, 212) 30% 26%); }
:root[data-theme="dark"] .person-avatar .traveler-avatar-initial { color: hsl(var(--av-h, 212) 70% 86%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .person-avatar { background: hsl(var(--av-h, 212) 30% 26%); }
  :root:not([data-theme="light"]) .person-avatar .traveler-avatar-initial { color: hsl(var(--av-h, 212) 70% 86%); }
}
.role-chip { display: inline-flex; align-items: center; gap: 4px; }
.role-chip svg { width: 12px; height: 12px; flex: none; }
/* A small button: looks small and keeps a finger-sized hit area on touch screens. */
.btn-xs { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; min-height: 28px; }
.btn-xs svg, .settings-add svg { width: 14px; height: 14px; flex: none; }
.btn-xs::after { content: ""; position: absolute; inset: -8px -4px; }
.settings-add { display: inline-flex; align-items: center; gap: 6px; }
@media (pointer: coarse) {
  .btn-xs { min-height: 28px; }
  .settings-add.btn-small { min-height: 34px; padding: 6px 12px; }
}

.checkin.pending { opacity: 0.75; border-style: dashed; }
.fam-alerts { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.fam-alerts-text { min-width: 0; }

.checkin-hearts-count { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-size: 14px; }
.checkin-hearts-count .mode-icon { width: 20px; height: 20px; }
.trip-select.share-locked { background-image: none; padding-right: 12px; pointer-events: none; }

.checkin-hearts-count { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-size: 14px; }
.checkin-hearts-count .mode-icon { width: 20px; height: 20px; }
.trip-select.share-locked { background-image: none; padding-right: 12px; pointer-events: none; opacity: 1; }

.fam-row { align-items: flex-start; }
.fam-row-icon { margin-top: 2px; }
.fam-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fam-row-sub { color: var(--text-muted); font-size: 13px; }
.fam-row-links { display: flex; gap: 14px; margin-top: 2px; }
.fam-link { color: var(--accent-text); font-weight: 600; font-size: 13.5px; text-decoration: none; padding: 4px 0; }
.fam-link:hover { text-decoration: underline; }

.media-social { padding: 0 16px 8px; }
.lightbox .checkin-thread { max-height: 30vh; overflow-y: auto; }
.media-thumb-hearts {
  position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px;
  border-radius: 999px; background: rgba(9, 12, 22, 0.62); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4;
}
.media-thumb-hearts .mode-icon { width: 13px; height: 13px; color: #ff8a80; }

.recap-card { padding: 16px; display: grid; gap: 14px; }
.recap-title { font-weight: 700; font-size: 17px; }
.recap-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.recap-stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); }
.recap-stat b { font-size: 20px; line-height: 1.1; }
.recap-stat span { font-size: 12px; }
.recap-quotes { display: grid; gap: 8px; }
.recap-quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--accent-2); font-size: 15px; }
.recap-quote span { color: var(--text-muted); font-size: 13px; }
.recap-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.recap-card > .btn { justify-self: start; }

/* ---- minimise, new chat, the launcher's dot, attachments ---- */
.chat-panel-tools { display: inline-flex; align-items: center; gap: 4px; }
.chat-new { appearance: none; border: 0; background: none; font: 600 12.5px var(--font); color: var(--accent-text); padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.chat-new:hover { text-decoration: underline; }
.chat-new[hidden] { display: none; }
.chat-panel-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.chat-panel-close:hover { background: var(--bg); color: var(--text); }
.chat-panel-close .mode-icon { width: 20px; height: 20px; }
.chat-bar { position: relative; }
.chat-bar-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 2px var(--header-bg, #14192b); }
.chat-bar.has-unread .chat-bar-dot { background: #4ade80; animation: chat-ping 1.6s ease-in-out infinite; }
@keyframes chat-ping { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .chat-bar.has-unread .chat-bar-dot { animation: none; } }
.chat-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--bg); }
.ask-msg-attach { font-size: 12.5px; opacity: 0.85; margin-bottom: 2px; }