/* Trip planner — eco-modern skin. Page-specific only; option cards,
   chips, fields, timeline live in components.css. */

@layer page {

.planner-hero {
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  align-items: center;
  padding-block: var(--sp-7);
}

.planner-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  transition: max-width var(--dur-3) var(--ease-out);
}
.planner-wrap.expanded { max-width: 1160px; }

.planner-title { font-size: var(--fs-5); text-align: center; margin-bottom: var(--sp-3); }
.planner-subtitle { text-align: center; color: var(--text-muted); margin: 0 0 var(--sp-6); font-size: var(--fs-1); }

.planner-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
}

/* ---------- form ---------- */
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .form-row2 { grid-template-columns: 1fr; } }
#trip-form .field { margin-bottom: var(--sp-4); }
#exact-time-group, #return-exact-time-group { margin-top: var(--sp-3); }

/* ---------- Autocomplete ---------- */
.autocomplete-wrap {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1050;
  padding: var(--sp-1) 0;
  margin: 0;
  list-style: none;
}

.autocomplete-dropdown[hidden] {
  display: none !important;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.is-active {
  background: var(--bg-inset);
}

.autocomplete-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset));
  color: var(--accent);
  font-size: var(--fs--1);
  flex-shrink: 0;
}
.autocomplete-item[data-type="station"] .autocomplete-item-icon {
  background: color-mix(in srgb, var(--info, #3b82f6) 14%, var(--bg-inset));
  color: var(--info, #3b82f6);
}
.autocomplete-item[data-type="address"] .autocomplete-item-icon {
  background: color-mix(in srgb, var(--accent-gold, #f59e0b) 14%, var(--bg-inset));
  color: var(--accent-gold, #f59e0b);
}

.autocomplete-item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}

.autocomplete-item-title {
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item-subtitle {
  font-size: var(--fs--2);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.autocomplete-badge {
  font-size: var(--fs--3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--text-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.priority-section { margin-bottom: var(--sp-4); }
.priority-heading {
  display: block;
  font-size: var(--fs--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-subtle);
  margin-bottom: var(--sp-2);
}
.chip svg { width: 13px; height: 13px; }

/* legacy 'active' hook used by planner.js chip state */
.chip[aria-pressed="true"] svg { color: currentColor; }

/* ---------- priority: mode toggle ---------- */
.priority-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.priority-head .priority-heading { margin-bottom: 0; }
.mode-toggle { display: inline-flex; gap: 2px; background: var(--bg-inset); border: 1.5px solid var(--border); border-radius: var(--r-full); padding: 3px; }
.mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: var(--text-subtle);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--fs--2);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.mode-toggle-btn:hover { color: var(--text); }
.mode-toggle-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.priority-head-actions { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.priority-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-subtle);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--fs--2);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
/* Higher specificity than .info-tip's own `cursor: default` (planner.css, further down) —
   this is a real button, not a plain hover-for-info span. */
.priority-save-btn.info-tip { cursor: pointer; }
.priority-save-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- priority: save-weighting modal ----------
   Same shell shape as booking.css's .booking-modal (planner.css always loads, unlike booking.css
   which is gated behind booking_enabled — so this can't just reuse that one's classes). */
.priority-save-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.priority-save-modal.is-open { display: flex; }
.priority-save-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.priority-save-modal-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
  width: min(420px, 100%);
}
.priority-save-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.priority-save-modal-head h2 { margin: 0; font-size: var(--fs-2); color: var(--text); }
.priority-save-modal-close {
  background: none;
  border: 0;
  color: var(--text-subtle);
  font-size: var(--fs-3);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--sp-2);
}
.priority-save-modal-close:hover { color: var(--text); }
.priority-save-modal-error {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  font-size: var(--fs--1);
  margin: 0 0 var(--sp-4);
}
.priority-save-modal-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }
.priority-chip--profile i { color: var(--accent); }
.chip[aria-pressed="true"].priority-chip--profile i { color: currentColor; }

/* ---------- priority: leaf tokens ---------- */
#priority-leaves { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
.leaf-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 6px; border-radius: var(--r-1); transition: background var(--dur-1) var(--ease-out); }
.leaf-row:hover { background: var(--bg-inset); }
.leaf-row-icon {
  --c: var(--accent);
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 14%, var(--bg-inset));
  color: var(--c);
  font-size: 0.72rem;
  margin-top: 1px;
}
.leaf-row-main { flex: 1; min-width: 0; }
.leaf-row-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.leaf-row-title { font-size: var(--fs--1); font-weight: 700; }
.leaf-row-val { font-size: var(--fs--2); font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.leaf-row-desc { display: block; font-size: 0.72rem; color: var(--text-subtle); margin-top: 4px; }

.leaf-track { display: flex; align-items: center; gap: 3px; }
.leaf-step {
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--dur-1) var(--ease-out);
}
.leaf-step:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.leaf-step:disabled { opacity: 0.35; cursor: default; }
.pips { display: flex; gap: 2px; margin: 0 4px; flex-wrap: wrap; }
.pip {
  --c: var(--accent);
  width: 17px; height: 17px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--border-strong);
}
.pip svg { width: 13px; height: 13px; transition: transform 260ms var(--ease-spring), opacity var(--dur-1), color var(--dur-1); opacity: 0.55; transform: scale(0.78); }
.pip:hover svg { opacity: 0.85; }
.pip.is-filled { color: var(--c); }
.pip.is-filled svg { opacity: 1; transform: scale(1); }
.leaf-pool { font-size: var(--fs--2); color: var(--text-subtle); text-align: right; padding: 4px 6px 0; }
.leaf-pool #leaf-pool-num { font-weight: 700; color: var(--text-muted); }

