/* The list + map split of Routes, Trails and Custom locations (#188,
   design C section 3.2; js/views/split.js). From 700 px a compact list on
   the left third beside one map; below, a List/Map switch shows one. */

#view-routes, #view-trails, #view-locations { padding: 0; }
.split {
  --pane-w: clamp(360px, 33.3%, 480px);
  display: grid; grid-template-columns: var(--pane-w) minmax(0, 1fr);
  height: calc(100dvh - var(--topbar-h));
}
.split-pane {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface); border-right: 1px solid var(--line);
}
.split-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 18px 16px 10px 20px; }
.split-title { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.split-title h1 { margin: 0; font-size: var(--fs-28); letter-spacing: -0.03em; }
.split-title .info-btn { margin-block: -10px; }
.split-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.split-sync.is-busy .ic { animation: split-spin 1s linear infinite; }
@keyframes split-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .split-sync.is-busy .ic { animation: none; } }

.split-tools { display: flex; gap: 8px; padding: 0 16px 10px 20px; flex-wrap: wrap; }
.split-tools[hidden] { display: none; }
.split-tools label { margin: 0; }
.split-tools .grow { flex: 1 1 160px; min-width: 0; }
.split-tools .shortcut { flex: 1 1 100%; }
.split-search { position: relative; display: block; }
.split-search > .ic { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.split-tools input[type='search'], .split-tools select { margin: 0; min-height: var(--tap); border-radius: var(--r-2); }
.split-search input[type='search'] { padding-left: 38px; }
.split-sort { flex: 0 1 170px; min-width: 130px; }

.split-toggle { display: none; margin: 0 16px 8px; }
.split-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 8px 24px 12px;
}
.split-body .count-line {
  display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap;
  margin: 2px 8px 6px; font-size: var(--fs-12); color: var(--text-3);
}
.sync-note.is-error { color: var(--danger); }
.split-body .no-match { margin: 12px 8px; color: var(--text-2); }
.split-body > .btn { margin: 4px 8px; }
.split-body .empty { margin: 8px; padding: var(--s-6) var(--s-4); }
.split-body .status-line { margin: 4px 8px 10px; font-size: var(--fs-13); color: var(--text-2); }
.split-body .status-line.is-error { color: var(--danger); }

.split-map { position: relative; min-width: 0; min-height: 0; background: var(--surface-2); }
.split-map > .split-canvas { position: absolute; inset: 0; }
/* The rail (css/map.css) sits top right; Fit all is its last button. */
.split-rail { top: 10px; right: 10px; }

/* ---------- compact rows ---------- */
.srows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.srow { position: relative; display: flex; align-items: center; gap: 4px; border-radius: var(--r-2); padding-right: 4px; }
.srow::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: transparent;
}
.srow.is-hover { background: var(--surface-2); }
@media (hover: hover) { .srow:hover { background: var(--surface-2); } }
.srow.is-sel { background: var(--accent-soft); }
.srow.is-sel::before { background: var(--accent); }
.srow-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 6px 4px 6px 10px; border: 0; background: transparent;
  color: var(--text); text-align: start; font: inherit; border-radius: var(--r-2); cursor: pointer;
}
.srow-thumb { flex: none; width: 48px; height: 48px; border-radius: var(--r-1); background: var(--surface-2); display: grid; }
.srow-thumb svg { width: 100%; height: 100%; }
.srow.is-sel .srow-thumb { background: var(--surface); }
.srow-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.srow-name { font: 650 var(--fs-15, 15px)/1.25 var(--font-display); overflow-wrap: break-word; }
.srow-meta { font-size: var(--fs-13); color: var(--text-2); }
.srow-num { flex: none; display: grid; justify-items: end; gap: 2px; font-size: var(--fs-13); color: var(--text-2); }
.srow-num b { font: 700 var(--fs-15, 15px)/1.2 var(--font-display); color: var(--text); }
.srow-actions { flex: none; display: flex; align-items: center; gap: 2px; }

/* ---------- the ⋯ menu ---------- */
.split-menu-wrap { position: relative; }
.split-menu {
  position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); min-width: 190px;
  display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); box-shadow: var(--shadow-float);
}
.split-menu[hidden] { display: none; }
.split-menu-item {
  min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text); font: 600 var(--fs-14)/1.2 var(--font-display);
  text-align: start; cursor: pointer;
}
.split-menu-item:hover, .split-menu-item:focus-visible { background: var(--surface-2); }
.split-menu-item.is-danger { color: var(--danger); }
/* A menu in the peek opens upwards: the peek sits on the map's bottom edge. */
.peek .split-menu { top: auto; bottom: calc(100% + 4px); }

/* ---------- trails ---------- */
.col-head {
  display: flex; align-items: center; gap: 2px; padding: 0 4px 0 10px;
  font: 650 11px/1.2 var(--font-display); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
}
.col-head > .grow { flex: 1 1 auto; }
.col-head > span:not(.grow), .col-pad { width: var(--tap); flex: none; text-align: center; }
.trail-group {
  display: flex; align-items: center; gap: 2px; padding: 8px 4px 2px 10px;
  border-top: 1px solid var(--line);
}
.trail-group:first-child { border-top: 0; }
.trail-group-name { flex: 1 1 auto; min-width: 0; font: 650 var(--fs-14)/1.2 var(--font-display); color: var(--text-2); }
/* The label is the 44 px target; the 28 px swatch is drawn inside it. */
.trail-sw { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; margin: 0; cursor: pointer; }
.trail-sw::before {
  content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 1px var(--line-strong);
}
.trail-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tog {
  position: relative; width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--text-3); cursor: pointer;
}
.tog[aria-checked='true'] { color: var(--accent-ink); }
.tog[aria-checked='false'] .ic { opacity: .55; }
.tog[aria-checked='mixed'] { color: var(--text-2); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); }
.tog:hover { background: var(--surface-2); }
.tog:disabled { cursor: not-allowed; opacity: .5; }
.trail-progress { width: 100%; margin: 0 0 8px; }

