/* ── Design tokens (GuideMe redesign — handoff §3) ── */
:root {
  /* Surfaces — dark */
  --ink-abyss: #070B12;
  --ink-900: #0A1628;
  --ink-800: #112240;
  --ink-700: #1B2A47;
  --ink-600: #2B3A5A;

  /* Surfaces — paper */
  --paper-0: #F4F1EC;
  --paper-1: #FAF8F4;
  --paper-2: #EEEAE3;
  --paper-3: #E2DED6;

  /* Text */
  --text-900: #0A1628;
  --text-700: #1E293B;
  --text-500: #5A6679;
  --text-400: #8490A3;

  /* Hairlines */
  --hair: rgba(10,22,40,.08);
  --hair-strong: rgba(10,22,40,.14);
  --hair-dark: rgba(244,241,236,.10);

  /* Accent — electric ocean */
  --accent: #2F7DFB;
  --accent-hover: #1D6DE8;
  --accent-soft: #E6EFFE;
  --accent-deep: #0B4AB8;

  /* Status */
  --ok: #1F9D55;
  --warn: #C08B10;
  --err: #C0362C;

  /* Type */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Geist', 'Inter', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(10,22,40,.04), 0 1px 1px rgba(10,22,40,.03);
  --sh-md: 0 4px 18px rgba(10,22,40,.06), 0 2px 6px rgba(10,22,40,.04);
  --sh-lg: 0 24px 60px rgba(10,22,40,.12), 0 8px 20px rgba(10,22,40,.06);
  --sh-glow: 0 0 0 1px rgba(47,125,251,.25), 0 10px 40px rgba(47,125,251,.18);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;

  /* ── Legacy aliases — keep existing selectors working until per-screen reskin ── */
  --primary: var(--ink-900);
  --primary-light: var(--ink-800);
  --secondary: var(--paper-3);
  --secondary-light: var(--paper-2);
  --base: var(--paper-0);
  --base-light: var(--paper-1);
  --heading: var(--text-900);
  --text: var(--text-700);
  --text-muted: var(--text-500);
  --text-on-dark: var(--paper-0);
  --bad: var(--err);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --bg: var(--paper-0);
  --surface: var(--ink-900);
  --card: var(--paper-1);
  --border: var(--hair-strong);
  --gray: var(--text-500);
  --gray-light: var(--paper-2);
  --muted: var(--text-500);
  --ink: var(--text-700);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-700);
  background: var(--paper-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11', 'tnum';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-900);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ── Topbar (GuideMe redesign) ── */
.topbar {
  padding: 16px clamp(20px, 4vw, 40px);
  background: var(--ink-900);
  color: var(--paper-0);
  border-bottom: 1px solid var(--hair-dark);
  position: relative;
  z-index: 100;
}
.topbar h1 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper-0);
}
.topbar p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(244,241,236,.55);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Mode toggle — pill segmented with accent fill on active */
.mode-toggle {
  display: inline-flex;
  background: rgba(244,241,236,.08);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r-pill);
  padding: 3px;
  overflow: visible;
}
.mode-btn {
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: transparent;
  color: rgba(244,241,236,.65);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mode-btn:hover { color: var(--paper-0); background: transparent; }
.mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(47,125,251,.4);
}

/* Topbar pill buttons (mono uppercase eyebrow chrome) */
.topbar .link-btn,
.topbar-actions .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: rgba(244,241,236,.06);
  color: rgba(244,241,236,.72);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.topbar .link-btn:hover,
.topbar-actions .link-btn:hover {
  background: rgba(244,241,236,.10);
  border-color: rgba(244,241,236,.18);
  color: var(--paper-0);
}
.topbar-actions .link-btn i { font-size: 14px; opacity: .85; }
.topbar-actions .link-btn:hover i { opacity: 1; }

/* Sign-in button uses .secondary in markup — give it the same pill chrome on the dark topbar */
.topbar-actions > .secondary {
  height: 38px;
  padding: 0 16px;
  background: rgba(244,241,236,.06);
  color: rgba(244,241,236,.85);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.topbar-actions > .secondary:hover {
  background: rgba(244,241,236,.12);
  border-color: rgba(244,241,236,.22);
  color: var(--paper-0);
}

/* ── Layout ── */
.container { max-width: 960px; margin: 28px auto; padding: 0 24px 48px; }

/* ── Step indicator ── */
.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.step {
  flex: 1;
  background: var(--base-light);
  color: var(--text-muted);
  border: 1px solid var(--secondary);
  padding: 10px 12px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.step.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.step.reachable:not(.active) {
  cursor: pointer;
  color: var(--text);
  border-color: var(--accent);
}
.step.reachable:not(.active):hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  opacity: .85;
}

/* ── Panels ── */
.panel {
  background: var(--base-light);
  border: none;
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-md);
  display: none;
  color: var(--text);
}
.panel.active { display: block; }
.card-panel {
  background: var(--base-light);
  border: none;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

/* ── Itinerary mode ── */
.itinerary-mode-panel { margin-bottom: 14px; }
.itinerary-mode-head p { margin: 0; }
.itinerary-mode-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.itinerary-mode-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.itinerary-mode-summary-card {
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  padding: 14px;
  background: var(--base-light);
  box-shadow: var(--shadow-sm);
}
.itinerary-mode-summary-card h4 {
  margin: 0 0 4px;
  font-size: .82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.itinerary-mode-summary-card p { margin: 0; font-weight: 700; color: var(--text); }

.itinerary-mode-list { display: flex; flex-direction: column; gap: 18px; }
.itinerary-city-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itinerary-city-title {
  margin: 4px 0 2px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--secondary-light);
}
.itinerary-city-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itinerary-block-head {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itinerary-item {
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  background: var(--base-light);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itinerary-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.itinerary-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--heading);
}
.itinerary-time {
  font-weight: 800;
  color: var(--accent);
  font-size: .92rem;
  white-space: nowrap;
}
.itinerary-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
}
.itinerary-notes {
  margin: 2px 0 0;
  color: var(--text);
  font-size: .92rem;
  white-space: pre-wrap;
}
.itinerary-reference {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .88rem;
}
.itinerary-reference i { color: var(--accent); }
.itinerary-reference.has-value { color: var(--text); font-weight: 600; }
.itinerary-file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.itinerary-file-actions .btn-ghost {
  text-decoration: none;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: var(--base-light);
  color: var(--text);
  padding: 6px 12px;
  font-weight: 600;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.itinerary-file-actions .btn-ghost:hover:not([disabled]) {
  background: var(--secondary-light);
  border-color: var(--accent);
}
.itinerary-file-actions .btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }
.itinerary-file-actions .btn-ghost.is-loading,
.itinerary-file-actions .btn-ghost.is-success {
  opacity: 1;
  cursor: default;
}
.itinerary-file-actions .btn-ghost.is-success {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.itinerary-file-actions .btn-ghost.is-success i { color: #fff; }
.btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.attachment-viewer-card { max-width: 560px; }
.attachment-viewer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--secondary-light);
  border-radius: 10px;
  background: var(--base-light);
}
.attachment-row i.file-icon { color: var(--accent); font-size: 1.1rem; }
.attachment-row .attachment-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.attachment-row .attachment-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-row .attachment-size { color: var(--text-muted); font-size: .82rem; }
.attachment-row .attachment-actions { display: flex; gap: 6px; }

body.itinerary-mode .steps,
body.itinerary-mode .step-panel { display: none !important; }
body.itinerary-mode #itineraryModeView { display: block !important; }

/* ── Forms ── */
label { display: block; margin-bottom: 12px; font-weight: 600; color: var(--text); }
input, textarea, button { font: inherit; }
input, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--secondary);
  border-radius: 10px;
  margin-top: 6px;
  background: var(--base-light);
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 125, 225, .12);
}
select {
  padding: 10px 14px;
  border: 1px solid var(--secondary);
  border-radius: 10px;
  background: var(--base-light);
  color: var(--text);
  font: inherit;
  transition: border-color .18s ease;
}
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 125, 225, .12);
}

/* ── Buttons ── */
button {
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: background .18s ease, opacity .18s ease, transform .12s ease, box-shadow .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled) { transform: scale(0.97); }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(42, 125, 225, .3); transform: translateY(-1px); }
button.secondary { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
button.secondary:hover:not(:disabled) { background: var(--primary); color: var(--text-on-dark); }
button.danger { background: var(--bad); color: white; }
button.danger:hover:not(:disabled) { background: #b91c1c; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Icon-only action buttons ── */
.icon-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, text-shadow .15s, background .15s;
}
.icon-btn:active:not(:disabled) { transform: scale(0.93); }
.icon-btn.red { color: #dc2626; }
.icon-btn.red:hover:not(:disabled) { color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,.7); background: rgba(239,68,68,.08); }
.icon-btn.grey { color: #475569; }
.icon-btn.grey:hover:not(:disabled) { color: #64748b; text-shadow: 0 0 8px rgba(100,116,139,.6); background: rgba(100,116,139,.08); }

/* ── Setup ── */
.setup-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.setup-insights {
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  background: var(--accent-soft);
  padding: 14px 16px;
  margin-bottom: 12px;
  min-height: 44px;
}
.setup-insights strong { color: var(--heading); }
.setup-insights .warn { color: var(--bad); font-weight: 700; }

/* ── City rows ── */
.city-row {
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--base-light);
  box-shadow: var(--shadow-sm);
}
.city-row-main {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
  gap: 6px;
  align-items: center;
}
.city-notes-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--secondary-light);
}
.city-notes-textarea {
  width: 100%;
  font-size: .9rem;
}
.city-row-toggle { font-size: 1rem; }
.city-drawer { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--secondary-light); }
.city-dropdown-grid { display: grid; gap: 10px; }
.city-dropdown-section { border: 1px solid var(--secondary-light); border-radius: 14px; padding: 14px; background: var(--secondary-light); }
.city-dropdown-label { display: block; font-size: .86rem; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.city-dropdown-row { display: grid; gap: 6px; }
.accommodation-row { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, 1fr)); }
.arrival-row,
.departure-row { grid-template-columns: minmax(180px, 1fr) auto; }
.city-dropdown-row input,
.city-dropdown-row select { margin-top: 0; }
.city-dropdown-error { margin: 0; color: var(--bad); font-weight: 700; font-size: .9rem; }
.city-section-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; }
.city-section-head h4 { margin: 0; font-size: .92rem; }
.city-hotels-list { display: flex; flex-direction: column; gap: 6px; }
.hotel-row { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(120px, auto)) auto; gap: 6px; }
.travel-row { display: grid; grid-template-columns: 1.4fr minmax(130px, auto) minmax(120px, auto); gap: 6px; margin-bottom: 6px; }
.travel-row input, .travel-row select { margin-top: 0; }

.place-autocomplete-fallback { display: none; }
.tp-place-autocomplete { display: block; width: 100%; position: relative; z-index: 30; }
.city-autocomplete { position: relative; }
.city-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 30;
  background: var(--base-light);
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.city-suggestion-item {
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  padding: 10px 14px; font-weight: 600;
}
.city-suggestion-item + .city-suggestion-item { border-top: 1px solid var(--secondary-light); }
.city-suggestion-item:hover, .city-suggestion-item.active { background: var(--accent-soft); }

/* ── Review toolbar ── */
.review-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 0.7fr)) auto auto;
  gap: 8px;
  margin-bottom: 12px;
}
.review-toolbar input, .review-toolbar select { margin-top: 0; }

