:root {
  --bg:#1b1b1b; --fg:#f2f2f2; --ok:#2e9e4f; --warn:#c77b12; --bad:#c62828; --dim:#9e9e9e;
  /* Height of the route bar when one is up, set from go.js once its text has wrapped. */
  --route-h:0px;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font:14px/1.4 system-ui, sans-serif; }
#map { position:absolute; inset:0; }
/* What shows where no tile came, as with no network: dark like the imagery, so trails, pins and their
   dark casings and halos read the same with it or without. */
#map.leaflet-container { background:#2b2f2b; }

/* The only panel always on screen, so it stays one line. Bottom left, clear of the attribution. */
#hud {
  position:absolute; left:8px; bottom:26px; z-index:1000; display:flex; gap:8px; align-items:baseline;
  max-width:calc(100vw - 80px); padding:7px 11px; border:0; border-radius:10px; text-align:left;
  background:rgba(27,27,27,.92); color:var(--fg); font:inherit; font-variant-numeric:tabular-nums;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
#acc { font-size:19px; font-weight:700; }
#acc.good { color:var(--ok); } #acc.wait { color:var(--warn); }
#acc.bad { color:var(--bad); } #acc.off { color:var(--dim); }
#hud-label, #hud-status { font-size:12px; opacity:.8; }
/* There is something to read behind the readout, and nothing else says the hud is a button. */
#hud.help::after {
  content:'?'; align-self:center; display:grid; place-items:center; width:18px; height:18px;
  border:1.5px solid currentColor; border-radius:50%; font-size:12px; font-weight:700; opacity:.8;
}

/* What the hud's state means and how to fix it, above the hud so a tap on the hud still closes it. */
#gps-help {
  position:absolute; left:8px; bottom:calc(72px + var(--route-h)); z-index:1002;
  width:min(420px, calc(100vw - 16px)); max-height:60vh; overflow:auto;
  padding:12px 44px 12px 14px; border-radius:12px; font-size:13px;
  background:rgba(27,27,27,.97); color:var(--fg); box-shadow:0 2px 20px rgba(0,0,0,.6);
}
#gps-help[hidden] { display:none; }
#gps-help-x {
  position:absolute; top:2px; right:2px; width:44px; height:44px;
  background:none; border:0; color:var(--fg); font-size:22px;
}

/* Field controls, thumb height, stacked above the scale bar and attribution in the same corner. */
#ctl {
  position:absolute; right:8px; bottom:62px; z-index:1000;
  display:flex; flex-direction:column; gap:8px;
}
#ctl button {
  width:48px; height:48px; padding:0; border:1px solid #555; border-radius:24px;
  display:grid; place-items:center;
  background:rgba(27,27,27,.92); color:var(--fg); box-shadow:0 2px 12px rgba(0,0,0,.4);
}
#ctl button[hidden] { display:none; }
#ctl #offline { color:var(--warn); border-color:var(--warn); }
#ctl svg { width:24px; height:24px; display:block; }
#ctl button[aria-pressed="true"] { background:#0288d1; border-color:#0288d1; }

/* Diagnostics, opened by a burst of taps on the hud. */
#debug {
  position:absolute; left:8px; right:8px; bottom:8px; z-index:1002; max-height:72vh; overflow:auto;
  background:rgba(27,27,27,.97); color:var(--fg); border-radius:12px; padding:8px 12px 12px;
  font-variant-numeric:tabular-nums; box-shadow:0 2px 20px rgba(0,0,0,.6);
}
#debug header { display:flex; justify-content:space-between; align-items:center; font-size:13px; opacity:.7; }
#debug-x { width:44px; height:44px; margin:0 -12px 0 0; background:none; border:0; color:var(--fg); font-size:24px; }
#debug dl { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:4px 0 0; font-size:12px; }
#debug dt { opacity:.6; } #debug dd { margin:0; word-break:break-word; }
#debug .btns { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
#debug .btns button {
  flex:1 1 auto; min-height:44px; padding:0 10px; border:1px solid #555; border-radius:8px;
  background:#333; color:var(--fg); font-size:13px;
}
#debug .btns button[aria-pressed="true"] { background:#0288d1; border-color:#0288d1; }

/* The route bar owns the bottom edge while a route is up, and everything else in that corner - the
 * hud, the field controls, the scale bar and the attribution - is lifted clear by its height.
 * Diagnostics still wins: it is transient, and it is where the route is being debugged from. */
#route {
  position:absolute; left:0; right:0; bottom:0; z-index:1001;
  background:rgba(27,27,27,.97); color:var(--fg); padding:0 12px;
  font-variant-numeric:tabular-nums; box-shadow:0 -2px 20px rgba(0,0,0,.6);
}
#route header { display:flex; align-items:center; }
/* Folded, the bar is this one button: the whole of it is the tap target that unfolds the detail.
 * One line: the name gives way first, the distance is what the bar is glanced at for. */
