:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #6e6e6e;
  --rule: #d0d0d0;
  --river: #000000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  user-select: none;              /* an interface, not a document: nothing is text-selectable */
  -webkit-user-select: none;
  -webkit-touch-callout: none;    /* no long-press callout on iOS */
  -webkit-tap-highlight-color: transparent;
  background: var(--paper);
  color: var(--ink);
  font: 12px/1.3 var(--font);
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* lets every row shrink with the window (map canvases otherwise hold it open) */
  grid-template-rows: clamp(120px, 22vh, 260px) 40px minmax(0, 1fr);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.map { position: relative; min-width: 0; overflow: hidden; }

#overview { touch-action: none; }
#overview .maplibregl-canvas-container { cursor: crosshair; }
#ov-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  margin: -24px 0 0 8px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 11px;
}

#ruler {
  border-bottom: 1px solid var(--rule);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
#ruler svg { display: block; }
#ruler line.base { stroke: var(--ink); stroke-width: 1; }
#ruler line.tick { stroke: var(--ink); stroke-width: 1; }
#ruler line.area { stroke: var(--ink); stroke-width: 1; }
#ruler text { font: 9px var(--font); fill: var(--ink-soft); text-anchor: middle; font-variant-numeric: tabular-nums; }
#ruler text.end { text-anchor: end; }
#ruler text.area { font-weight: 700; fill: var(--ink); letter-spacing: 0.08em; }
#ruler-cursor line { stroke: var(--river); stroke-width: 2; }
#ruler-cursor path { fill: var(--river); }
#ruler #ruler-km { font-size: 10px; font-weight: 700; fill: var(--ink); }

/* Satellite / Map: small text floating on the detail map. */
.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: 3px 7px;
  background: var(--paper);
  font-size: 11px;
}
.toggle button { color: var(--ink-soft); }
.toggle button.on { color: var(--ink); }

main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: 0;
}

#index {
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  padding: 10px 0;
}
#index section { padding: 4px 16px 6px; border-left: 2px solid transparent; }
#index section.near { border-left-color: var(--river); }
#index button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 2px 0;
}
#index button.area { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#index button { gap: 8px; }
#index .km { white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 400; }
#index .km::before { content: "km "; }
#index ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; }
#index li button.on { color: var(--river); }
#index em { font-style: normal; color: var(--ink-soft); font-size: 10px; }

#error {
  position: fixed;
  left: 24px;
  bottom: 24px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 520px;
}


:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }

/* Phone / narrow window: index moves under the map, gutters shrink to 16px. */
@media (max-width: 760px) {
  body { grid-template-rows: 170px 40px minmax(0, 1fr); }
  #overview .maplibregl-canvas-container { cursor: grab; }
  main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 120px; }
  #index { border-left: 0; border-top: 1px solid var(--rule); }
}