/* ── Activity cards ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  border: 1px solid rgba(196,205,213,.4);
  border-radius: 18px;
  background: var(--base-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.activity-card-placeholder { min-height: 520px; border-radius: 20px; background: var(--secondary-light); }
.card-reveal { opacity: 0; transform: translateY(24px); }
.card-revealed { opacity: 1; transform: translateY(0); transition: opacity .4s ease, transform .4s ease; }
.activity-card { transition: background .2s ease, border-left-color .2s ease, opacity .4s ease, transform .4s ease; perspective: 1200px; min-height: 520px; }
.activity-card-inner { position: relative; width: 100%; min-height: 520px; transition: transform .55s ease; transform-style: preserve-3d; }
.activity-card.is-flipped .activity-card-inner { transform: rotateY(180deg); }
.activity-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--base-light); overflow: auto; -webkit-overflow-scrolling: touch; }
.activity-card-back { transform: rotateY(180deg); }
.card img { width: 100%; height: 160px; object-fit: cover; background: var(--secondary-light); }
.card-content { padding: 14px; }
.activity-card-head-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flip-btn { min-width: 36px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-card-img-wrap { position: relative; }
.activity-card-img-wrap img { display: block; width: 100%; }
.activity-flip-btn-overlay { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,0.45); color: #fff; box-shadow: 0 0 10px rgba(99,102,241,0.55), 0 0 22px rgba(99,102,241,0.3); transition: box-shadow .2s, background .2s; }
.activity-flip-btn-overlay:hover { background: rgba(255,255,255,0.28); box-shadow: 0 0 16px rgba(99,102,241,0.85), 0 0 36px rgba(99,102,241,0.45); }
.map-back-content { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.mini-map-wrap { border: 1px solid var(--secondary-light); background: var(--secondary-light); padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; }
.mini-map { width: 100%; height: 220px; display: block; }
.mini-map-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 13px; }

.badge { display: inline-block; border-radius: 999px; padding: 5px 10px; font-size: 12px; letter-spacing: .02em; margin-right: 6px; background: var(--secondary-light); color: var(--text); }
.badge.verdict-Recommend { background: #dcfce7; color: #166534; }
.badge.verdict-Recommend-with-caveats { background: #fef3c7; color: #92400e; }
.badge.verdict-Skip { background: #fee2e2; color: #991b1b; }
.badge.badge-price { background: #f0fdf4; color: #166534; font-weight: 600; letter-spacing: .05em; }
.badge.badge-price.booking-link { background: #fff7ed; color: #c2410c; border: 1.5px solid #f97316; text-decoration: none; font-weight: 500; letter-spacing: normal; }
.badge.badge-maps { background: #eff6ff; color: #1d4ed8; text-decoration: none; font-weight: 500; }
.actions { display: flex; gap: 8px; margin-top: 10px; }

.btn-approve.active { background: #059669; color: white; }
.btn-approve.inactive { opacity: 0.35; cursor: default; }
button.btn-approve:not(.inactive):hover:not(:disabled) { background: #059669; color: white; box-shadow: 0 4px 16px rgba(5,150,105,.35); transform: translateY(-1px); }
.btn-decline.active { background: #be123c; color: white; }
.btn-decline.inactive { opacity: 0.35; cursor: default; }
button.btn-decline:not(.inactive):hover:not(:disabled) { background: #be123c; color: white; box-shadow: 0 4px 16px rgba(190,18,60,.35); transform: translateY(-1px); }
.activity-card.approved { border-left: 4px solid var(--ok); background: rgba(34,197,94,0.04); }
.activity-card.declined { border-left: 4px solid var(--bad); background: rgba(239,68,68,0.04); }
.activity-card.map-highlight { box-shadow: 0 0 0 3px rgba(26, 111, 244, 0.35); }

/* ── Map overlay ── */
.activity-map-overlay { position: fixed; inset: 0; z-index: 1600; background: rgba(11, 37, 69, 0.6); backdrop-filter: blur(6px); padding: 18px; }
.activity-map-shell { height: 100%; background: var(--base-light); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.activity-map-topbar { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--secondary-light); }
.activity-map-canvas { flex: 1; min-height: 360px; }
.activity-map-marker { width: 38px; height: 38px; border-radius: 999px; background: var(--accent); color: #fff; border: 2.5px solid rgba(255,255,255,0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; }
.activity-map-marker i { font-size: 17px; line-height: 1; }
.activity-map-marker.star { background: #f59e0b; box-shadow: 0 4px 12px rgba(245,158,11,0.5), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-museum    { background: #6366f1; box-shadow: 0 4px 10px rgba(99,102,241,0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-gallery   { background: #ec4899; box-shadow: 0 4px 10px rgba(236,72,153,0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-landmark  { background: #8b5cf6; box-shadow: 0 4px 10px rgba(139,92,246,0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-park      { background: #22c55e; box-shadow: 0 4px 10px rgba(34,197,94,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-neighborhood { background: #0ea5e9; box-shadow: 0 4px 10px rgba(14,165,233,0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-market    { background: #f97316; box-shadow: 0 4px 10px rgba(249,115,22,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-food,
.activity-map-marker.cat-restaurant,
.activity-map-marker.cat-lunch     { background: #ef4444; box-shadow: 0 4px 10px rgba(239,68,68,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-breakfast { background: #f59e0b; box-shadow: 0 4px 10px rgba(245,158,11,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-dinner    { background: #be123c; box-shadow: 0 4px 10px rgba(190,18,60,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-nightlife { background: #7c3aed; box-shadow: 0 4px 10px rgba(124,58,237,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-show      { background: #db2777; box-shadow: 0 4px 10px rgba(219,39,119,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-tour      { background: #0891b2; box-shadow: 0 4px 10px rgba(8,145,178,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-walk      { background: #16a34a; box-shadow: 0 4px 10px rgba(22,163,74,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-sunset    { background: #ea580c; box-shadow: 0 4px 10px rgba(234,88,12,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-sports    { background: #16a34a; box-shadow: 0 4px 10px rgba(22,163,74,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-cultural  { background: #d97706; box-shadow: 0 4px 10px rgba(217,119,6,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-shopping  { background: #e11d48; box-shadow: 0 4px 10px rgba(225,29,72,0.45),   0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.cat-spa       { background: #0d9488; box-shadow: 0 4px 10px rgba(13,148,136,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.log-accommodation { background: #0f766e; box-shadow: 0 4px 10px rgba(15,118,110,0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.log-arrival   { background: #7c3aed; box-shadow: 0 4px 10px rgba(124,58,237,0.45),  0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }
.activity-map-marker.log-departure { background: #b45309; box-shadow: 0 4px 10px rgba(180,83,9,0.45),    0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25); }

/* ── Notes row ── */
.notes-row { display: flex; gap: 6px; align-items: flex-start; }
.notes-row .notes { flex: 1; }
.notes-row .apply-note { padding: 4px 10px; border: 1px solid var(--secondary); border-radius: 999px; background: var(--base-light); cursor: pointer; font-size: 14px; line-height: 1; }
.notes-row .apply-note:disabled { opacity: 0.3; cursor: default; }
.notes-row .apply-note:not(:disabled):hover { background: #dcfce7; border-color: var(--ok); }

/* ── Activity inline rows (notes + decline) ── */
.activity-inline-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.activity-inline-row + .activity-inline-row { margin-top: 8px; }
.activity-inline-row > .icon-btn { align-self: center; margin: 0; }
.activity-notes-wrap { flex: 1; min-width: 0; }
.activity-notes-wrap .profile-textarea-fixed { font-size: 13px; border-radius: 10px; padding: 6px 28px 6px 8px; }

/* Enriching (loading) card state */
.activity-insider-tip { background: #FFF8E1; border-left: 3px solid #F5C518; border-radius: 6px; padding: 8px 10px; margin: 6px 0; font-size: 13px; line-height: 1.4; }
.activity-insider-tip i { color: #B8860B; margin-right: 4px; }
.activity-card-enriching { min-height: 520px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(196,205,213,.4); }
.activity-enriching-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.activity-enriching-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(26,111,244,.15);
  border-top-color: var(--accent);
  animation: enrichSpin .75s linear infinite;
}
@keyframes enrichSpin { to { transform: rotate(360deg); } }
.activity-enriching-label { font-size: 0.9rem; color: var(--muted); max-width: 200px; line-height: 1.4; }

/* Add Activity card */
.add-activity-card {
  border: 2px dashed rgba(196,205,213,.55);
  border-radius: 18px;
  background: var(--base-light);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
  position: relative;
}
.add-activity-card:hover { border-color: var(--accent); background: rgba(26,111,244,.03); color: var(--accent); }
.add-activity-card-icon { font-size: 2.8rem; line-height: 1; }
.add-activity-card-label { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }

/* Add Activity modal */
.add-activity-modal-card { max-width: 480px; }
.add-activity-fields { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.add-activity-field { display: flex; flex-direction: column; gap: 6px; }
.add-activity-field label { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.add-activity-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(196,205,213,.6); background: var(--base-light);
  color: var(--text); font-size: 0.95rem; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.add-activity-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,111,244,.12); }
.add-activity-select {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(196,205,213,.6); background: var(--base-light);
  color: var(--text); font-size: 0.95rem; font-family: inherit;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%236b7280' d='m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.add-activity-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,111,244,.12); }
.add-activity-cost-row { display: flex; align-items: center; gap: 8px; }
.add-activity-cost-prefix { font-size: 1rem; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.add-activity-cost-input { flex: 1; min-width: 0; }
.add-activity-cost-type { width: auto; flex-shrink: 0; }
.add-activity-textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(196,205,213,.6); background: var(--base-light);
  color: var(--text); font-size: 0.95rem; font-family: inherit; resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.add-activity-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,111,244,.12); }
.add-activity-footer { display: flex; gap: 10px; justify-content: flex-end; }

.hidden { display: none !important; }

/* ── Profile menu dropdown ── */
#profileMenuBtn { color: var(--text-on-dark); font-size: 1.5rem; }
#profileMenuBtn:hover { opacity: .8; }
.profile-menu { position: relative; }
.profile-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  min-width: 220px; z-index: 200; padding: 4px 0;
  border: 1px solid var(--secondary);
}
.profile-menu-account-info {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--secondary);
  margin-bottom: 4px;
}
.profile-menu-section-label {
  display: block; font-size: .72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px;
}
.profile-menu-email { font-size: .875rem; color: var(--text); word-break: break-all; }
.profile-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; background: none; border: none;
  cursor: pointer; font-size: .875rem; color: var(--text);
}
.profile-menu-item:hover { background: var(--secondary-light); }
.profile-menu-divider { height: 1px; background: var(--secondary); margin: 4px 0; }
.profile-menu-signout {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; background: none; border: none;
  cursor: pointer; font-size: .875rem; color: #dc2626;
}
.profile-menu-signout:hover { background: #fef2f2; }

/* ── Modal header actions ── */
.modal-header-actions { display: flex; gap: 8px; align-items: center; }
#forwardingPanel code {
  display: inline-block;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: var(--secondary-light);
  font-weight: 600;
  color: var(--text);
}

/* ── Shared layout utils ── */
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ── Day columns / Arrange ── */
.day-columns { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.day-col { min-width: 280px; max-width: 280px; border: 1px solid var(--secondary-light); border-radius: 16px; background: var(--base-light); box-shadow: var(--shadow-sm); }
.day-head { padding: 12px; border-bottom: 1px solid var(--secondary-light); font-weight: 700; background: var(--secondary-light); border-radius: 16px 16px 0 0; color: var(--heading); }
.list { min-height: 80px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.item { border: 1px solid var(--secondary-light); border-radius: 12px; padding: 10px; background: var(--base-light); color: var(--text); box-shadow: var(--shadow-sm); }
.item h4 { margin: 0 0 6px; color: var(--heading); }

.arrange-city-nav { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; }
.arrange-header { margin-bottom: 4px; }
.arrange-actions { display: flex; align-items: center; gap: 8px; }

.unplaced-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: #FFF4E0; color: #8A4A00; border: 1px solid #F0C879;
  font-size: 0.85rem; font-weight: 600;
}
.unplaced-chip:hover { background: #FFE7BD; }
.unplaced-chip.is-open { background: #F0C879; }
.unplaced-panel {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: #FFFBF1; border: 1px solid #F0C879; max-width: 520px;
}
.unplaced-panel-hint { margin: 0 0 8px; font-size: 0.85rem; color: #6B4A1A; }
.unplaced-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.unplaced-item {
  width: 100%; text-align: left; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; border: 1px solid transparent;
  background: transparent;
}
.unplaced-item:hover { background: #FFF4E0; border-color: #F0C879; }
.unplaced-item-name { display: block; font-weight: 600; color: var(--heading); font-size: 0.9rem; }
.unplaced-item-reason { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.arrange-diag-list { margin: 8px 0 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-muted); }

.staging-card--flash {
  animation: staging-flash 1.6s ease-out;
  box-shadow: 0 0 0 3px rgba(240, 200, 121, 0.7), var(--shadow-sm);
}
@keyframes staging-flash {
  0%   { box-shadow: 0 0 0 3px rgba(240, 200, 121, 1.0), var(--shadow-sm); }
  100% { box-shadow: 0 0 0 3px rgba(240, 200, 121, 0.0), var(--shadow-sm); }
}
.auto-arrange-btn {
  background: transparent !important;
  border: 1px solid var(--secondary) !important;
  color: var(--text-muted) !important;
}
.auto-arrange-btn:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.arrange-city-tabs { display: flex; gap: 8px; overflow-x: auto; flex: 1; }
.arrange-city-tab {
  white-space: nowrap;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--secondary);
}
.arrange-city-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.arrange-city-arrow { min-width: 40px; }

/* ── Staging area ── */
.staging {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 14px;
  min-height: 100px;
  align-items: center;
  margin-bottom: 14px;
  background: var(--secondary-light);
  border: 1px dashed var(--secondary);
  border-radius: 16px;
}
.staging-card {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  gap: 8px;
  cursor: grab;
  border-radius: 10px;
  border-left: 4px solid var(--activity-border, #94a3b8);
  background: var(--activity-bg, #f8fafc);
  color: var(--activity-text, #334155);
}
.staging-card h4 {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.activity-icon { margin-right: 4px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.activity-icon i { font-size: 15px; line-height: 1; }
.activity-name { overflow: hidden; text-overflow: ellipsis; }

/* ── Schedule columns ── */
.schedule-col { min-width: 220px; max-width: 220px; }
.schedule-col .day-head small { display: block; margin-top: 4px; color: var(--gray); font-weight: 600; }
.day-grid-wrap { position: relative; height: 1600px; }
.hour-grid { position: absolute; inset: 0; }
.hour-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(0,0,0,0.06); }
.hour-line span { position: absolute; top: -9px; left: 6px; font-size: 11px; color: var(--gray); background: rgba(255,255,255,0.95); padding: 0 4px; }
.day-schedule { position: absolute; inset: 0; padding: 4px; }

/* ── Drop-zone overlay (visible only while dragging) ── */
.drop-zone-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}
body.is-dragging-activity .drop-zone-overlay { display: block; }
.drop-band {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 4px;
}
.drop-band--ok {
  background: rgba(34, 197, 94, 0.14);
  border: 1px dashed rgba(34, 197, 94, 0.55);
}
.drop-band--blocked {
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.28) 0 6px,
    rgba(148, 163, 184, 0.12) 6px 12px
  );
  border: 1px solid rgba(148, 163, 184, 0.45);
}
.drop-band--out-of-window {
  background: rgba(15, 23, 42, 0.08);
  border: 1px dashed rgba(15, 23, 42, 0.25);
}
body.is-dragging-activity .day-schedule.is-no-legal-slot { box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.45); }

/* ── Placed cards ── */
.placed-card {
  position: absolute;
  left: 4px; right: 4px;
  border: 1px solid var(--activity-border, var(--secondary-light));
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--activity-bg, var(--base-light));
  color: var(--activity-text, var(--text));
  overflow: visible;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.placed-card--locked { cursor: not-allowed; }
.placed-lock-badge {
  position: absolute; top: 4px; right: 4px;
  font-size: 11px; line-height: 1;
  opacity: 0.75;
  pointer-events: none;
}
.placed-card.resize-hover { cursor: ns-resize; }
.placed-card.resize-hover::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.placed-body {
  padding: 8px 8px 2px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.placed-head-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.placed-body h4 { margin: 0; font-size: 13px; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.activity-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.placed-info-wrap {
  position: absolute; top: -3px; left: -5px;
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: transparent; cursor: pointer;
}
.placed-info-icon { font-size: 10px; line-height: 1; opacity: .4; transition: opacity .16s ease, transform .16s ease; }
.placed-info-wrap:hover .placed-info-icon { opacity: .98; transform: scale(1.1); }

.placed-tooltip-layer {
  position: fixed;
  width: min(300px, 72vw);
  background: var(--primary);
  color: var(--text-on-dark);
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  text-align: left;
  z-index: 2200;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}
.placed-tooltip-layer.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.placed-tooltip-title { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--text-on-dark); }
.placed-tooltip-row { font-size: 11px; line-height: 1.35; color: rgba(245,240,235,.7); margin-bottom: 4px; }
.placed-tooltip-row:last-child { margin-bottom: 0; }

/* ── Logistics cards ── */
.logistics-card {
  position: absolute;
  left: 4px; right: 4px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--gray-light);
  border: 1.5px dashed #94a3b8;
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
  z-index: 8;
  pointer-events: none;
}
.logistics-card-icon { font-size: 16px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; }
.logistics-card-icon i { font-size: 16px; line-height: 1; }
.logistics-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.logistics-card-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logistics-card-sub { font-size: 10px; font-weight: 400; color: var(--muted); }
.logistics-card-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.logistics-transit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}
.logistics-transit-line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #94a3b8;
  margin-right: 2px;
}

/* ── Commute selector ── */
.commute-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  white-space: nowrap;
}
.commute-selector { position: relative; pointer-events: auto; }
.commute-selector-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(2px);
}
.commute-selector:hover .commute-selector-trigger,
.commute-selector.open .commute-selector-trigger {
  border-color: var(--secondary-light);
  color: var(--text);
}
.commute-selector-arrow { opacity: 0; transform: translateY(-1px); transition: opacity .14s ease; }
.commute-selector:hover .commute-selector-arrow,
.commute-selector.open .commute-selector-arrow { opacity: .85; }
.commute-selector-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
  background: var(--base-light);
  border: 1px solid var(--secondary-light);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
}
.commute-selector.open .commute-selector-menu { display: block; }
.commute-option {
  width: 100%; border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; padding: 8px 12px;
}
.commute-option + .commute-option { border-top: 1px solid var(--secondary-light); }
.commute-option:hover, .commute-option.active { background: var(--accent-soft); }
.commute-option-check { color: var(--accent); }

