:root {
  --ink: #1b2430;
  --parchment: #f6f1e7;
  --parchment-dark: #ece4d4;
  --gold: #d9942f;
  --gold-dark: #b87a20;
  --route: #3f6e64;
  --border: #d8cfb8;
  --danger: #a4433a;

  /* Type scale -- every font-size in this file resolves to one of these,
     so nudging a size site-wide (like matching an input to a dropdown) is
     a one-line change instead of a grep-and-replace. */
  --text-2xs: 0.7rem;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-md: 0.95rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.7rem;

  /* Spacing scale for the gaps between elements in a row/column (toolbars,
     card innards, form rows) -- keeps that rhythm consistent instead of
     each container picking its own close-but-not-quite value. */
  --stop-btn: 26px; /* stop row icon buttons */
  --space-0: 0.15rem;
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.5rem;
  --space-4: 0.6rem;
  --space-5: 0.9rem;

  /* A resting elevation for card-like rows (place cards, state/region
     groups, trip rows) so they lift slightly off the parchment background
     instead of reading as flat as it. */
  --shadow-card: 0 1px 2px rgba(27, 36, 48, 0.07);

  /* Elevation for controls floating over the map (search, tools, zoom,
     category chips) so they read clearly against busy topo tiles. */
  --shadow-float: 0 2px 10px rgba(27, 36, 48, 0.18), 0 1px 2px rgba(27, 36, 48, 0.12);

  /* Map highlights: the deviation band, the ring around places along the
     route, their labels, and the final stop. Gold suits the Topo and
     Street maps; over Contours' warm relief and Satellite imagery gold
     disappears, so those switch to Google Maps' route blue (below). */
  --map-accent: #d9942f;
  --map-accent-dark: #b87a20;
  --map-accent-ring: rgba(217, 148, 47, 0.85);
  --map-accent-soft: #fdf0da;
  --map-accent-text: var(--on-accent);

  --rail-width: 84px;
  --flyout-width: 360px;
  --muted: #6b6252;

  /* Surfaces and secondary text tones. Kept as tokens (rather than literal
     whites and browns) so the dark theme below can swap them in one place. */
  --surface: #fff;
  --surface-warm: #fffdf8;
  --muted-strong: #5b5142;
  --faint: #9a917d;
  --fainter: #b8ae96;
  --tool-ink: #4d5560;
  --route-dark: #345c53;
  --route-soft: #e4eeea;
  --danger-soft: #f8e6e3;
  --on-accent: #1b2430; /* text on gold buttons -- stays dark in both themes */
  --label-bg: rgba(255, 253, 248, 0.92);
  --scale-bg: rgba(255, 255, 255, 0.8);
  color-scheme: light;
}

/* Dark theme, picked from the light-bulb tool (see setTheme in app.js) and
   applied as <html data-theme="dark">. --ink and --parchment trade places,
   so the "ink pill with parchment text" elements invert on their own. */
:root[data-theme="dark"] {
  --ink: #ece4d4;
  --parchment: #171c22;
  --parchment-dark: #262d36;
  --border: #39414d;
  --route: #4f877a;
  --route-dark: #3f6e64;
  --route-soft: #22362f;
  --danger: #e07a6e;
  --danger-soft: #3d2420;
  --muted: #a89f8c;
  --muted-strong: #c4baa5;
  --faint: #8c8473;
  --fainter: #6c6556;
  --tool-ink: #b6bec8;
  --surface: #1f252d;
  --surface-warm: #1c2128;
  --label-bg: rgba(28, 33, 40, 0.92);
  --scale-bg: rgba(28, 33, 40, 0.8);
  --map-accent-soft: #4a3a1f;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* A visible, on-brand focus ring for keyboard navigation -- the default
   browser ring reads faint against the cream background. Buttons get the
   gold accent (they're actions); text inputs/selects get the route green
   (they're where you're entering something), each as a ring plus a
   matching border-color so it reads clearly even on a white input. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
  border-radius: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--route);
  outline-offset: 1px;
  border-color: var(--route);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--parchment);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  overflow: hidden;
}

/* ---------- Left icon rail ---------- */

.rail {
  flex: none;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 0;
  background: var(--parchment);
  border-right: 1px solid var(--border);
  z-index: 1010;
}

.rail__logo {
  display: block;
  margin-bottom: var(--space-3);
}

.rail__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  width: 72px;
  padding: 0.35rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}

.rail__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0.6rem 0;
  background: none;
  color: var(--ink);
  border-radius: 8px;
  font-size: var(--text-xs);
  line-height: 1.15;
  text-align: center;
}
.rail__btn svg { width: 24px; height: 24px; }
.rail__btn:hover { background: var(--parchment); }
.rail__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--parchment);
}

/* My Account and Sign out sit apart from the panel buttons, at the foot of
   the rail. */
.rail__account {
  margin-top: auto;
  width: 72px;
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}
.rail__account .rail__btn {
  width: 100%;
  color: var(--muted);
}
.rail__account .rail__btn[aria-expanded="true"] {
  background: var(--ink);
  color: var(--parchment);
}

/* ---------- My Account pop-out ---------- */