/* ---------- custom locations ---------- */
.loc-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--surface);
}
.loc-dot svg { width: 18px; height: 18px; }
.loc-results { list-style: none; margin: 4px 0 0; padding: 4px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-float); }
.loc-results[hidden] { display: none; }
.loc-results li { min-height: var(--tap); display: flex; align-items: center; padding: 0 10px; border-radius: var(--r-1); cursor: pointer; }
.loc-results li[aria-selected='true'], .loc-results li:hover { background: var(--surface-2); }
.loc-search { position: relative; }
.loc-search .loc-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; }
.loc-hint { margin: 0; font-size: var(--fs-13); color: var(--text-2); flex: 1 1 100%; }

/* ---------- peek ---------- */
.peek {
  position: absolute; z-index: 4; left: 16px; bottom: 28px; width: min(420px, calc(100% - 88px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-float); padding: 12px 14px 14px 18px;
}
.peek[hidden] { display: none; }
.peek-card { display: grid; gap: 10px; }
.peek-head { display: flex; align-items: flex-start; gap: 10px; }
.peek-head .grow { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.peek-title { margin: 0; font: 750 var(--fs-18)/1.2 var(--font-display); overflow-wrap: break-word; }
.peek-sub { margin: 2px 0 0; font-size: var(--fs-13); color: var(--text-2); }
.peek-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
  padding: 10px 0; border-block: 2px dashed var(--line);
}
.peek-stats dt { font-size: 12px; color: var(--text-2); }
.peek-stats dd { margin: 0; font: 700 var(--fs-18)/1.2 var(--font-display); }
.peek-sw { flex: none; width: 28px; height: 8px; margin-top: 14px; border-radius: 4px; background: var(--c); }
.peek .loc-dot { margin-top: 4px; }
.cta-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- placing a custom location ---------- */
.split-crosshair {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 44px; height: 44px;
  translate: -50% -50%; pointer-events: none; color: var(--text);
}
.split-crosshair::before, .split-crosshair::after {
  content: ''; position: absolute; background: currentColor; box-shadow: 0 0 0 1.5px var(--surface);
}
.split-crosshair::before { left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; }
.split-crosshair::after { top: 50%; left: 0; right: 0; height: 2px; translate: 0 -50%; }
.place-bar {
  position: absolute; z-index: 5; left: 50%; translate: -50% 0; top: 16px; width: min(440px, calc(100% - 96px));
  display: grid; gap: 8px; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-float);
}
.place-bar[hidden], .split-crosshair[hidden] { display: none; }
.place-bar p { margin: 0; overflow-wrap: anywhere; }
.place-bar .cta-row { justify-content: flex-end; }

/* ---------- phones: List / Map ---------- */
@media (max-width: 699px) {
  .split { display: block; position: relative; }
  .split-pane { height: 100%; border-right: 0; }
  .split-toggle { display: flex; width: auto; margin: 0 12px 8px 16px; }
  .split-map { display: none; }
  .split[data-show='map'] { display: flex; flex-direction: column; }
  .split[data-show='map'] .split-pane { height: auto; flex: none; }
  .split[data-show='map'] .split-body, .split[data-show='map'] .split-tools { display: none; }
  .split[data-show='map'] .split-map { display: block; flex: 1 1 auto; }
  /* Map mode (C round 2, M2): the map gets the screen. The page head is
     visually hidden (the top bar and the switch still say where you are),
     the peek drops to title, numbers and one button (the rest is in ⋯),
     zoom +/- go (pinch does it; Layers and full screen stay) and the
     credit moves top-left. */
  .split[data-show='map'] .split-head {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0;
  }
  .split[data-show='map'] .split-toggle { margin-top: 8px; }
  .split-head { padding: 14px 12px 8px 16px; }
  .split-tools { padding: 0 12px 10px 16px; }
  .split-body { padding: 0 4px 24px 8px; }
  .split-map .map-rail-zoom { display: none; }
  .split-rail { top: 12px; right: 12px; }
  .split-map .maplibregl-ctrl-bottom-right { top: 0; bottom: auto; left: 0; right: auto; }
  .split-map .maplibregl-ctrl-attrib { font-size: 10px; line-height: 1.3; max-width: calc(100vw - 72px); }
  .peek { left: 12px; right: 12px; bottom: 16px; width: auto; padding-block: 8px 10px; }
  .peek-card { gap: 8px; }
  .peek .peek-meta { display: none; }
  .peek-head .grow { padding-top: 10px; }
  .peek-stats { padding: 6px 0; }
  .peek .cta-row .btn-primary { flex: 1 1 auto; justify-content: center; }
  .place-bar { top: 12px; left: 12px; right: 72px; translate: none; width: auto; }
}
@media (max-width: 400px) {
  .split-title h1 { font-size: var(--fs-22); }
  .srow-thumb { width: 40px; height: 40px; }
  .srow-main { gap: 10px; }
  .srow-name { font-size: var(--fs-14); }
  .peek { left: 8px; right: 8px; padding-inline: 12px; }
  .peek-head { gap: 6px; }
  .peek-title { font-size: var(--fs-16); }
  .peek-stats dd { font-size: var(--fs-16); }
}