/* ── Activity type colors ── */
.activity-food { --activity-bg: #fff7ed; --activity-border: #f59e0b; --activity-text: #9a3412; }
.activity-show { --activity-bg: #faf5ff; --activity-border: #a855f7; --activity-text: #6b21a8; }
.activity-tour { --activity-bg: #f0fdfa; --activity-border: #14b8a6; --activity-text: #0f766e; }
.activity-cultural { --activity-bg: #eef2ff; --activity-border: #6366f1; --activity-text: #3730a3; }
.activity-walk,
.activity-neighborhood { --activity-bg: #f3f8f2; --activity-border: #84a98c; --activity-text: #3f5f46; }
.activity-sports { --activity-bg: #fff1f2; --activity-border: #fb7185; --activity-text: #9f1239; }
.activity-sunset { --activity-bg: #fff7ed; --activity-border: #f9a8d4; --activity-text: #9d174d; }
.activity-default { --activity-bg: #f8fafc; --activity-border: #94a3b8; --activity-text: #334155; }

/* ── API banner ── */
.api-banner { padding: 12px 16px; border-radius: 14px; margin-bottom: 12px; background: #fef3c7; color: #92400e; border-left: 4px solid var(--warn); border: 1px solid #fde68a; border-left: 4px solid var(--warn); }

/* ── Planning overlay ── */
.planning-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 37, 69, .55);
  backdrop-filter: blur(6px);
  z-index: 1800;
}
.planning-overlay-card {
  width: min(600px, 100%);
  padding: 36px 32px;
  text-align: center;
  color: var(--text-on-dark);
  background: linear-gradient(145deg, rgba(19, 60, 115, .97), rgba(11, 37, 69, .95));
  border: none;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}
.planning-trip { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.planning-status { font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.planning-progress { font-size: .95rem; opacity: .75; margin-bottom: 10px; }
.planning-message {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
  opacity: .35;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
  animation: planningPulse 1.6s ease-in-out infinite;
}
.planning-message.loading-visible { opacity: 1; transform: translateY(0); }
@keyframes planningPulse {
  0%, 100% { opacity: .92; }
  50% { opacity: .65; }
}

/* ── Modal ── */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 37, 69, .45);
  backdrop-filter: blur(6px);
  z-index: 1900;
}
.modal-card {
  width: min(720px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--base-light);
  border-radius: 24px;
  padding: 24px;
  border: none;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

/* ── Traveler Profile modal (GuideMe redesign) ── */
#prefsModal .modal-card {
  width: min(680px, calc(100% - 24px));
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 0;
  color: var(--text-900);
  overflow-y: auto;
  overflow-x: hidden;
}
#prefsModal .modal-card > .between {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper-1);
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  align-items: flex-start;
}
#prefsModal #prefsModalTitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--text-900);
}
#prefsModal #prefsModalTitle .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.prefs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-bottom: 8px;
}
.prefs-eyebrow-key {
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: 500;
}

.prefs-section { margin: 0; padding: 18px 28px; }
.prefs-section + .prefs-section { border-top: 1px solid var(--hair); }
.prefs-section h4 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  font-weight: 500;
}
.profile-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-900);
  letter-spacing: -0.005em;
}
.ai-summary-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-500);
  letter-spacing: -0.005em;
}
.prefs-divider { display: none; }

.profile-textarea-fixed {
  resize: none !important;
  width: 100%;
  box-sizing: border-box;
  background: var(--paper-0);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 10px 36px 10px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-900);
  letter-spacing: -0.005em;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.profile-textarea-fixed::placeholder {
  font-style: italic;
  color: var(--text-400);
}
.profile-textarea-fixed:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.12);
}

.textarea-expand-wrap { position: relative; }
.textarea-expand-wrap .profile-textarea-fixed { display: block; }
.textarea-expand-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(250,248,245,.85);
  border: 1px solid var(--secondary);
  padding: 3px 6px;
  font-size: .85rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
  backdrop-filter: blur(2px);
  transition: color .15s, background .15s, border-color .15s;
}
.textarea-expand-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--base-light); }

/* ── Textarea expand modal ── */
.textarea-expand-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; }
.textarea-expand-modal.hidden { display: none; }
.textarea-expand-backdrop { position: absolute; inset: 0; background: rgba(11,37,69,.4); }
.textarea-expand-dialog {
  position: relative;
  background: var(--base-light);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  width: min(640px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.textarea-expand-dialog-header { display: flex; align-items: center; justify-content: space-between; }
.textarea-expand-dialog-title { font-weight: 700; font-size: 1rem; }
.textarea-expand-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #dc2626;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color .15s, text-shadow .15s, background .15s;
}
.textarea-expand-close:hover { color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,.7); background: rgba(239,68,68,.08); }
.textarea-expand-editor {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border: 1px solid var(--secondary);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: var(--base-light);
  box-sizing: border-box;
}
.textarea-expand-editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,125,225,.12); }
.textarea-expand-actions { display: flex; justify-content: flex-end; }

.muted-text { color: var(--text-500); }
.panel .muted-text { color: var(--text-500); }

#prefsModal #deleteProfileBtn {
  background: none;
  border: 1px solid var(--hair);
  color: var(--text-500);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: auto;
  margin: 18px 28px 22px auto;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#prefsModal #deleteProfileBtn:hover:not(:disabled) {
  color: var(--err);
  border-color: var(--err);
  background: rgba(192,54,44,.06);
  text-shadow: none;
}
#prefsModal #deleteProfileBtn:disabled { opacity: .4; }
#prefsModal #deleteProfileBtn i { font-size: 12px; }
.profile-delete-bottom { width: auto; margin-top: 0; }

/* ── Profile questions ── */
.profile-questions { display: flex; flex-direction: column; gap: 0; margin: 0; }
.profile-question {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--hair);
}
.profile-question:last-child { border-bottom: 0; }
.profile-question p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-900);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.profile-question--text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--hair);
}
.profile-question--text:last-child { border-bottom: 0; }
.profile-question--text p { margin: 0; }

/* ── Dot scale (Profile modal rows) ── */
.dot-scale-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.dot-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 2;
  position: relative;
}
.dot-scale::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: var(--hair);
  z-index: 0;
}
.dot-scale-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1px solid var(--hair-strong);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.dot-scale-dot:hover {
  transform: scale(1.1);
  border-color: var(--text-900);
}
.dot-scale-dot.done {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.dot-scale-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.16);
}
.dot-scale-label {
  order: 1;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-700);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.dot-scale-label.is-default { color: var(--text-400); }

/* ── Learned-by-AI tag list (re-skin) ── */
.learned-pref-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 4px 6px 4px 12px;
  font-size: 12px;
  color: var(--text-700);
  margin: 0 6px 6px 0;
}
.learned-pref-remove {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-400);
  padding: 2px;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex;
}
.learned-pref-remove:hover { color: var(--err); }

@media (max-width: 640px) {
  .profile-question {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dot-scale-wrap { justify-content: flex-start; }
  .dot-scale-label { text-align: left; }
}

/* ── Step nav (sticky bottom bar) ── */
.step-nav { margin-top: 16px; display: flex; justify-content: center; min-height: 0; }
.step-nav-split { flex-direction: row; justify-content: center; align-items: center; gap: 4px; }
.sticky-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--secondary-light);
  border-radius: 28px;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  margin: 0;
}
.nav-primary { font-size: 1.4rem; color: var(--accent) !important; background: none !important; border: none !important; }
.nav-primary:hover:not(:disabled) { color: var(--accent-hover) !important; text-shadow: 0 0 10px rgba(42,125,225,.6); background: rgba(42,125,225,.08) !important; }
.nav-secondary { font-size: 1.4rem; color: var(--text-muted) !important; background: none !important; border: none !important; }
.nav-secondary:hover:not(:disabled) { color: var(--text) !important; text-shadow: 0 0 8px rgba(100,116,139,.5); background: rgba(100,116,139,.08) !important; }
.save-progress-btn { font-size: 1.2rem; }

/* ── Chat widget (Concierge — dark-theme redesign) ── */
:root {
  --chat-ink: #0A1628;
  --chat-paper: #F4F1EC;
  --chat-accent: #2F7DFB;
  --chat-accent-hover: #1D6DE8;
  --chat-accent-deep: #0B4AB8;
  --chat-ease-out: cubic-bezier(.2, .8, .2, 1);
  --chat-font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --chat-font-mono: 'Geist Mono', ui-monospace, monospace;
  --chat-font-display: 'Instrument Serif', Georgia, serif;
}

#chatWidget {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  font-family: var(--chat-font-sans);
}

body.overlay-active { overflow: hidden; }
body.overlay-active .sticky-nav,
body.overlay-active #chatWidget {
  opacity: 0;
  pointer-events: none;
}

/* Floating action button (collapsed) */
#chatBubble {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--chat-ink);
  color: var(--chat-paper);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 0;
  box-shadow:
    0 1px 2px rgba(10,22,40,.10),
    0 18px 48px rgba(10,22,40,.22),
    0 4px 12px rgba(10,22,40,.10);
  transition: transform 240ms var(--chat-ease-out);
}
#chatBubble:hover .chat-fab-icon { transform: rotate(-6deg) scale(1.04); }
.chat-fab-icon {
  display: inline-flex; position: relative;
  transition: transform 240ms var(--chat-ease-out);
}
.chat-fab-glint {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chat-accent);
  box-shadow: 0 0 10px rgba(47,125,251,.9);
  animation: chat-glint-pulse 2.4s ease-in-out infinite;
}
.chat-fab-halo {
  position: absolute; inset: 0; border-radius: 50%;
  animation: chat-halo-ripple 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes chat-glint-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.55; }
}
@keyframes chat-halo-ripple {
  0% { box-shadow: 0 0 0 0 rgba(47,125,251,.55); }
  100% { box-shadow: 0 0 0 14px rgba(47,125,251,0); }
}
#chatWidget[data-state="expanded"] #chatBubble { display: none; }

/* Expanded panel */
#chatPanel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 96px));
  background: var(--chat-ink);
  color: var(--chat-paper);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(10,22,40,.10),
    0 30px 80px rgba(10,22,40,.30),
    0 10px 24px rgba(10,22,40,.14);
  display: flex; flex-direction: column;
  position: absolute; bottom: 0; right: 0;
  transform-origin: 100% 100%;
  animation: chat-panel-in 280ms var(--chat-ease-out);
  overflow: hidden;
}
#chatPanel.hidden { display: none; }
@keyframes chat-panel-in {
  from { opacity: 0; transform: scale(.6) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header */
#chatHeader {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(244,241,236,.10);
  background: transparent;
  color: var(--chat-paper);
  border-radius: 0;
  font-weight: 400;
}
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #4D8FFF 0%, #2F7DFB 45%, #0B4AB8 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  position: relative; flex-shrink: 0;
}
.chat-avatar::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(47,125,251,.45);
  animation: chat-avatar-pulse 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes chat-avatar-pulse {
  0% { transform: scale(1); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}
.chat-identity { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.chat-name {
  font-size: 14.5px; font-weight: 500;
  color: var(--chat-paper);
  line-height: 1;
}
.chat-name-me {
  font-family: var(--chat-font-display);
  font-style: italic;
  font-size: 17px;
  margin-left: 1px;
}
.chat-status {
  font-family: var(--chat-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244,241,236,.55);
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1;
}
.chat-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6EDB96;
  box-shadow: 0 0 6px rgba(110,219,150,.6);
}
#chatClose {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(244,241,236,.6);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 140ms var(--chat-ease-out), color 140ms var(--chat-ease-out), transform 140ms var(--chat-ease-out);
}
#chatClose:hover { background: rgba(244,241,236,.08); color: var(--chat-paper); transform: rotate(90deg); text-shadow: none; }

/* Messages */
#chatMessages {
  flex: 1; overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-msg-user, .chat-msg-assistant {
  max-width: 86%;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: chat-msg-in 360ms var(--chat-ease-out);
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--chat-accent);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat-msg-assistant {
  align-self: flex-start;
  background: rgba(244,241,236,.06);
  border: 1px solid rgba(244,241,236,.05);
  color: var(--chat-paper);
  border-radius: 14px 14px 14px 4px;
  position: relative;
}
.chat-msg-assistant a { color: #8BB7FF; text-decoration: underline; }
.chat-role-label {
  display: block;
  font-family: var(--chat-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,241,236,.45);
  margin-bottom: 4px;
}
.chat-msg-assistant.chat-msg-welcome .chat-msg-sub {
  display: block; margin-top: 6px; opacity: .65;
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  background: rgba(244,241,236,.06);
  border: 1px solid rgba(244,241,236,.05);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  display: inline-flex; gap: 4px;
}
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(244,241,236,.55);
  animation: chat-typing-bounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes chat-typing-bounce {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Suggestions */
.chat-suggestions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 18px 12px;
}
.chat-suggestions.hidden { display: none; }
.chat-suggestions-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--chat-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,241,236,.5);
  margin: 0 0 2px;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  animation: chat-fade 200ms var(--chat-ease-out) 180ms backwards;
  transition: color 140ms var(--chat-ease-out);
}
.chat-suggestions-label:hover { color: rgba(244,241,236,.85); }
.chat-suggestions-label i { font-size: 12px; transition: transform 140ms var(--chat-ease-out); }
.chat-suggestions--collapsed { padding-bottom: 6px; }
.chat-suggestion-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: rgba(244,241,236,.04);
  border: 1px solid rgba(244,241,236,.08);
  border-radius: 12px;
  color: var(--chat-paper);
  font-family: var(--chat-font-sans);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--chat-ease-out), border-color 140ms var(--chat-ease-out), transform 140ms var(--chat-ease-out);
  animation: chat-chip-in 420ms var(--chat-ease-out) both;
}
.chat-suggestion-chip:nth-child(2) { animation-delay: 220ms; }
.chat-suggestion-chip:nth-child(3) { animation-delay: 300ms; }
.chat-suggestion-chip:nth-child(4) { animation-delay: 380ms; }
.chat-suggestion-chip:hover {
  background: rgba(244,241,236,.09);
  border-color: rgba(47,125,251,.45);
  transform: translateY(-1px);
}
.chat-suggestion-chip:hover .chat-suggestion-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.chat-suggestion-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(47,125,251,.16);
  color: #8BB7FF;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.chat-suggestion-text { flex: 1; }