#r-sum {
  position:relative; flex:1; min-width:0; min-height:44px; padding:0 22px 0 0;
  display:flex; align-items:center; gap:10px;
  border:0; background:none; color:inherit; font:inherit; text-align:left;
}
#r-title, #r-short { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#r-title { font-size:15px; font-weight:600; }
/* Right against the chevron, where the eye finds it in the same place for every route. */
#r-short { flex-shrink:0; max-width:65%; margin-left:auto; font-size:13px; opacity:.85; }
#r-short.far { color:var(--warn); font-weight:600; opacity:1; }
/* Points the way the bar will move: up to unfold, down to fold. Out of the flow, so it stays at the
 * end of the bar when the unfolded name and distance wrap onto two lines. */
#r-sum::after {
  content:''; position:absolute; right:2px; top:50%; width:8px; height:8px; margin-top:-2px;
  border:solid var(--fg); border-width:0 2px 2px 0; transform:rotate(-135deg); opacity:.7;
}
#r-sum[aria-expanded="true"]::after { margin-top:-7px; transform:rotate(45deg); }
/* Unfolded, nothing the line had to cut is left cut: one line while it fits, the distance on its own
 * line once it does not. */
#r-sum[aria-expanded="true"] { flex-wrap:wrap; column-gap:10px; row-gap:0; padding-top:4px; padding-bottom:4px; }
#r-sum[aria-expanded="true"] #r-title, #r-sum[aria-expanded="true"] #r-short { white-space:normal; }
#r-sum[aria-expanded="true"] #r-short { flex-shrink:1; max-width:none; }
#route-x { width:44px; height:44px; margin:0 -12px 0 0; background:none; border:0; color:var(--fg); font-size:24px; }
#r-more { padding-bottom:6px; }
#route p { margin:2px 0; }
/* One row per stretch walked, numbered like the posts at the junctions where the route turns. */
/* One grid for the whole list, so distances and times line up from row to row. */
#r-legs {
  list-style:none; margin:2px 0 4px; padding:0;
  display:grid; grid-template-columns:22px minmax(0, 1fr) auto auto; column-gap:8px;
}
#r-lead { font-size:12px; opacity:.6; }
#r-lead:empty, #r-legs:empty, #r-notes:empty { display:none; }
#r-legs li {
  grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center;
  min-height:26px; font-size:13px;
}
#r-legs .num {
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:#1b1b1b; font:700 11px/1 system-ui, sans-serif;
}
/* Centred on the digits themselves: the line box carries the font's ascender and descender space, which
 * sits the number low, and the panel's tabular figures pad a narrow 1 on its left. */
#r-legs .num, .trail-num span { text-box:trim-both cap alphabetic; font-variant-numeric:proportional-nums; }
/* Wrapped rather than cut: the long ones are transit links whose name is the only clue to the way. */
#r-legs .name { min-width:0; overflow-wrap:anywhere; }
#r-legs .pill {
  display:inline-block; margin-left:6px; padding:0 5px; border:1px solid; border-radius:8px;
  font-size:10px; line-height:14px; white-space:nowrap; vertical-align:1px;
}
#r-legs .pill.legUnmarked { color:var(--dim); }
#r-legs .pill.legSteep { color:var(--warn); }
#r-legs .len { text-align:right; white-space:nowrap; opacity:.75; }
#r-legs li.far { color:var(--warn); font-weight:600; }
#r-legs li.far .len { opacity:1; }
#r-notes { font-size:12px; opacity:.75; }
#route .btns { display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; }
#r-from { font-size:12px; opacity:.6; }
#route .btns button {
  min-height:40px; padding:0 12px; border:1px solid #555; border-radius:8px;
  background:#333; color:var(--fg); font-size:13px;
}
#route .btns button[aria-pressed="true"] { background:#0288d1; border-color:#0288d1; }
#route .btns button[disabled] { opacity:.4; }
#route .btns #r-gps {
  min-height:40px; padding:0 4px; border:0; background:none; color:var(--fg); text-decoration:underline;
  font-size:12px; opacity:.8;
}
#r-gps[hidden] { display:none; }

/* Embedded: one line, name then distance. No close button either: nothing on an embed brings the
 * page's route back once closed. */
body.embed #route { padding:6px 10px; }
body.embed #r-sum { min-height:0; pointer-events:none; }
body.embed #r-sum::after, body.embed #route-x, body.embed #r-more { display:none; }
body.embed #r-title { flex:1; font-size:13px; }

body.routing #hud { bottom:calc(26px + var(--route-h)); }
body.routing #ctl { bottom:calc(62px + var(--route-h)); }
body.routing .leaflet-bottom { bottom:var(--route-h); }