/* ---------- priority: compass ---------- */
#priority-compass { margin-bottom: var(--sp-4); }
.compass-hint { font-size: 0.78rem; color: var(--text-subtle); font-style: italic; margin: 0 0 var(--sp-2); }
.compass-wrap { display: flex; justify-content: center; margin: var(--sp-1) 0; touch-action: none; }
#compass-svg { width: 100%; max-width: 340px; height: auto; user-select: none; cursor: pointer; }

.guide-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.guide-rim { fill: color-mix(in srgb, var(--accent) 4%, transparent); stroke: var(--border-strong); stroke-width: 1.5; }
.guide-spoke { stroke: var(--border-strong); stroke-width: 1.5; }
.weight-shape {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}
.axis-badge { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.axis-name { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--text); }
.axis-value { font-family: var(--font-numeric); font-size: 10.5px; font-weight: 600; fill: var(--text-subtle); font-variant-numeric: tabular-nums; }
.center-dot { fill: var(--border-strong); }
.handle {
  --c: var(--accent);
  fill: var(--c);
  stroke: var(--bg-raised);
  stroke-width: 2.5;
  cursor: grab;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
  transition: r 120ms;
}
.handle:active, .handle.is-dragging { cursor: grabbing; r: 10.5; }
.handle:focus-visible { outline: none; stroke: var(--focus-ring); stroke-width: 3; }

/* ---------- advanced options ---------- */
.advanced { margin-bottom: var(--sp-4); }
.advanced summary {
  cursor: pointer;
  font-size: var(--fs--1);
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 2px;
  transition: color var(--dur-1) var(--ease-out);
}
/* ---------- passengers ---------- */
.passengers-summary-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs--1);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.passengers-summary-btn:hover { border-color: var(--accent); }
.passengers-summary-btn i:first-child { color: var(--accent); }
.passengers-summary-btn i:last-child { margin-left: auto; font-size: 0.75em; color: var(--text-subtle); transition: transform var(--dur-1) var(--ease-out); }
.passengers-summary-btn[aria-expanded="true"] i:last-child { transform: rotate(180deg); }
#passengers-summary-text { flex: 1; text-align: left; }

