/*
 * Two themes, one set of roles. Dark is the unscoped default (this app's
 * original look, unchanged); :root[data-theme="light"] below redefines every
 * token for the light basemaps (Voyager and friends). Nothing outside this
 * block and its light-mode twin should hold a raw color for anything that
 * appears in both themes — that is what broke the first pass at this: a
 * handful of hardcoded hex values only ever looked right on dark.
 *
 * --accent is a thin-mark color (links, borders, focus rings) and only needs
 * 3:1 against a surface. --accent-fill is a *separate*, always-darker step
 * for solid fills that carry text (buttons, pressed pills, inside-bar chart
 * labels) — text needs 4.5:1, and the light theme's --accent (#2a78d6) does
 * not clear that with either black or white ink, so a filled button using it
 * directly would be illegible. --ink-on-accent is themed too: dark ink reads
 * on the dark theme's bright cyan fill, white ink on the light theme's deeper
 * blue fill.
 */
:root {
  --bg: #0e1116;
  --panel: #151a21;
  --panel-alt: #1b222b;
  --border: #262e39;
  --border-strong: #3a4756;
  --text: #e6eaf0;
  --muted: #8b97a8;
  --placeholder: #5c6878;
  --accent: #4cc2ff;
  --accent-dim: #2a6b8d;
  --accent-fill: #3987e5;
  --accent-fill-hover: #6bb0f0;
  --accent-hover: #6bcdff;
  --ink-on-accent: #06121a;
  --focus-ring: rgba(76, 194, 255, 0.15);
  --accent-wash: rgba(76, 194, 255, 0.1);
  --editing-bg: rgba(76, 194, 255, 0.07);
  --danger-text: #ff9b9b;
  --danger-hover-text: #ffffff;
  --danger-hover-bg: #7a2530;
  --danger-hover-border: #a23742;
  --ok-text: #a6e3b8;
  --ok-bg: #16261c;
  --ok-border: #2c4a35;
  --warn-text: #ffd9a0;
  --warn-bg: #2a2013;
  --warn-border: #5c4523;
  --warn-strong-bg: #ffc266;
  --warn-strong-ink: #1a1206;
  --error-text: #ffb3b3;
  --error-bg: #2b1618;
  --error-border: #5e2a2f;
  --away-text: #cfc8ff;
  --away-bg: #221f38;
  --away-border: #4b427e;
  --away-strong-bg: #9085e9;
  --away-strong-ink: #14112b;
  --map-bg: #0b0e12;
  --label-bg: rgba(14, 17, 22, 0.82);
  --shadow: rgba(0, 0, 0, 0.4);
  --date-icon-filter: invert(0.8);
}

:root[data-theme="light"] {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel-alt: #eef1f5;
  --border: #dde3ea;
  --border-strong: #c3ccd6;
  --text: #16202b;
  --muted: #5b6b7c;
  --placeholder: #7c8798;
  --accent: #2a78d6;
  --accent-dim: #a9c9ec;
  --accent-fill: #256abf;
  --accent-fill-hover: #1c5cab;
  --accent-hover: #1c5cab;
  --ink-on-accent: #ffffff;
  --focus-ring: rgba(42, 120, 214, 0.15);
  --accent-wash: rgba(42, 120, 214, 0.08);
  --editing-bg: rgba(42, 120, 214, 0.06);
  --danger-text: #b3261e;
  --danger-hover-text: #ffffff;
  --danger-hover-bg: #b3261e;
  --danger-hover-border: #8f1e17;
  --ok-text: #0f6e2b;
  --ok-bg: #e3f5e8;
  --ok-border: #b7e0c2;
  --warn-text: #8a5a00;
  --warn-bg: #fdf1de;
  --warn-border: #f0d9ad;
  --warn-strong-bg: #ffc266;
  --warn-strong-ink: #1a1206;
  --error-text: #a3241f;
  --error-bg: #fbe4e2;
  --error-border: #f3c6c1;
  --away-text: #4a3aa7;
  --away-bg: #efecfb;
  --away-border: #d8d0f5;
  --away-strong-bg: #9085e9;
  --away-strong-ink: #14112b;
  --map-bg: #eef1f5;
  --label-bg: rgba(255, 255, 255, 0.9);
  --shadow: rgba(15, 23, 32, 0.18);
  --date-icon-filter: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

#app {
  display: flex;
  height: 100%;
}