.account-pop {
  position: fixed;
  z-index: 1020; /* over the rail and flyout */
  left: calc(var(--rail-width) + 12px);
  bottom: 16px;
  width: 290px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0.9rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.account-pop[hidden] { display: none; }
.account-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.account-pop h2 { margin: 0; font-size: var(--text-base); }
.account-pop h3 { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.account-pop__close {
  padding: 0 0.4rem;
  background: none;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1;
}
.account-pop__close:hover { background: var(--parchment); }
.account-pop__username {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.account-pop__username dt { color: var(--muted); font-size: var(--text-xs); }
.account-pop__username dd { margin: 0; font-weight: 600; }
.account-pop label { font-size: var(--text-xs); color: var(--muted); }
.account-pop .stacked-form { gap: var(--space-2); margin-bottom: var(--space-3); }
.account-pop__news {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.account-pop__news .checkbox-label { color: var(--ink); font-size: var(--text-sm); }
.account-pop .stacked-form + .stacked-form,
.account-pop__news + .stacked-form {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.account-pop input[type="email"],
.account-pop input[type="password"] {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
}
.account-pop__invites,
.account-pop__delete {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.account-pop__invites .hint { margin: 0; font-size: var(--text-xs); }
.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.invite-list:empty { display: none; }
.invite-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--parchment);
  border-radius: 6px;
  font-size: var(--text-xs);
}
.invite-list__expiry { flex: 1; color: var(--muted); }
.invite-list button { padding: 0.3rem 0.55rem; }
.invite-list .invite-list__cancel {
  background: none;
  color: var(--danger);
}
.invite-list .invite-list__cancel:hover { background: var(--danger-soft); }
.account-pop__status { font-size: var(--text-xs); min-height: 1em; }
.account-pop__status.is-error { color: var(--danger); }
.account-pop__status.is-ok { color: var(--route); }

/* ---------- Flyout panel ---------- */

.flyout {
  flex: none;
  width: var(--flyout-width);
  overflow-y: auto;
  background: var(--surface-warm);
  border-right: 1px solid var(--border);
  z-index: 1005;
  transition: margin-left 0.2s ease;
}
.flyout.is-closed {
  margin-left: calc(-1 * var(--flyout-width));
  visibility: hidden;
  transition: margin-left 0.2s ease, visibility 0s 0.2s;
}

/* Drag handle on the flyout's right edge. Zero-width in the layout; the
   hit area straddles the border. */
.flyout-resizer {
  flex: none;
  position: relative;
  width: 0;
  z-index: 1006; /* over the flyout and map */
  cursor: col-resize;
  touch-action: none;
}
.flyout-resizer::before {
  content: "";
  position: absolute;
  inset: 0 -5px;
}
.flyout-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 3px;
  background: var(--route);
  opacity: 0;
  transition: opacity 0.15s;
}
.flyout-resizer:hover::after,
.flyout-resizer:focus-visible::after,
.flyout-resizer.is-dragging::after { opacity: 0.6; }
.flyout-resizer:focus-visible { outline: none; }
.flyout.is-closed + .flyout-resizer { display: none; }
body.is-resizing-flyout { cursor: col-resize; user-select: none; }
body.is-resizing-flyout .flyout { transition: none; }

.flyout__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.6rem;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
}

.flyout__head h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: var(--text-lg);
}

.flyout__close {
  min-width: 36px;
  min-height: 36px;
  margin-right: -0.5rem;
  background: none;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}
.flyout__close:hover { background: var(--parchment-dark); color: var(--ink); }

.flyout__section {
  padding: 1rem 1.25rem 1.5rem;
}
.flyout__section[hidden] { display: none; }

/* ---------- Saved trips (Trips panel) ---------- */

.trips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trips-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Name over distance/time; the whole tile (not the name) is the drag
   handle, and opening/exporting have their own buttons. */
.trips-list__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* Static map of the route (GET /api/trips/:id/thumbnail). */
.trips-list__thumb {
  flex: none;
  width: 64px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
  object-fit: cover;
  background: var(--parchment);
  pointer-events: none;
}
.trips-list__name {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
/* Same hover as the left rail buttons: the whole row picks up a parchment
   tint. */
.trips-list__item:hover { background: var(--parchment); }
.trips-list__item {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* The tile being dragged (see makeTripDraggable). */
.trips-list__item--dragging {
  background: var(--parchment);
  border-color: var(--gold-dark);
  box-shadow: 0 4px 12px rgba(27, 36, 48, 0.18);
}
.trips-list__item--dragging { cursor: grabbing; }

/* Distance and time each stay whole; with the thumbnail taking room, time
   drops to its own line when the row is narrow. */
.trips-list__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6rem;
  font-size: var(--text-2xs);
  color: var(--muted);
}
.trips-list__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Star, delete and the folder header's rename/delete: small icon buttons
   on the same raised surface as the rest of the panel. */
.trips-list__star,
.trips-list__btn,
.trips-list__delete,
.trip-group__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
}
.trips-list__star svg,
.trips-list__btn svg,
.trips-list__delete svg,
.trip-group__btn svg { width: 14px; height: 14px; }
.trips-list__star:hover,
.trips-list__btn:hover,
.trips-list__delete:hover,
.trip-group__btn:hover { background: var(--parchment); }
.trips-list__star { color: var(--muted); }
.trips-list__star.is-active { color: var(--gold-dark); }
.trips-list__star.is-active svg { fill: currentColor; }
.trips-list__delete,
.trip-group__btn--danger { color: var(--danger); }
/* Armed state after the first tap (see armTwoTapDelete). */
.trips-list__delete.is-confirming,
.trips-list__delete.is-confirming:hover,
.trip-group__btn.is-confirming,
.trip-group__btn.is-confirming:hover {
  width: auto;
  background: var(--danger);
  color: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0 0.55rem;
}

/* Favorites, each folder, and Unfiled (see renderTripsList). Folders are
   <details>, so they open and close like the Places pane's region groups. */
.trips-list__toolbar { display: flex; justify-content: flex-end; }
.trips-list__toolbar .raised-btn { font-size: var(--text-xs); }
.trip-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trip-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0.25rem 0.1rem;
  font-family: Georgia, "Iowan Old Style", serif;
  font-weight: 700;
  font-size: var(--text-sm);
}
.trip-group__head .icon-inline { color: var(--route); flex: none; }
.trip-group__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-group__count {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.trip-group__star { display: grid; color: var(--gold-dark); }
.trip-group__star svg { width: 16px; height: 16px; fill: currentColor; }
.trip-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trip-group--unfiled .trip-group__body { min-height: 8px; } /* still a drop target when empty */

.trip-folder {
  padding: 0.2rem 0.5rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-warm);
}
.trip-folder:not([open]) { padding-bottom: 0.2rem; }
.trip-folder summary,
.trip-group--favorites summary { list-style: none; cursor: pointer; }
.trip-folder summary::-webkit-details-marker,
.trip-group--favorites summary::-webkit-details-marker { display: none; }
.trip-group__chevron {
  color: var(--route);
  font-size: var(--text-xs);
  transition: transform 0.15s;
}
.trip-folder[open] .trip-group__chevron,
.trip-group--favorites[open] .trip-group__chevron { transform: rotate(90deg); }
.trip-folder.is-drop-target {
  border-color: var(--gold-dark);
  background: var(--parchment);
}
.trip-group__empty { margin: 0; padding: 0.35rem 0; text-align: center; }
.trip-group__rename {
  width: 100%;
  padding: 0.25rem 0.4rem;
  font-family: inherit;
  font-weight: 700;
}


.save-trip:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.5rem 0.45rem 0.35rem;
}
/* The name reads as the card's title: no box until hovered or focused. */
.save-trip #trip-name {
  border-color: transparent;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 600;
}
.save-trip #trip-name:hover { border-color: var(--border); }
.save-trip #trip-name:focus { border-color: var(--route); background: var(--surface-warm); }
.save-trip #save-trip-btn { padding: 0.4rem 0.7rem; }
.save-trip input {
  flex: 1;
  min-width: 0;
}

/* Trip name doubles as a picker of saved trips (pick one to update it, or
   type a new name); the chevron opens the full list. */
.trip-name-combo {
  flex: 1;
  min-width: 0;
}
.trip-name-combo input { padding-right: 2.2rem; }
.trip-name-combo__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.trip-name-combo__toggle:hover { background: none; color: var(--ink); }
.trip-name-combo__toggle svg { width: 1.1rem; height: 1.1rem; }
.trip-name-combo .autocomplete-list--up {
  top: auto;
  bottom: calc(100% + 3px);
}
.trip-name-combo .autocomplete-list li[aria-selected="true"] { font-weight: 700; }
.trip-name-combo__empty {
  color: var(--muted);
  cursor: default !important;
}

.saved-places-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.65rem;
}

.saved-places-heading {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--route);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover {
  text-decoration: underline;
}

.hint {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0;
}

/* ---------- Map stage + floating controls ---------- */

.stage {
  position: relative;
  flex: 1;
  min-width: 0;
}

#map {
  position: absolute;
  inset: 0;
}