.passengers-panel {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
}
.passenger-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  transition: border-color var(--dur-1) var(--ease-out);
}
.passenger-item:hover {
  border-color: var(--border-hover, var(--border));
}
.passenger-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 0;
}
.passenger-row .passenger-type { flex: 2; min-width: 0; }
.passenger-row .passenger-age { flex: 1; min-width: 0; }
.passenger-remove-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: var(--fs-2);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--sp-2);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.passenger-remove-btn:hover {
  color: var(--danger);
  transform: scale(1.15);
}
/* ---------- discount cards ---------- */
.passenger-cards-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
}
.passenger-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
}
.passenger-card-pills:empty {
  display: none;
}
.passenger-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px 10px 3px 10px;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all var(--dur-1) var(--ease-out);
}
.passenger-card-pill:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}
.passenger-card-pill .card-flag {
  font-size: 0.95rem;
  line-height: 1;
}
.passenger-card-pill .card-name {
  font-weight: 600;
  color: var(--text);
}
.passenger-card-pill .card-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.passenger-card-pill .passenger-card-id-input {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--text);
  width: 120px;
  transition: all var(--dur-1) var(--ease-out);
}
.passenger-card-pill .passenger-card-id-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 107, 70, 0.15);
}
.passenger-card-pill .card-pill-remove {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 0.75rem;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  transition: all var(--dur-1) var(--ease-out);
}
.passenger-card-pill .card-pill-remove:hover {
  color: #fff;
  background: var(--danger);
}
.passenger-card-add-wrap {
  position: relative;
  display: inline-flex;
}
.passenger-card-add-btn {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all var(--dur-1) var(--ease-out);
}
.passenger-card-add-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(46, 107, 70, 0.12);
  transform: translateY(-1px);
}
.passenger-card-add-btn:active {
  transform: translateY(0);
}
.passenger-card-add-btn i {
  font-size: 0.85em;
}

/* Custom Travel Card Dropdown Menu */
.travel-card-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: 400px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.06);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cardDropdownSlideIn 150ms var(--ease-out);
}
@keyframes cardDropdownSlideIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.travel-card-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}
.travel-card-dropdown-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs--1);
  font-weight: 700;
  color: var(--text);
}
.travel-card-dropdown-title i {
  color: var(--accent);
  font-size: 0.9em;
}
.travel-card-dropdown-close {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  transition: color var(--dur-1) var(--ease-out);
}
.travel-card-dropdown-close:hover {
  color: var(--text);
}
.travel-card-route-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(46, 107, 70, 0.08);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}
.travel-card-search-wrap {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.travel-card-search-wrap i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  font-size: 0.78rem;
  pointer-events: none;
}
.travel-card-search-input {
  width: 100%;
  padding: 5px 8px 5px 26px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--bg-inset);
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color var(--dur-1) var(--ease-out);
}
.travel-card-search-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
}
.travel-card-dropdown-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: 250px;
}
.travel-card-group {
  margin-bottom: 8px;
}
.travel-card-group:last-child {
  margin-bottom: 0;
}
.travel-card-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}
.travel-card-group-header .group-country-code {
  font-size: 0.68rem;
  color: var(--text-subtle);
}
.travel-card-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.travel-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: all var(--dur-1) var(--ease-out);
}
.travel-card-item:hover:not(:disabled) {
  background: var(--bg-inset);
  border-color: var(--border);
}
.travel-card-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.travel-card-item-left {
  flex: 1;
  min-width: 0;
}
.travel-card-item-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.travel-card-item-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.travel-card-item-right {
  flex-shrink: 0;
  margin-left: 8px;
}
.travel-card-item-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.travel-card-item-badge.is-action {
  background: var(--bg-inset);
  color: var(--accent);
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  transition: all var(--dur-1) var(--ease-out);
}
.travel-card-item:hover .travel-card-item-badge.is-action {
  background: var(--accent);
  color: #fff;
}
.travel-card-item-badge.is-added {
  background: rgba(53, 129, 79, 0.12);
  color: var(--success);
}
.travel-card-empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-subtle);
  font-size: 0.8rem;
}
.travel-card-empty-state i {
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--border-strong);
  display: block;
}
.travel-card-dropdown-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.travel-card-toggle-all-btn {
  background: transparent;
  border: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  transition: background var(--dur-1) var(--ease-out);
}
.travel-card-toggle-all-btn:hover {
  background: rgba(46, 107, 70, 0.1);
}
#passenger-add-btn { margin-top: var(--sp-1); }

.advanced summary:hover { color: var(--text); }
.advanced summary i { color: var(--accent); font-size: 0.85em; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: "\25BE"; font-size: 0.8em; margin-left: 2px; transition: transform var(--dur-1) var(--ease-out); }
.advanced[open] summary::after { transform: rotate(180deg); }
.advanced-body {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-2);
  margin-top: var(--sp-3);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.toggle-row:hover { background: var(--surface); }