/* ---------- sidebar ---------- */

#sidebar {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h1 {
  margin: 0 0 16px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Flex, not equal columns: the distance is the widest and needs the room. */
.stats {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}

.stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.stats dd {
  margin: 2px 0 0;
  font-size: 17px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.year-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.year-filter button {
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.year-filter button:hover { color: var(--text); }

.year-filter button[aria-pressed="true"] {
  color: var(--ink-on-accent);
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  font-weight: 600;
}

.notices {
  margin: 14px 20px 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
}

.notices p { margin: 0 0 4px; }
.notices p:last-child { margin-bottom: 0; }

.trip-list {
  flex: 1;
  margin: 0;
  padding: 8px 12px 20px;
  overflow-y: auto;
  list-style: none;
}

.trip-year {
  padding: 14px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.trip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.trip:hover, .trip:focus-visible {
  background: var(--panel-alt);
  border-color: var(--border);
  outline: none;
}

/* Selected from the map or the list: an accent edge makes it findable at a
   glance after the list scrolls it into view. */
.trip[aria-current="true"] {
  background: var(--panel-alt);
  border-color: var(--accent-dim);
  box-shadow: inset 2px 0 0 var(--accent);
}

.trip .route { font-size: 14px; }
.trip .route .arrow { color: var(--accent); padding: 0 4px; }

.trip .meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sidebar-footer {
  padding: 10px 20px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.sidebar-footer a { color: var(--muted); }

/* ---------- map ---------- */

#map {
  flex: 1;
  min-width: 0;
  background: var(--map-bg);
}

.leaflet-container { font: inherit; background: var(--map-bg); }

.place-label {
  padding: 2px 6px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--label-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
}

.popup-title { font-weight: 600; margin-bottom: 2px; }
.popup-meta { color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; flex: 0 0 auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--border); }
  #map { flex: 1; min-height: 55vh; }
}

/* ---------- editor page ---------- */

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

body.editor { height: auto; min-height: 100%; }

.editor-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.editor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.editor-header h1 { margin: 0; font-size: 24px; letter-spacing: -0.01em; }

.header-links { display: flex; gap: 16px; }

.link-back { color: var(--accent); text-decoration: none; font-size: 14px; }
.link-back:hover { text-decoration: underline; }

.panel {
  padding: 20px;
  margin-bottom: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.panel h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.panel-head h2 { margin: 0; }

.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.count {
  padding: 1px 8px;
  margin-left: 4px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* form */

#trip-form {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 130px;
  gap: 14px;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
/* Journey and note share the second row. */
.field-half { grid-column: span 2; }

.field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.field input {
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field input::placeholder { color: var(--placeholder); }

/* Make the native date picker legible on the dark panel. */
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--date-icon-filter); cursor: pointer; }

.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

.btn {
  padding: 9px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--border-strong); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  color: var(--ink-on-accent);
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-small { padding: 5px 10px; font-size: 13px; }

.btn-danger { color: var(--danger-text); }
.btn-danger:hover:not(:disabled) { color: var(--danger-hover-text); background: var(--danger-hover-bg); border-color: var(--danger-hover-border); }

/* status banner */

.status {
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.status-ok    { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-border); }
.status-warn  { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); }
.status-error { color: var(--error-text); background: var(--error-bg); border-color: var(--error-border); }
.status-busy  { color: var(--muted); background: var(--panel-alt); }

/* table */

.table-wrap { overflow-x: auto; }

.trip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.trip-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.trip-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.trip-table tr:last-child td { border-bottom: none; }
.trip-table tr.editing { background: var(--editing-bg); }
.trip-table .when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.trip-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trip-table .actions { text-align: right; white-space: nowrap; }
.trip-table .actions button + button { margin-left: 6px; }
.trip-table .empty { padding: 26px 10px; text-align: center; color: var(--muted); }

.flag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  white-space: nowrap;
}

.editor-footer { font-size: 12px; color: var(--muted); text-align: center; }
.editor-footer a { color: var(--muted); }
.editor-footer code { color: var(--text); }

@media (max-width: 900px) {
  #trip-form { grid-template-columns: 160px 1fr 130px; }
}

