:root {
  --ground:#F7F8F5; --surface:#FFFFFF; --surface-2:#EDEFE9;
  --ink:#1E2419; --muted:#5F6759; --rule:#D2D8C9; --rule-strong:#B6BFAA;
  --moss:#52703A; --bistre:#935F33; --rust:#A03526; --steel:#35657F; --ochre:#7E6014;
  --g0:#8C9384; --g1:#2F6B23; --g2:#1F5C8B; --g3:#C2701A; --g4:#7B3E9D; --gx:#6E7566; --no:#C0271B;
  --on-moss:#FFFFFF;
  --shadow:0 1px 2px rgba(30,36,25,.07), 0 10px 28px -12px rgba(30,36,25,.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#14180F; --surface:#1C2117; --surface-2:#262C1F;
    --ink:#E7EBDF; --muted:#9AA48D; --rule:#333A2A; --rule-strong:#4A533D;
    --moss:#9CBE68; --bistre:#D0996A; --rust:#E0836F; --steel:#7FB0CC; --ochre:#D2B45C;
    --g0:#7C8474; --g1:#77BE5C; --g2:#63A8CE; --g3:#E0A048; --g4:#B37AD6; --gx:#5A6152; --no:#E8503F;
    --on-moss:#14180F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ground:#14180F; --surface:#1C2117; --surface-2:#262C1F;
  --ink:#E7EBDF; --muted:#9AA48D; --rule:#333A2A; --rule-strong:#4A533D;
  --moss:#9CBE68; --bistre:#D0996A; --rust:#E0836F; --steel:#7FB0CC; --ochre:#D2B45C;
  --g0:#7C8474; --g1:#77BE5C; --g2:#63A8CE; --g3:#E0A048; --g4:#B37AD6; --gx:#5A6152; --no:#E8503F;
  --on-moss:#14180F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
/* Phone browsers hide and show their toolbars as you scroll; 100% can be taller
   than what is visible, which puts the bottom strip behind the toolbar. dvh
   follows the visible height where supported. */
@supports (height:100dvh){ body{height:100dvh} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--moss); outline-offset:2px; border-radius:3px}

/* ---------- top bar ---------- */
.bar{
  display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap;
  padding:.55rem .9rem; background:var(--surface);
  border-bottom:1px solid var(--rule); z-index:5; flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:-.01em}
.mark{
  width:15px;height:15px;border-radius:2px;flex:0 0 auto;
  background:
    linear-gradient(135deg,transparent 46%,var(--bistre) 46% 54%,transparent 54%),
    linear-gradient(135deg,transparent 20%,var(--moss) 20% 28%,transparent 28%);
  border:1px solid var(--rule-strong);
}
.sports{display:flex;border:1px solid var(--rule-strong);border-radius:4px;overflow:hidden}
.sport{
  background:transparent;border:0;padding:.3rem .7rem;cursor:pointer;
  font-size:.83rem;color:var(--muted);white-space:nowrap;
  border-right:1px solid var(--rule);
}
.sport:last-child{border-right:0}
.sport:hover{background:var(--surface-2)}
.sport.is-on{background:var(--moss);color:var(--on-moss);font-weight:500}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:.7rem}
select{
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:4px;padding:.25rem .45rem;font-size:.83rem;
}
.status{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);
  min-width:1px;max-width:22rem;
}
.status.err{color:var(--rust)}

/* ---------- layout ---------- */
main{flex:1 1 auto;position:relative;min-height:160px}
#map{position:absolute;inset:0}

/* ---------- side panel ---------- */
.panel{
  position:absolute;top:.75rem;left:.75rem;width:16.5rem;max-height:calc(100% - 1.5rem);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:5px;
  box-shadow:var(--shadow); overflow-y:auto; z-index:2;
  display:flex;flex-direction:column;
}
.panel.is-collapsed .pane{display:none}
.panel.is-collapsed{width:auto}
.panel-toggle{
  position:sticky;top:0;align-self:flex-end;background:var(--surface);border:0;
  border-bottom:1px solid var(--rule);width:100%;text-align:right;
  padding:.35rem .6rem;font-size:.7rem;color:var(--muted);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
}
.pane{padding:.8rem .9rem;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.5rem}
.pane:last-child{border-bottom:0}
.pane h2{
  margin:0;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--muted);
}
.pane-note{margin:0;font-size:.76rem;color:var(--muted);line-height:1.4}

