/* Groupride Navigator — styles. Originally the Bend MTB navigation POC. */
:root {
  --accent: #ff2d78;              /* route color */
  --arrow: #ffffff;               /* arrow: white on dark map, JS flips */
  --arrow-oc: rgba(0,0,0,.85);    /* arrow outline: opposite of arrow */
  --chrome: rgba(10,12,16,.72);
  --gr-green: #4ade80;
  --gr-trail: #84cc16;
}
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#0a0c10;
             font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
             -webkit-user-select:none; user-select:none; touch-action:manipulation; }

/* Oversized square map, centered on viewport center, rotated via CSS */
/* sized and centered by layoutMap() in JS — all from window.inner{Width,Height},
   because in iOS standalone mode CSS % / vmax disagree with innerHeight */
#map {
  position: fixed;
  will-change: transform;
  background:#0a0c10;
}

/* current-position marker: red nav arrow (map rotates, so it always points up) */
#posdot {
  position: fixed; left:50%; top:50%;
  width:11mm; height:11mm; margin:-5.5mm 0 0 -5.5mm;
  display:none; z-index: 500; pointer-events:none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
#posdot svg { width:100%; height:100%; }

/* ---- Bending arrow ---- */
#arrowbox {
  position: fixed; left:50%; top: max(2vh, env(safe-area-inset-top));
  width: min(78vmin, 510px); height: min(84vmin, 555px);
  margin-left: calc(min(78vmin, 510px) / -2);
  z-index: 600; pointer-events:none; display:none;
}
#arrowbox svg { width:100%; height:100%; overflow:visible;
                filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.hud {
  position: fixed; top: max(8px, env(safe-area-inset-top));
  font-size: 11mm; font-weight: 800; color: var(--arrow);
  text-shadow: 0 0 6px var(--arrow-oc), 0 0 2px var(--arrow-oc);
  z-index: 650; pointer-events: none; display: none;
}
#huddist  { left:  max(10px, env(safe-area-inset-left)); }
#hudclock { right: max(10px, env(safe-area-inset-right)); }
#steep {
  position:fixed; left:max(10px, env(safe-area-inset-left));
  top:calc(max(8px, env(safe-area-inset-top)) + 13mm);
  font-size:11mm; font-weight:800; color:var(--arrow); z-index:650;
  text-shadow: 0 0 6px var(--arrow-oc), 0 0 2px var(--arrow-oc);
  pointer-events:none;
}
#scalelabel {
  position:fixed; right:max(10px, env(safe-area-inset-right));
  bottom:calc(max(10px, env(safe-area-inset-bottom)) + 74px);
  color:#000; font-size:6mm; font-weight:800; z-index:650;
  line-height:1.35; white-space:nowrap; text-align:right; pointer-events:none;
  text-shadow: 0 0 5px rgba(255,255,255,.75);
}
#scalelabel small { display:block; font-size:4.5mm; font-weight:600; }

/* ---- UI chrome ---- */
.btn {
  background: var(--chrome); color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:16px; backdrop-filter: blur(6px); cursor:pointer;
  text-decoration:none;
}
#startui {
  position: fixed; inset:0; z-index:700; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:14px;
  /* clear the zoom button row at the bottom */
  padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 92px);
  pointer-events:none;
}
#startui > * { pointer-events:auto; }

/* ---- Brand / start screen header ---- */
#brand {
  position: fixed; top:0; left:0; right:0; min-height:25vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding: calc(env(safe-area-inset-top) + 14px) 24px 16px;
  box-sizing:border-box;
  background: rgba(8,10,14,.68); backdrop-filter: blur(8px);
  text-align:center; color:#fff; z-index:700; pointer-events:none;
}
#brand a, #brand .acct { pointer-events:auto; }
#brand .wordmark {
  font-weight:700; font-size:22px; letter-spacing:-0.5px; text-decoration:none; line-height:1;
}
#brand .wordmark .group {
  background: linear-gradient(90deg, #65a30d, #84cc16, #a3e635);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#brand .wordmark .ride {
  background: linear-gradient(90deg, #d4a574, #b8860b, #8b6914);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#brand h1 {
  font-weight:800; font-size:44px; letter-spacing:.22em; line-height:1; margin:0;
  margin-right:-.22em;   /* optically recenter the letterspaced word */
}
/* visually hidden, read by search engines and screen readers */
#brand .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#brand small {
  display:block; font-weight:400; font-size:15px; line-height:1.5;
  letter-spacing:.04em; opacity:.85; max-width:36ch;
}
#brand small.acct { font-size:13px; opacity:.8; }
#brand small a { color:var(--gr-green); text-decoration:none; font-weight:600; }
#loadbtn, #startbtn {
  font-size:20px; font-weight:700; padding:18px 0; text-align:center;
  width:274px; box-sizing:border-box;   /* = zoom row: 64 + 18 + 110 + 18 + 64 */
}
#startbtn { display:none; background: rgba(21,138,74,.85); border-color:#2bff88; }
#savebtn, #simbtn { display:none; width:274px; box-sizing:border-box; font-size:15px;
                    font-weight:600; padding:10px 0; }