.chat-suggestion-arrow {
  opacity: .4;
  transition: transform 140ms var(--chat-ease-out), opacity 140ms var(--chat-ease-out);
  font-family: var(--chat-font-sans);
}
@keyframes chat-chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Footer */
#chatInputArea {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(244,241,236,.10);
}
.chat-input-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(244,241,236,.06);
  border: 1px solid rgba(244,241,236,.10);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  transition: background 140ms var(--chat-ease-out), border-color 140ms var(--chat-ease-out), box-shadow 140ms var(--chat-ease-out);
}
.chat-input-pill:focus-within {
  background: rgba(244,241,236,.08);
  border-color: rgba(47,125,251,.55);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}
#chatInput {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--chat-paper);
  font-size: 13.5px;
  font-family: var(--chat-font-sans);
  margin: 0;
  padding: 0;
}
#chatInput::placeholder { color: rgba(244,241,236,.4); }
#chatSend {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--chat-accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms var(--chat-ease-out), transform 140ms var(--chat-ease-out), opacity 140ms var(--chat-ease-out);
}
#chatSend:hover { background: var(--chat-accent-hover); }
#chatSend:active { transform: scale(.92); }
#chatSend:disabled { opacity: .35; cursor: not-allowed; }
.chat-legal {
  text-align: center;
  font-family: var(--chat-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,241,236,.35);
  margin: 0;
}
.chat-legal-mark { color: var(--chat-accent); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-fab-halo, .chat-fab-glint, .chat-avatar::after,
  .chat-typing span { animation: none; }
  #chatPanel { animation: chat-fade 120ms var(--chat-ease-out); }
  .chat-msg-user, .chat-msg-assistant,
  .chat-suggestion-chip, .chat-suggestions-label { animation: none; }
  #chatClose:hover { transform: none; }
  #chatBubble:hover .chat-fab-icon { transform: none; }
}

/* ── Nav hint ── */
.nav-hint { margin: 0; font-size: .9rem; }

/* ── Itinerary insights ── */
.itinerary-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.itinerary-insight-card {
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  background: var(--base-light);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.itinerary-insight-card h4 { margin: 0 0 6px; }
.itinerary-insight-card p { margin: 0 0 4px; font-size: .92rem; }
.pace-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
  background: #dbeafe;
  color: #1e40af;
}
.pace-pill.pace-light { background: #dcfce7; color: #166534; }
.pace-pill.pace-balanced { background: #fef3c7; color: #92400e; }
.pace-pill.pace-packed { background: #fee2e2; color: #991b1b; }

/* ── My trips / saved itineraries ── */
.my-trips-panel {
  margin-top: 18px;
  border: 1px solid var(--secondary-light);
  border-radius: 16px;
  background: var(--secondary-light);
  padding: 16px;
}
.draft-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  vertical-align: middle;
  margin-left: 6px;
}
.draft-item { border-color: #fde68a; background: #fffbeb; }
.saved-itineraries-panel {
  margin-top: 14px;
  border: 1px solid var(--secondary-light);
  border-radius: 16px;
  background: var(--secondary-light);
  padding: 16px;
}
.saved-itineraries-list { display: flex; flex-direction: column; gap: 10px; }
.saved-itinerary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--secondary-light);
  border-radius: 14px;
  background: var(--base-light);
  box-shadow: var(--shadow-sm);
}
.saved-itinerary-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(42, 125, 225, .12);
}
.saved-itinerary-item h4 { margin: 0 0 4px; }
.saved-itinerary-item p { margin: 0; font-size: .9rem; color: var(--text-muted); }
.saved-itinerary-actions { display: flex; gap: 8px; }

/* ── Toast notifications ── */
.toast-host {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1500;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(250, 248, 245, 0.98);
  border: 1px solid var(--secondary-light);
  border-left-width: 4px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.hide { transform: translateY(8px); opacity: 0; }
.toast-icon {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; margin-top: 1px;
}
.toast-message { line-height: 1.35; font-weight: 600; }
.toast-success { border-left-color: var(--ok); }
.toast-success .toast-icon { background: #dcfce7; color: #166534; }
.toast-error { border-left-color: var(--bad); }
.toast-error .toast-icon { background: #fee2e2; color: #991b1b; }
.toast-info { border-left-color: var(--accent); }
.toast-info .toast-icon { background: #dbeafe; color: #1e40af; }

/* ── Responsive: Compact (<768px) ── */
@media (max-width: 767px) {
  /* Scale the entire UI down — everything using rem/inherit cascades from this */
  html { font-size: 13px; }

  .container { padding: 0 10px 24px; margin-top: 10px; }
  .panel { padding: 14px 10px; }

  /* Forms: tighten padding globally */
  input, textarea, select { padding: 6px 10px; font-size: 0.85rem; }
  .tp-place-autocomplete { max-width: 100%; box-sizing: border-box; }
  .city-autocomplete { max-width: 100%; }
  label { margin-bottom: 6px; font-size: 0.85rem; }

  /* Buttons: compact */
  button { min-height: 34px; padding: 5px 10px; font-size: 0.82rem; }
  .nav-primary, .nav-secondary { font-size: 1.2rem; }

  /* Setup actions: stay inline */
  .setup-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }

  .review-toolbar { grid-template-columns: 1fr; }

  /* City row: 3-row compact grid */
  .city-row { padding: 8px; margin-bottom: 6px; border-radius: 10px; }
  .city-row-main {
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px;
  }
  .city-row-main > :nth-child(1) { grid-column: 1; grid-row: 1; min-height: unset; align-self: center; }
  .city-row-main > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .city-row-main > :nth-child(5) { grid-column: 4; grid-row: 1; min-height: unset; padding: 4px 8px; font-size: .75rem; align-self: center; }
  .city-row-main > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .city-row-main > :nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .city-row-main input[type="date"] { width: 100%; min-width: 0; padding: 4px 2px; font-size: 0.75rem; -webkit-appearance: none; }

  /* Drawer sections: tighter */
  .city-dropdown-section { padding: 6px; border-radius: 10px; overflow: hidden; max-width: 100%; box-sizing: border-box; }
  .city-dropdown-grid { gap: 4px; overflow: hidden; }
  .city-dropdown-label { font-size: 0.75rem; margin-bottom: 3px; }
  .city-drawer { overflow: hidden; }
  .hotel-row, .travel-row { grid-template-columns: 1fr; }
  .accommodation-row { grid-template-columns: 1fr 1fr; }
  .accommodation-row > :first-child { grid-column: 1 / -1; }
  .accommodation-row input[type="date"] { padding: 4px 2px; font-size: 0.75rem; min-width: 0; width: 100%; }
  .arrival-row, .departure-row { grid-template-columns: 1fr auto; }
  .arrival-row input[type="date"],
  .arrival-row input[type="time"],
  .departure-row input[type="date"],
  .departure-row input[type="time"] { padding: 4px 2px; font-size: 0.75rem; min-width: 0; }

  /* Topbar */
  .topbar { padding: 8px 10px; }
  .topbar-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .topbar-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }

  /* Step nav */
  .step-nav-split { gap: 4px; }
  .sticky-nav { left: 50%; transform: translateX(-50%); height: 48px; border-radius: 24px; padding: 0 12px; max-width: calc(100vw - 20px); }

  /* Activity cards: compact preview on mobile — tap to expand */
  .activity-card { perspective: none; min-height: unset; cursor: pointer; }
  .activity-card.is-flipped { perspective: 1200px; }
  .activity-card-inner { min-height: unset; transform-style: flat; }
  .activity-card-face { position: relative; inset: auto; overflow: hidden; }
  .activity-card-back { display: none; }
  .activity-card .card-content > *:nth-child(n+3) { display: none; }
  .activity-card .card-content > .activity-card-head-actions { display: flex; }
  .activity-card .card-content > h3 { display: block; }
  .activity-card .flip-btn { display: flex; }
  .cards-grid { grid-template-columns: 1fr; }
  .activity-card-placeholder { min-height: 180px; }

  /* Fullscreen expanded card overlay */
  .card-expand-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--base-light);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: cardExpandIn .3s ease;
  }
  .card-expand-overlay.closing { animation: cardExpandOut .25s ease forwards; }
  @keyframes cardExpandIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes cardExpandOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(40px); } }
  .card-expand-close {
    position: fixed; top: 12px; right: 12px; z-index: 2001;
    background: none; border: none; color: #dc2626;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: 6px;
  }
  .card-expand-close:hover { color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,.7); background: rgba(239,68,68,.08); }
  .card-expand-body { padding: 0 0 80px; }
  .card-expand-body img { width: 100%; height: 220px; object-fit: cover; }
  .card-expand-body .card-content { padding: 16px; }
  .card-expand-body .card-content > * { display: block !important; }
  .card-expand-body .card-content > .activity-card-head-actions { display: flex !important; }

  /* Map overlay: full-screen on mobile */
  .activity-map-overlay { padding: 0; }
  .activity-map-shell { border-radius: 0; }
  .activity-map-topbar { padding: 14px 16px; }
  .close-activity-map { font-size: 1.3rem; }

  /* Misc */
  .itinerary-mode-head { flex-direction: column; align-items: flex-start; }
  .itinerary-mode-toolbar { width: 100%; }
  .itinerary-mode-toolbar button { flex: 1; min-height: 34px; }
  .toast-host { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .steps { flex-wrap: wrap; }
  .modal-card { border-radius: 16px 16px 0 0; max-height: 92vh; position: fixed; bottom: 0; }
  #chatPanel { position: fixed; width: 100vw; height: 70vh; left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; transform-origin: 100% 100%; }
}

/* ── Responsive: Medium (768–1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { max-width: 720px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Print ── */
@media print {
  .topbar, .mode-toggle, .steps, .step-panel, #chatWidget,
  .itinerary-mode-toolbar, .saved-itineraries-panel, #downloadCalendarBtn, .sticky-nav {
    display: none !important;
  }
  body, .container, .panel, #itineraryModeView {
    display: block !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }
}

/* ── Calendar sync ── */
.calendar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Budget tracker ── */
.budget-tracker {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  font-weight: 500;
}
.budget-tracker.budget-green { background: #dcfce7; color: #166534; border: 1.5px solid rgba(22,101,52,0.2); }
.budget-tracker.budget-yellow { background: #fef3c7; color: #92400e; border: 1.5px solid rgba(146,64,14,0.2); }
.budget-tracker.budget-red { background: #fee2e2; color: #991b1b; border: 1.5px solid rgba(153,27,27,0.2); }
.budget-tracker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.budget-tracker-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
.budget-tracker-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.budget-label { font-weight: 700; }
.budget-info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 0.85rem;
  line-height: 1;
  position: relative;
}
.budget-info-btn:hover { opacity: 1; }
.budget-info-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  background: #1e293b;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 50;
}
.budget-remaining-amt { font-size: 0.82rem; opacity: 0.85; }
.budget-caveat { font-size: 0.78rem; opacity: 0.75; }
.budget-bar-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: currentColor;
  transition: width 0.3s ease;
}

/* ── Activity cost + booking links ── */
.activity-cost { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.cost-per-person-input { width: 5ch; border: none; border-bottom: 1px dashed var(--muted); background: transparent; font: inherit; color: inherit; text-align: right; padding: 0 2px; -moz-appearance: textfield; }
.cost-per-person-input::-webkit-outer-spin-button,
.cost-per-person-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cost-per-person-input:focus { outline: none; border-bottom-color: var(--accent); }
.booking-links { display: flex; gap: 6px; flex-wrap: wrap; }
.booking-link {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}
.booking-link:hover { background: var(--accent-hover); }

/* ── Trip meta row ── */
.trip-meta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.trip-meta-row label { flex: 1; min-width: 180px; }

/* ── Drag & drop polish ── */
.sortable-ghost {
  opacity: .4;
  border: 2px dashed var(--accent) !important;
  border-radius: 12px;
}
.sortable-chosen {
  box-shadow: 0 8px 28px rgba(0,0,0,.15) !important;
  transform: rotate(1deg);
  z-index: 100;
}
.sortable-drag {
  opacity: 1 !important;
}

/* ── Card hover polish ── */
.card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Smooth panel transitions ── */
.panel.active {
  animation: panelFadeIn .25s ease;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Learned preferences tags ── */
.learned-prefs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.learned-pref-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text);
}
.learned-pref-remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  line-height: 1;
}
.learned-pref-remove:hover {
  color: var(--danger);
}

/* ── Budget Optimization Overlay ── */
.budget-opt-overlay {
  position: fixed; inset: 0; z-index: 1700;
  background: rgba(11,37,69,.72); backdrop-filter: blur(4px);
  overflow-y: auto; padding: 24px;
}
.budget-opt-overlay.hidden { display: none; }

.budget-opt-shell { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 80px; }