.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.legend li{display:flex;align-items:center;gap:.5rem;font-size:.8rem}
.legend .sw{width:22px;height:4px;border-radius:2px;flex:0 0 auto}
/* Mirrors the map exactly: recessive line with a red cross through it. */
.legend .sw-blocked{
  position:relative;height:2px;border-radius:2px;background:var(--no);opacity:.85;
}
.legend .sw-blocked::before,
.legend .sw-blocked::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;
  background:var(--no);border-radius:1px;
}
.legend .sw-blocked::before{transform:translate(-50%,-50%) rotate(45deg)}
.legend .sw-blocked::after{transform:translate(-50%,-50%) rotate(-45deg)}
.legend .sw-road{height:2px;background:var(--gx);opacity:.6}
.legend .sw-free{height:0;border-top:3px dotted var(--rust);border-radius:0}

.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.links a{
  display:flex;flex-direction:column;gap:.05rem;padding:.35rem .45rem;
  border-radius:3px;text-decoration:none;color:var(--ink);
}
.links a:hover{background:var(--surface-2)}
.links .ln{font-size:.83rem;font-weight:500;display:flex;align-items:center;gap:.35rem}
.links .lb{font-size:.72rem;color:var(--muted)}
.links .warn{
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ochre);border:1px solid var(--ochre);
  border-radius:2px;padding:0 .25em;
}

/* ---------- trail card ---------- */
.card{
  position:absolute;top:.75rem;right:.75rem;width:23rem;max-width:calc(100% - 1.5rem);
  max-height:calc(100% - 1.5rem);overflow-y:auto;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:5px;
  box-shadow:var(--shadow);z-index:3;
}
.card-close{
  position:absolute;top:.35rem;right:.5rem;background:transparent;border:0;
  font-size:1.3rem;line-height:1;color:var(--muted);cursor:pointer;padding:.15rem .3rem;
}
.card-close:hover{color:var(--ink)}
.card-in{padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.85rem}

.tname{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:-.01em;padding-right:1.4rem;line-height:1.25}
.tname .unnamed{color:var(--muted);font-weight:400;font-style:italic}

.verdict{display:flex;flex-direction:column;gap:.3rem;padding:.65rem .75rem;border-radius:4px;background:var(--surface-2);border-left:3px solid var(--vc,var(--g0))}
.verdict .vs{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vc,var(--muted))}
.verdict .vh{font-size:.93rem;font-weight:500;line-height:1.4}
.verdict ul{margin:.15rem 0 0;padding-left:1rem;display:flex;flex-direction:column;gap:.2rem}
.verdict li{font-size:.82rem;color:var(--muted)}

.sec-h{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.facts{display:flex;flex-direction:column;gap:.45rem;margin:0}
.fact{display:flex;flex-direction:column;gap:.05rem}
.fact .fs{font-size:.86rem;line-height:1.4}
.fact .ft{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--bistre)}

.missing{font-size:.78rem;color:var(--muted);background:var(--surface-2);border-radius:3px;padding:.45rem .6rem;line-height:1.4}

/* elevation */
.elev{display:flex;flex-direction:column;gap:.5rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.stat{display:flex;flex-direction:column;gap:.05rem}
.stat .sv{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .sl{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gradesay{font-size:.86rem;line-height:1.4}
.res{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.05em;
  color:var(--moss);border:1px solid var(--moss);border-radius:2px;
  padding:0 .3em;align-self:flex-start;
}
.chart{width:100%;height:110px;display:block;background:var(--surface-2);border-radius:3px}
.chart-hint{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.1em}

.spin{font-size:.82rem;color:var(--muted);font-family:"IBM Plex Mono",monospace}

.actions{display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--rule);padding-top:.7rem}
.actions a{font-size:.82rem;color:var(--steel);text-decoration:none;padding:.25rem .4rem;border-radius:3px}
.actions a:hover{background:var(--surface-2);text-decoration:underline}

@media (max-width:760px){
  /* On a phone the panel is a bottom sheet. It starts collapsed to a small tab
     (see app.js) so the map owns the screen; expanded, it holds the cross-map
     links, routing and legend. The scale control moves up out from under it. */
  .panel{top:auto;left:.6rem;right:.6rem;bottom:.6rem;width:auto;max-height:56%}
  .panel.is-collapsed{right:auto;width:auto}
  .panel-toggle{text-align:center;white-space:nowrap}
  .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:2.7rem}
  .projects{font-size:.62rem;gap:0 .4rem;padding:.22rem .4rem}
  .projects a::before{margin-right:.4rem}
  .card{width:auto;left:.6rem;right:.6rem;top:auto;bottom:.6rem;max-height:62%}
  .bar{gap:.5rem}
  .bar-right{width:100%;margin-left:0}
}

.maplibregl-ctrl-attrib{font-size:10px}

/* ---------- route planning ---------- */
.route-btn{
  background:var(--moss);color:var(--on-moss);border:0;border-radius:4px;
  padding:.4rem .7rem;font-size:.84rem;font-weight:500;cursor:pointer;width:100%;
}
.route-btn:hover{filter:brightness(1.08)}
.route-btn.is-on{background:var(--rust)}
body.routing .maplibregl-canvas{cursor:crosshair}

.rstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.rstats .stat .sv{font-size:1.05rem}
.rtrails{font-size:.83rem;line-height:1.5}
.rtrails b{font-weight:500}
.rbtns{display:flex;gap:.4rem;flex-wrap:wrap}
.rbtns button,.rbtns a{
  flex:1 1 auto;text-align:center;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:4px;padding:.35rem .5rem;
  font-size:.78rem;cursor:pointer;text-decoration:none;
}
.rbtns button:hover,.rbtns a:hover{background:var(--rule)}
.rbtns .primary{background:var(--moss);color:var(--on-moss);border-color:var(--moss)}
.rerr{font-size:.82rem;color:var(--rust);line-height:1.4}

/* ---------- search ---------- */
.searchbox{position:relative;flex:1 1 10rem;max-width:22rem;min-width:6rem}
#search{
  width:100%;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:4px;
  padding:.32rem .6rem;font-size:.86rem;
}
#search::placeholder{color:var(--muted)}
.results{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
  list-style:none;margin:0;padding:.2rem;
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:5px;box-shadow:var(--shadow);max-height:17rem;overflow-y:auto;
}
.results li{border-radius:3px}
.results button{
  display:flex;flex-direction:column;gap:.05rem;width:100%;text-align:left;
  background:transparent;border:0;padding:.4rem .5rem;cursor:pointer;border-radius:3px;
}
.results button:hover,.results button.is-active{background:var(--surface-2)}
.results .rn{font-size:.86rem;font-weight:500}
.results .rw{font-size:.73rem;color:var(--muted)}
.results .rk{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--bistre);
  letter-spacing:.04em;
}
.results .empty{padding:.5rem;font-size:.8rem;color:var(--muted)}