.map-search,
.map-deviation,
.category-filters,
.map-tools,
.layers-pop,
.map-nav {
  position: absolute;
  z-index: 1000;
}

.map-search {
  z-index: 1001; /* its suggestion list drops down over the category chips */
  top: 16px;
  left: 16px;
  width: min(380px, calc(100% - 112px));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 0.75rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.map-search:focus-within { box-shadow: 0 0 0 2px var(--route), var(--shadow-float); }
.map-search__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.map-search .autocomplete-wrap { flex: 1; min-width: 0; }
.map-search input[type="text"] {
  border: none;
  padding: 0.8rem 0;
  font-size: var(--text-md);
  background: transparent;
}
/* The whole pill gets the focus ring (:focus-within above) instead. */
.map-search input[type="text"]:focus-visible { outline: none; }
.map-search__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -0.3rem;
  padding: 0;
  background: none;
  color: var(--muted);
  border-radius: 50%;
}
.map-search__clear svg { width: 14px; height: 14px; display: block; }
.map-search__clear:hover { background: var(--parchment-dark); color: var(--ink); }
.map-search__clear[hidden] { display: none; }
.map-search .autocomplete-list {
  top: calc(100% + 10px);
  left: calc(-0.75rem - 18px - var(--space-3));
  right: -0.75rem;
  border-radius: 10px;
}

.map-tools {
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
  padding: 0.4rem 0.25rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
/* "Tools" header doubles as the collapse/expand toggle (see setToolsOpen
   in app.js); collapsed, only it shows, with the chevron flipped. */
.map-tools__toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.3rem 0.3rem;
  background: none;
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 6px;
}
.map-tools__toggle:hover { background: var(--parchment); }
.map-tools__toggle svg { width: 12px; height: 12px; transition: transform 0.15s; }
.map-tools__toggle[aria-expanded="false"] { padding-bottom: 0.1rem; }
.map-tools__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.map-tools__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
}
.map-tools__list[hidden] { display: none; }

/* Phones only -- see the 760px block below. */
.map-account { display: none; }
.account-pop__signout { display: none; }
.map-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  color: var(--tool-ink);
  border-radius: 8px;
}
.map-tool svg { width: 22px; height: 22px; }
/* Only needed on phones, where the deviation card is tucked behind it. */
.map-tool--mobile-only { display: none; }
.map-tool:hover,
.map-tool[aria-expanded="true"] { background: var(--parchment); color: var(--ink); }

.layers-pop {
  z-index: 1002; /* above the search bar, which it overlaps on phones */
  top: 16px;
  right: 76px;
  width: 236px;
  padding: 0.65rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.layers-pop[hidden] { display: none; }
.layers-pop__title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.layers-pop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.layers-pop__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 3px;
  background: none;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 9px;
  font-size: var(--text-xs);
}
.layers-pop__option:hover { background: var(--parchment); }
.layers-pop__option[aria-pressed="true"] { border-color: var(--route); }

/* Light/Dark picker from the light-bulb tool: same card as the layers
   picker, narrower, with two side-by-side choices. */
.theme-pop { width: 200px; }
.theme-pop__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.theme-pop__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0.55rem 0.3rem;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 9px;
}
.theme-pop__option svg { width: 22px; height: 22px; }
.theme-pop__option:hover { background: var(--parchment-dark); }
.theme-pop__option[aria-pressed="true"] { border-color: var(--route); }
.layers-pop__thumb {
  display: block;
  height: 58px;
  border-radius: 6px;
  background-color: var(--parchment-dark);
  background-size: cover;
  background-position: center;
}

.map-nav {
  right: 16px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.map-nav__btn,
.map-zoom {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.map-nav__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--ink);
}
.map-nav__btn svg { width: 22px; height: 22px; }
.map-nav__btn:hover,
.map-nav__btn:disabled:hover { background: var(--parchment); }
.map-zoom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-zoom button {
  width: 48px;
  height: 46px;
  padding: 0;
  background: none;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0;
}
.map-zoom button:hover { background: var(--parchment); }
.map-zoom button + button { border-top: 1px solid var(--parchment-dark); }

/* "Miles to deviate" card, sitting just above the scale bar. */
.map-deviation {
  left: 16px;
  bottom: 60px;
  width: 220px;
  padding: 0.5rem 0.75rem 0.55rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.map-deviation__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.map-deviation__label {
  font-size: var(--text-xs);
  font-weight: 700;
}
.map-deviation__value {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--route);
}
.map-deviation__value input.radius-control__value {
  width: 3.75em;
  padding: 0.2rem 0.3rem;
}
.map-deviation .radius-control__slider { margin: 0.2rem 0 0.15rem; }
.map-deviation__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  cursor: pointer;
}
.map-deviation__toggle input { margin: 0; accent-color: var(--route); }

.leaflet-control-scale { margin-bottom: 26px !important; }
/* The MapTiler SDK plugin pins its logo straight onto the map container,
   on top of the scale bar. Our Flex plan doesn't require the logo (only the
   attribution text, which Leaflet's control shows), so hide it. */
#map > a[href="https://www.maptiler.com"] { display: none; }
/* The SDK map's own logo and attribution controls, inside the layer the
   plugin draws (which overhangs the map's edges, so they'd sit just out of
   view but can peek in while it repositions). Leaflet's controls cover both. */
.leaflet-gl-layer .maplibregl-control-container { display: none; }
.leaflet-container .leaflet-control-scale-line {
  border-color: var(--ink);
  background: var(--scale-bg);
  color: var(--ink);
  font-weight: 600;
  text-shadow: none; /* Leaflet's white halo smears the light dark-mode text */
}

#clear-place-form { align-self: center; }

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: 1rem;
}

input, textarea, button, select {
  font: inherit;
}

input[type="text"],
input[type="number"],
textarea,
select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
}

textarea {
  resize: vertical;
  min-height: 3.5rem;
}

.latlon-row {
  display: flex;
  gap: var(--space-3);
}
.latlon-row input { flex: 1; min-width: 0; }

button {
  cursor: pointer;
  border: none;
  border-radius: 3px;
  padding: 0.55rem 0.9rem;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 600;
  font-size: var(--text-xs);
}
button:hover { background: var(--gold-dark); }
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
button:disabled:hover { background: var(--gold); }

.gmaps-import {
  display: flex;
  gap: var(--space-3);
  margin-bottom: 0.4rem;
}
.gmaps-import[hidden] { display: none; }
.gmaps-import input[type="text"] { flex: 1; min-width: 0; }
/* Same raised-surface look as the .route-tools buttons above it. Also
   used for "Add to route" and its pop-up options (.raised-btn). */
.gmaps-import button,
button.raised-btn,
.place-card button.raised-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  font-weight: 400;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}
.gmaps-import button svg { width: 18px; height: 18px; flex: none; }
.gmaps-import button:hover,
button.raised-btn:hover,
.place-card button.raised-btn:hover { background: var(--parchment); }
button.raised-btn:disabled:hover,
.place-card button.raised-btn:disabled:hover { background: var(--surface); }
button.raised-btn svg { width: 16px; height: 16px; flex: none; }
button.raised-btn[hidden] { display: none; }
button.raised-btn.danger { color: var(--danger); }
button.raised-btn.danger:hover { background: rgba(164,67,58,0.08); }
/* The main action of a form or pane: same raised surface, centered, bold. */
button.raised-btn--primary {
  justify-content: center;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
}
button.raised-btn[aria-pressed="true"],
button.raised-btn[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--parchment);
}