@media (max-width: 720px) {
  #trip-form { grid-template-columns: 1fr; }
}

.sidebar-footer .link-edit { display: inline-block; margin-bottom: 6px; color: var(--accent); text-decoration: none; }
.sidebar-footer .link-edit:hover { text-decoration: underline; }

/* ---------- transport legend ---------- */

.legend-panel {
  padding: 12px 14px 12px;
  border-bottom: 1px solid var(--border);
}

.legend-title {
  margin: 0 0 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.legend { display: flex; flex-direction: column; gap: 1px; }

.legend-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.legend-row:hover, .legend-row:focus-visible {
  background: var(--panel-alt);
  border-color: var(--border);
  outline: none;
}

/* Filtered-out modes stay legible, just clearly off. */
.legend-row[aria-pressed="false"] { opacity: 0.4; }
.legend-row[aria-pressed="false"] .legend-label { text-decoration: line-through; }

.legend-swatch { width: 34px; height: 8px; overflow: visible; }
.legend-label { font-size: 13px; }
.legend-tally { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.mode-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: baseline;
}

/* select matches the text inputs */
.field select {
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.trip-table .mode { white-space: nowrap; }
.trip-table .trip-name { font-weight: 600; }
.trip-table .muted-cell { color: var(--muted); }

/* The whole route in one cell, with the destination picked out. */
.trip-table .route-cell { font-size: 13px; line-height: 1.7; }
.trip-table .route-cell .arrow { color: var(--accent-dim); }
.trip-table .stop-destination { font-weight: 600; color: var(--text); }

/* ---------- a trip and its legs ---------- */

/* Legs hang off a rail under their trip header. */
.trip-legs {
  margin: 1px 0 0 14px;
  padding: 0 0 0 12px;
  list-style: none;
  border-left: 1px solid var(--border);
}

.trip-leg { padding: 6px 8px; }
.trip-leg .route { font-size: 13px; color: var(--muted); }
.trip-leg .meta { font-size: 11px; }
.trip-leg[aria-current="true"] .route { color: var(--text); }

/* The leg's own arrow stays accented even though its text is dimmed. */
.trip-leg .route .arrow { color: var(--accent-dim); }

.leg-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- sort control ---------- */

.sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}

.sort-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* A segmented pair rather than loose chips: the two options are exclusive. */
.sort-control {
  display: inline-flex;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sort-control button {
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.sort-control button:hover { color: var(--text); }

.sort-control button[aria-pressed="true"] {
  color: var(--ink-on-accent);
  background: var(--accent-fill);
  font-weight: 600;
}

.sort-control button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- to-be-clarified marking ---------- */

.flag-clarify { cursor: help; }

.trip-leg .flag-clarify, .trip .flag-clarify {
  margin-left: 2px;
  font-size: 10px;
  padding: 0 6px;
  vertical-align: 1px;
}

.popup-clarify { color: var(--warn-text); }

.year-filter .chip-clarify {
  color: var(--warn-text);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.year-filter .chip-clarify[aria-pressed="true"] {
  color: var(--warn-strong-ink);
  background: var(--warn-strong-bg);
  border-color: var(--warn-strong-bg);
  font-weight: 600;
}

.trip-table .when-vague { color: var(--muted); }

/* ---------- away-from-home marking ---------- */

.flag-away {
  color: var(--away-text);
  background: var(--away-bg);
  border-color: var(--away-border);
  cursor: help;
}

.trip .flag-away, .trip-head .flag-away {
  margin-left: 2px;
  font-size: 10px;
  padding: 0 6px;
  vertical-align: 1px;
  font-weight: 400;
}

.year-filter .chip-away {
  color: var(--away-text);
  background: var(--away-bg);
  border-color: var(--away-border);
}

.year-filter .chip-away[aria-pressed="true"] {
  color: var(--away-strong-ink);
  background: var(--away-strong-bg);
  border-color: var(--away-strong-bg);
  font-weight: 600;
}

/* ---------- "filters are hiding things" notice ---------- */

.filter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 20px 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-alt);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
}

.filter-clear {
  flex: none;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-on-accent);
  background: var(--accent-fill);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.filter-clear:hover { background: var(--accent-hover); }

/* ---------- carbon footprint ---------- */

.footprint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  cursor: help;
}

.footprint:empty { display: none; }

/* ---------- sortable column header ---------- */

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}

