/* ROUTE DASHBOARD: the numbers under a route's map and profile (js/route-view.js dashboard()). Shared by
   the Play post pages and the Play view inside the home page, so it takes either's colours (and night). */
.dash{--g0:#1f6f8b;--g1:#3f93a8;--g2:#86bccb;--g3:#c9d3d6;--g4:#f0b3c8;--g5:#e07ba1;--g6:#c23f6f;--tu:#c23f6f;--tf:#c9b79c;--td:#1f6f8b;--tsp:#e6dfd3;
  --dk:var(--pi-ink,var(--ink,#0f4d47));--dk2:var(--pi-ink2,var(--ink-2,#3f5a64));--dk3:var(--pi-ink3,var(--ink-3,#71878f));
  --dl:var(--pi-line,var(--line,#dde7e8));--dc:var(--pi-card,var(--card,#fff));--da:var(--pi-accent,var(--accent,#d8618f));
  --dsoft:var(--pi-soft,var(--accent-soft,#fbe7ef));--dd:var(--pi-display,var(--display,system-ui,sans-serif));
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px}
.dash[hidden]{display:none}
.dash .dc{position:relative;grid-column:span 3;border:1px solid var(--dl);border-radius:12px;padding:10px 12px 12px;background:var(--dc);min-width:0}
.dash .dc h3{margin:0 0 8px;font:800 13px var(--dd);letter-spacing:.06em;text-transform:uppercase;color:var(--dk3)}
.dash{grid-auto-flow:row dense}
.dash .speed{grid-column:1/-1}
.dash .updown,.dash .dir{grid-column:span 2} .dash .facts{grid-column:span 4}
.dash .facts:first-child{grid-column:1/-1}
.dash .sp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 16px;align-items:center}
.dash .sp-row .gauges{margin:0}
@media (max-width:860px){.dash .sp-row{grid-template-columns:1fr}}
@media (max-width:720px){.dash{grid-template-columns:1fr}.dash .dc,.dash .dir,.dash .facts{grid-column:1/-1}}
.dash .cap{margin:6px 0 0;font-size:12px;color:var(--dk3);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.dash .cap .k{display:inline-block;width:18px;height:0;border-top:3px solid var(--da);margin-right:4px;vertical-align:middle}
.dash .cap .k.avg{border-top:2px dashed var(--dk)} .dash .cap .k.top{width:9px;height:9px;border:0;border-radius:50%;background:var(--da)}

/* speedometers */
.dash .gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.dash .gauge{margin:0;text-align:center}
.dash .gauge svg{display:block;width:100%;max-width:190px;margin:0 auto;overflow:visible}
.dash .gauge .face{fill:none;stroke:none}
.dash .gauge .trk{fill:none;stroke:var(--dl);stroke-width:14;stroke-linecap:round}
.dash .gauge .val{fill:none;stroke-width:14;stroke-linecap:round}
.dash .gauge .val.g-ink{stroke:var(--dk)} .dash .gauge .val.g-acc{stroke:var(--da)}
.dash .gauge .tk{stroke:var(--dk3);stroke-width:1.2} .dash .gauge .tk.mj{stroke:var(--dk2);stroke-width:2}
.dash .gauge .tl{font:700 10px var(--dd);fill:var(--dk3);text-anchor:middle}
.dash .gauge .ndl{stroke:var(--dk);stroke-width:3.5;stroke-linecap:round}
.dash .gauge .hub{fill:var(--dk);stroke:var(--dc);stroke-width:3}
.dash .gauge figcaption b{font:800 22px/1 var(--dd);color:var(--dk);font-variant-numeric:tabular-nums}
.dash .gauge figcaption small{font-size:13px;color:var(--dk3);font-weight:700}
.dash .gauge figcaption span{display:block;font-size:12px;color:var(--dk3);margin-top:2px}

/* speed along the way */
.dash .chart{display:block;width:100%;height:80px}
.dash .chart .s0{stop-color:var(--da);stop-opacity:.45} .dash .chart .s1{stop-color:var(--da);stop-opacity:.02}
.dash .chart .ln{fill:none;stroke:var(--da);stroke-width:2;vector-effect:non-scaling-stroke}
.dash .chart .avg{stroke:var(--dk);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.dash .chart .gl{stroke:var(--dl);vector-effect:non-scaling-stroke}
.dash .chart .ax{font:600 11px system-ui,sans-serif;fill:var(--dk3)}
.dash .chart .topdot{fill:var(--da);stroke:var(--dc);stroke-width:2;vector-effect:non-scaling-stroke}

/* up and down */
.dash .ud{display:grid;grid-template-columns:60px 60px 1fr;gap:10px;align-items:end;min-height:120px}
.dash .udb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:120px;text-align:center}
.dash .udb i{display:block;width:26px;border-radius:8px 8px 3px 3px;margin-bottom:6px}
.dash .udb.up i{background:linear-gradient(0deg,var(--dsoft),var(--da))}
.dash .udb.down i{background:linear-gradient(180deg,#bfe0e7,#1f6f8b);border-radius:3px 3px 8px 8px}
.dash .udb b{font:800 17px var(--dd);color:var(--dk);white-space:nowrap;font-variant-numeric:tabular-nums}
.dash .udb small,.dash .range small{display:block;font-size:11px;color:var(--dk3)}
.dash .range{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto auto;column-gap:10px;height:120px}
.dash .range .bar{grid-row:1/4;grid-column:1;width:10px;border-radius:6px;margin:6px 0;background:linear-gradient(180deg,#f2f5f5,#6c8f88 45%,#3d5b4f)}
.dash .range .hi,.dash .range .lo{grid-column:2;font-size:13px;color:var(--dk2)}
.dash .range .hi{grid-row:1} .dash .range .lo{grid-row:3;align-self:end}
.dash .range b{font:800 17px var(--dd);color:var(--dk)}
.dash .range p{grid-column:1/-1;grid-row:4;margin:6px 0 0;font-size:12px;color:var(--dk3)}

/* grades */
.dash .grades{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-items:end;height:110px}
.dash .gb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.dash .gb i{display:block;width:100%;border-radius:5px 5px 2px 2px}
.dash .gb .gv{font:800 12px var(--dd);color:var(--dk2);margin-bottom:3px}
.dash .gb small{flex:none;font-size:10px;line-height:1.15;color:var(--dk3);text-align:center;margin-top:4px;height:2.4em}

/* where the time went */
.dash .donut{display:flex;gap:14px;align-items:center}
.dash .donut svg{width:104px;flex:none}
.dash .donut .seg{fill:none;stroke-width:22}
.dash .donut .dn-b{font:800 15px var(--dd);fill:var(--dk);text-anchor:middle} .dash .donut .dn-s{font:600 11px system-ui,sans-serif;fill:var(--dk3);text-anchor:middle}
.dash .donut ul{list-style:none;margin:0;padding:0;font-size:13px;color:var(--dk2);display:grid;gap:5px}
.dash .donut li i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.dash .donut li b{color:var(--dk)} .dash .donut li small{color:var(--dk3)}

/* splits */
.dash .spl{display:flex;gap:4px;align-items:end;height:110px;overflow-x:auto;padding-bottom:2px}
.dash .sb{flex:1 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.dash .sb i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:var(--dk2);opacity:.75}
.dash .sb.best i{background:var(--da);opacity:1}
.dash .sb span{font:700 9px system-ui,sans-serif;color:var(--dk3);margin-bottom:3px;writing-mode:vertical-rl;transform:rotate(180deg)}
.dash .sb small{font-size:10px;color:var(--dk3);margin-top:3px}

/* which way */
.dash .dir{text-align:center}
.dash .rose{width:110px;display:block;margin:0 auto}
.dash .rose .rr{fill:none;stroke:var(--dl)} .dash .rose .pet{fill:var(--da);fill-opacity:.75;stroke:var(--dc);stroke-width:1}
.dash .rose .rl{font:800 10px var(--dd);fill:var(--dk3);text-anchor:middle}
.dash .rose-c{margin:4px 0 0;font-size:13px;color:var(--dk2)}

/* hidden in the numbers */
.dash dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.dash dl div{border-radius:9px;background:var(--dsoft);padding:6px 9px}
.dash dt{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dk3)}
.dash dd{margin:2px 0 0} .dash dd b{display:block;font:800 15px/1.2 var(--dd);color:var(--dk)} .dash dd small{font-size:12px;color:var(--dk2)}
@media (max-width:720px){
  .dash .ud{grid-template-columns:64px 64px minmax(0,1fr);gap:10px}
  .dash .range{height:auto;min-height:170px}
  .dash .range .hi,.dash .range .lo{font-size:12px}
  .dash .gb small{font-size:9px;height:3.6em}
  .dash .gb .gv{font-size:11px}
  .dash .grades{gap:4px}
}

/* colours by part: themes (the Studio's brass) set their own */
.dash .gb i.g0{background:var(--g0)} .dash .gb i.g1{background:var(--g1)} .dash .gb i.g2{background:var(--g2)} .dash .gb i.g3{background:var(--g3)}
.dash .gb i.g4{background:var(--g4)} .dash .gb i.g5{background:var(--g5)} .dash .gb i.g6{background:var(--g6)}
.dash .seg.t-up{stroke:var(--tu)} .dash .seg.t-flat{stroke:var(--tf)} .dash .seg.t-down{stroke:var(--td)} .dash .seg.t-stop{stroke:var(--tsp)}
.dash .donut li i.t-up{background:var(--tu)} .dash .donut li i.t-flat{background:var(--tf)} .dash .donut li i.t-down{background:var(--td)} .dash .donut li i.t-stop{background:var(--tsp)}
/* the Studio's switches: a part that's off stays here, dimmed, and isn't on the post */
.dash .dsw{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--dk3);cursor:pointer}
.dash .dc.off > :not(h3):not(.dsw){opacity:.35;filter:grayscale(.8)}
.dash .grade{grid-column:span 4}
.dash .ud{grid-template-columns:54px 54px minmax(0,1fr);gap:8px}
.dash .range .hi,.dash .range .lo,.dash .range p{white-space:nowrap}
.dash .range small{display:inline;margin-left:4px}
@media (max-width:720px){.dash .grade{grid-column:1/-1}}
/* up and down, compact: the two bars side by side, the low-to-high range as a strip under them */
.dash .ud{grid-template-columns:1fr 1fr;gap:6px 10px;min-height:0;align-items:end}
.dash .udb{height:104px}
.dash .range{grid-column:1/-1;height:auto;min-height:0;display:grid;grid-template-columns:auto minmax(30px,1fr) auto;grid-template-areas:"lo bar hi" "p p p";grid-template-rows:auto;align-items:center;column-gap:8px;margin-top:4px}
.dash .range .lo{grid-row:auto;grid-area:lo;align-self:center} .dash .range .hi{grid-row:auto;grid-area:hi;text-align:right}
.dash .range .bar{grid-row:auto;grid-column:auto;grid-area:bar;width:auto;height:8px;margin:0;background:linear-gradient(90deg,#3d5b4f,#6c8f88 55%,#f2f5f5)}
.dash .range p{grid-row:auto;grid-column:auto;grid-area:p;margin:2px 0 0;text-align:center}
.dash .range small{display:block;margin:0}
.dash .range b{font-size:15px}

/* NEON (Play): a deep-navy instrument panel, lit in runs of colour (teal to violet, pink to orange) */
.dash.neon{--dk:#eef1ff;--dk2:#c3c9f2;--dk3:#8d95cf;--dl:rgba(140,150,255,.18);--dc:#1a2156;--da:#ff5fa8;--dsoft:rgba(120,130,255,.12);
  --g0:linear-gradient(0deg,#2b6cff,#29e0d6);--g1:linear-gradient(0deg,#3a58ff,#4cc9ff);--g2:linear-gradient(0deg,#5b5bff,#8fb4ff);--g3:linear-gradient(0deg,#5a5f9e,#9aa0d6);
  --g4:linear-gradient(0deg,#b44dff,#ff8de0);--g5:linear-gradient(0deg,#ff3d9a,#ff9f6b);--g6:linear-gradient(0deg,#ff2f6d,#ffb347);
  --tu:#ff4f9a;--tf:#7b6cff;--td:#2fd6e0;--tsp:#2c3577;
  padding:12px;border-radius:18px;background:radial-gradient(120% 90% at 10% 0%,#2a2f8a 0,#141a46 55%,#0e1336 100%);box-shadow:0 10px 30px rgba(14,19,54,.35)}
.dash.neon .dc{border:1px solid rgba(140,150,255,.16);background:linear-gradient(180deg,rgba(40,48,120,.75),rgba(24,30,82,.75));border-radius:14px}
.dash.neon .dc h3{color:#9ea6ea;letter-spacing:.1em}
.dash.neon .gb i{background:var(--g3)} .dash.neon .gb i.g0{background:var(--g0)} .dash.neon .gb i.g1{background:var(--g1)} .dash.neon .gb i.g2{background:var(--g2)}
.dash.neon .gb i.g4{background:var(--g4)} .dash.neon .gb i.g5{background:var(--g5)} .dash.neon .gb i.g6{background:var(--g6)}
.dash.neon .gb i{border-radius:6px;box-shadow:0 0 12px rgba(255,95,168,.18)}
/* ring gauges */
.dash .gauge.ring svg{max-width:170px}
.dash .ring .rs{fill:none;stroke:rgba(150,160,255,.16);stroke-width:13}
.dash .ring .rs.on{filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.dash .ring .rr-o{fill:none;stroke-width:2.5;opacity:.85;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.dash .ring .rr-i{fill:rgba(10,14,48,.55);stroke:rgba(150,160,255,.18)}
.dash .ring .rv{font:800 30px var(--dd);fill:#fff;text-anchor:middle}
.dash .ring .ru{font:700 12px system-ui,sans-serif;fill:#9ea6ea;text-anchor:middle;letter-spacing:.06em}
.dash .ring figcaption span{color:#c3c9f2;font-weight:700}
@media (prefers-reduced-motion:no-preference){.dash .ring .rs.on{animation:ringon .8s ease-in-out both}}
@keyframes ringon{from{opacity:0}}
/* the speed line: a glowing run of colour */
.dash.neon .chart .l0{stop-color:#29e0d6} .dash.neon .chart .l1{stop-color:#b44dff} .dash.neon .chart .l2{stop-color:#ff7a59}
.dash.neon .chart .ln{stroke:url(#sgl);stroke-width:2;filter:drop-shadow(0 0 4px rgba(180,77,255,.6))}
.dash.neon .chart .s0{stop-color:#b44dff;stop-opacity:.35} .dash.neon .chart .s1{stop-color:#2b6cff;stop-opacity:0}
.dash.neon .chart .avg{stroke:#29e0d6} .dash.neon .chart .gl{stroke:rgba(140,150,255,.15)} .dash.neon .chart .ax{fill:#8d95cf}
.dash.neon .chart .topdot{fill:#0e1336;stroke:#ff7a59;stroke-width:3}
.dash.neon .cap .k{border-top-color:#b44dff} .dash.neon .cap .k.avg{border-top-color:#29e0d6} .dash.neon .cap .k.top{background:#ff7a59}
/* climbing as glowing bars, splits as capsules */
.dash.neon .udb.up i{background:linear-gradient(0deg,#ff2f6d,#ffb347);box-shadow:0 0 14px rgba(255,79,154,.45);border-radius:12px}
.dash.neon .udb.down i{background:linear-gradient(180deg,#29e0d6,#2b6cff);box-shadow:0 0 14px rgba(41,224,214,.4);border-radius:12px}
.dash.neon .range .bar{background:linear-gradient(90deg,#2b6cff,#b44dff,#ff7a59);box-shadow:0 0 10px rgba(180,77,255,.5)}
.dash.neon .spl .sb{position:relative}
.dash.neon .sb i{border-radius:999px;background:linear-gradient(0deg,#5b5bff,#29e0d6);opacity:1;box-shadow:0 0 10px rgba(41,224,214,.3)}
.dash.neon .sb.best i{background:linear-gradient(0deg,#ff2f6d,#ffb347);box-shadow:0 0 12px rgba(255,79,154,.55)}
.dash.neon .donut .seg{stroke-linecap:round}
.dash.neon .donut .dn-b{fill:#fff}
.dash.neon .rose .pet{fill:#b44dff;fill-opacity:.7;stroke:#ff8de0} .dash.neon .rose .rr{stroke:rgba(140,150,255,.25)}
.dash.neon dl div{background:rgba(120,130,255,.1);border:1px solid rgba(140,150,255,.18)}
.dash.neon dd b{color:#fff} .dash.neon dt{color:#8d95cf}

/* elevation, beside up and down */
.dash .elev{grid-column:span 4}
.dash .dprof{position:relative;margin:0;user-select:none;touch-action:pan-y}
.dash .dprof svg{display:block;width:100%;height:150px}
.dash .dprof .tip{position:absolute;top:0;transform:translateX(-50%);background:var(--dk);color:var(--dc);font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s ease}
.dash .dprof .pg-l{stroke:var(--da)} .dash .dprof .pg-t{stroke:var(--dl)} .dash .dprof .pg-x{fill:var(--dk3)} .dash .dprof .cur{stroke:var(--dk)}
@media (max-width:720px){.dash .elev{grid-column:1/-1}}
.dash.neon .dprof .l0{stop-color:#29e0d6} .dash.neon .dprof .l1{stop-color:#b44dff} .dash.neon .dprof .l2{stop-color:#ff7a59}
.dash.neon .dprof .pg-l{stroke:url(#pgl) #c07bff;stroke-width:2.6;filter:drop-shadow(0 0 4px rgba(180,77,255,.6))}
.dash.neon .dprof .pg-a{fill:rgba(180,77,255,.16)}
.dash.neon .dprof .tip{background:#ff5fa8;color:#fff}
/* the hidden numbers take the whole row, unless Which way sits beside them */
.dash .facts,.dash .dir + .facts{grid-column:1/-1}
@media (max-width:720px){.dash .dir + .facts{grid-column:1/-1}}
@media (max-width:720px){.dash dl{grid-template-columns:repeat(2,minmax(0,1fr))} .dash dd b{font-size:14px} .dash dd small{font-size:11px}}