.budget-opt-header {
  background: var(--base-light); border-radius: 16px; padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.budget-opt-header h3 { margin: 0; width: 100%; }
.budget-opt-desc { width: 100%; margin: 0; font-size: .875rem; opacity: .75; flex: none; }
.budget-opt-header-actions { display: flex; gap: 8px; margin-left: auto; }

.budget-opt-grid { /* inherits .cards-grid */ }

.opt-card { position: relative; overflow: visible; }
.card.activity-card.opt-card {
  background: var(--paper-1);
  border: 1px solid rgba(10,22,40,.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(10,22,40,.06),
    0 4px 12px rgba(10,22,40,.07),
    0 16px 36px rgba(10,22,40,.08);
}
.card.activity-card.opt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,22,40,.16);
  box-shadow:
    0 2px 4px rgba(10,22,40,.06),
    0 12px 28px rgba(10,22,40,.10),
    0 32px 56px rgba(10,22,40,.12);
}
.opt-card .opt-card-img-wrap img { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.opt-card .card-content {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opt-card .card-content h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-900);
  margin: 0;
}
.opt-card .card-content p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-700);
  margin: 0;
}
.opt-card-inner {
  background: var(--paper-1);
  border-radius: var(--r-lg);
}
.opt-card-face {
  background: var(--paper-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.opt-lock-btn, .opt-flip-btn {
  position: absolute; top: 6px; right: 6px; z-index: 10;
  background: rgba(250,248,245,.9); border: 1px solid var(--secondary);
  border-radius: 50%; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  color: var(--text-muted, #6b7280);
  /* Extend touch target without growing the visible button */
  touch-action: manipulation;
}
.opt-lock-btn::after, .opt-flip-btn::after {
  content: ''; position: absolute; inset: -10px;
}
.opt-lock-btn:hover, .opt-flip-btn:hover { color: var(--accent); border-color: var(--accent); }
.opt-card--locked .opt-lock-btn { color: #d97706; border-color: #fcd34d; background: #fef3c7; }

.opt-card--flip { perspective: 1200px; }
.opt-card-inner {
  position: relative; transform-style: preserve-3d;
  transition: transform .4s ease;
}
.opt-card--flip.is-showing-original .opt-card-inner { transform: rotateY(180deg); }
.opt-card-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.opt-card-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background: var(--base-light); border-radius: 12px;
  overflow: hidden;
}
.opt-card--refined-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 2px 10px; display: inline-block; margin-bottom: 4px;
}

.budget-opt-footer {
  background: var(--base-light); border-radius: 16px; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 960px; z-index: 1800;
}
.budget-opt-footer.hidden { display: none; }
.budget-opt-progress-wrap {
  flex: 1; min-width: 160px; height: 12px; border-radius: 999px;
  background: var(--secondary-light); overflow: hidden;
}
.budget-opt-progress-bar {
  height: 100%; border-radius: 999px; background: var(--ok);
  transition: width .3s ease, background .3s ease;
}
.budget-opt-progress-bar.bar-yellow { background: var(--warn); }
.budget-opt-progress-bar.bar-red { background: var(--bad); }
.budget-opt-progress-label { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.budget-optimize-btn { margin-left: auto; }

.opt-card-img-wrap { position: relative; }
.opt-cost-chip {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(11,37,69,.72); color: #fff;
  font-size: .8rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  pointer-events: none;
  display: none;
}
@media (max-width: 600px) {
  .opt-cost-chip { display: block; }
}

/* ── Profile Creation Wizard (GuideMe redesign) ── */
.profile-wizard-overlay {
  position: fixed; inset: 0; z-index: 1700;
  background: rgba(7,11,18,.62);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: wiz-scrim-in var(--dur-med) var(--ease-out);
}
.profile-wizard-overlay.hidden { display: none; }
@keyframes wiz-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wiz-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-wizard-shell {
  width: 100%; max-width: 560px;
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: wiz-card-in 360ms var(--ease-out);
}

/* Header */
.profile-wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
  background: var(--paper-1);
}
.wizard-step-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  font-variant-numeric: tabular-nums;
}
.wizard-step-counter::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.16);
}
.wizard-step-counter strong {
  font-weight: 500;
  color: var(--text-900);
}
.wizard-cancel-btn {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wizard-cancel-btn:hover {
  color: var(--text-900);
  border-color: var(--hair-strong);
  background: var(--paper-2);
}

/* Progress bar + pip ladder */
.profile-wizard-progress-bar-wrap {
  height: 2px;
  border-radius: 999px;
  background: var(--hair);
  overflow: hidden;
  margin: 14px 24px 0;
}
.profile-wizard-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--ink-900);
  width: 0%;
  transition: width 480ms var(--ease-out);
}
.wizard-pip-ladder {
  display: flex;
  gap: 4px;
  margin: 8px 24px 0;
}
.wizard-pip {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wizard-pip.done {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.wizard-pip.current {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}

/* Body */
.profile-wizard-card {
  background: var(--paper-1);
  padding: 26px 36px 28px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wizard-body-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
}
.wizard-body-eyebrow .key {
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.wizard-question-label {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  margin: 0;
  color: var(--text-900);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.wizard-question-label .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.wizard-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-500);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* Inputs */
.wizard-text-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-900);
  background: var(--paper-0);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  resize: none;
}
.wizard-text-input::placeholder {
  font-style: italic;
  color: var(--text-400);
}
.wizard-text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.12);
}
.wizard-textarea { resize: vertical; min-height: 96px; }

/* Name step — borderless underline */
.wizard-name-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  border-radius: 0;
  padding: 8px 0;
  font-size: 26px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--text-900);
}
.wizard-name-input:focus {
  outline: none;
  border-bottom-color: var(--ink-900);
  box-shadow: none;
}

/* Scale step */
.wizard-dot-scale-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.wizard-scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wizard-scale-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  color: var(--text-900);
  line-height: 1.05;
}
.wizard-scale-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  font-variant-numeric: tabular-nums;
}
.wizard-dot-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  position: relative;
  padding: 12px 4px;
}
.wizard-dot-scale::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: var(--hair);
  transform: translateY(-50%);
  z-index: 0;
}
.wizard-dot-scale::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  height: 1px;
  background: var(--ink-900);
  transform: translateY(-50%);
  width: var(--wiz-fill, 0%);
  transition: width 320ms var(--ease-out);
  z-index: 0;
}
.wizard-dot-scale .dot-scale-dot {
  width: 14px;
  height: 14px;
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out);
}
.wizard-dot-scale .dot-scale-dot.done {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.wizard-dot-scale .dot-scale-dot.active {
  width: 22px;
  height: 22px;
  background: var(--paper-1);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(47,125,251,.16);
}
.wizard-scale-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
}
.wizard-scale-label { display: none; }

/* Why-we-ask aside */
.wizard-aside {
  margin-top: auto;
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--text-700);
  line-height: 1.5;
}
.wizard-aside .key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  flex-shrink: 0;
  padding-top: 1px;
}

/* Footer */
.profile-wizard-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--hair);
  background: var(--paper-1);
}
.profile-wizard-nav .wizard-hint {
  justify-self: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-wizard-nav .wizard-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-700);
}
.profile-wizard-nav #wizardBackBtn,
.profile-wizard-nav #wizardNextBtn {
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--hair);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.profile-wizard-nav #wizardBackBtn {
  background: transparent;
  color: var(--text-700);
}
.profile-wizard-nav #wizardBackBtn:hover { background: var(--paper-2); color: var(--text-900); }
.profile-wizard-nav #wizardNextBtn {
  background: var(--ink-900);
  color: var(--paper-0);
  border-color: var(--ink-900);
}
.profile-wizard-nav #wizardNextBtn:hover { background: var(--ink-800); }
.profile-wizard-nav #wizardBackBtn.hidden { visibility: hidden !important; display: inline-flex !important; pointer-events: none; }

@media (max-width: 640px) {
  .profile-wizard-overlay { padding: 16px; }
  .profile-wizard-shell { border-radius: var(--r-lg); }
  .profile-wizard-card { padding: 22px 22px 24px; min-height: 320px; }
  .wizard-question-label { font-size: 24px; }
  .wizard-scale-value { font-size: 30px; }
}

/* Finalize modal */
.finalize-modal-card { max-width: 720px; }
.finalize-day-group { margin-bottom: 16px; }
.finalize-day-label { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; }
.finalize-time {
  flex-shrink: 0; width: 84px;
  font-size: 0.85rem; padding: 2px 6px;
  border: 1px solid var(--secondary-light); border-radius: 6px;
  background: var(--base-light); color: var(--text);
}
.finalize-time-sep { flex-shrink: 0; font-size: 0.85rem; color: var(--text-muted); }
.finalize-expanded { padding: 10px 14px 12px; border-top: 1px solid var(--secondary-light); }
.finalize-exp-line { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.finalize-exp-line:last-child { margin-bottom: 0; }
.finalize-conflict-banner {
  margin-top: 12px; padding: 10px 14px;
  background: var(--warning-bg, #fff8e7); color: var(--warning-text, #7a5a00);
  border: 1px solid var(--warning-border, #f0c040);
  border-radius: 8px; font-size: 0.85rem;
}
.finalize-conflict-icon { margin-right: 4px; }

/* =====================================================================
   STAGE 5 — SETUP (Step 1) reskin
   Overrides target only existing selectors so JS render output is unchanged.
   Mock reference: design_handoff_redesign/mocks/Setup.html
   ===================================================================== */

/* Container width — mock uses 1120px, the app uses 960px. Bump to match. */
.container { max-width: 1120px; padding: 0 clamp(20px, 4vw, 40px) 80px; margin: 32px auto 0; }

/* Stepper — pill-shaped chips become numbered nodes on a hairline track */
.steps {
  display: flex;
  gap: 0;
  align-items: flex-start;
  margin-bottom: 32px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(14px + 5%);
  right: calc(14px + 5%);
  height: 1px;
  background: var(--hair-strong);
  z-index: 0;
}
.step {
  flex: 1;
  background: transparent;
  color: var(--text-500);
  border: 0;
  padding: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition: color var(--dur-fast);
}
/* The existing markup is `<div class="step">1. Setup</div>` — turn the leading
   `1. ` into a node-like badge with CSS counters + ::before. Easier: just style
   the whole chip as a single horizontal label below an emoji-free dot. We achieve
   the node by repainting the chip itself as a row: bullet + label. */
.step::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--hair-strong);
  background: var(--paper-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-500);
  box-shadow: 0 0 0 4px var(--paper-0);
  transition: all var(--dur-med) var(--ease-out);
}
.steps .step:nth-child(1)::before { content: '1'; }
.steps .step:nth-child(2)::before { content: '2'; }
.steps .step:nth-child(3)::before { content: '3'; }
.steps .step:nth-child(4)::before { content: '4'; }
/* Hide the existing "1. " / "2. " prefix the markup ships with — keep only the label */
.step { font-size: 0; }
.step::before { font-size: 11px; }
.step::after {
  content: attr(data-step-label);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-500);
  transition: color var(--dur-fast);
}

.step.active {
  background: transparent;
  border: 0;
  color: var(--text-900);
}
.step.active::before {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--paper-0), 0 0 0 5px rgba(47,125,251,.25);
}
.step.active::after { color: var(--text-900); font-weight: 600; }
.step.reachable:not(.active) {
  background: transparent;
  color: var(--text-500);
  border: 0;
}
.step.reachable:not(.active):hover {
  background: transparent;
  color: var(--text-900);
  border: 0;
  opacity: 1;
}
.step.reachable:not(.active):hover::before { border-color: var(--text-900); color: var(--text-900); }
.step.reachable:not(.active):hover::after { color: var(--text-900); }

/* Panels — ivory card, hairline border, subtle shadow */
.panel {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 28px clamp(20px, 3vw, 32px);
  box-shadow: var(--sh-sm);
}
.card-panel {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
}

/* Headings inside panels */
.panel h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-900);
  line-height: 1.1;
  margin: 0 0 22px;
}
.panel h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-900);
  margin: 18px 0 10px;
}

/* Form fields — paper-0 surface, tighter radius, mono dates */
input, textarea {
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: 0 12px;
  height: 38px;
  font-size: 13.5px;
  color: var(--text-900);
  letter-spacing: -0.005em;
}
textarea { height: auto; min-height: 64px; padding: 9px 12px; line-height: 1.5; }
input[type="date"], input[type="time"], input[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}
select {
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: 0 32px 0 12px;
  height: 38px;
  font-size: 13.5px;
  color: var(--text-900);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%235A6679' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-bottom: 12px;
}
label > input, label > textarea, label > select { margin-top: 6px; }

/* Buttons — pills, ink primary, ghost secondary */
button { padding: 0 16px; height: 38px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; border-radius: var(--r-pill); }
button.primary { background: var(--ink-900); color: var(--paper-0); }
button.primary:hover:not(:disabled) { background: var(--ink-800); box-shadow: var(--sh-md); transform: none; }
button.secondary {
  background: transparent;
  color: var(--text-700);
  border: 1px solid var(--hair-strong);
}
button.secondary:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--text-900);
  border-color: var(--text-900);
}

/* Setup-specific */
.trip-meta-row { gap: 12px; margin-bottom: 16px; }
.setup-actions { gap: 10px; margin: 8px 0 14px; }
.setup-insights {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--text-500);
  padding: 12px 14px;
  font-size: 13px;
}
.setup-insights strong { color: var(--text-900); font-weight: 500; }
.setup-insights .warn { color: var(--err); font-weight: 500; }

/* City rows — paper-1 card with hairline */
.city-row {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--paper-1);
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-fast);
}
.city-row:hover { border-color: var(--hair-strong); }
.city-row-main { gap: 10px; }
.city-notes-row,
.city-drawer { border-top: 1px solid var(--hair); }
.city-dropdown-section {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--paper-0);
  padding: 14px;
}
.city-dropdown-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
}

/* City suggestions dropdown */
.city-suggestions {
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.city-suggestion-item { padding: 9px 14px; font-weight: 500; font-size: 13.5px; color: var(--text-900); }
.city-suggestion-item:hover,
.city-suggestion-item.active { background: var(--accent-soft); }
.city-suggestion-item + .city-suggestion-item { border-top: 1px solid var(--hair); }

/* Floating step nav — paper-1 pill, hair-strong border, sh-lg shadow */
.sticky-nav {
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  height: 50px;
  padding: 0 10px;
}
.nav-primary {
  font-size: 1rem !important;
  width: 38px; height: 38px;
  border-radius: 50% !important;
  background: var(--ink-900) !important;
  color: var(--paper-0) !important;
}
.nav-primary:hover:not(:disabled) {
  background: var(--ink-800) !important;
  color: var(--paper-0) !important;
  text-shadow: none;
  box-shadow: var(--sh-md);
}
.nav-secondary {
  font-size: 1rem !important;
  width: 38px; height: 38px;
  border-radius: 50% !important;
  color: var(--text-700) !important;
}
.nav-secondary:hover:not(:disabled) {
  background: var(--paper-2) !important;
  color: var(--text-900) !important;
  text-shadow: none;
}
.save-progress-btn { font-size: 1rem; width: 38px; height: 38px; border-radius: 50%; }
.sticky-nav .icon-btn:disabled { opacity: .4; }

/* My Trips panel */
.my-trips-panel {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--paper-1);
  padding: 18px;
  margin-top: 18px;
}

/* =====================================================================
   STAGE 5b — Setup city accordion (collapsed list + expanded tabs)
   ===================================================================== */

/* Cities section header (Cities · N legs · Sort · Add) */
.cities-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.cities-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-900);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.cities-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-500);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.cities-actions { display: inline-flex; gap: 10px; margin: 0; align-items: center; }
.cities-actions .primary { background: var(--ink-900); color: var(--paper-0); border: 0; }
.cities-actions .primary:hover:not(:disabled) { background: var(--ink-800); }
.cities-actions .secondary {
  background: var(--paper-1);
  color: var(--text-700);
  border: 1px solid var(--hair-strong);
}
.cities-actions .secondary i,
.cities-actions .primary i { font-size: 13px; }
.cities-stack { display: flex; flex-direction: column; gap: 14px; }

/* City card */
.city-row.gm-city {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 0;
  margin: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.city-row.gm-city:hover { border-color: var(--hair-strong); }

.gm-city__head {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  background: transparent;
}
.gm-city__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper-0);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.gm-city__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-city__name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-900);
  min-width: 0;
}
.gm-city__name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gm-city__country {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-500);
  font-weight: 400;
}
.gm-city__sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-city__sub b { color: var(--text-700); font-weight: 500; }
.gm-city__sub-empty { color: var(--text-400); font-style: italic; }

.gm-city__dates {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--paper-0);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: border-color var(--dur-fast);
}
.gm-city__dates:hover { border-color: var(--text-900); }
.gm-city__dates .arrow { color: var(--text-400); }
.gm-city__dates .nights {
  color: var(--text-500);
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--hair);
}
.gm-city__date {
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
  width: auto;
  font: inherit;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-900);
  letter-spacing: 0.02em;
  margin: 0;
  cursor: pointer;
}
.gm-city__date:focus { outline: none; box-shadow: none; background: transparent; border: 0; }