/* ---------- Add a place form ---------- */
/* Category chips: same pill look as the map's category filter, backed by
   radio buttons so the browser enforces "required". */
.category-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.category-picker__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.category-picker__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.category-picker__chip:hover { background: var(--parchment); }
/* Visually hidden but still focusable and validated. */
.category-picker__chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.category-picker__chip:has(input:checked) {
  background: var(--route-soft);
  border-color: var(--route);
}
.category-picker__chip:has(input:focus-visible) {
  outline: 2px solid var(--route);
  outline-offset: 2px;
}

.location-actions {
  display: flex;
  gap: var(--space-3);
}
.location-actions .raised-btn {
  flex: 1 1 0;
  justify-content: center;
}

/* Quiet, and only shown once there's something to clear. */
#place-form .place-form__clear {
  align-self: center;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}
#place-form .place-form__clear:hover {
  color: var(--danger);
  text-decoration: underline;
}
#place-form .place-form__clear[hidden] { display: none; }

/* "Pick on map" in progress. */
.leaflet-container.is-picking,
.leaflet-container.is-picking .leaflet-interactive { cursor: crosshair; }

#gmaps-url-status:empty { display: none; }
#gmaps-url-status {
  margin-top: 0;
  margin-bottom: 0;
}

/* Route panel toolbar: same look as the rail buttons, laid out as a
   floating strip. Four across at the default panel width, all in one row
   once the panel is dragged wide enough. */
#route-form { container-type: inline-size; }
.route-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-0);
  padding: 0.35rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
@container (min-width: 520px) {
  .route-tools { flex-wrap: nowrap; }
  .route-tools .route-tools__btn { flex: 1 1 0; }
}
.route-tools__btn {
  flex: 0 0 calc((100% - 3 * var(--space-0)) / 4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0.55rem 0.15rem;
  background: none;
  color: var(--ink);
  border: none;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.route-tools__btn svg { width: 22px; height: 22px; flex: none; }
.route-tools__btn:hover,
button.route-tools__btn:disabled:hover { background: var(--parchment); }
.route-tools__btn[aria-expanded="true"],
.route-tools__btn--toggle:has(input:checked) {
  background: var(--ink);
  color: var(--parchment);
}
.route-tools__btn--toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.route-tools__btn--toggle:has(input:focus-visible) {
  outline: 2px solid var(--route);
  outline-offset: 2px;
}
.route-tools__btn--danger { color: var(--danger); }
.route-tools__btn--danger:hover { background: rgba(164,67,58,0.08); }
#recalculate-stops.is-busy svg,
#optimize-stops.is-busy svg { animation: route-tools-spin 0.9s linear infinite; }
@keyframes route-tools-spin { to { transform: rotate(360deg); } }

.route-notice[hidden] { display: none; }
.route-notice {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--surface);
}
.route-notice p { margin: 0; }
.route-notice p + p { margin-top: 0.35rem; }

/* Elevation profile under the route summary (see app.js). Same raised
   surface as #route-summary. */
.elevation[hidden] { display: none; }
.elevation {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
}
.elevation__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
}
.elevation__totals {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.elevation__body { padding: 0 0.8rem 0.6rem; }
.elevation__body .hint,
.elevation__body .error { margin: 0; }
.elevation__chart {
  position: relative;
  height: 110px;
  touch-action: pan-y; /* a sideways drag scrubs the chart instead of scrolling */
  cursor: crosshair;
}
.elevation__chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* --elevation-color is set to a per-day gradient when days are on. */
.elevation__area { fill: var(--elevation-color, var(--route)); opacity: 0.18; }
.elevation__line {
  fill: none;
  stroke: var(--elevation-color, var(--route));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.elevation__stop {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.elevation__axis {
  position: absolute;
  left: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  pointer-events: none;
}
.elevation__axis--high { top: 0; }
.elevation__axis--low { bottom: 0; }
.elevation__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid var(--ink);
  pointer-events: none;
}
.elevation__cursor[hidden] { display: none; }
.elevation__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.elevation__readout { color: var(--ink); font-weight: 600; }
.optimize-status[hidden] { display: none; }
.optimize-status { margin: 0; }
.optimize-status .error { color: var(--danger); font-weight: 600; }

/* A button that reads as an inline text link (e.g. "Undo"). */
button.link-btn {
  background: none;
  color: var(--route);
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}
button.link-btn:hover { background: none; color: var(--route-dark); }

/* Icon inside a button, sized/aligned to sit next to its label text. */
.btn-icon {
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
}

/* A quieter "ghost" treatment for bulk-destructive actions (wipes every
   stop/nearby-place at once) -- unlike the routine dashed-outline buttons
   above, this shouldn't compete for attention just to remove all stops. */
button.danger-link-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid transparent;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease, background 0.15s ease;
}
button.danger-link-btn:hover {
  background: rgba(164,67,58,0.08);
  text-decoration-color: var(--danger);
}

/* Reads as plain bold text until hovered/focused, but is a real number
   input -- click it to type an exact mileage instead of dragging the
   slider below. */
input.radius-control__value {
  width: 5.25em; /* 3em * 1.75 -- wide enough to show 3 digits without clipping */
  padding: 0.3rem 0.5rem 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--route);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: right;
  /* Hide the native up/down spinner -- just a plain typable number. */
  appearance: textfield;
  -moz-appearance: textfield;
}
input.radius-control__value::-webkit-outer-spin-button,
input.radius-control__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.radius-control__value:hover,
input.radius-control__value:focus {
  border-color: var(--border);
  background: var(--surface);
}

.radius-control__slider {
  display: block;
  width: 100%;
  accent-color: var(--route);
}

/* Category filter chips float over the top of the map, under the search.
   The outer element spans the free width (clear of the Tools box) so the
   container queries below can size the grid to it; the visible box inside
   shrinks to fit its chips. */
.category-filters {
  top: 72px;
  left: 16px;
  right: 80px;
  bottom: 16px; /* the box grows no further than this, then scrolls */
  container-type: inline-size;
  pointer-events: none; /* only the box itself catches clicks */
}
.category-filters__box {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0.4rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.category-filters__box:has(.category-filters__list[hidden]) { padding: 0.25rem; }

/* At most 4 chips per row. With room for it, that's a 4-column grid;
   narrower, the chips wrap, kept narrow enough that a fifth never fits
   on a row (wrapping would otherwise pack 5 at ~580px). */
.category-filters__list {
  display: flex;
  flex-wrap: wrap;
  max-width: 540px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* don't drag the page or map along */
  gap: var(--space-2);
}
@container (min-width: 740px) {
  .category-filters__list {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    max-width: none;
  }
}
.category-filters__list[hidden] { display: none; }

/* "Categories" header doubles as the collapse/expand toggle, like the
   Tools header (see setCategoriesOpen in app.js). */
.category-filters__toggle {
  flex: none; /* stays put while the chips below it scroll */
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.2rem 0.4rem;
  background: none;
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 6px;
}
.category-filters__toggle svg { width: 12px; height: 12px; transition: transform 0.15s; }
.category-filters__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }

.category-filter-btn,
.category-filters__clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
}

.category-filters__count {
  min-width: 1.3em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--route);
  color: var(--surface);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
}
.category-filters__count[hidden] { display: none; }

.category-filters__toggle:hover,
.category-filter-btn:hover,
.category-filters__clear:hover {
  background: var(--parchment);
}

.category-filter-btn.active {
  background: var(--route-soft);
  border-color: var(--route);
  color: var(--route);
}

.category-filters__clear {
  padding: 0.4rem 0.8rem;
  color: var(--route);
}
.category-filters__clear[hidden] { display: none; }

.category-filter-btn__icon {
  font-size: var(--text-base);
  line-height: 1;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted-strong);
  cursor: pointer;
}

.checkbox-label[hidden] { display: none; }
.checkbox-label input {
  margin: 0;
}

.place-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.region-group {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--parchment-dark);
  box-shadow: var(--shadow-card);
}

.region-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem 0.7rem;
  font-family: Georgia, "Iowan Old Style", serif;
  font-weight: 700;
  font-size: var(--text-md);
}
.region-group summary::-webkit-details-marker { display: none; }

.region-group summary::before {
  content: "▸";
  color: var(--route);
  margin-right: 0.4rem;
  font-size: var(--text-xs);
}
.region-group[open] summary::before {
  content: "▾";
}

.region-group__name {
  flex: 1;
}

.region-group__count {
  background: var(--surface-warm);
  color: var(--muted-strong);
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
}

.region-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 0.6rem 0.6rem;
}

.state-group {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-warm);
  box-shadow: var(--shadow-card);
}

.state-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  font-size: var(--text-sm);
}
.state-group summary::-webkit-details-marker { display: none; }

.state-group summary::before {
  content: "▸";
  color: var(--route);
  margin-right: 0.4rem;
  font-size: var(--text-xs);
}
.state-group[open] summary::before {
  content: "▾";
}

.state-group__name {
  flex: 1;
}

.state-group__count {
  background: var(--parchment-dark);
  color: var(--muted-strong);
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
}

/* Category composition bar under each group's name (see categoryBarHtml):
   the summary wraps so the bar takes a full-width line of its own. */
.region-group summary,
.state-group summary {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.category-bar {
  flex: 1 0 100%;
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
  background: var(--border);
}

.category-bar__seg {
  flex-basis: 0;
  min-width: 3px;
}

.region-group__icon,
.state-group__icon {
  margin-right: 0.4rem;
  font-family: system-ui, sans-serif;
}

/* ---------- Places toolbar: search, group by, in this view ---------- */

.places-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 0.75rem;
}

.places-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.places-search:focus-within {
  outline: 2px solid var(--route);
  outline-offset: 1px;
  border-color: var(--route);
}
.places-search svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--faint);
}
.places-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.55rem 0;
  font-size: var(--text-sm);
  color: var(--ink);
}
.places-search input:focus-visible { outline: none; }