.toggle-row-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--accent);
  font-size: 0.78rem;
}
.toggle-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toggle-row-title { font-size: var(--fs--1); font-weight: 600; color: var(--text); }
.toggle-row-desc { font-size: var(--fs--2); color: var(--text-subtle); line-height: 1.35; }

/* ---------- exclude-mode chips ---------- */
.chip-group--exclude {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
}
/* Pressed = excluded: read as "turned off", not "selected" (unlike .chip's accent fill) */
.chip--exclude[aria-pressed="true"] {
  background: var(--bg-inset);
  color: var(--text-subtle);
  border-color: var(--border-strong);
  text-decoration: line-through;
  opacity: 0.65;
}

/* ---------- toggle switch ---------- */
.switch { position: relative; flex-shrink: 0; display: inline-block; width: 40px; height: 24px; }
.switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-1) var(--ease-out);
  pointer-events: none;
}
.switch-track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--bg-raised);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-1) var(--ease-spring);
}
.switch input:checked ~ .switch-track { background: var(--accent); }
.switch input:checked ~ .switch-track::before { transform: translateX(16px); }
.switch input:focus-visible ~ .switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

.overnight-prefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: 0 var(--sp-2) 0 44px;
  padding: 0 var(--sp-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), padding var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out);
}
.overnight-prefs.is-open {
  max-height: 140px;
  opacity: 1;
  margin: calc(-1 * var(--sp-1)) var(--sp-2) var(--sp-2) 44px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-2);
}
.overnight-prefs label { font-size: var(--fs--2); color: var(--text-subtle); display: block; margin-bottom: 4px; }
.overnight-prefs input[type="number"] {
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: var(--r-1);
  padding: 6px 10px;
  width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.overnight-prefs input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}
.pref-hint { font-size: 0.72rem; color: var(--text-subtle); margin-top: 3px; }

/* ---------- loading overlay ---------- */
#loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px);
  z-index: 10;
  border-radius: var(--card-radius);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-4);
}
.spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline variant, sized to sit beside a line of text (see .price-loading in components.css).
   Must be declared after .spinner so it wins on the properties it overrides. */
.spinner--inline {
  width: 11px;
  height: 11px;
  border-width: 2px;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  /* The "Retrieving price from X" text carries the meaning, so the spinner beside it is pure
     decoration and can simply stop. */
  .spinner--inline { animation: none; }
}
#loading-overlay h2 { font-size: var(--fs-1); }
.loading-overlay-status {
  font-size: var(--fs-0);
  color: var(--text-subtle);
  text-align: center;
  max-width: 32ch;
}

/* ---------- results layout ---------- */
#results-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); }
/* minmax(0, 1fr), not a bare 1fr: `1fr` means minmax(auto, 1fr), whose auto floor
   is the content's min-content width, so a wide child (the map, a long station
   name) blows the column past the viewport and the whole page scrolls sideways.
   The two-column rule above already guards this the same way. */
@media (max-width: 991px) {
  #results-panel { grid-template-columns: minmax(0, 1fr); }
  #options-list, #return-options-list { max-height: none; overflow: visible; }
  #detail-column:empty { display: none; }
  #detail-placeholder { display: none !important; }
}

.detail-map-container {
  width: 100%;
}

@media (max-width: 991px) {
  .detail-map-container {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
}

@keyframes detailSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-map-container.is-animated {
  animation: detailSlideDown 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.results-col-title { font-size: var(--fs-2); margin-bottom: var(--sp-4); }

.timing-panel {
  font-size: var(--fs--2);
  color: var(--text-subtle);
  background: var(--bg-inset);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.timing-panel > div { display: flex; justify-content: space-between; margin-bottom: 2px; }
.timing-panel .total { font-weight: 700; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }

#options-list, #return-options-list { max-height: 560px; overflow-y: auto; overflow-x: hidden; padding: 4px; scrollbar-width: thin; }

/* Return leg: same shape as the outbound block, with its own top margin/divider since it sits
   directly below the outbound flight-section/options rather than at the top of the column. */
#return-results-block { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

/* compact variant of the shared option card for the results rail */
.option-card--compact { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); border-radius: var(--r-2); }
.option-card--compact .option-times .t { font-size: var(--fs-1); }
.option-card--compact .option-stats { font-size: var(--fs--2); gap: var(--sp-1) var(--sp-3); }
.option-card--compact .mode-icons span { width: 24px; height: 24px; }
.option-card--compact:hover { transform: none; }

.option-card--flight-cmp { opacity: 0.85; }

/* Top Highlighted Best Trip */
.best-trip-section {
  margin-bottom: var(--sp-3);
}

.best-trip-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-1);
}