/* The simulated departure, deliberately nothing like the blue gps dot. */
.me {
  box-sizing:border-box; border-radius:50%;
  background:#d81b60; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.leaflet-container.placing { cursor:crosshair; }

/* Two bars, stacked in document order: red for a setup that cannot work, amber for a browser that
 * merely works badly. Both can be up at once, so neither owns the top edge. */
#top { position:absolute; top:0; left:0; right:0; z-index:1003; }
#banner, #notice {
  position:relative; display:none; color:#fff; padding:12px 48px 12px 14px; font-size:13px;
}
#banner { background:var(--bad); }
#notice { background:var(--warn); }
#banner.show, #notice.show { display:block; }
#top h2, #gps-help h2 { margin:0 0 4px; font-size:14px; }
#gps-help p { margin:4px 0 0; }
#top ol, #gps-help ol { margin:6px 0 0; padding-left:20px; }
#gps-help li + li { margin-top:4px; }
#top .hint, #gps-help .hint { margin:8px 0 0; font-size:12px; opacity:.85; }
#top button {
  position:absolute; width:44px; height:44px; top:2px; right:2px;
  background:none; border:0; color:#fff; font-size:22px;
}
#top .act, #gps-help .act {
  position:static; width:auto; height:auto; min-height:38px; margin:8px 8px 0 0; padding:0 12px;
  border:1px solid #fff; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; font-size:13px;
}

.popup h3 { margin:0 0 2px; font-size:15px; padding-right:28px; }
.popup .sub { opacity:.65; font-size:12px; }
.popup ul { margin:6px 0 0; padding-left:18px; }
.popup .topo { margin:8px 0 0; }
/* Reads as a link beside the topo one; a button because it acts rather than goes anywhere. */
.popup .link {
  padding:0; border:0; background:none; color:#0078a8; font:inherit; text-decoration:underline; cursor:pointer;
}
.popup .act {
  display:block; width:100%; margin-top:8px; min-height:36px; border:1px solid #bbb;
  border-radius:8px; background:#f4f4f4; font-size:13px;
}
/* A ring of hard shadows rather than a glow, so trails behind a name stop at its outline instead of showing
   through the letters; not -webkit-text-stroke, which Firefox on Android paints over the letters. */
.sector-label, .boulder-label {
  text-shadow:-1.5px 0 #000, 1.5px 0 #000, 0 -1.5px #000, 0 1.5px #000,
    -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 3px rgba(0,0,0,.6);
}
.sector-label {
  background:none; border:0; box-shadow:none; color:#fff; font-weight:600; font-size:13px; white-space:nowrap;
  padding:0 4px;
}
.sector-label::before { display:none; }
/* visibility, not display: Leaflet measures a name to centre it, and repositions it during a zoom,
 * before map.js shows it again - a display:none name measures zero wide and lands half its width off. */
.detail .sector-label { visibility:hidden; }
/* Embedded, map.js says per sector whether its label is what it shows, whatever the zoom. */
body.embed .sector-label { visibility:hidden; }
body.embed .sector-label.named { visibility:visible; }
/* A name placeSectorNames found no room for, even where it is the one showing. */
body.embed .sector-label.named.off { visibility:hidden; }
/* margin:0 drops Leaflet's own 6px per direction, and line-height:1 the 1.5 it inherits from the map, so the
   box placeNames collides with is the drawn one. */
.boulder-label {
  margin:0; background:none; border:0; box-shadow:none; padding:0; color:#fff; font-size:11px; font-weight:600;
  line-height:1; white-space:nowrap;
}
.boulder-label::before { display:none; }
.leaflet-tooltip.off { visibility:hidden; }

/* Set per marker by map.js, which is why it cannot be a layer style: a pin is hidden by zoom and
 * rating. display:none, not opacity:0, so a hidden pin is not a tap target either. */
.leaflet-pane path.off { display:none; }
.popup .picks { list-style:none; margin:6px 0 0; padding:0; }
.popup .pick {
  display:block; width:100%; margin-top:6px; min-height:36px; padding:4px 8px; border:1px solid #bbb;
  border-radius:8px; background:#f4f4f4; font-size:13px; text-align:left; cursor:pointer;
}

/* Embedded in a topo page: no GPS, so none of its readouts or field controls. */
#full { display:none; }
body.embed #hud, body.embed #ctl, body.embed #debug { display:none; }
body.embed #full {
  display:block; position:absolute; left:8px; top:8px; z-index:1000; padding:7px 11px; border-radius:10px;
  background:rgba(27,27,27,.92); color:var(--fg); font-size:13px; text-decoration:none;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.leaflet-popup-content { min-width:170px; }
.user-pin svg { width:100%; height:100%; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.leaflet-container a.leaflet-popup-close-button {
  width:44px; height:44px; padding:0; font:300 26px/44px Tahoma, sans-serif;
}
.gps-me svg { width:100%; height:100%; display:block; overflow:visible; }
.parking svg, .dest-flag svg { width:100%; height:100%; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* Junction-post numbers. Plain, so they read without pulling the eye off the route. */
.trail-num span {
  display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  color:#1b1b1b; font:700 11px/1 system-ui, sans-serif;
}