.places-toolbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.places-group-by {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--muted-strong);
}
.places-group-by select {
  font-size: var(--text-xs);
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.places-in-view {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.places-in-view svg { width: 14px; height: 14px; }
.places-in-view:hover { border-color: var(--route); color: var(--route); }
.places-in-view[aria-pressed="true"] {
  background: var(--route);
  border-color: var(--route);
  color: #fff;
}

.places-summary {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.places-summary[hidden] { display: none; }

.state-group .place-list {
  padding: 0 0.7rem 0.7rem;
}

.place-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.place-card {
  position: relative; /* anchors its "Add to route" pop-up */
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
  background: var(--surface-warm);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Its pin is being hovered on the map (see highlightCardForPin). */
.place-card--hover {
  border-color: var(--route);
  box-shadow: 0 0 0 2px var(--route-soft), var(--shadow-card);
}

/* Briefly flashed when a place is jumped to from a double-click on its map marker. */
.place-card--highlight {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(217, 148, 47, 0.45);
}

.place-card__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.place-card__name {
  font-weight: 600;
}

.place-card__name--clickable {
  cursor: pointer;
}
.place-card__name--clickable:hover {
  text-decoration: underline;
}

.place-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* First in the card's action row: takes the row's bordered button look
   (and its parchment hover, instead of the global gold one that would
   hide the star), with the star in grey or, when favorited, gold. */
/* Favorite and Google Maps: icon buttons on the same raised surface as
   "Add to route" beside them. */
.place-card__actions .star-btn,
.place-card__actions .place-card__google-btn {
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  min-width: 30px;
  padding: 0 0.45rem;
  background: var(--surface);
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  line-height: 1;
}
.place-card__actions .star-btn:hover,
.place-card__actions .place-card__google-btn:hover { background: var(--parchment); }
.place-card__actions .star-btn {
  font-size: var(--text-md);
  color: var(--muted);
}
.place-card__actions .star-btn:hover,
.place-card__actions .star-btn--active { color: var(--gold-dark); }

.place-card__category {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--route);
  background: rgba(63, 110, 100, 0.12);
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.place-card__category-icon {
  font-size: 0.85em;
  line-height: 1;
}

.place-card__dist {
  font-size: var(--text-xs);
  color: var(--route);
  white-space: nowrap;
  margin-left: auto;
}

.place-card__location {
  font-size: var(--text-2xs);
  color: var(--faint);
  margin-top: 0.1rem;
}

.place-card__notes {
  font-size: var(--text-sm);
  color: var(--muted-strong);
  margin-top: 0.2rem;
}

.place-card__actions {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.place-card__actions button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 500;
}
.place-card__actions button:hover { background: var(--parchment-dark); }
.place-card__actions button.danger { color: var(--danger); }
.place-card__actions button.raised-btn {
  border: none;
  color: var(--ink);
  font-size: var(--text-xs);
  padding: 0.25rem 0.65rem;
}
.place-card__actions button.raised-btn svg { width: 15px; height: 15px; }
.place-card__actions button.raised-btn.danger { color: var(--danger); }
.place-card__actions button.raised-btn.danger:hover { background: rgba(164,67,58,0.08); }
.place-card__actions button.raised-btn[aria-expanded="true"] {
  background: var(--ink);
  color: var(--parchment);
}

/* "Add to route" pop-up, dropped just below the card's buttons. */
.add-route-pop {
  position: absolute;
  z-index: 5;
  top: calc(100% - 0.4rem);
  left: 0.7rem;
  right: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
/* Inside a map popup it sits in the popup's own flow instead. */
.leaflet-popup-content .add-route-pop {
  position: static;
  margin-top: 0.6rem;
  padding: 0.6rem 0 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.place-popup__add-stop[aria-expanded="true"] {
  background: var(--ink);
  color: var(--parchment);
}

.add-route-pop__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.add-route-pop .raised-btn {
  justify-content: center;
  font-size: var(--text-xs);
}
.add-route-pop__row .raised-btn { flex: 1; }
.add-route-pop__num {
  width: 4.5rem;
  flex: none;
  margin: 0;
  padding: 0.35rem 0.5rem;
}
.add-route-pop__hint { margin: -0.2rem 0 0; font-size: var(--text-2xs); }
.add-route-pop__status:empty { display: none; }
.add-route-pop__status { font-size: var(--text-xs); color: var(--danger); }
.add-route-pop__status:has(.spinner) { color: var(--muted); }
.place-card__google-btn svg { width: 1.1em; height: 1.1em; }

.place-card__edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.place-card__edit-name,
.place-card__edit-notes,
.place-card__edit-lat,
.place-card__edit-lon,
.place-card__edit-state {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xs);
}

.place-card__edit-notes {
  resize: vertical;
  min-height: 3rem;
}

/* ---------- Place pins, labels, route stops ---------- */

/* Leaflet positions this zero-size box at the place's exact point; the pin
   inside centers itself on it, so its size can follow the zoom tier. */
.place-pin-anchor {
  background: none;
  border: none;
}

.place-pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pin-color);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.45);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: width 0.15s ease, height 0.15s ease;
}

/* Hover sync with the Places list (see spotlightPins): the hovered card's
   pin (or a hovered group's pins) grows, everything else fades back. */
.place-pin--spotlight {
  transform: translate(-50%, -50%) scale(1.45);
  box-shadow: 0 0 0 3px var(--route), 0 2px 6px rgba(27, 36, 48, 0.55);
}
.map--spotlight .place-pin:not(.place-pin--spotlight) {
  opacity: 0.3;
}
.place-pin {
  transition: width 0.15s ease, height 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.place-pin--nearby {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--map-accent-ring), 0 1px 4px rgba(27, 36, 48, 0.5);
}

/* Zoomed out to a country: small plain dots, no emoji, so dense clusters
   stay legible. */
.zoom-far .place-pin {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
  font-size: 0;
}
.zoom-far .place-pin--nearby {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 2px var(--map-accent-ring), 0 1px 3px rgba(27, 36, 48, 0.5);
}

.zoom-mid .place-pin {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.zoom-near .place-pin {
  width: 28px;
  height: 28px;
  font-size: 15px;
}

/* Name labels: only once zoomed in, except places along the planned route,
   which get theirs a tier earlier. */
.leaflet-tooltip.place-label {
  display: none;
  padding: 1px 6px;
  background: var(--label-bg);
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(27, 36, 48, 0.25);
  color: var(--ink);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.leaflet-tooltip.place-label::before { display: none; }
.zoom-near .leaflet-tooltip.place-label,
.zoom-mid .leaflet-tooltip.place-label--nearby { display: block; }
.leaflet-tooltip.place-label--nearby { background: var(--map-accent-soft); }

/* Numbered route stops; the final stop is gold so the direction of travel
   reads at a glance. */
.route-stop {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--parchment);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(27, 36, 48, 0.5);
  font-size: var(--text-2xs);
  font-weight: 700;
}
.route-stop--end {
  background: var(--map-accent);
  color: var(--map-accent-text);
}
/* With days on, a stop where a day ends (an overnight) is squared off so it
   stands apart from the stops passed during the day. Its background is
   that day's color, set inline by drawRouteLine. */
.route-stop--day-end {
  border-radius: 6px;
  color: #fff;
}

/* Shaded "how far off route" band (drawRouteBuffer). CSS beats the SVG
   attributes Leaflet writes, which is what lets this follow the accent. */
path.route-buffer {
  stroke: var(--map-accent-dark);
  stroke-opacity: 0.6;
  fill: var(--map-accent);
  fill-opacity: 0.16;
}

#map[data-base-layer="contours"],
#map[data-base-layer="satellite"] {
  --map-accent: #4285f4;
  --map-accent-dark: #1a5fd0;
  --map-accent-ring: rgba(66, 133, 244, 0.9);
  --map-accent-soft: #e3edfd;
  --map-accent-text: #fff;
}
#map[data-base-layer="satellite"] path.route-buffer { fill-opacity: 0.22; }
[data-theme="dark"] #map[data-base-layer="contours"],
[data-theme="dark"] #map[data-base-layer="satellite"] { --map-accent-soft: #1d3150; }

/* Leaflet paints its popups and attribution white; follow the theme. */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
  background: var(--surface);
  color: var(--ink);
}
[data-theme="dark"] .leaflet-container { background: var(--parchment-dark); }
[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
[data-theme="dark"] .leaflet-control-attribution {
  background: var(--label-bg);
  color: var(--muted);
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--route); }

/* Map search result: a classic teardrop pin whose tip sits on the point. */
.search-pin-anchor {
  background: none;
  border: none;
}
.search-pin {
  position: absolute;
  left: -13px;
  top: -31px;
  width: 26px;
  height: 26px;
  background: #ea4335;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: -1px 1px 4px rgba(27, 36, 48, 0.45);
}
/* "Add a place" preview: the search pin in the app's gold. */
.place-preview-pin { background: var(--gold); cursor: grab; }

.search-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.search-popup__name {
  font-weight: 700;
  font-size: var(--text-sm);
}
.search-popup__context {
  margin-top: var(--space-0);
  color: var(--muted);
  font-size: var(--text-xs);
}
.search-popup__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.search-popup__actions button { flex: 1; }

/* Google + Edit row between the popup's name and notes, on the same
   raised surface as the sidebar place card's action buttons. */
.place-popup__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 0.5rem;
}
.place-popup__actions > *,
.place-popup__add-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.place-popup__actions > * {
  min-height: 30px;
  padding: 0.35rem 0.8rem;
}
.place-popup__actions > *:hover,
.place-popup__add-stop:hover { background: var(--parchment); }
.place-popup__google svg { width: 1.1em; height: 1.1em; }
.place-popup__notes { margin-top: 0.5rem; }

.place-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.place-popup__add-stop {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--text-sm);
}

.starting-point-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 36, 48, 0.45);
  padding: 1rem;
}

.starting-point-dialog {
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(27, 36, 48, 0.25);
  padding: 1.1rem 1.2rem;
  max-width: 320px;
}

.starting-point-dialog p {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: var(--text-sm);
}

.starting-point-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.starting-point-dialog__use-default {
  background: transparent;
  color: var(--route);
  border: 1px dashed var(--route);
}

.starting-point-dialog__use-default:hover {
  background: rgba(63, 110, 100, 0.08);
}

/* The trip's name row (#save-trip) and #route-summary on one raised
   surface, matching the .route-tools strip. Hidden while both are. */