.th-sort:hover { color: var(--text); }

.th-sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.sort-arrow { font-size: 9px; color: var(--accent); }

/* ---------- the trip header ---------- */

.trip-group { margin: 4px 0 8px; }

.trip-head .route { font-weight: 700; }

.trip-head[aria-current="true"] {
  background: var(--panel-alt);
  border-color: var(--accent-dim);
}

/* Why the trip happened, next to what it was called. */
.purpose-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

/* The one leg that actually arrived at the point of the trip. */
.leg-destination { font-size: 10px; padding: 0 6px; vertical-align: 1px; }

/* ---------- KPI page ---------- */

.kpi-total {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--text);
}

.kpi-caveat {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.kpi-caveat code { color: var(--text); }

.kpi-chart {
  position: relative;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kpi-grid { stroke: var(--border); stroke-width: 1; }
.kpi-baseline { stroke: var(--border-strong); stroke-width: 1; }

.kpi-axis-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.kpi-bar { fill: var(--accent-fill); transition: fill 0.1s ease; }

/* Undated: dashed outline distinguishes it from a real chronological year
   without relying on a second hue. */
.kpi-bar-undated {
  fill: var(--accent-fill);
  fill-opacity: 0.55;
  stroke: var(--accent-fill);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.kpi-bar-group { cursor: pointer; outline: none; }
.kpi-bar-group:focus-visible .kpi-bar,
.kpi-bar-group-hover .kpi-bar { fill: var(--accent-fill-hover); }
.kpi-bar-group:focus-visible .kpi-bar-undated,
.kpi-bar-group-hover .kpi-bar-undated { fill-opacity: 0.75; }

.kpi-value-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi-value-label-inside { fill: var(--ink-on-accent); }

.kpi-tooltip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px var(--shadow);
}

.kpi-tooltip strong { font-variant-numeric: tabular-nums; }

/* ---------- When field: free text + a native date picker helper ---------- */

.when-input { position: relative; }

.when-input #f-when { padding-right: 30px; }

/*
 * Only an icon, floating over the text field's right edge — picking a date
 * writes it into #f-when and the picker itself stays blank (see js/edit.js),
 * so it never has to represent a partial "2019"/"2019-06" value itself.
 * Chromium/Safari can hide everything but the calendar icon via these
 * pseudo-elements; Firefox has no such hook, so there it renders as a normal
 * compact date box instead — smaller, but still fully functional.
 */
.when-picker {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  opacity: 0.7;
  cursor: pointer;
}

.when-picker:hover, .when-picker:focus-visible { opacity: 1; }
.when-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.when-picker::-webkit-datetime-edit,
.when-picker::-webkit-inner-spin-button {
  display: none;
}

.when-picker::-webkit-calendar-picker-indicator {
  filter: var(--date-icon-filter);
  opacity: 1;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- the route builder ---------- */

.route-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.route-note strong { color: var(--text); font-weight: 600; }

.route { display: flex; flex-direction: column; gap: 8px; }

/* One waypoint per row: what it is, where, and how you left it. */
.point-row {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Start and destination are the two rows a trip cannot do without. */
.point-start, .point-destination { border-color: var(--border-strong); }

.point-role {
  flex: 0 0 108px;
  padding-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.point-start .point-role, .point-destination .point-role { color: var(--text); }

.point-row > .field { flex: 1; min-width: 0; }

.point-onward { display: flex; align-items: end; gap: 10px; flex: 1 1 300px; min-width: 0; }
.point-onward .field:has(.when-input) { flex: 1; min-width: 0; }
.point-onward .field:has(select) { flex: 0 0 130px; }
.point-onward .when-input { flex: 1; min-width: 0; }

/* The last stop has no onward journey, so its fields are visibly out of play. */
.point-onward-inert { opacity: 0.4; }

/* A required onward date that's missing or malformed, flagged until fixed. */
.field-invalid {
  border-color: var(--error-border) !important;
  background: var(--error-bg) !important;
  color: var(--error-text);
}

.point-row .btn { flex: none; }

.add-stopover { align-self: flex-start; margin: 0 0 2px 108px; }

.field-wide:has(.route) { display: flex; flex-direction: column; }