/* No CSS framework. The layout is a header, a map with a panel over it, and a
   footer; a framework would be a dependency to audit and a stylesheet to
   override. */
:root {
  --bar: 48px;
  --panel: 300px;
  --ink: #1a1a1a;
  --muted: #666;
  --paper: #fff;
  --rule: #d8d8d8;
  --accent: #1b5e9c;
  --r1: #1b5e9c;
  --r2: #b3541e;
  --r3: #2f7d44;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-rows: var(--bar) 1fr auto;
  height: 100dvh;
}

header { display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--rule); }
h1 { font-size: 17px; margin: 0; letter-spacing: 0.01em; }

main { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }

/* The start is the centre of the map, so the crosshair marks it. Drawn in CSS
   rather than as an image: two rules against a network request and an icon font.
   Its POSITION comes from app.js, which projects map.getCenter() -- the same
   point Enter places -- so the marker cannot drift from what it marks. */
#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  z-index: 2;
}

#crosshair::before, #crosshair::after {
  content: "";
  position: absolute;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
#crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; margin-left: -0.5px; }
#crosshair::after { top: 50%; left: 0; height: 1px; width: 100%; margin-top: -0.5px; }

#panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--panel);
  z-index: 3;
  padding: 16px;
  overflow-y: auto;
  background: var(--paper);
  border-left: 1px solid var(--rule);
}

label { display: block; font-weight: 600; margin-bottom: 6px; }
.row { display: flex; gap: 8px; align-items: stretch; }

#distance {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 6px;
}

.units { display: flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.unit { font: inherit; padding: 0 10px; border: 0; background: var(--paper); color: var(--muted); cursor: pointer; }
.unit.is-on { background: var(--ink); color: var(--paper); }

.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }

#go {
  font: inherit; font-weight: 600;
  width: 100%; margin-top: 14px; padding: 10px;
  border: 0; border-radius: 6px;
  background: var(--accent); color: var(--paper);
  cursor: pointer;
}
#go[disabled] { background: #c9ccd0; cursor: not-allowed; }
#go[aria-busy="true"] { background: var(--muted); }

/* Focus must be visible everywhere, not only where a mouse never goes. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#avoid-bar[hidden] { display: none; }
#avoid-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
#clear {
  font: inherit; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
}

/* Screen-reader-only: the summary that names what distinguishes a route.
   Present in the accessibility tree, absent from the visual layout, and never
   `display: none` -- that removes it from the tree as well. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

#status:empty { display: none; }
#status { margin: 12px 0 0; font-size: 13px; }

#results { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); }
#results li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--rule); position: relative; }
#results .badge {
  position: absolute; left: 0; top: 11px;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; line-height: 18px; text-align: center;
  color: var(--paper); font-weight: 700;
}
#results li:nth-child(1) .badge { background: var(--r1); }
#results li:nth-child(2) .badge { background: var(--r2); }
#results li:nth-child(3) .badge { background: var(--r3); }
#results .lead { font-weight: 600; }
#results .facts { color: var(--muted); font-size: 12.5px; }

/* Colour is never the sole differentiator (AC-30). Roughly 8% of men cannot
   reliably separate three coloured lines on a map, so each row's badge repeats
   its route's line pattern as a border style, and the lines themselves differ
   by dash pattern as well as hue. */
#results li:nth-child(1) .badge { background: var(--r1); }
#results li:nth-child(2) .badge { background: var(--r2); border: 2px dashed #fff; }
#results li:nth-child(3) .badge { background: var(--r3); border: 2px dotted #fff; }

/* Narrow screens: the panel becomes a bottom sheet, map above. One media query,
   no JS layout logic. */
@media (max-width: 720px) {
  #panel { top: auto; left: 0; width: auto; max-height: 52%; border-left: 0; border-top: 1px solid var(--rule); }
}

footer#attribution { padding: 6px 16px; font-size: 12px; border-top: 1px solid var(--rule); background: var(--paper); }
footer#attribution a { color: inherit; }
.maplibregl-ctrl-attrib { display: none; }