#savebtn { border-color: var(--gr-green); color: var(--gr-green); }
#savebtn:disabled { opacity:.6; cursor:default; }
#simbtn { opacity:.8; }   /* temporary dev button */
#gpxfile { display:none; }
#routeinfo { color:#cfd6df; font-size:14px; text-shadow:0 1px 4px #000; text-align:center; max-width:86vw; }

/* ---- Zoom buttons ---- */
#zoomui {
  position: fixed; right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display:flex; flex-direction:row; gap:14px; z-index:650;
}
#menubtn {
  position: fixed; left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  width:64px; height:64px; font-size:28px; color:#fff; z-index:650;
  display:flex; align-items:center; justify-content:center;
}
#zoomui .btn {
  width:64px; height:64px; font-size:36px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Settings screen ---- */
#settings {
  position:fixed; inset:0; z-index:900; overflow-y:auto; overflow-x:hidden;
  background:rgba(8,10,14,.96); color:#fff;
  padding:20px 22px calc(40px + env(safe-area-inset-bottom));
  font-size:17px;
}
#settings, #settings * { box-sizing:border-box; }  /* width:100% + padding must not overflow */
#settings h2 { margin:4px 0 18px; letter-spacing:.1em; }
#settings section { margin-bottom:24px; }
#settings h3 { margin:0 0 8px; font-size:14px; opacity:.7;
               text-transform:uppercase; letter-spacing:.07em; }
#settings label.row { display:flex; align-items:center; gap:12px; padding:9px 0; }
#settings input[type=radio], #settings input[type=checkbox] { width:22px; height:22px; }
#settings .note { font-size:13px; opacity:.65; margin-top:8px; line-height:1.45; }
#settings .note a { color:var(--gr-green); text-decoration:none; font-weight:600; }
#settings select {
  width:100%; padding:12px 14px; font-size:17px; color:#fff;
  background:var(--chrome); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; appearance:auto;
}
#settings select option { color:#000; }
#settings .btn { padding:10px 16px; font-size:15px; margin:4px 8px 4px 0; display:inline-block; }
#settings .links { display:flex; flex-wrap:wrap; }
#settings .legend { display:flex; align-items:center; gap:12px; padding:7px 0;
                    font-size:15px; line-height:1.35; }
/* legend swatch: the line drawn on a light "map" pill so black/dashes show */
#settings .sw { flex:0 0 56px; height:20px; border-radius:10px; background:#cdd9bd;
                display:flex; align-items:center; padding:0 6px; box-sizing:border-box; }
#settings .sw i { display:block; width:100%; height:6px; border-radius:3px; }
/* saved routes list */
#myroutes .rt {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  width:100%; text-align:left; margin:4px 0; padding:11px 14px;
}
#myroutes .rt .nm { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#myroutes .rt .km { flex:0 0 auto; font-size:13px; opacity:.7; }
#myroutes .rt.current { border-color:var(--gr-green); }
#closesettings { display:block; width:100%; margin-top:6px; padding:14px !important;
                 font-size:18px !important;
                 position:sticky; bottom:calc(6px + env(safe-area-inset-bottom));
                 background:rgba(21,138,74,.95); border-color:#2bff88;
                 box-shadow:0 -6px 18px rgba(8,10,14,.8); }
.leaflet-control-attribution { font-size:9px !important; opacity:.7; }
/* START/END route labels; counter-rotated via --derot so they stay upright */
.routelbl {
  display:inline-block; padding:4px 10px; border-radius:10px; color:#fff;
  font:700 13px system-ui; white-space:nowrap;
  transform: translate(-50%,-140%) rotate(var(--derot, 0deg));
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}