:root{
  --bg:#0d0f12;
  --panel:rgba(18,21,26,.92);
  --panel-solid:#12151a;
  --line:rgba(255,255,255,.10);
  --txt:#eef1f5;
  --mut:#8b95a3;
  --acc:#ff5a1f;      /* enduro orange */
  --acc-2:#ffb020;
  --ok:#39d353;
  --warn:#ffb020;
  --bad:#ff4d4d;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --rail:236px;   /* width of the landscape side dash */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* author display rules below would otherwise beat the UA rule for [hidden] */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--txt);
  font:500 15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}

/* ---------- MAP ---------- */
#map{position:fixed;inset:0;background:#1a1d22;z-index:0}

/* Course-up. The container grows to a square centred on the rider, big enough
   that no corner swings into view, and turns about its own centre so the rider
   stays put while the world moves. See the orientation section of js/app.js. */
body.rot #map{
  inset:auto;
  left:var(--rot-x,50%);top:var(--rot-y,50%);
  width:var(--rot-size,100vw);height:var(--rot-size,100vh);
  margin-left:calc(var(--rot-size,100vw) / -2);
  margin-top:calc(var(--rot-size,100vh) / -2);
  transform:rotate(var(--rot-deg,0deg));
  transform-origin:50% 50%;
}

/* Attribution lives outside the map: Leaflet's own control sits in the corner
   of the container, which in course-up is well off the side of the screen. */