.best-trip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs--2);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 3px 10px;
  border-radius: var(--label-radius);
}

.best-trip-icon {
  display: inline-block;
  vertical-align: middle;
}

.best-trip-tagline {
  font-size: var(--fs--2);
  font-weight: 600;
  color: var(--text-subtle);
}

.option-card--best-highlight {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 93%, var(--accent) 7%);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-1);
  position: relative;
}

.option-card--best-highlight:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 24%, transparent), var(--shadow-2);
}

.option-card--best-highlight.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 30px color-mix(in srgb, var(--accent) 28%, transparent);
}

.options-timeline-divider {
  display: flex;
  align-items: center;
  margin: var(--sp-4) 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.options-timeline-heading {
  font-size: var(--fs--2);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* The detail panel's price now lives in .detail-price above — a panel in the header rather than an
   inline stat — so the old .price-real / .price-tariff / .price-tier inline styles are gone with
   the renderer that emitted them. */
.stat-lost--good { color: var(--co2-good); font-weight: 600; }
.stat-lost--bad { color: var(--danger); font-weight: 600; }

.label--warning { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* Staff-only All Aboard provenance marker (see allAboardProvenanceLabel in planner.js). Muted
   and monospaced on purpose: it's a diagnostic sitting among product labels, and should read as
   instrumentation rather than compete with them. */
.label--staff {
  background: color-mix(in srgb, var(--text-subtle) 14%, transparent);
  color: var(--text-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}

#flight-section, #return-flight-section { margin-top: var(--sp-3); }
.flight-comparison-label {
  font-size: var(--fs--2);
  color: var(--text-subtle);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

/* ---------- detail + map ---------- */
#detail-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  min-height: 200px;
}
.detail-placeholder {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: var(--fs--1);
  text-align: center;
  padding: var(--sp-6);
}
/* Detail header: journey summary left, price panel right. */
.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.detail-headline { min-width: 0; flex: 1; }
.detail-head .detail-sub { margin-bottom: 0; }

.detail-price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2);
  border: 1.5px solid var(--border);
  background: var(--bg-inset);
  text-align: right;
  line-height: 1;
}
.detail-price-amount {
  font-size: var(--fs-4);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.detail-price-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-subtle);
  white-space: nowrap;
}
.detail-price-src svg { width: 12px; height: 12px; }

/* Only a fare someone can actually be charged gets the tint and the tick. */
.detail-price--live {
  background: color-mix(in srgb, var(--co2-good) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--co2-good) 38%, transparent);
}
.detail-price--live .detail-price-src,
.detail-price--live .detail-price-src svg { color: var(--co2-good); }

/* An estimate — fixed tariff or per-km guess alike — keeps the size but loses the contrast. */
.detail-price--estimate .detail-price-amount { font-size: var(--fs-3); color: var(--text-muted); font-weight: 700; }
.detail-price--loading { padding: var(--sp-3) var(--sp-4); }

@media (max-width: 640px) {
  /* Stack on narrow screens so neither the summary nor the price gets squeezed. */
  .detail-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .detail-price { align-items: flex-start; text-align: left; }
}