.gm-city__chev,
.gm-city__del {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-500);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
  font-size: 14px;
}
.gm-city__chev:hover { background: var(--paper-2); color: var(--text-900); }
.gm-city__chev i { transition: transform var(--dur-fast) var(--ease-out); }
.city-row.gm-city:not(.collapsed) .gm-city__chev i { transform: rotate(90deg); }
.gm-city__del:hover { background: rgba(192,54,44,.08); color: var(--err); }
.gm-city__chev:disabled,
.gm-city__del:disabled { opacity: .4; cursor: not-allowed; }

/* Body */
.gm-city__body {
  border-top: 1px solid var(--hair);
  background: var(--paper-0);
}
.gm-city__tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper-1);
}
.gm-city__tab {
  padding: 14px 4px;
  margin-right: 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-500);
  letter-spacing: -0.005em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  display: inline-flex; align-items: center; gap: 7px;
  user-select: none;
}
.gm-city__tab:hover { color: var(--text-900); }
.gm-city__tab.active {
  color: var(--text-900);
  border-bottom-color: var(--accent);
}
.gm-city__tab .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-400);
}
.gm-city__tab.has-data .dot { background: var(--ok); }

.gm-pane { display: none; padding: 22px 22px 24px; }
.gm-pane.active { display: block; }

/* Field grid + inputs inside panes */
.gm-grid { display: grid; gap: 14px 16px; }
.gm-grid.c2 { grid-template-columns: 1fr 1fr; }
.gm-grid.c3 { grid-template-columns: 1.6fr 1fr 1fr; }
.gm-grid.c-loc-time { grid-template-columns: 1fr 160px; }
.gm-grid.c-mode-intl { grid-template-columns: 1fr 160px; }
@media (max-width: 720px) {
  .gm-grid.c2, .gm-grid.c3, .gm-grid.c-loc-time, .gm-grid.c-mode-intl { grid-template-columns: 1fr; }
}
.gm-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.gm-f > label {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.gm-f .opt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-400);
  font-weight: 400;
}
.gm-inp {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  font-size: 13.5px;
  color: var(--text-900);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  margin: 0;
}
.gm-inp::placeholder { color: var(--text-400); }
.gm-inp:hover { border-color: var(--text-400); }
.gm-inp:focus {
  border-color: var(--accent);
  background: var(--paper-0);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}
.gm-inp[readonly] { background: var(--paper-2); color: var(--text-500); cursor: default; }
.gm-inp[type="date"],
.gm-inp[type="time"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.gm-inp.with-icon {
  padding-left: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6679' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.gm-inp.with-pin {
  padding-left: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6679' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13Z'/><circle cx='12' cy='9' r='2.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
select.gm-inp {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%235A6679' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.gm-ta {
  width: 100%;
  min-height: 90px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--paper-1);
  border: 1px solid var(--hair-strong);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-900);
  resize: vertical;
  outline: none;
  letter-spacing: -0.005em;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.gm-ta:focus {
  border-color: var(--accent);
  background: var(--paper-0);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}
.gm-ta::placeholder { color: var(--text-400); }

.gm-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-700);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 500;
  font-family: var(--font-sans);
  margin: 0;
  height: 40px;
}
.gm-check-inline input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.gm-check-inline[hidden] { display: none; }

/* Error banner inside body */
.gm-city__body .city-dropdown-error {
  margin: 0 22px 22px;
  padding: 10px 14px;
  background: rgba(192,54,44,.08);
  border: 1px solid rgba(192,54,44,.22);
  border-radius: var(--r-md);
  color: var(--err);
  font-size: 13px;
}
.gm-city__body .city-dropdown-error.hidden { display: none; }

/* =====================================================================
   STAGE 5c — Review (Step 2) reskin
   Targets existing classes (.review-toolbar, .cards-grid, .card.activity-card)
   so renderActivities()/buildActivityCard() output is unchanged.
   ===================================================================== */

/* Panel head spacing for Review (used elsewhere too) */
.panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.panel__head h2 { margin: 0; }
.panel__sub {
  font-size: 13.5px;
  color: var(--text-500);
  margin: 6px 0 0;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* Review toolbar — pill search + pill selects + ink Approve All */
.review-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  align-items: center;
  grid-template-columns: none;
}
.review-toolbar .search {
  flex: 1;
  min-width: 260px;
  position: relative;
}
.review-toolbar .search i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-500);
  pointer-events: none;
}
.review-toolbar .search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border-radius: var(--r-pill);
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  font-size: 13.5px;
  color: var(--text-900);
  outline: none;
  margin: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.review-toolbar .search input::placeholder { color: var(--text-400); }
.review-toolbar .search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}

.review-toolbar select {
  height: 40px;
  padding: 0 38px 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper-0) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%235A6679' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
  border: 1px solid var(--hair-strong);
  font-size: 13.5px;
  color: var(--text-900);
  margin: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.review-toolbar select:hover { border-color: var(--text-900); }

.review-toolbar .approve-all {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--paper-0);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.review-toolbar .approve-all:hover:not(:disabled) {
  background: var(--ink-800);
  box-shadow: var(--sh-md);
  color: var(--paper-0);
}
.review-toolbar .approve-all i { font-size: 14px; }

/* Cards grid — 3D-flipper activity card */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card.activity-card {
  background: transparent;
  border: 0;
  border-radius: var(--r-lg);
  display: block;
  position: relative;
  perspective: 1600px;
  overflow: visible;
  box-shadow: none;
  padding: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.card.activity-card:hover { transform: translateY(-4px); }

.activity-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.72s var(--ease-inout);
  border-radius: var(--r-lg);
}
.card.activity-card.is-flipped .activity-card-inner { transform: rotateY(180deg); }

.activity-card-front {
  position: relative;
}
.activity-card-back {
  position: absolute;
  inset: 0;
}
.activity-card-face {
  display: flex;
  flex-direction: column;
  background: var(--paper-1);
  border: 1px solid rgba(10,22,40,.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 1px 2px rgba(10,22,40,.06),
    0 4px 12px rgba(10,22,40,.07),
    0 16px 36px rgba(10,22,40,.08);
  transition: box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.activity-card-back { transform: rotateY(180deg); }

.card.activity-card:hover .activity-card-face {
  border-color: rgba(10,22,40,.16);
  box-shadow:
    0 2px 4px rgba(10,22,40,.06),
    0 12px 28px rgba(10,22,40,.10),
    0 32px 56px rgba(10,22,40,.12);
}
.card.activity-card:not(.is-flipped) .activity-card-back,
.card.activity-card.is-flipped .activity-card-front { pointer-events: none; }

/* Approved / declined state tints (existing handlers add .approved / .declined) */
.card.activity-card.approved .activity-card-face {
  border-color: rgba(31,157,85,.85);
  box-shadow:
    inset 0 0 0 2px rgba(31,157,85,.85),
    0 1px 2px rgba(10,22,40,.06),
    0 4px 12px rgba(31,157,85,.18),
    0 16px 36px rgba(10,22,40,.08);
}
.card.activity-card.approved::before {
  content: '\2713';
  position: absolute;
  top: 12px; left: 12px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(31,157,85);
  color: #fff;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(31,157,85,.45);
  z-index: 3;
}
.card.activity-card.declined .activity-card-face {
  border-color: rgba(192,54,44,.75);
  box-shadow:
    inset 0 0 0 2px rgba(192,54,44,.65),
    0 1px 2px rgba(10,22,40,.06),
    0 4px 12px rgba(192,54,44,.14),
    0 16px 36px rgba(10,22,40,.08);
  opacity: .78;
}

/* Media — image header with flip button + map pin */
.activity-card-img-wrap {
  aspect-ratio: 16/10;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), var(--paper-1));
  flex-shrink: 0;
}
.activity-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.activity-card-img-wrap img[src=""],
.activity-card-img-wrap img:not([src]) { visibility: hidden; }
.activity-flip-btn-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(10,22,40,.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(10,22,40,.22);
  transition: background var(--dur-fast), transform var(--dur-med) var(--ease-out);
  z-index: 3;
  font-size: 14px;
}
.activity-flip-btn-overlay:hover { background: rgba(10,22,40,.92); transform: scale(1.06); }
.activity-flip-btn-overlay i { font-size: 14px; }
.card.activity-card.is-flipped .activity-flip-btn-overlay i { transform: rotate(180deg); }

/* Card content */
.activity-card .card-content {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.activity-card-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2px !important;
}
.activity-card-head-actions > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Tag pills — type badge + price/source */
.activity-card .badge,
.activity-card .price-badge,
.activity-card [data-price-badges] > * {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper-2);
  color: var(--text-500);
  border: 1px solid var(--hair);
}

.activity-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-900);
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0;
}
.activity-card .card-content p {
  font-size: 13px;
  color: var(--text-700);
  line-height: 1.55;
  margin: 0;
}
.activity-card .card-content p strong { color: var(--text-900); font-weight: 500; }
.activity-card .activity-insider-tip {
  background: var(--accent-soft);
  border: 1px solid rgba(47,125,251,.18);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--text-700);
  font-size: 12.5px;
}
.activity-card .activity-insider-tip i { color: var(--accent); }

/* Approve / Decline action row */
.activity-card .actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.activity-card .actions button {
  flex: 1;
  height: 34px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 0 14px;
  letter-spacing: -0.005em;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.activity-card .btn-approve {
  background: var(--ink-900);
  color: var(--paper-0);
  border: 1px solid var(--ink-900);
}
.activity-card .btn-approve:hover:not(:disabled):not(.inactive) {
  background: var(--ink-800);
  box-shadow: var(--sh-md);
}
.activity-card .btn-approve.active {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.activity-card .btn-decline {
  background: transparent;
  color: var(--text-700);
  border: 1px solid var(--hair-strong);
}
.activity-card .btn-decline:hover:not(:disabled):not(.inactive) {
  background: var(--paper-2);
  border-color: var(--text-900);
  color: var(--text-900);
}
.activity-card .btn-decline.active {
  background: rgba(192,54,44,.08);
  border-color: var(--err);
  color: var(--err);
}
.activity-card .actions button.inactive { opacity: .55; }

/* Notes / decline-reason rows */
.activity-card .activity-inline-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 2px;
}
.activity-card .activity-notes-text,
.activity-card .decline-reason {
  font-size: 12.5px;
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-height: 56px;
  margin: 0;
  color: var(--text-900);
  resize: vertical;
}
.activity-card .icon-btn { color: var(--text-500); }
.activity-card .icon-btn:hover:not(:disabled) { background: var(--paper-2); color: var(--text-900); text-shadow: none; }

/* Back face — map view */
.activity-card-back .card-content.map-back-content {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.activity-card-back .activity-card-head-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}
.activity-card-back .activity-card-head-actions strong {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-900);
}
.activity-card-back .flip-btn {
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper-1);
  color: var(--text-700);
  border: 1px solid var(--hair-strong);
  font-size: 13px;
}
.activity-card-back .flip-btn:hover {
  background: var(--paper-2);
  color: var(--text-900);
  border-color: var(--text-900);
}
.activity-card-back .mini-map-wrap {
  flex: 1;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  padding: 0;
  cursor: pointer;
  min-height: 200px;
}
.activity-card-back .mini-map {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
.activity-card-back .muted-text {
  font-size: 12.5px;
  color: var(--text-500);
  letter-spacing: -0.005em;
}

/* Enriching state */
.activity-card-enriching {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.activity-enriching-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-500);
}
.activity-enriching-label { font-size: 13px; text-align: center; }
.activity-enriching-label strong { color: var(--text-900); font-weight: 500; }

/* =====================================================
   STAGE 5d — Arrange (Step 3) reskin
   Targets emitted markup: .day-col.schedule-col > .day-head + .day-grid-wrap > .hour-grid > .hour-line + .day-schedule > .placed-card
   ===================================================== */

#step3 .panel__head { align-items: flex-start; margin-bottom: 14px; }
#step3 .arrange-actions { display: inline-flex; gap: 8px; }
#step3 .arrange-actions .auto-arrange-btn {
  height: 36px; padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  border: 1px solid var(--hair-strong);
  background: var(--paper-0);
  color: var(--text-900);
  cursor: pointer;
  transition: all var(--dur-fast);
}
#step3 .arrange-actions .auto-arrange-btn:hover:not(:disabled) {
  border-color: var(--text-900); box-shadow: var(--sh-sm);
}
#step3 .arrange-actions .auto-arrange-btn.primary {
  background: var(--text-900); color: var(--paper-0);
  border-color: var(--text-900);
}
#step3 .arrange-actions .auto-arrange-btn.primary:hover:not(:disabled) {
  background: var(--text-800);
}
#step3 .arrange-actions .auto-arrange-btn:disabled {
  opacity: .55; cursor: not-allowed;
}

#step3 .arrange-city-nav {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
#step3 .arrange-city-nav button,
#step3 .arrange-city-nav .city-tab {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--paper-0);
  border: 1px solid var(--hair);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-700);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--dur-fast);
}
#step3 .arrange-city-nav button:hover,
#step3 .arrange-city-nav .city-tab:hover {
  border-color: var(--text-900); color: var(--text-900);
}
#step3 .arrange-city-nav button.active,
#step3 .arrange-city-nav .city-tab.active {
  background: var(--text-900); color: var(--paper-0);
  border-color: var(--text-900);
}

#step3 .arrange-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  font-weight: 500;
  margin: 22px 0 10px;
}

#step3 .staging-section { margin-top: 8px; }
#step3 .staging.list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px;
  background: var(--paper-2);
  border: 1px dashed var(--hair-strong);
  border-radius: var(--r-md);
  min-height: 56px;
}
#step3 .staging-card {
  height: 32px;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--text-900);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(10,22,40,.04);
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
#step3 .staging-card:hover {
  border-color: var(--text-900);
  box-shadow: 0 2px 6px rgba(10,22,40,.08);
}
#step3 .staging-card:active { cursor: grabbing; }
#step3 .staging-card h4 { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--text-900); display: inline-flex; align-items: center; gap: 6px; }

#step3 .day-columns {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 12px;
  margin: 0 -4px;
}
#step3 .day-columns::-webkit-scrollbar { height: 8px; }
#step3 .day-columns::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 4px; }

#step3 .day-col,
#step3 .day-col.schedule-col {
  flex-shrink: 0;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
#step3 .day-col .day-head {
  height: 44px;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper-0);
  border: 1px solid var(--hair);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: var(--text-900);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
}
#step3 .day-col .day-head > div {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-900);
}
#step3 .day-col .day-head small {
  display: inline-block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-500);
  padding: 2px 8px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  font-weight: 500;
  text-transform: none;
}
#step3 .day-grid-wrap {
  position: relative;
  background: var(--paper-0);
  border: 1px solid var(--hair);
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: visible;
  padding-bottom: 80px;
}
#step3 .hour-line {
  border-top: 1px dashed var(--hair);
}
#step3 .hour-line:first-child { border-top: none; }
#step3 .hour-line span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  background: transparent;
  padding: 0 6px 0 8px;
  top: -7px;
}