.attrib{
  position:fixed;left:0;right:0;z-index:400;
  bottom:calc(var(--dash-h,300px) + 2px);
  padding:1px 6px;font-size:9px;line-height:1.5;
  color:#9aa4b1;background:rgba(0,0,0,.5);
  pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.attrib a{color:#c3ccd8;text-decoration:none}
.leaflet-container{background:#1a1d22;font-family:inherit}
.leaflet-control-attribution{
  background:rgba(0,0,0,.5)!important;color:#9aa4b1!important;
  font-size:9px!important;padding:1px 5px!important;
}
.leaflet-control-attribution a{color:#c3ccd8!important}
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{display:none}

/* rider marker */
.me-mark{position:relative;width:22px;height:22px}
.me-dot{
  position:absolute;inset:0;border-radius:50%;
  background:#2f9bff;border:2.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.5);
}
.me-pulse{
  position:absolute;inset:-9px;border-radius:50%;
  background:rgba(47,155,255,.28);animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.me-head{
  position:absolute;left:50%;top:50%;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:15px solid #2f9bff;
  transform-origin:50% 100%;margin:-22px 0 0 -6px;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}

/* Armed to place a waypoint by tapping. Sits under the top bar so it does not
   cover the thing you are aiming at. */
.place-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--safe-t) + 58px);z-index:600;
  display:flex;align-items:center;gap:12px;
  background:rgba(18,21,26,.96);border:1px solid rgba(255,90,31,.55);
  border-radius:12px;padding:10px 12px;
  font-size:12.5px;font-weight:700;color:var(--txt);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  max-width:calc(100vw - 28px);
}
.place-bar button{
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:700;
}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:calc(var(--safe-t) + 8px) 12px 8px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(10,12,15,.9) 0%,rgba(10,12,15,.55) 60%,transparent 100%);
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px;letter-spacing:.2px;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.logo{width:22px;height:22px;color:var(--acc)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.icon-btn{
  width:38px;height:38px;flex:0 0 38px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--txt);border-radius:11px;display:grid;place-items:center;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:active{transform:scale(.94)}
.icon-btn--map{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.icon-btn.is-active{color:var(--acc);border-color:rgba(255,90,31,.5)}

.chip{
  display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.chip{cursor:pointer}          /* tap it for GPS diagnostics */
.chip:active{transform:scale(.94)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--mut)}
.chip--wait .dot{background:var(--warn);animation:blink 1s infinite}
.chip--good .dot{background:var(--ok)}
.chip--poor .dot{background:var(--warn)}
.chip--bad  .dot{background:var(--bad)}
@keyframes blink{50%{opacity:.25}}

/* ---------- MAP SIDE TOOLS ---------- */
.map-tools{position:fixed;right:12px;z-index:450;bottom:calc(var(--dash-h,300px) + 14px);
  display:flex;flex-direction:column;gap:8px;transition:bottom .25s ease}

/* ---------- DASH ---------- */
.dash{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  /* No bottom padding: the stats panel runs to the screen edge and carries the
     home-indicator inset as padding inside its bottom row instead. The numbers
     still clear the indicator, but it sits on the panel rather than on a black
     band below it. */
  padding:4px 14px 0;
  background:linear-gradient(180deg,rgba(13,15,18,.72) 0%,rgba(13,15,18,.95) 22%,#0d0f12 100%);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.5);
}
.dash-grip{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:2px auto 4px}

/* speed on the left, transport controls on the right, one compact row */
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:10px}

.speedo{min-width:0;flex:1 1 auto}
.speed-val{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
#speedNum{
  font-size:52px;font-weight:800;line-height:.95;letter-spacing:-2.2px;
  font-family:"SF Pro Display",-apple-system,system-ui,sans-serif;
  background:linear-gradient(180deg,#fff 25%,#b9c3d0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.speed-unit{font-size:13px;font-weight:700;color:var(--mut)}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;
  margin:8px 0 0;
}
.stat{background:rgba(255,255,255,.035);padding:8px 4px;text-align:center}
/* bottom row carries the home-indicator inset so the panel reaches the edge */
.stat:nth-last-child(-n+3){padding-bottom:calc(var(--safe-b) + 8px)}
.stat-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.stat-k{font-size:9px;letter-spacing:.9px;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-top:2px}

/* ---------- CONTROLS ---------- */
.controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto}
.rec{
  position:relative;width:62px;height:62px;flex:0 0 62px;border-radius:50%;
  border:3px solid rgba(255,255,255,.28);background:transparent;padding:0;
  display:grid;place-items:center;
}
.rec-inner{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(160deg,#ff6a2b,#e02f10);
  box-shadow:0 4px 18px rgba(255,72,20,.45);
  transition:border-radius .22s cubic-bezier(.4,0,.2,1),width .22s,height .22s,background .2s;
}
.rec-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--acc);opacity:0}
.rec:active{transform:scale(.95)}
.rec.is-rec .rec-inner{width:24px;height:24px;border-radius:6px;background:#fff}
.rec.is-rec .rec-ring{opacity:1;animation:recpulse 1.6s ease-out infinite}
.rec.is-paused .rec-inner{background:linear-gradient(160deg,#ffc44d,#f59300)}
.rec.is-paused .rec-ring{animation:none;opacity:.4;border-color:var(--acc-2)}
@keyframes recpulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.28);opacity:0}}

.ctl{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;color:var(--mut);font-size:9px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:4px 2px;min-width:42px;
}
.ctl svg{width:21px;height:21px}
.ctl--ghost{color:#c6cedb}
.ctl:active{opacity:.6}

.hint{font-size:11px;color:var(--mut);margin-top:3px;min-height:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NB: not ".hint.rec" — ".rec" is the record button and would apply its
   62px circular grid box to this text. */
.hint--rec{color:var(--acc)}

/* ---------- SHEETS ---------- */
.sheet{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;backdrop-filter:blur(3px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.sheet-card{
  width:100%;max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel-solid);border-radius:20px 20px 0 0;
  border-top:1px solid var(--line);
  padding:8px 16px calc(var(--safe-b) + 20px);
  animation:up .26s cubic-bezier(.2,.9,.25,1);
}
@keyframes up{from{transform:translateY(100%)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 12px;position:sticky;top:0;background:var(--panel-solid);z-index:2}
.sheet-head h2{margin:0;font-size:17px;font-weight:800}
.close{background:none;border:0;color:var(--mut);font-size:30px;line-height:1;padding:0 6px}

.layer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
.layer-opt{
  border:1.5px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);
  border-radius:12px;padding:12px 10px;font-size:13px;font-weight:700;text-align:left;
}
.layer-opt small{display:block;color:var(--mut);font-size:10.5px;font-weight:600;margin-top:2px}
.layer-opt.sel{border-color:var(--acc);background:rgba(255,90,31,.12);color:#fff}

.sheet-sub{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);
  font-weight:800;margin:18px 0 0;padding-bottom:2px;
}
.row-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 2px;border-top:1px solid var(--line);font-size:14px;
}
.row-toggle>span{min-width:0}
.row-toggle small{display:block;color:var(--mut);font-size:11px;font-weight:600;margin-top:2px}
.row-toggle input{width:50px;height:30px;appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.13);border-radius:15px;position:relative;flex:0 0 50px;transition:background .2s}
.row-toggle input:checked{background:var(--acc)}
.row-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.row-toggle input:checked::after{transform:translateX(20px)}

/* ---------- ROUTES ---------- */
.route-swatch{
  width:26px;height:6px;border-radius:3px;flex:0 0 26px;margin-top:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

/* ---------- WAYPOINTS ---------- */
/* --pin-rot stands every pin back up when the map is turned; the origin is
   the tip of the teardrop, which is the bit that marks the spot. */
.wpt-pin{position:relative;width:26px;height:34px;
  transform:rotate(var(--pin-rot,0deg));transform-origin:50% 100%}
.wpt-body{position:absolute;inset:0;width:26px;height:34px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.wpt-glyph{position:absolute;left:6px;top:5px;width:14px;height:14px}

.wpt-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 6px}
.wpt-type{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1.5px solid var(--line);background:rgba(255,255,255,.04);
  border-radius:12px;padding:10px 4px;color:var(--txt);
  font-size:11px;font-weight:700;
}
.wpt-type svg{width:20px;height:20px}
.wpt-type.sel{border-color:var(--wc,var(--acc));background:rgba(255,255,255,.09)}

.mini-btn.danger{color:#ff7b7b;border-color:rgba(255,77,77,.32);
  background:rgba(255,77,77,.09)}

.wpt-card{display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  border-radius:12px;padding:11px 13px}
.wpt-card .dotmark{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.wpt-card .wc-txt{flex:1;min-width:0}
.wpt-card .wc-name{font-weight:800;font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wpt-card .wc-sub{font-size:11px;color:var(--mut);font-weight:600;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- RIDE SUMMARY ---------- */
.sum-date{font-size:11.5px;color:var(--mut);font-weight:600;margin:-6px 0 14px}

.sum-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin-bottom:18px;
}
.sum-cell{background:rgba(255,255,255,.035);padding:11px 6px;text-align:center}
.sum-cell b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums}
.sum-cell span{display:block;font-size:8.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--mut);font-weight:700;margin-top:3px}

.chart-block{margin-bottom:20px}
.chart-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mut);font-weight:800;margin-bottom:7px;
}
.chart-head span:last-child{letter-spacing:.3px;text-transform:none;font-size:11px}
.chart{width:100%;height:150px;display:block;overflow:visible}
.chart--elev{height:175px}
.c-callout{fill:var(--txt);font-size:11.5px;font-weight:800}
.chart-legend{
  display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;
  font-size:9.5px;font-weight:700;color:var(--mut);letter-spacing:.3px;
}
.chart-legend span{display:flex;align-items:center;gap:5px}
.chart-legend i{width:12px;height:3px;border-radius:2px;flex:0 0 12px}
.c-grid{stroke:rgba(255,255,255,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.c-ylab{fill:var(--mut);font-size:11px;font-weight:700;text-anchor:end}
.c-xlab{fill:var(--mut);font-size:11px;font-weight:700}
.chart-empty{
  color:var(--mut);font-size:12.5px;font-weight:600;text-align:center;
  padding:26px 10px;border:1px dashed var(--line);border-radius:12px;
}

/* ---------- BACK-TO-START CHIP ---------- */
.icon-btn--sos{color:#ff8b6b;border-color:rgba(255,90,31,.35)}

.home-chip{
  position:fixed;left:12px;z-index:450;top:calc(var(--safe-t) + 56px);
  display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.home-chip:active{transform:scale(.96)}
.home-chip.is-on{border-color:rgba(255,90,31,.55)}
.home-arrow{width:20px;height:20px;color:var(--acc);flex:0 0 20px;
  transition:transform .35s cubic-bezier(.3,.9,.4,1)}
.home-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.home-txt b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.home-txt small{font-size:9px;color:var(--mut);font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;max-width:110px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* ---------- POSITION READOUT ---------- */
.pos-block{border-top:1px solid var(--line);padding:12px 0 13px}
.pos-block:first-of-type{border-top:0;padding-top:2px}
.pos-label{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mut);font-weight:800;margin-bottom:5px}
.pos-big{
  font-size:30px;font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;
  color:#fff;word-break:break-word;line-height:1.15;
}
.pos-mid{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.35}
.pos-sub{font-size:12px;color:var(--mut);font-weight:600;margin-top:3px;
  font-variant-numeric:tabular-nums}

@media (max-width:380px){ .pos-big{font-size:26px} }

/* ---------- DIAGNOSTICS ---------- */
.diag{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:4px 0 14px;font-size:13px}
.diag dt{color:var(--mut);font-weight:600}
.diag dd{margin:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.diag dd.ok{color:var(--ok)}
.diag dd.warn{color:var(--warn)}
.diag dd.bad{color:var(--bad)}
.diag-note{font-size:11.5px;line-height:1.55;color:var(--mut);font-weight:600;
  border-top:1px solid var(--line);padding-top:12px;margin:0 0 14px}
.diag-note b{color:var(--txt)}

.mini-btn{
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:700;flex:0 0 auto;
}
.mini-btn:active{opacity:.6}
.mini-btn.wide{width:100%;padding:12px;background:rgba(255,90,31,.14);
  border-color:rgba(255,90,31,.45);color:#ffb491}
.build{text-align:center;font-size:10.5px;color:var(--mut);font-weight:700;
  letter-spacing:.5px;padding:14px 0 2px}

.field{display:flex;align-items:center;gap:12px;padding:9px 2px;border-top:1px solid var(--line)}
.field label{font-size:12px;color:var(--mut);font-weight:700;flex:0 0 74px}
.field input{
  flex:1 1 auto;min-width:0;background:rgba(255,255,255,.05);color:var(--txt);
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;
  font:inherit;font-size:13px;-webkit-appearance:none;appearance:none;
}
.field input:focus{outline:none;border-color:rgba(255,90,31,.55)}
.field-row{display:flex;gap:8px;padding:10px 0 2px}
.field-row .mini-btn{flex:1}
/* segmented detail picker */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 14px}
.seg button{
  background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 4px;font:inherit;font-size:12px;font-weight:700;text-align:center;
}
.seg button small{display:block;color:var(--mut);font-size:9.5px;font-weight:600;margin-top:1px}
.seg button.sel{border-color:var(--acc);background:rgba(255,90,31,.13)}
.seg--2{grid-template-columns:repeat(2,1fr)}

.progress{margin:4px 0 12px}
.progress .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
.progress .bar span{display:block;height:100%;width:0;background:var(--acc);
  border-radius:4px;transition:width .2s linear}
.progress-text{font-size:11.5px;color:var(--mut);font-weight:700;margin-top:7px;text-align:center}

.sync-ok{color:var(--ok)}
.sync-bad{color:var(--bad)}
.sync-busy{color:var(--acc-2)}

/* ---------- TRACK LIST ---------- */
.track-list{display:flex;flex-direction:column;gap:9px;padding-bottom:6px}
.track-card{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:14px;padding:12px 13px}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tc-name{font-weight:800;font-size:14.5px}
.tc-date{font-size:11px;color:var(--mut);margin-top:2px;font-weight:600}
.tc-stats{display:flex;gap:16px;margin:10px 0 11px;flex-wrap:wrap}
.tc-stats div{font-size:11.5px;color:var(--mut);font-weight:600}
.tc-stats b{display:block;color:var(--txt);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.tc-open{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 11px;padding:9px 11px;border-radius:10px;
  background:rgba(255,90,31,.11);border:1px solid rgba(255,90,31,.32);
  color:#ffb491;font-size:12.5px;font-weight:800;letter-spacing:.2px;
}
.tc-open span{font-size:17px;line-height:1;opacity:.8}
.tc-acts{display:flex;gap:7px;flex-wrap:wrap}
.tc-acts .wide{flex:1 0 100%}
.tc-acts button{
  flex:1;padding:9px 6px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--txt);font-size:11.5px;font-weight:700;
}
.tc-acts .danger{color:#ff7b7b;border-color:rgba(255,77,77,.3);background:rgba(255,77,77,.08)}
.empty{text-align:center;color:var(--mut);padding:40px 20px;font-size:13.5px;line-height:1.6}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;top:calc(var(--safe-t) + 58px);transform:translateX(-50%);
  z-index:1200;background:#1c2027;border:1px solid var(--line);color:var(--txt);
  padding:10px 16px;border-radius:12px;font-size:13px;font-weight:700;
  box-shadow:0 8px 26px rgba(0,0,0,.55);max-width:88vw;text-align:center;
  animation:toastIn .22s cubic-bezier(.2,.9,.25,1);
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}}

/* narrow phones (iPhone mini / SE): keep speed + controls on one row */
@media (max-width:380px) and (orientation:portrait){
  .dash{padding-left:11px;padding-right:11px}
  #speedNum{font-size:44px;letter-spacing:-1.6px}
  .controls{gap:4px}
  .ctl{min-width:38px}
  .rec{width:56px;height:56px;flex:0 0 56px}
  .rec-inner{width:42px;height:42px}
  .rec.is-rec .rec-inner{width:22px;height:22px}
}

@media (max-height:700px) and (orientation:portrait){
  #speedNum{font-size:44px}
  .stat-v{font-size:17px}
  .stat{padding:6px 4px}
  .rec{width:56px;height:56px;flex:0 0 56px}
  .rec-inner{width:42px;height:42px}
  .rec.is-rec .rec-inner{width:22px;height:22px}
}

/* =================================================================
   LANDSCAPE (phone held sideways on the bars)
   The dash becomes a right-hand rail so the map keeps most of the
   screen instead of being squeezed into a letterbox.
   ================================================================= */
@media (orientation:landscape) and (max-height:520px){
  .dash{
    left:auto;right:0;top:0;bottom:0;
    width:calc(var(--rail) + var(--safe-r));
    /* flex-start, not center: the stats grid below absorbs the spare height
       instead of it being split into dead bands above and below */
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 13px) calc(var(--safe-b) + 8px) 13px;
    border-radius:20px 0 0 20px;
    border-top:0;border-left:1px solid var(--line);
    background:linear-gradient(90deg,rgba(13,15,18,.75) 0%,rgba(13,15,18,.96) 18%,#0d0f12 100%);
    box-shadow:-10px 0 34px rgba(0,0,0,.5);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .dash-grip{display:none}

  /* the rail is narrow, so stack speed above the controls again */
  .dash-top{flex-direction:column;gap:8px;flex:0 0 auto}
  .speedo{flex:0 0 auto;width:100%;text-align:center}
  .speed-val{justify-content:center}
  #speedNum{font-size:52px;letter-spacing:-2px}
  .speed-unit{font-size:13px}

  /* fills the rest of the rail, so numbers get bigger rather than the rail
     getting emptier — this is a display you read at a glance on the bars */
  /* the rail already pads for the inset, so restore the full border here */
  .stats{
    grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);
    margin:12px 0 0;border-radius:12px;border-bottom:1px solid var(--line);
    flex:1 1 auto;min-height:0;
  }
  .stat{padding:4px 3px;display:flex;flex-direction:column;justify-content:center}
  .stat:nth-last-child(-n+3){padding-bottom:4px}
  .stat-v{font-size:21px}
  .stat-k{font-size:9px;letter-spacing:.6px}

  .controls{justify-content:center;gap:8px;width:100%}
  .rec{width:58px;height:58px;flex:0 0 58px;border-width:3px}
  .rec-inner{width:42px;height:42px}
  .rec.is-rec .rec-inner{width:21px;height:21px;border-radius:5px}
  .ctl{min-width:40px;font-size:9px;padding:4px 2px;gap:2px}
  .ctl svg{width:20px;height:20px}
  .hint{text-align:center;margin-top:2px}

  /* top bar and map buttons keep clear of the rail */
  .topbar{
    right:calc(var(--rail) + var(--safe-r));
    padding:calc(var(--safe-t) + 6px) 10px 6px calc(var(--safe-l) + 12px);
  }
  .map-tools{
    bottom:auto;top:50%;transform:translateY(-50%);
    right:calc(var(--rail) + var(--safe-r) + 12px);
  }
  /* --dash-h is the full height of the rail in landscape, so the portrait rule
     would push the attribution off the top of the screen */
  .attrib{
    bottom:0;right:calc(var(--rail) + var(--safe-r));
    padding-left:calc(var(--safe-l) + 6px);
  }
  .toast{
    left:calc((100vw - var(--rail)) / 2);top:calc(var(--safe-t) + 52px);
    max-width:calc(100vw - var(--rail) - 40px);
  }

  /* sheets slide in from the side rather than filling the short screen */
  .sheet{align-items:stretch;justify-content:flex-end}
  .sheet-card{
    width:min(460px,72vw);max-height:100vh;
    border-radius:20px 0 0 20px;border-top:0;border-left:1px solid var(--line);
    padding:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 16px)
            calc(var(--safe-b) + 16px) 16px;
    animation:slideIn .26s cubic-bezier(.2,.9,.25,1);
  }
  @keyframes slideIn{from{transform:translateX(100%)}}
  .sheet-head{padding:6px 0 10px}
  .layer-grid{grid-template-columns:repeat(4,1fr)}
  .row-toggle{padding:10px 2px}
  .tc-stats{gap:14px;margin:8px 0 9px}
}

/* The "first time, or something is wrong" fold in Settings. Everything inside
   is needed once or never, so it stays shut and out of the way of the two
   fields that matter. */
.more{border-top:1px solid var(--line);margin-top:10px;padding-top:4px}
.more summary{
  font-size:12px;font-weight:700;color:var(--mut);
  padding:8px 0;cursor:pointer;list-style:none;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'▸ ';font-size:11px}
.more[open] summary::before{content:'▾ '}
.more summary:active{opacity:.6}

/* The zoom pair sits with the other map tools but reads as one control, so the
   two halves are joined rather than floating apart like the single buttons. */
.zoom-pair{display:flex;flex-direction:column;gap:2px}
.zoom-pair .icon-btn--map{border-radius:10px}
.zoom-pair .icon-btn--map:first-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.zoom-pair .icon-btn--map:last-child{border-top-left-radius:4px;border-top-right-radius:4px}
.zoom-pair[hidden]{display:none}