.trip-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.trip-card:not(:has(#save-trip:not([hidden]), #route-summary.visible)) { display: none; }

/* Holds either a one-line status (spinner, error) or the .route-stats
   tiles. */
#route-summary {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 0.8rem;
  font-size: var(--text-sm);
}
#route-summary.visible { display: flex; }
#route-summary:has(.route-stats) { padding: 0.35rem; }
#save-trip:not([hidden]) + #route-summary.visible { border-top: 1px solid var(--border); }

.route-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
}
.route-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.5rem 0.15rem;
  text-align: center;
}
.route-stat__value { white-space: nowrap; }
.route-stat + .route-stat { border-left: 1px solid var(--border); }
.route-stat[hidden] { display: none; }
.route-stat[hidden] + .route-stat { border-left: none; }
.route-stat svg {
  width: 22px;
  height: 22px;
  margin-bottom: 0.15rem;
  color: var(--route);
}
.route-stat__value {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
}
.route-stat__label {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.15;
}

/* Divider between a distance and a time -- shared by the per-stop leg
   breakdown and the "My Trips" menu (see
   distanceTimeHTML in app.js). */
.icon-sep {
  color: var(--faint);
}

#route-summary .error {
  color: var(--danger);
  font-weight: 600;
}


#remove-all-nearby { margin-bottom: 0.5rem; }

.stop-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.3rem;
}

.stop-row__badge {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--parchment);
  font-size: var(--text-2xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Drag handle for reordering stops (see the pointerdown handler in
     app.js); touch-action keeps a touch drag from scrolling the panel. */
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.stops--dragging,
.stops--dragging .stop-row__badge { cursor: grabbing; }

.stop-row--dragging {
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
.stop-row--dragging .stop-row__badge {
  background: var(--route);
  box-shadow: 0 2px 6px rgba(27, 36, 48, 0.25);
  transform: scale(1.1);
}

/* Dragging a place along the route into the stops (see
   makeNearbyPlaceDraggable): the card dims, a pill with its name follows
   the pointer, and a line marks where it'll land. */
.place-card { touch-action: pan-y; }
.place-card--dragging { opacity: 0.45; }
#nearby-list .place-card { cursor: grab; }
.place-drag-ghost {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 260px;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-float), 0 6px 18px rgba(27, 36, 48, 0.25);
  font-size: var(--text-xs);
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}
.place-drag-ghost span { overflow: hidden; text-overflow: ellipsis; }
.place-drag-ghost svg { width: 15px; height: 15px; color: var(--route); flex: none; }
.stop-drop-indicator {
  position: relative;
  height: 4px;
  margin: 0.15rem 0 0.35rem calc(1.5rem + var(--space-2));
  background: var(--gold);
  border-radius: 2px;
}
.stop-drop-indicator span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.05rem 0.5rem;
  background: var(--gold);
  color: var(--on-accent);
  border-radius: 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.stop-row--just-added .stop-input {
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow 0.4s;
}

/* The "X mi · Y min" row a planned/loaded route drops in between two stop
   rows. Indented past the badge column and right-aligned so it sits under
   the address input above it (not the full row -- padding-right mirrors
   .stop-row__actions's width + gap; update both if those buttons change),
   with a thin line through the badge column continuing the vertical thread
   of stop badges above/below it. */
.stop-leg-info {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-left: calc(1.5rem + var(--space-2));
  padding-right: calc(3 * var(--stop-btn) + 2 * var(--space-1) + var(--space-2));
  margin: -0.05rem 0 0.25rem;
  font-size: var(--text-2xs);
  color: var(--ink);
  opacity: 0.6;
}

.stop-leg-info::before {
  content: "";
  position: absolute;
  left: calc(0.75rem - 0.5px);
  top: -0.1rem;
  bottom: -0.1rem;
  width: 1px;
  background: var(--border);
}

.stop-leg-info__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Grayscale (single-color, inherits the muted text color around it) car/
   clock/pin glyphs next to a distance, a time, or a place count. Spacing
   around them comes from `gap` on whichever flex container they sit in
   (.stop-leg-info__text, .trips-list__stat), not from
   a margin here, so it stays even on both sides of the icon. */
.icon-inline {
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
}

.stop-row .stop-input {
  margin-bottom: 0;
}

.stop-row .autocomplete-wrap {
  flex: 1;
  min-width: 0;
}

.autocomplete-wrap {
  position: relative;
}

.autocomplete-wrap input {
  width: 100%;
}

/* A small spinner reused wherever an async action takes a moment (route
   planning, place import, address autocomplete) so the wait reads as
   "working" instead of the UI having silently frozen. */
.spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid rgba(63, 110, 100, 0.25);
  border-top-color: var(--route);
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: spin 0.7s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

.autocomplete-spinner {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 1200;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(27, 36, 48, 0.15);
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-list li {
  padding: 0.45rem 0.7rem;
  font-size: var(--text-sm);
  cursor: pointer;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
  background: var(--parchment-dark);
}

.stop-row__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-1);
}

/* Small square icon buttons on the same raised surface as the route
   toolbar. --stop-btn also sizes the leg rows' indent (.stop-leg-info). */
.stop-row__actions button {
  display: grid;
  place-items: center;
  width: var(--stop-btn);
  height: var(--stop-btn);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}
.stop-row__actions button svg { width: 14px; height: 14px; }
.stop-row__actions button:hover:not(:disabled) { background: var(--parchment); }
.stop-row__actions button.danger { color: var(--danger); }
.stop-row__actions button:disabled {
  opacity: 0.35;
  box-shadow: none;
  cursor: not-allowed;
}
.stop-row__actions button:disabled:hover { background: var(--surface); }

/* ---- Day groupings (see "Day groupings" in app.js) ---- */

/* The moon "end the day here" button only shows while grouping by days,
   and keeps its space (hidden, not removed) on the first and last stops so
   the other buttons stay lined up. */
.stop-row__actions .stop-day-end { display: none; }
.stops--days .stop-row__actions .stop-day-end { display: grid; }
.stops--days .stop-row__actions .stop-day-end:disabled { visibility: hidden; }
.stop-row__actions .stop-day-end svg { width: 13px; height: 13px; }
.stops--days .stop-row--day-end .stop-day-end,
.stops--days .stop-row--day-end .stop-day-end:hover:not(:disabled) {
  background: var(--day-color);
  color: #fff;
}

/* Badges take their day's color (set per row by renderDayHeaders). */
.stops--days .stop-row__badge {
  background: var(--day-color, var(--ink));
  color: #fff;
}
.stops--days .stop-row--day-end .stop-row__badge { border-radius: 5px; }

/* One more button in .stop-row__actions, so the leg rows shift over by its
   width + gap to stay under the address inputs. */
.stops--days .stop-leg-info { padding-right: calc(4 * var(--stop-btn) + 3 * var(--space-1) + var(--space-2)); }

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 0.3rem;
  padding: 0.3rem var(--space-3);
  border-left: 4px solid var(--day-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--day-color) 14%, transparent);
  font-size: var(--text-sm);
}
.day-header:first-child { margin-top: 0; }
.day-header__title { font-weight: 700; }
.day-header__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-2xs);
  opacity: 0.75;
}

/* Import pane: the shared .stacked-form column with a small label over
   the source picker, the per-source how-to, category chips and status. */
.field-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: calc(-1 * var(--space-2));
}
.import-places__how {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--route);
  border-radius: 0 8px 8px 0;
  background: var(--route-soft);
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.import-places__how[hidden],
.category-picker[hidden] { display: none; }
.import-places__how code {
  font-size: var(--text-2xs);
  white-space: nowrap;
}