#step3 .placed-card {
  border-radius: 8px;
  background: var(--paper-0);
  border: 1px solid rgba(10,22,40,.12);
  box-shadow:
    0 1px 2px rgba(10,22,40,.04),
    0 4px 10px rgba(10,22,40,.06);
  padding: 6px 12px;
  overflow: hidden;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
#step3 .placed-card:hover {
  border-color: rgba(10,22,40,.22);
  box-shadow:
    0 2px 4px rgba(10,22,40,.06),
    0 8px 20px rgba(10,22,40,.10);
}
#step3 .placed-card .placed-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  text-align: left;
  flex: 0 0 auto;
}
#step3 .placed-card .placed-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
#step3 .placed-card .placed-info-wrap.activity-icon-wrap {
  position: static;
  top: auto; left: auto;
}
#step3 .placed-card h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-900);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
#step3 .placed-card .activity-icon-wrap {
  position: static;
  flex-shrink: 0;
  width: 18px; height: 18px;
  padding: 0;
  margin-top: 0;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-700);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
#step3 .placed-card .activity-icon-wrap:hover {
  background: var(--paper-2);
  color: var(--text-900);
}
#step3 .placed-card .activity-icon-wrap i { font-size: 14px; line-height: 1; }
#step3 .placed-card .activity-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  flex: 1;
}

/* Category color strips on the left edge + matching dot on staging chips.
   Activity types: meal/food, tour, museum/cultural, neighborhood, sports, walk/park, show/nightlife, default */
#step3 .placed-card.activity-food         { background: linear-gradient(to right, #FFE2B8 0 4px, var(--paper-0) 4px); border-left-color: #E89B27; }
#step3 .placed-card.activity-tour         { background: linear-gradient(to right, #CADCFE 0 4px, var(--paper-0) 4px); border-left-color: #2F7DFB; }
#step3 .placed-card.activity-cultural     { background: linear-gradient(to right, #E0CCFB 0 4px, var(--paper-0) 4px); border-left-color: #7B3CD2; }
#step3 .placed-card.activity-neighborhood { background: linear-gradient(to right, #C8EAD0 0 4px, var(--paper-0) 4px); border-left-color: #1F9D55; }
#step3 .placed-card.activity-sports       { background: linear-gradient(to right, #FFD3CC 0 4px, var(--paper-0) 4px); border-left-color: #C0362C; }
#step3 .placed-card.activity-walk         { background: linear-gradient(to right, #D9F0DC 0 4px, var(--paper-0) 4px); border-left-color: #2BA158; }
#step3 .placed-card.activity-show         { background: linear-gradient(to right, #FBD0E1 0 4px, var(--paper-0) 4px); border-left-color: #CF3273; }
#step3 .placed-card.activity-default      { background: linear-gradient(to right, #DEE2E8 0 4px, var(--paper-0) 4px); border-left-color: #6F7886; }

#step3 .placed-card .placed-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-500);
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin: 0 0 0 -4px;
  height: 16px;
  min-height: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
#step3 .placed-card .placed-time:hover {
  background: rgba(47,125,251,.10);
  color: var(--accent);
}
#step3 .placed-card .placed-time i { font-size: 11px; opacity: 0.7; }

.time-edit-popup {
  position: fixed;
  z-index: 200;
  background: var(--paper-0);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(10,22,40,.16), 0 2px 6px rgba(10,22,40,.08);
  display: flex; flex-direction: column; gap: 10px;
  width: 220px;
}
.time-edit-popup .tep-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-500);
}
.time-edit-popup .tep-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time-edit-popup .tep-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.time-edit-popup input[type="time"] {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--hair-strong);
  background: var(--paper-1);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-900);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.time-edit-popup input[type="time"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,125,251,.14);
}
.time-edit-popup .tep-actions {
  display: flex; gap: 6px;
}
.time-edit-popup .tep-btn {
  flex: 1; height: 30px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer; transition: all var(--dur-fast);
  border: 0;
}
.time-edit-popup .tep-btn.save {
  background: var(--ink-900); color: var(--paper-0);
}
.time-edit-popup .tep-btn.save:hover { background: var(--ink-800); }
.time-edit-popup .tep-btn.cancel {
  background: var(--paper-2); color: var(--text-700);
  border: 1px solid var(--hair);
}
.time-edit-popup .tep-btn.cancel:hover { border-color: var(--text-900); }

#step3 .staging-card { position: relative; padding-left: 22px; }
#step3 .staging-card::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #6F7886;
}
#step3 .staging-card.activity-food::before         { background: #E89B27; }
#step3 .staging-card.activity-tour::before         { background: #2F7DFB; }
#step3 .staging-card.activity-cultural::before     { background: #7B3CD2; }
#step3 .staging-card.activity-neighborhood::before { background: #1F9D55; }
#step3 .staging-card.activity-sports::before       { background: #C0362C; }
#step3 .staging-card.activity-walk::before         { background: #2BA158; }
#step3 .staging-card.activity-show::before         { background: #CF3273; }
#step3 .staging-card.activity-default::before      { background: #6F7886; }

#step3 .placed-card--locked {
  border-color: rgba(10,22,40,.18);
  background: var(--paper-2);
}
#step3 .placed-lock-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-500);
  font-size: 11px;
}

/* Commute selector — restyle as a transit pill */
#step3 .commute-indicator {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
}
#step3 .commute-selector {
  position: relative;
  pointer-events: auto;
  display: inline-block;
}
#step3 .commute-selector-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--paper-0);
  border: 1.5px solid var(--hair-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-700);
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(10,22,40,.08);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
#step3 .commute-selector-trigger:hover,
#step3 .commute-selector.open .commute-selector-trigger {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(47,125,251,.18);
  color: var(--text-900);
}
#step3 .commute-selector-arrow { font-size: 9px; opacity: .55; }
#step3 .commute-selected-label { display: inline-flex; align-items: center; gap: 6px; }
#step3 .commute-selected-label i { font-size: 13px; line-height: 1; }
#step3 .commute-option-label { display: inline-flex; align-items: center; gap: 8px; }
#step3 .commute-option-label i { font-size: 14px; line-height: 1; color: var(--text-700); }
#step3 .commute-selector-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-0);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(10,22,40,.14), 0 2px 6px rgba(10,22,40,.08);
  z-index: 50;
}
#step3 .commute-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-900);
  cursor: pointer;
  transition: background var(--dur-fast);
  text-align: left;
}
#step3 .commute-option:hover { background: var(--paper-2); }
#step3 .commute-option.active { background: var(--paper-2); }
#step3 .commute-option-check { color: var(--accent); font-size: 14px; margin-left: 8px; }

/* Diagnostics row */
#step3 #arrangeDiagnostics {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  margin: 0 0 12px;
}


/* =====================================================
   STAGE 5e v2 — Finalize (Step 4) full redesign
   Mock: design_handoff_finalize/mocks/Finalize.html
   ===================================================== */

#step4 .fin {
  --fin-gap: 36px;
  --fin-pad-top: 32px;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--fin-pad-top) 0 0;
}

#step4 .fin > section,
#step4 .fin > footer {
  margin-bottom: var(--fin-gap);
}

/* ---------- 3.1 Header ---------- */
#step4 .fin-h { margin: 0 0 36px; }
#step4 .fin-h .gm-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  margin: 0 0 14px;
  font-weight: 500;
}
#step4 .fin-h h1 {
  font-family: var(--font-display, inherit);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--text-900);
  max-width: 620px;
  text-wrap: pretty;
  margin: 0 0 14px;
}
#step4 .fin-h h1 .serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
#step4 .fin-h__lead {
  font-size: 14.5px;
  color: var(--text-500);
  max-width: 540px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- 3.2 Action tiles ---------- */
#step4 .fin-send__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#step4 .send-tile {
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px 14px 16px;
  background: var(--paper-1);
  border: 1px solid rgba(10,22,40,.16);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  font-weight: 400;
  min-height: 64px;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
#step4 .send-tile:hover {
  border-color: var(--text-900);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
#step4 .send-tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
#step4 .send-tile__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border-radius: 8px;
  color: var(--text-900);
}
#step4 .send-tile__icon i { font-size: 16px; line-height: 1; }
#step4 .send-tile__title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
#step4 .send-tile__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--text-400);
  font-size: 14px;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
#step4 .send-tile:hover .send-tile__arrow {
  transform: translate(2px, -2px);
  color: var(--text-900);
}
#step4 #calendarSyncStatus {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-500);
}
#step4 #connectGoogleCalendarBtn.hidden { display: none !important; }

/* ---------- 3.3 Trip card ---------- */
#step4 .fin-trip {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
#step4 .fin-trip__title {
  padding: 32px 32px 28px;
  border-right: 1px solid var(--hair);
}
#step4 .fin-trip__title .gm-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  font-weight: 500;
  margin: 0;
}
#step4 .fin-trip__title h2 {
  font-family: var(--font-display, inherit);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-900);
  margin: 10px 0 14px;
  line-height: 1.15;
}
#step4 .fin-trip__title h2 .serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
#step4 .fin-trip__route {
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
#step4 .fin-trip__route .city {
  color: var(--text-900);
  font-weight: 500;
}
#step4 .fin-trip__route .arrow { color: var(--text-400); }

#step4 .fin-trip__stats {
  padding: 32px 32px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
}
#step4 .fin-stat { display: flex; flex-direction: column; }
#step4 .fin-stat .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-bottom: 6px;
}
#step4 .fin-stat .v {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#step4 .fin-stat .v .u {
  color: var(--text-500);
  font-weight: 400;
  margin-left: 2px;
}

/* ---------- 3.4 Open items ---------- */
#step4 .fin-open {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
#step4 .fin-open__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hair);
}
#step4 .fin-open__head-left { flex: 1; min-width: 0; }
#step4 .fin-open__head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-900);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
#step4 .fin-open__head p {
  font-size: 12.5px;
  color: var(--text-500);
  line-height: 1.45;
  max-width: 460px;
  margin: 0;
}
#step4 .fin-open__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--warn, #C08B10);
  background: rgba(192,139,16,.10);
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
}
#step4 .fin-open__count.all-set {
  color: var(--ok, #1F9D55);
  background: rgba(31,157,85,.10);
}
#step4 .fin-open__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#step4 .fin-open__action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-500);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
  transition: color var(--dur-fast);
}
#step4 .fin-open__action:hover { color: var(--text-900); }

#step4 .open-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hair);
  transition: background var(--dur-fast);
}
#step4 .open-item:last-child { border-bottom: 0; }
#step4 .open-item:hover { background: var(--paper-0); }

#step4 .open-item__when {
  width: 56px;
  padding: 8px 6px;
  background: var(--paper-2);
  border-radius: var(--r-sm, 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#step4 .open-item__when .d {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-500);
}
#step4 .open-item__when .n {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-900);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 1px;
}
#step4 .open-item__when .t {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  margin-top: 3px;
}

#step4 .open-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#step4 .open-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#step4 .open-item__missing {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--warn, #C08B10);
  background: rgba(192,139,16,.10);
  padding: 2px 7px;
  border-radius: var(--r-pill, 999px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#step4 .open-item__missing::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warn, #C08B10);
}
#step4 .open-item__why {
  font-size: 12.5px;
  color: var(--text-500);
  line-height: 1.45;
}
#step4 .open-item__why .price {
  font-family: var(--font-mono);
  color: var(--text-700);
}

#step4 .open-item__cta {
  height: 30px;
  padding: 0 14px;
  background: var(--ink-900);
  color: var(--paper-0);
  border: 0;
  border-radius: var(--r-pill, 999px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-fast);
}
#step4 .open-item__cta:hover { background: var(--ink-800); }
#step4 .open-item__cta .arrow {
  display: inline-block;
  transition: transform var(--dur-fast);
}
#step4 .open-item__cta:hover .arrow { transform: translateX(2px); }

#step4 .fin-open__list:empty + .fin-open__empty,
#step4 .fin-open__empty {
  padding: 28px 22px;
  text-align: center;
  font-size: 13px;
  color: var(--text-500);
}

/* ---------- 3.5 Day-by-day ---------- */
#step4 .fin-itin__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
#step4 .fin-itin__head h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-900);
  letter-spacing: -0.012em;
  margin: 0;
}
#step4 .fin-itin__head h3 .serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
#step4 .fin-itin__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-500);
}
#step4 .fin-itin__meta .pipe { color: var(--text-400); margin: 0 6px; }

#step4 .fin-itin__list {
  background: var(--paper-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

#step4 .day {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--hair);
}
#step4 .day:last-child { border-bottom: 0; }

#step4 .day__head {
  padding: 22px 24px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
}
#step4 .day__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-bottom: 8px;
}
#step4 .day-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-bottom: 4px;
}
#step4 .day__theme {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-900);
  line-height: 1.25;
}
#step4 .day__city {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#step4 .day__city::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-400);
}

#step4 .day__items { padding: 14px 0; }
#step4 .day__items:empty::before {
  content: 'No activities placed yet.';
  display: block;
  padding: 6px 24px 6px;
  font-size: 12.5px;
  color: var(--text-500);
}
#step4 .day .item {
  display: grid;
  grid-template-columns: 120px 12px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 8px 24px;
  transition: background var(--dur-fast);
}
#step4 .day .item:hover { background: var(--paper-0); }
#step4 .day .item__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#step4 .day .item__time .dash {
  color: var(--text-400);
  margin: 0 3px;
}
#step4 .day .item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-400);
  align-self: center;
  box-shadow: 0 0 0 3px var(--paper-1);
  transition: box-shadow var(--dur-fast);
}
#step4 .day .item:hover .item__dot { box-shadow: 0 0 0 3px var(--paper-0); }
#step4 .day .item__dot.cat-food    { background: #D28C00; }
#step4 .day .item__dot.cat-tour    { background: var(--accent, #2F7DFB); }
#step4 .day .item__dot.cat-culture { background: #783CD2; }
#step4 .day .item__dot.cat-outdoor { background: var(--ok, #1F9D55); }
#step4 .day .item__dot.cat-night   { background: #CF3273; }
#step4 .day .item__dot.cat-transit { background: var(--text-400); }

#step4 .day .item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-900);
  line-height: 1.4;
  text-wrap: pretty;
  min-width: 0;
}
#step4 .day .item__title .note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-500);
  margin-left: 8px;
}
#step4 .day .item__pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(192,139,16,.16);
  color: var(--warn, #C08B10);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}
#step4 .day .item__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-500);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  white-space: nowrap;
}

/* ---------- 3.6 Footer ---------- */
#step4 .fin-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
#step4 .fin-foot .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#step4 .fin-foot .meta--left .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok, #1F9D55);
  box-shadow: 0 0 0 3px rgba(31,157,85,.18);
}