.detail-title { font-size: var(--fs-2); margin-bottom: var(--sp-2); }
.detail-sub { font-size: var(--fs--1); color: var(--text-muted); margin-bottom: var(--sp-4); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.detail-sub .stat--good, .detail-sub .stat--bad { display: inline-flex; align-items: center; gap: 5px; }
.detail-sub svg, .detail-note svg { width: 13px; height: 13px; }
.detail-good { color: var(--co2-good); }
.detail-bad { color: var(--danger); }
.detail-note { font-size: var(--fs--2); color: var(--text-subtle); margin-bottom: var(--sp-4); }

/* "Book through {operator}" — a plain link out to the operator's own site for a leg All Aboard
   has no ticket for at all. Lives here rather than in booking.css because it must render
   correctly even when the All Aboard gateway (and therefore booking.css) is flagged off — this
   link never goes through that gateway, so it isn't gated by it. */
.btn-book--external {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 6px 14px;
  font-size: var(--fs--2);
}

/* timeline inside the detail card: no double frame */
.timeline--flush { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
.leg--flight { --leg-color: var(--mode-rail); }
.leg--flight .leg-rail::before {
  background: repeating-linear-gradient(to bottom, var(--leg-color) 0 6px, transparent 6px 12px);
}

#trip-map {
  /* Always square: as wide as the column, exactly as tall. Nothing caps it —
     the page grows to fit the map rather than the map shrinking to fit a fold.
     Leaflet re-measures via the ResizeObserver in planner.js.

     width:100% is load-bearing, not decoration: with width:auto an aspect-ratio
     box is over-constrained against auto margins and the browser resolves it by
     sizing the box from the ratio and absorbing the excess into a NEGATIVE end
     margin, pushing the map outside its column on narrow screens. An explicit
     width removes the ambiguity. */
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--card-radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
}

.results-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .planner-hero { padding-block: var(--sp-5); min-height: 0; }
  .planner-card { padding: var(--sp-5) var(--sp-4); }
  .planner-title { font-size: var(--fs-4); }
  #options-list, #return-options-list { max-height: none; overflow: visible; }
  #detail-panel { padding: var(--sp-4); }
}

/* ---------- tooltip ----------
   Positioned in JS (see setupInfoTips in planner.js) rather than as a CSS ::after: the trigger
   elements live inside #options-list / #return-options-list, which clip overflow for their own
   scrolling, so an absolutely-positioned popup anchored to the trigger gets cut off whenever it
   would spill outside that box. Appending one shared tooltip to <body> and positioning it with
   position:fixed, clamped to the viewport, sidesteps that clipping entirely. */
.info-tip { position: relative; cursor: default; }
.info-tip-popup {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--text);
  color: var(--bg);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--r-1);
  max-width: 290px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-1);
  z-index: 1000;
}
.info-tip-popup.is-visible { opacity: 1; }

/* Feedback section at bottom of selected route card */
.option-card-feedback {
  display: none;
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  animation: fadeIn 0.2s ease-out;
}

.option-card.is-selected .option-card-feedback {
  display: flex;
}

.feedback-question {
  font-size: var(--fs--1);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.feedback-buttons {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
}

.btn-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  padding: 0;
  box-shadow: var(--shadow-1);
  color: var(--text-subtle);
}

.btn-feedback svg {
  display: block;
  transition: transform 0.15s ease;
}

.btn-feedback:hover {
  transform: scale(1.12);
}

.btn-feedback--like {
  color: #22c55e;
}
.btn-feedback--like:hover,
.btn-feedback--like.is-active {
  background-color: rgba(34, 197, 94, 0.14);
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

.btn-feedback--neutral {
  color: #eab308;
}
.btn-feedback--neutral:hover,
.btn-feedback--neutral.is-active {
  background-color: rgba(234, 179, 8, 0.14);
  border-color: #eab308;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.35);
  color: #eab308;
}

.btn-feedback--dislike {
  color: #ef4444;
}
.btn-feedback--dislike:hover,
.btn-feedback--dislike.is-active {
  background-color: rgba(239, 68, 68, 0.14);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.feedback-confirmation {
  font-size: var(--fs--2);
  color: var(--co2-good, #22c55e);
  font-weight: 600;
  margin-top: 2px;
}

} /* @layer page */

/* ─────────────────────────────────────────────────────────────────────────
   Deliberately OUTSIDE @layer page — do not move this back inside.

   django-leaflet ships an unlayered `.leaflet-container { height: 100% }`
   (staticfiles/leaflet/leaflet.extras.css, a vendored build artifact we do not
   edit). Unlayered declarations beat layered ones no matter their specificity,
   so that 0-1-0 class selector outranks even `#trip-map` while this file's
   rules sit in @layer page.

   The effect was invisible until the map became a grid descendant with a
   definite row height: `height: 100%` then resolved against the stretched row
   (~1500px) instead of collapsing to auto, which both destroyed the 1:1 ratio
   and overflowed the surrounding card. Restoring `height: auto` hands sizing
   back to aspect-ratio.
   ───────────────────────────────────────────────────────────────────────── */
#trip-map.leaflet-container { height: auto; }