.units{
  background:var(--surface-2);border:1px solid var(--rule-strong);border-radius:4px;
  padding:.25rem .5rem;font-size:.78rem;cursor:pointer;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;
}
.units:hover{background:var(--rule)}

/* ---------- route shaping ---------- */
.rshape{display:flex;gap:.4rem}
.rshape button{
  flex:1 1 auto;background:var(--surface-2);border:1px solid var(--rule-strong);
  border-radius:4px;padding:.3rem .4rem;font-size:.78rem;cursor:pointer;
}
.rshape button:hover:not(:disabled){background:var(--rule)}
.rshape button:disabled{opacity:.45;cursor:default}

/* ---------- trip context ---------- */
.ctx{display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--rule);padding-top:.7rem}
.ctx-row{display:flex;gap:.5rem;align-items:baseline;font-size:.85rem}
.ctx-row .k{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);flex:0 0 4.6rem;
}
.ctx-row .v{flex:1 1 auto;line-height:1.4}
.ctx-warn{color:var(--rust);font-weight:500}
.ctx-ok{color:var(--moss)}
.surfbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:.15rem}
.surfbar span{display:block}
.credit{font-size:.68rem;line-height:1.45;padding-top:.2rem}
.credit a{color:var(--muted)}

/* waypoint markers */
.wp{
  width:15px;height:15px;border-radius:50%;background:var(--surface);
  border:2.5px solid var(--rust);cursor:grab;box-sizing:border-box;
}
.wp.is-start{border-color:var(--moss)}
.wp.is-free{border-style:dashed}
.snap{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);cursor:pointer}
.snap input{margin:0;accent-color:var(--moss)}
.wp:active{cursor:grabbing}

/* Below this width the bar cannot hold everything on one row; give search a full
   row of its own rather than letting every control wrap independently. */
@media (max-width:820px){
  .searchbox{order:5;flex:1 1 100%;max-width:none}
  .bar-right{margin-left:auto}
}
/* The strip must stay one line; below this width the label is what tips it over. */
@media (max-width:420px){
  .projects-k{display:none}
}

/* ---------- project strip ----------
   A signature connecting related projects, not site navigation: names and
   links only, sized like map attribution. */
.projects{
  flex:0 0 auto;display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;
  gap:0 .55rem;padding:.24rem .9rem;background:var(--surface);border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.04em;color:var(--muted);
}
.projects-k{text-transform:uppercase;letter-spacing:.09em}
.projects-k::after{content:":"}
/* The current site is the one that is not a link; the links are the ones
   that read as text. */
.projects-current{color:var(--muted)}
.projects a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:2px}
.projects a:hover{text-decoration-color:currentColor}
.projects a::before{content:"|";color:var(--rule-strong);margin-right:.55rem;text-decoration:none;display:inline-block}