/* ---------- Lock-trip CTA ---------- */
#step4 .step-nav #lockTripBtn {
  background: var(--ink-900);
  color: var(--paper-0);
  border-color: var(--ink-900);
}
#step4 .step-nav #lockTripBtn:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  #step4 .fin-trip { grid-template-columns: 1fr; }
  #step4 .fin-trip__title {
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
}
@media (max-width: 720px) {
  #step4 .fin-send__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #step4 .day { grid-template-columns: 1fr; }
  #step4 .day__head {
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  #step4 .day .item {
    grid-template-columns: 96px 10px 1fr auto;
    padding: 8px 22px;
    gap: 10px;
  }
}
@media (max-width: 520px) {
  #step4 .fin-trip__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────── Itinerary view — redesigned ──────────────── */
.itin { max-width: 920px; margin: 0 auto; }

.itin-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--hair, rgba(10,22,40,.08));
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: end;
}
@media (max-width: 720px) {
  .itin-hero { grid-template-columns: 1fr; gap: 20px; }
}
.itin-hero__title .eyebrow {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-500, #5A6679);
}
.itin-hero__title h1 {
  font-size: 38px; font-weight: 500; letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--text-900, #0A1628);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.itin-hero__title h1 .serif {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-style: italic; font-weight: 400;
}
.itin-hero__title .route {
  margin-top: 14px;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-500, #5A6679);
  letter-spacing: 0.02em;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px;
}
.itin-hero__title .route .city { color: var(--text-900, #0A1628); font-weight: 500; }
.itin-hero__title .route .arrow { color: var(--text-400, #8490A3); }

.itin-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 28px;
  row-gap: 14px;
  justify-content: end;
}
@media (max-width: 720px) {
  .itin-hero__meta { justify-content: start; grid-template-columns: repeat(4, 1fr); column-gap: 16px; }
}
@media (max-width: 480px) {
  .itin-hero__meta { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
}
.itin-hero__meta .k {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-500, #5A6679);
  display: block; margin-bottom: 4px;
}
.itin-hero__meta .v {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 14px; font-weight: 500;
  color: var(--text-900, #0A1628);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em; white-space: nowrap;
}

/* Send tiles — mirror Finalize's #step4 .send-tile exactly */
.itin-send { margin-bottom: 32px; }
.itin-send__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.itin-send .send-tile {
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px 14px 16px;
  background: var(--paper-1, #FAF8F4);
  border: 1px solid rgba(10,22,40,.16);
  border-radius: 16px;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(10,22,40,.04));
  cursor: pointer;
  font-weight: 400;
  min-height: 64px;
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  color: var(--text-900, #0A1628);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.itin-send .send-tile:hover {
  border-color: var(--text-900, #0A1628);
  transform: translateY(-1px);
  box-shadow: var(--sh-md, 0 4px 18px rgba(10,22,40,.06));
}
.itin-send .send-tile:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.itin-send .send-tile__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2, #EEEAE3);
  border-radius: 8px;
  color: var(--text-900, #0A1628);
}
.itin-send .send-tile__icon i { font-size: 16px; line-height: 1; }
.itin-send .send-tile__title {
  flex: 1;
  font-size: 14px; font-weight: 600;
  color: var(--text-900, #0A1628);
  letter-spacing: -0.005em; line-height: 1.3;
}
.itin-send .send-tile__arrow {
  position: absolute;
  top: 14px; right: 14px;
  color: var(--text-400, #8490A3);
  font-size: 14px;
  transition: transform .14s ease, color .14s ease;
}
.itin-send .send-tile:hover .send-tile__arrow {
  transform: translate(2px, -2px);
  color: var(--text-900, #0A1628);
}
@media (max-width: 720px) { .itin-send__grid { grid-template-columns: 1fr; } }

/* City sections */
.itin-list { display: block; }
.city-section { margin-bottom: 48px; }
.city-section:last-child { margin-bottom: 0; }
.city-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hair, rgba(10,22,40,.08));
}
.city-head__index {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-500, #5A6679);
  font-variant-numeric: tabular-nums;
}
.city-head__name {
  font-size: 24px; font-weight: 500; letter-spacing: -0.022em;
  color: var(--text-900, #0A1628); line-height: 1.1;
  margin: 0;
}
.city-head__when {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11.5px; color: var(--text-500, #5A6679);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.city-head__when b { color: var(--text-900, #0A1628); font-weight: 500; }

/* Day groups */
.day {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair, rgba(10,22,40,.08));
}
.day:last-child { border-bottom: none; }
@media (max-width: 580px) {
  .day { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
}
.day__when { padding-top: 4px; position: sticky; top: 16px; align-self: start; }
@media (max-width: 580px) { .day__when { position: static; padding-top: 0; } }
.day__date {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-500, #5A6679);
  display: block; margin-bottom: 4px;
}
.day__weekday {
  font-size: 18px; font-weight: 500;
  color: var(--text-900, #0A1628);
  letter-spacing: -0.018em; line-height: 1.1;
}
.day__weekday .num {
  display: block;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 400;
  color: var(--text-500, #5A6679);
  letter-spacing: 0.04em; margin-top: 2px;
}

/* Stops */
.stops { display: flex; flex-direction: column; gap: 0; }
.stop {
  display: grid;
  grid-template-columns: 64px 1fr 96px;
  gap: 16px; padding: 14px 0;
  align-items: start; position: relative;
}
.stop + .stop { border-top: 1px dashed var(--hair, rgba(10,22,40,.08)); }
@media (max-width: 580px) {
  .stop { grid-template-columns: 56px 1fr; }
  .stop__cost { grid-column: 2; grid-row: 1; text-align: left; padding-top: 2px; }
}
.stop__time {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-700, #1E293B);
  letter-spacing: 0.02em; padding-top: 2px;
  white-space: nowrap;
}
.stop__time .end {
  color: var(--text-400, #8490A3);
  display: block; font-size: 11px; margin-top: 2px;
}
.stop__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stop__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.stop__kind {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-500, #5A6679);
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--paper-2, #EEEAE3);
  border: 1px solid var(--hair, rgba(10,22,40,.08));
  white-space: nowrap;
}
.stop__kind.stop__kind--accent {
  color: var(--accent-deep, #0B4AB8);
  background: var(--accent-soft, #E6EFFE);
  border-color: rgba(47,125,251,.18);
}
.stop__kind.stop__kind--travel {
  background: var(--ink-900, #0A1628);
  color: var(--paper-0, #F4F1EC);
  border-color: var(--ink-900, #0A1628);
}
.stop__title {
  font-size: 15px; font-weight: 500;
  color: var(--text-900, #0A1628);
  letter-spacing: -0.01em; line-height: 1.3;
  margin: 0;
}
.stop__meta {
  font-size: 12.5px;
  color: var(--text-500, #5A6679);
  letter-spacing: -0.003em; line-height: 1.5;
}
.stop__meta .sep { color: var(--text-400, #8490A3); margin: 0 6px; }
.stop__meta b { color: var(--text-700, #1E293B); font-weight: 500; font-variant-numeric: tabular-nums; }
.stop__note {
  font-size: 12.5px; color: var(--text-500, #5A6679);
  line-height: 1.5; letter-spacing: -0.003em;
  padding-left: 10px;
  border-left: 2px solid var(--hair-strong, rgba(10,22,40,.14));
  margin: 0;
}
.stop__ref {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--text-500, #5A6679);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.stop__ref::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok, #1F9D55); flex-shrink: 0;
}
.stop__ref.is-empty { color: var(--text-400, #8490A3); }
.stop__ref.is-empty::before { background: transparent; border: 1px dashed var(--text-400, #8490A3); }
.stop__ref code { color: var(--text-900, #0A1628); font-weight: 500; }
.stop__cost {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px; color: var(--text-900, #0A1628);
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-top: 2px; text-align: right;
}
.stop__cost .free { color: var(--text-400, #8490A3); font-weight: 400; }

/* Per-stop actions: Navigate · View Files · Upload Tickets */
.stop__actions { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.stop-act {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hair-strong, rgba(10,22,40,.14));
  color: var(--text-700, #1E293B);
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-size: 11.5px; font-weight: 500; letter-spacing: -0.003em;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: all .14s cubic-bezier(.2,.8,.2,1);
}
.stop-act:hover {
  background: var(--paper-1, #FAF8F4);
  color: var(--text-900, #0A1628);
  border-color: var(--text-900, #0A1628);
}
.stop-act:disabled, .stop-act[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.stop-act i { font-size: 12px; line-height: 1; }
.stop-act .count {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.04em;
  opacity: 0.7; font-variant-numeric: tabular-nums;
}

/* Travel + lodging modifiers */
.stop.is-travel {
  background: var(--paper-2, #EEEAE3);
  margin: 6px -16px; padding: 12px 16px;
  border-radius: 10px;
  border-top: none !important;
}
.stop.is-travel + .stop { border-top: 1px dashed var(--hair, rgba(10,22,40,.08)); }
.stop.is-travel .stop__title { color: var(--text-700, #1E293B); }
.stop.is-lodging .stop__title {
  font-style: italic;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 17px;
}

/* Empty state */
.itin-empty {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-500, #5A6679);
  padding: 32px 0;
}

/* ============================================================
   Arrange: custom drag overhaul (staging + timeline + ghost)
   ============================================================ */

.staging__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 4px 8px;
}
.staging__head-left { display: inline-flex; align-items: center; gap: 8px; }
.staging__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--paper-2, #ECE9E0);
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--text-700, #3B4658);
}
.staging__hint {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--text-500, #5A6679); letter-spacing: 0.02em;
}
.staging__empty {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px; font-style: italic;
  color: var(--text-500, #5A6679);
  padding: 18px 12px; text-align: center; width: 100%;
}

.staging-card, .placed-card { touch-action: none; user-select: none; }
.staging-card.is-dragging,
.placed-card.is-dragging { opacity: 0.3; pointer-events: none; }

.day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-head__main { display: flex; flex-direction: column; }
.day-head__pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--paper-2, #ECE9E0);
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px; color: var(--text-700, #3B4658);
  white-space: nowrap;
}

.day-grid-wrap .blocked-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  display: none;
}
.day-grid-wrap.drag-active .blocked-layer { display: block; }
.blocked-layer .blocked-core,
.blocked-layer .blocked-buffer,
.blocked-layer .blocked-out {
  position: absolute; left: 6px; right: 6px;
  border-radius: 8px; pointer-events: none;
}
.blocked-layer .blocked-core {
  background:
    repeating-linear-gradient(135deg,
      rgba(10,22,40,.09) 0, rgba(10,22,40,.09) 5px,
      rgba(10,22,40,.16) 5px, rgba(10,22,40,.16) 10px);
  border: 1px dashed rgba(10,22,40,.22);
}
.blocked-layer .blocked-buffer {
  background:
    repeating-linear-gradient(135deg,
      rgba(10,22,40,.04) 0, rgba(10,22,40,.04) 5px,
      rgba(10,22,40,.08) 5px, rgba(10,22,40,.08) 10px);
  border: 1px dashed rgba(10,22,40,.10);
}
.blocked-layer .blocked-out {
  background: rgba(10,22,40,.05);
}

.day-grid-wrap.drag-active .placed-card:not(.is-dragging) {
  opacity: 0.35; filter: grayscale(0.55); pointer-events: none;
}
.day-grid-wrap.drag-active .commute-indicator { opacity: 0.25; pointer-events: none; }

.day-grid-wrap.drop-target {
  box-shadow: inset 0 0 0 2px var(--accent, #2F7DFB);
  background: var(--accent-soft, rgba(47, 125, 251, 0.06));
}

.drop-indicator {
  position: absolute; left: 6px; right: 6px;
  pointer-events: none; z-index: 6;
  border: 2px solid var(--accent, #2F7DFB);
  border-radius: 8px;
  background: rgba(47,125,251,.08);
}
.drop-indicator::before {
  content: attr(data-time);
  position: absolute; top: -18px; left: 0;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.04em;
  background: var(--accent, #2F7DFB); color: #fff;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.drop-indicator.invalid {
  border-color: #d34a4a; background: rgba(211,74,74,.10);
}
.drop-indicator.invalid::before { background: #d34a4a; }

.drag-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 28px rgba(10,22,40,.18), 0 2px 6px rgba(10,22,40,.10);
  border-radius: 10px; overflow: hidden;
}
.drag-ghost__inner {
  height: 100%; width: 100%;
  padding: 8px 10px;
  background: var(--paper-0, #fff);
  border: 1px solid rgba(10,22,40,.14);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.drag-ghost__time {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-700, #3B4658);
}
.drag-ghost__time.invalid { color: #d34a4a; }
.drag-ghost__title {
  font-size: 12.5px; font-weight: 500; color: var(--text-900, #0A1628);
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drag-ghost__icon { font-size: 14px; }

body.is-dragging-activity { cursor: grabbing; }

.scheduling-wizard-shell .profile-wizard-card { min-height: auto; gap: 18px; }
.scheduling-wizard-shell .wizard-question-label { margin: 0 0 12px; }
.sched-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sched-field { display: flex; flex-direction: column; gap: 6px; }
.sched-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-400);
}
.sched-field input[type="time"],
.sched-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line-200, #d8d2c2);
  border-radius: 8px;
  background: var(--paper-0, #fff);
  color: inherit;
}
.sched-field textarea { resize: vertical; min-height: 72px; }
.sched-field input[type="range"] { width: 100%; }
.sched-radio-group { display: flex; gap: 8px; }
.sched-radio {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line-200, #d8d2c2);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background: var(--paper-0, #fff);
  font-size: 13px;
}
.sched-radio input { display: none; }
.sched-radio.active { background: var(--accent, #1f1f1f); color: #fff; border-color: var(--accent, #1f1f1f); }
@media (max-width: 600px) {
  .sched-row { grid-template-columns: 1fr; }
}

.entitlement-gate { position: fixed; inset: 0; background: rgba(245, 241, 234, 0.96); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.entitlement-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.10); padding: 32px 28px; width: 100%; max-width: 380px; }
.entitlement-card h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.entitlement-card p { margin: 0 0 18px; color: var(--text-500, #6b635a); font-size: 14px; }
.entitlement-form input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--hair, #d9d2c7); border-radius: 8px; font-size: 15px; margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase; }
.entitlement-form input:focus { outline: none; border-color: var(--text-900, #2a2520); }
.entitlement-form button { width: 100%; padding: 11px; background: var(--text-900, #2a2520); color: #fff; border: 0; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; }
.entitlement-error { color: var(--err, #c0362c); font-size: 13px; margin-bottom: 10px; }
.entitlement-error.hidden { display: none; }
.entitlement-foot { margin: 16px 0 0; font-size: 12px; color: var(--text-500, #6b635a); text-align: center; }
.entitlement-foot a { color: inherit; text-decoration: underline; }