/* Same raised card as the route summary; hidden until there's news. */
.import-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
}
.import-status:empty { display: none; }
/* "Different format?" pointer to support, below the import form. */
.import-places__support {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
}
.import-places__support a { color: var(--route); font-weight: 600; overflow-wrap: anywhere; }

/* Phones: the rail becomes a bottom tab bar and the flyout a sheet that
   sits between the map and the tab bar. */
@media (max-width: 760px) {
  body {
    flex-direction: column;
    height: 100dvh;
  }

  .stage { order: 1; flex: 1; }

  .flyout {
    order: 2;
    width: auto;
    max-height: 55dvh;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(27, 36, 48, 0.15);
    transition: none;
  }
  .flyout.is-closed { display: none; }
  .flyout__close { transform: rotate(-90deg); }
  .flyout-resizer { display: none; }

  .rail {
    order: 3;
    width: auto;
    flex-direction: row;
    padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .rail__logo { display: none; }
  .rail__group {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .rail__btn { flex: 1; padding: 0.4rem 0; }
  /* My Account moves to the map's top-right corner (.map-account) and
     Sign out into its pop-out, so the tab bar only holds the panels. */
  .rail__account { display: none; }
  .map-account {
    position: absolute;
    z-index: 1000;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--tool-ink);
    border-radius: 12px;
    box-shadow: var(--shadow-float);
  }
  .map-account svg { width: 24px; height: 24px; }
  .map-account:hover,
  .map-account[aria-expanded="true"] { background: var(--ink); color: var(--parchment); }
  /* Tools and its popovers sit just below the My Account button. */
  .map-tools,
  .layers-pop { top: 68px; }
  .account-pop {
    left: 12px;
    right: 12px;
    width: auto;
    top: 68px;
    bottom: auto;
    max-height: calc(100dvh - 68px - 76px - env(safe-area-inset-bottom));
  }
  .account-pop__signout {
    display: block;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    text-align: center;
  }
  /* 16px so phones don't zoom in on focus. */
  .account-pop input[type="email"],
  .account-pop input[type="password"] { font-size: var(--text-base); }

  /* Same height as the My Account button beside it, so the gap down to
     Categories matches the one from My Account down to Tools. */
  .map-search { width: calc(100% - 88px); min-height: 44px; }

  .category-filters {
    top: 68px; /* level with Tools */
    right: 72px; /* clear of the Tools box */
  }

  .map-nav { bottom: 16px; }
  /* Pinch-to-zoom covers this on a touch screen. */
  .map-zoom { display: none; }

  /* The deviation card becomes a Tools popover, opened from its own tool
     button and shown beside the Tools box like the layers picker. */
  .map-tool--mobile-only { display: grid; }
  .map-deviation {
    display: none;
    z-index: 1002; /* above the search bar, like the layers picker */
    top: 68px;
    right: 76px;
    bottom: auto;
    left: auto;
    width: 210px;
  }
  .map-deviation.is-open { display: block; }
  .leaflet-control-scale { margin-bottom: 12px !important; }

  /* Phones redraw hundreds of pins/labels while panning and zooming, so
     skip the size animation between zoom tiers and swap blurred drop
     shadows (slow to paint) for a crisp 1px outline. */
  .place-pin {
    transition: none;
    box-shadow: 0 0 0 1px rgba(27, 36, 48, 0.4);
  }
  .place-pin--nearby { box-shadow: 0 0 0 3px var(--map-accent-ring); }
  .zoom-far .place-pin--nearby { box-shadow: 0 0 0 2px var(--map-accent-ring); }
  .leaflet-tooltip.place-label { box-shadow: 0 0 0 1px rgba(27, 36, 48, 0.2); }
  .route-stop { box-shadow: 0 0 0 1px rgba(27, 36, 48, 0.4); }

  /* Long tile credits would otherwise wrap over the scale bar. */
  .leaflet-control-attribution {
    max-width: calc(100vw - 80px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- Sign in / create account ---------- */

body.auth-page {
  display: grid;
  place-items: center;
  min-height: 100%;
  height: auto;
  padding: 16px;
  overflow: auto;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  padding: 1.5rem;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.auth-card__logo { display: block; margin: 0 auto var(--space-4); }
.auth-card h1 {
  margin: 0 0 1rem;
  font-size: var(--text-lg);
  text-align: center;
}
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}
/* 16px inputs so phones don't zoom in on focus. */
.auth-card input {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: normal;
}
.auth-card button[type="submit"] {
  margin-top: var(--space-2);
  padding: 0.7rem;
  font-size: var(--text-md);
}
.auth-card__errors {
  margin: 0 0 1rem;
  padding: var(--space-3) var(--space-3) var(--space-3) 1.5rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  font-size: var(--text-sm);
}
.auth-card__notice {
  margin: 0 0 1rem;
  padding: var(--space-3);
  background: var(--route-soft);
  border: 1px solid var(--route);
  border-radius: 4px;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.auth-card__resend {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
/* The newsletter opt-in: box and text on one row. Beats .auth-card label /
   input above, which stack labels and pad text fields. */
.auth-card label.auth-card__check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  font-weight: normal;
  line-height: 1.4;
  color: var(--muted-strong);
  cursor: pointer;
}
.auth-card .auth-card__check input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.1rem 0 0;
  padding: 0;
  accent-color: var(--route);
  cursor: pointer;
}
.auth-card__note {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: center;
}
.auth-card__switch {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.auth-card__switch a { color: var(--route); font-weight: 600; }

/* Admin signed in as another user: pinned across the top of the map (and the
   /admin pages) with a way back. See views/admin/_impersonation_banner.erb. */
.impersonation-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  background: var(--gold);
  color: #1b2430;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
  max-width: calc(100vw - 24px);
}
.impersonation-banner form { margin: 0; }
.impersonation-banner button { white-space: nowrap; }
body.admin .impersonation-banner { position: sticky; transform: none; left: auto; margin: 0 auto; width: max-content; }

/* Admin button in the rail, above My Account (admins only). */
a.rail__btn { text-decoration: none; }
.account-pop__admin { display: none; }
@media (max-width: 760px) {
  /* Phones: the rail's foot is hidden, so the Admin link lives in the
     My Account pop-out instead. */
  .account-pop__admin {
    display: block;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-weight: 600;
  }
}

/* /privacy and /terms (views/legal_layout.erb): the auth card, widened
   for reading. */
.auth-card.legal { max-width: 680px; font-size: var(--text-sm); line-height: 1.55; }
.legal h1 { text-align: left; }
.legal h2 { margin: 1.25rem 0 var(--space-2); font-size: var(--text-md); }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: var(--space-2); }
.legal__updated { margin-top: -0.5rem; color: var(--muted); font-size: var(--text-xs); }
.legal__footer { margin: 1.5rem 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); text-align: center; }

/* Owner and legal links at the foot of the My Account pop-out. */
.account-pop__legal { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-2xs); text-align: center; }

/* "Need help? Contact us" mailto above the legal line in My Account. */
.account-pop__help { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); text-align: center; }
.account-pop__help a { font-weight: 600; }