:root{--bg:#10141a;--panel:#fff;--muted:#777;--ink:#050505;--accent:#11182a}
*{box-sizing:border-box} body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.app{max-width:720px;margin:0 auto;min-height:100vh;background:#1a2228}.map-card{height:63vh;position:relative;background:#26333a;overflow:hidden}#map{height:100%;width:100%;filter:saturate(.82) contrast(.92)}.map-tools{position:absolute;left:14px;top:14px;z-index:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pill{border:0;background:rgba(19,27,35,.82);color:#fff;border-radius:18px;padding:9px 12px;font-weight: 400;box-shadow:0 3px 12px rgba(0,0,0,.25)}input[type=file]{display:none}.play,.speed-btn{position:absolute;bottom:25px;z-index:520;width:64px;height:64px;border-radius:17px;border:0;background:rgba(19,27,35,.68);color:#fff;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.28);backdrop-filter:blur(2px)}.play{right:16px;font-size:34px}.speed-btn{left:14px;font-size:23px;opacity:0;pointer-events:none;transition:opacity .12s ease}.speed-btn.show{opacity:1;pointer-events:auto}.timeline{--timeline-bg:linear-gradient(90deg,#19d9ff 0%,#10bb39 25%,#fff600 55%,#ff8b00 75%,#ff1717 100%);position:absolute;left:90px;right:90px;bottom:43px;z-index:530;width:calc(100% - 180px);height:22px;appearance:none;-webkit-appearance:none;background:var(--timeline-bg);border:2px solid #111;border-radius:2px;outline:none;cursor:pointer}.timeline::-webkit-slider-runnable-track{height:18px;background:transparent;border:0}.timeline::-moz-range-track{height:18px;background:transparent;border:0}.timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;border:4px solid #fff;background:#15e94f;box-shadow:0 1px 5px rgba(0,0,0,.55);margin-top:-3px}.timeline::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:4px solid #fff;background:#15e94f;box-shadow:0 1px 5px rgba(0,0,0,.55)}.sheet{min-height:37vh;background:var(--panel);border-radius:12px 12px 0 0;margin-top:-10px;position:relative;z-index:600;padding:2px 20px 18px}.handle{text-align:center;color:#bbb;font-size:40px;line-height:32px}.item{text-align:center}.value{font-size:30px;line-height:1.05;color:var(--ink);letter-spacing:.2px}.label{font-size:18px;color:var(--muted);line-height:1.05}.sub{font-size:15px;color:var(--muted)}#chart{margin-top:18px;width:100%;background:#fafafa;border-radius:14px;border:1px solid #eee}@media (max-width:520px){.app{max-width:none}.map-card{height:62vh}.value{font-size:27px}.label{font-size:16px}.sheet{padding-left:12px;padding-right:12px}.play,.speed-btn{width:58px;height:58px}.play{font-size:30px}.speed-btn{font-size:21px}.timeline{left:84px;right:86px;width:calc(100% - 170px)}}
.info-btn{position:absolute;right:14px;top:14px;z-index:560;width:38px;height:38px;border:0;border-radius:50%;background:rgba(19,27,35,.68);color:#fff;font-size:24px;font-weight:900;font-family:Georgia,serif;box-shadow:0 4px 16px rgba(0,0,0,.28);backdrop-filter:blur(2px)}.info-panel{position:absolute;left:118px;right:14px;top:62px;z-index:550;display:none;gap:8px;flex-direction:column;max-width:calc(100% - 132px)}.info-panel.show{display:flex}.file-name{color:#fff;background:rgba(19,27,35,.72);border-radius:14px;padding:8px 12px;font-size:14px;font-weight: 400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.diagnostics{color:#e8eef7;background:rgba(19,27,35,.76);border-radius:14px;padding:8px 12px;font-size:12px;font-weight:650;line-height:1.25}.diagnostics .warn{color:#ffd15a;font-weight:900}.drop-hint{position:absolute;inset:0;z-index:900;display:none;align-items:center;justify-content:center;background:rgba(8,13,20,.72);color:#fff;font-size:24px;font-weight:800;text-align:center;padding:24px}.drop-hint.show{display:flex}select.pill{appearance:none;max-width:150px}.side-select{width:96px;text-align:center;text-align-last:center;padding:9px 10px;border:2px solid rgba(255,255,255,.42)}

.side-tools{position:absolute;left:14px;top:14px;z-index:570;display:flex;flex-direction:column;gap:12px;align-items:center}.round-tool{width:54px;height:54px;border:0;border-radius:50%;background:rgba(19,27,35,.68);color:#fff;font-size:18px;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.28);backdrop-filter:blur(2px)}@media (max-width:520px){.round-tool{width:48px;height:48px;font-size:16px}.side-select{width:88px;font-size:13px}.side-tools{gap:10px}.info-panel{left:104px;right:10px;max-width:calc(100% - 114px)}}

.soc-item .value{margin-bottom:3px}.tmax-line{font-size:18px;line-height:1.05;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}.tmax-label{color:var(--muted);font:inherit}.tmax-value{font:inherit;font-weight:700}

.timeline-placeholder{position:absolute;left:92px;right:96px;bottom:22px;width:calc(100% - 188px);height:22px;border:2px solid #111;border-radius:2px;background:rgba(255,255,255,.92);color:#111;font-size:13px;font-weight:900;text-align:center;line-height:18px;cursor:pointer;z-index:505}.timeline-placeholder.hidden{display:none}.timeline.no-data{opacity:0;pointer-events:none}.clear-track-btn.show{display:block}@media (max-width:520px){.timeline-placeholder{left:84px;right:86px;width:calc(100% - 170px)}}

.rotate-reset{font-size:22px}

.playback-dot{box-sizing:border-box;border-radius:50%;background:#11e64f;border-style:solid;border-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.55);}

.play.csv-mode{font-size:20px;letter-spacing:.5px;}


.hidden-select{display:none}
.mode-tool{font-size:22px;line-height:1}
.mode-menu{position:absolute;left:62px;top:0;z-index:590;display:none;min-width:116px;padding:6px;border-radius:16px;background:rgba(19,27,35,.78);box-shadow:0 6px 22px rgba(0,0,0,.32);backdrop-filter:blur(3px)}
.mode-menu.show{display:flex;flex-direction:column;gap:4px}
.mode-menu button{border:0;border-radius:12px;background:rgba(255,255,255,.92);color:#111;padding:9px 11px;font-size:13px;font-weight:900;text-align:left;cursor:pointer}
.mode-menu button.active{background:#10172c;color:#fff}

.play.csv-mode{font-size:18px;letter-spacing:.4px}
@media (max-width:520px){.mode-menu{left:56px;min-width:108px}.mode-tool{font-size:20px}}

@media (max-width:520px){.tmax-line{font-size:16px}}
.info-btn{font-family:Arial,sans-serif;font-size:22px;line-height:38px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;background:rgba(19,27,35,.76);border-radius:14px;padding:8px 12px;font-size:13px;font-weight:800}
.setting-row input{width:72px;border:0;border-radius:10px;padding:7px 8px;font-size:15px;font-weight:900;text-align:center;background:#fff;color:#111}


.chart-toggle-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 12px;border-bottom:1px solid rgba(255,255,255,.09);overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chart-toggle-row::-webkit-scrollbar{height:5px}.chart-toggle-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.chart-toggle{flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 18px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.72);font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.16);transition:transform .12s ease,background .12s ease,opacity .12s ease,border-color .12s ease}
.chart-toggle:active{transform:translateY(1px)}
.chart-toggle.chart-speed.active{background:rgba(22,163,74,.18);border-color:#16a34a;color:#4ade80}
.chart-toggle.chart-power.active{background:rgba(255,149,0,.18);border-color:#ff9500;color:#ffb24a}
.chart-toggle.chart-temp.active{background:rgba(31,143,255,.18);border-color:#1f8fff;color:#55adff}
.chart-toggle:not(.active){opacity:.45;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.68)}
#chart{display:block;margin:0;width:100%;height:230px;background:transparent;border:0;border-radius:0}
@media (max-width:520px){.chart-toggle-row{gap:8px;padding:10px 10px}.chart-toggle{font-size:13px;padding:8px 14px}#chart{height:210px}.trip-chart-card{margin-top:14px;border-radius:16px}}


/* Chart buttons compact light style */
.chart-toggle-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  padding:8px 2px 4px;
  scrollbar-width:none;
}
.chart-toggle-row::-webkit-scrollbar{display:none;}

.chart-toggle{
  flex:0 0 auto;
  height:30px;
  padding:0 12px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight: 400;
}

.chart-toggle.active{
  color:#fff;
}

.chart-speed.active{background:#d84a4a;}
.chart-power.active{background:#f29a2e;}
.chart-temp.active{background:#2f8fff;}

/* Horizontal chart zoom controls */
.chart-zoom-btn{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:20px;
  line-height:28px;
  font-weight:800;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.chart-zoom-btn:active{transform:translateY(1px)}
.chart-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chart-scroll::-webkit-scrollbar{display:none;}
.chart-scroll::-webkit-scrollbar{height:5px}
.chart-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
#chart{min-width:100%;}


/* Final light chart style: the graph is part of the white statistics UI */

.chart-toggle-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:14px 14px 8px;
  border-bottom:0;
  background:#ffffff;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chart-toggle-row::-webkit-scrollbar{display:none;}
.chart-toggle{
  flex:0 0 auto;
  height:30px;
  padding:0 16px;
  border-radius:999px;
  background:#ffffff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  transition:transform .12s ease,background .12s ease,opacity .12s ease,border-color .12s ease;
}
.chart-toggle:active{transform:translateY(1px)}
.chart-toggle.chart-speed{border:1px solid #ff3b30;color:#ef4444;}
.chart-toggle.chart-power{border:1px solid #ff9500;color:#f59e0b;}
.chart-toggle.chart-temp{border:1px solid #1f8fff;color:#1f8fff;}
.chart-toggle.chart-speed.active{background:rgba(239,68,68,.08);border-color:#ef4444;color:#ef4444;}
.chart-toggle.chart-power.active{background:rgba(255,149,0,.09);border-color:#ff9500;color:#f59e0b;}
.chart-toggle.chart-temp.active{background:rgba(31,143,255,.08);border-color:#1f8fff;color:#1f8fff;}
.chart-toggle:not(.active){opacity:.42;background:#f8fafc;border-color:#d7dde6;color:#64748b;}
.chart-zoom-btn{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #d8dee7;
  background:#f8fafc;
  color:#0f172a;
  font-size:20px;
  line-height:26px;
  font-weight:900;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.chart-zoom-btn:active{transform:translateY(1px)}
.chart-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  scrollbar-color:#cbd5e1 transparent;
  background:#ffffff;
  padding:0 8px 12px;
}
.chart-scroll::-webkit-scrollbar{height:5px}
.chart-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
#chart{
  display:block;
  min-width:100%;
  width:100%;
  height:300px;
  margin:0;
  background:#ffffff;
  border:0;
  border-radius:0;
}
@media (max-width:520px){
  .trip-chart-card{margin-top:14px;border-radius:16px;}
  .chart-toggle-row{gap:7px;padding:12px 10px 6px;}
  .chart-toggle{height:28px;font-size:12px;padding:0 13px;}
  .chart-zoom-btn{width:28px;height:28px;font-size:19px;line-height:24px;}
  .chart-scroll{padding:0 6px 10px;}
  #chart{height:260px;}
}

/* Dynamic temperature sensor buttons */
.chart-toggle.chart-temp{border-color:var(--temp-color,#2563eb);color:var(--temp-color,#2563eb);}
.chart-toggle.chart-temp.active{background:color-mix(in srgb, var(--temp-color,#2563eb) 10%, #ffffff);border-color:var(--temp-color,#2563eb);color:var(--temp-color,#2563eb);}
.chart-scroll{scrollbar-width:none!important;-ms-overflow-style:none!important;}
.chart-scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}

/* Fix: temperature sensor buttons are horizontally scrollable and never wrap */
.trip-chart-card{min-width:0;}
.chart-toggle-row{
  max-width:100%;
  min-width:0;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  cursor:grab;
}
.chart-toggle-row:active{cursor:grabbing;}
.chart-toggle-row > *{flex:0 0 auto!important;}

/* Extra dynamic chart channels */
.chart-toggle.chart-extra{border-color:var(--extra-color,#64748b);color:var(--extra-color,#64748b);}
.chart-toggle.chart-extra.active{background:color-mix(in srgb, var(--extra-color,#64748b) 10%, #ffffff);border-color:var(--extra-color,#64748b);color:var(--extra-color,#64748b);}

.chart-zoom-btn:disabled,
.chart-zoom-btn.is-disabled{
  opacity:.38;
  color:#94a3b8;
  border-color:#d7dde6;
  background:#f1f5f9;
  box-shadow:none;
  cursor:default;
  pointer-events:none;
}


.chart-zoom-btn{
  border:1px solid #c8cdd4;
  background:#e5e7eb;
  color:#111827;
  box-shadow:none;
}
.chart-zoom-btn.is-disabled,
.chart-zoom-btn:disabled{
  background:#f1f3f5;
  border-color:#d9dde3;
  color:#c2c7cf;
  cursor:default;
  opacity:1;
}

/* Visible draggable scrollbar for the chart button menu */
.chart-toggle-row{
  scrollbar-width:thin!important;
  scrollbar-color:#cbd5e1 transparent!important;
  padding-bottom:10px!important;
}
.chart-toggle-row::-webkit-scrollbar{
  display:block!important;
  height:8px!important;
}
.chart-toggle-row::-webkit-scrollbar-track{
  background:transparent!important;
}
.chart-toggle-row::-webkit-scrollbar-thumb{
  background:#cbd5e1!important;
  border-radius:999px!important;
  border:2px solid #ffffff!important;
}
.chart-toggle-row::-webkit-scrollbar-thumb:hover{
  background:#94a3b8!important;
}

/* Bottom graph tabs: Main Graph / Cell Graph / Cell Info */
.graph-panel{display:none;padding:12px 12px 0px}.graph-panel.active{display:block}.cell-info-summary{margin:2px 0 12px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e5e7eb;color:#334155;font-size:13px;font-weight:800}.cell-info-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;align-content:flex-start}.cell-card{position:relative;width:auto;height:52px;min-height:52px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;overflow:hidden;padding:6px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.cell-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);background:rgba(37,99,235,.12);z-index:0}.cell-card>*{position:relative;z-index:1}.cell-card.min{border-color:#ef4444;background:#fff5f5}.cell-card.min::before{background:rgba(239,68,68,.14)}.cell-card.max{border-color:#22c55e;background:#f0fdf4}.cell-card.max::before{background:rgba(34,197,94,.14)}.cell-name{font-size:10px;font-weight:900;color:#64748b}.cell-value{margin-top:1px;font-size:15px;font-weight:900;color:#111827}.cell-role{font-size:11px;font-weight:900;text-transform:uppercase}.cell-card.min .cell-role{color:#dc2626}.cell-card.max .cell-role{color:#16a34a}.cell-toggle-row{margin-bottom:8px}.cell-graph-toggle[data-cell-chart="avg"].active{background:#7c3aed;color:#fff;border-color:#7c3aed}.cell-graph-toggle[data-cell-chart="delta"].active{background:#eab308;color:#111827;border-color:#eab308}.cell-graph-toggle.cell-line.active{background:var(--cell-color,#64748b);color:#fff;border-color:var(--cell-color,#64748b)}#cellChart{margin-top:10px;width:100%;background:#fafafa;border-radius:14px;border:1px solid #eee}@media (max-width:520px){.graph-panel{padding:10px 8px 8px}.cell-info-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.cell-value{font-size:16px}}

/* Stable height for bottom graph tabs so the page does not jump between Main Graph / Cell Graph / Cell Info */
.trip-chart-card{
  --graph-content-height: 306px;
}
.graph-panel{
  height: var(--graph-content-height);
  box-sizing: border-box;
  overflow: hidden;
}
.graph-panel.active{
  display: flex;
  flex-direction: column;
}
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  flex: 1 1 auto;
  min-height: 0;
}
#chart,
#cellChart{
  height: 230px;
  max-height: 230px;
}
#cellInfoPanel{
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#cellInfoPanel::-webkit-scrollbar{ width: 8px; }
#cellInfoPanel::-webkit-scrollbar-track{ background: transparent; }
#cellInfoPanel::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 999px; }
.cell-graph-toggle.cell-line.active{
  background: var(--cell-color,#94a3b8) !important;
  color:#fff;
  border-color: var(--cell-color,#94a3b8) !important;
}
.cell-graph-toggle.cell-line:not(.active){
  color:#475569;
}
.cell-graph-toggle.cell-line.cell-min{ --cell-color:#ef4444; }
.cell-graph-toggle.cell-line.cell-max{ --cell-color:#16a34a; }
@media (max-width:520px){
  .trip-chart-card{ --graph-content-height: 300px; }
  #chart,
  #cellChart{ height: 230px; max-height: 230px; }
}


/* Cell Graph follows the global timeline cursor automatically.
   Manual horizontal dragging/scrolling of the graph area is disabled. */
#cellChartScroll{
  overflow-x:hidden !important;
  touch-action:pan-y;
}
#cellChartScroll canvas{
  pointer-events:none;
}


/* Cell Info v2: horizontal cell bars, compact min/max badge and scrollable cell filters */
.cell-info-toggle-row{
  margin:2px 0 10px;
  padding-bottom:8px;
  flex:0 0 auto;
}
.cell-info-toggle.active{
  background:#e5e7eb;
  border-color:#cbd5e1;
  color:#111827;
}
.cell-info-toggle:not(.active){
  background:#f8fafc;
  border-color:#e5e7eb;
  color:#94a3b8;
}
.cell-info-empty-label{
  padding:7px 10px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.cell-info-grid{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:2px;
}
.cell-card{
  height:52px;
  min-height:52px;
  max-height:52px;
  padding:6px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.cell-card::before{
  left:0;
  right:auto;
  top:0;
  bottom:0;
  width:var(--fill,0%);
  height:auto;
}
.cell-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:12px;
  white-space:nowrap;
  width:100%;
}
.cell-role-inline{
  font-size:8px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.cell-role-inline.min{ color:#dc2626; }
.cell-role-inline.max{ color:#16a34a; }
.cell-value{
  margin-top:2px;
  text-align:center;
}
.cell-empty{
  grid-column:1 / -1;
  align-self:center;
  justify-self:center;
  color:#64748b;
  font-size:13px;
  font-weight:800;
  padding:28px 8px;
}

/* Fix Cell Info toggles: scroll row must not steal button toggles. */
.cell-info-toggle-row{
  cursor: default;
  -webkit-overflow-scrolling: touch;
}
.cell-info-toggle{
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.cell-info-toggle-row.dragging .cell-info-toggle{
  pointer-events: none;
}

/* Tap-to-show horizontal zoom panel centered under the graph */
.graph-zoom-host{
  position:relative;
}
.chart-zoom-overlay{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:8px;
  transform:translateX(-50%) translateY(6px) scale(.98);
  z-index:8;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:7px 10px;
  min-width:132px;
  border:1px solid #dbe2ea;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  backdrop-filter:blur(8px);
}
.chart-zoom-overlay.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.chart-zoom-overlay .chart-zoom-btn{
  width:32px;
  height:32px;
  flex:0 0 32px;
  padding:0;
  line-height:28px;
}
.chart-zoom-label{
  min-width:34px;
  text-align:center;
  font-size:13px;
  line-height:1;
  font-weight:900;
  color:#111827;
  user-select:none;
}
@media (max-width:520px){
  .chart-zoom-overlay{bottom:7px;padding:6px 9px;gap:10px;min-width:124px;}
  .chart-zoom-overlay .chart-zoom-btn{width:30px;height:30px;flex-basis:30px;line-height:26px;}
  .chart-zoom-label{font-size:12px;min-width:30px;}
}


/* Unified toolbar layout for Main Graph / Cell Graph / Cell Info.
   Keeps all toggle rows on the same vertical line and prevents UI jumping. */
.graph-panel > .chart-toggle-row{
  flex:0 0 48px !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:8px 12px 10px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  border-bottom:0 !important;
  background:#ffffff !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
}
.graph-panel > .chart-toggle-row .chart-toggle{
  height:30px !important;
  min-height:30px !important;
  line-height:28px !important;
  padding:0 14px !important;
  font-size:12px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}
.graph-panel > .chart-toggle-row .cell-graph-toggle,
.graph-panel > .chart-toggle-row .cell-info-toggle{
  min-width:64px !important;
}
.graph-panel > .chart-toggle-row .chart-speed,
.graph-panel > .chart-toggle-row .chart-power,
.graph-panel > .chart-toggle-row .chart-extra{
  min-width:74px !important;
}
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  margin-top:0 !important;
}
#chart,
#cellChart{
  margin-top:0 !important;
}
#cellInfoPanel .cell-info-grid{
  margin-top:0 !important;
}
@media (max-width:520px){
  .graph-panel > .chart-toggle-row{
    flex-basis:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    padding:8px 8px 9px !important;
    gap:7px !important;
  }
  .graph-panel > .chart-toggle-row .chart-toggle{
    height:28px !important;
    min-height:28px !important;
    line-height:26px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }
  .graph-panel > .chart-toggle-row .cell-graph-toggle,
  .graph-panel > .chart-toggle-row .cell-info-toggle{
    min-width:60px !important;
  }
}

/* Cell Graph visual standardization: make it look like Main Graph.
   Remove the extra canvas card/frame so both canvases sit directly on the same white graph surface. */
#cellGraphPanel #cellChart{
  display:block !important;
  /* The GraphViewport sets an explicit pixel width for the full timeline.
     Do not force the Cell Graph back to 100%, otherwise the complete track is
     compressed into the viewport and a four-minute window becomes a stripe. */
  width:auto;
  min-width:0;
  flex:0 0 auto !important;
  height:230px !important;
  max-height:230px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#cellGraphPanel #cellChartScroll{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width:520px){
  #cellGraphPanel #cellChart{
    height:230px !important;
    max-height:230px !important;
  }
}

/* Final toolbar alignment fix: all tab control rows use the same box and coordinates. */
.trip-chart-card{
  --tab-toolbar-h:48px;
}
.graph-panel{
  padding:0 !important;
  height:var(--graph-content-height) !important;
  min-height:var(--graph-content-height) !important;
  max-height:var(--graph-content-height) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.graph-panel > .chart-toggle-row,
#mainGraphPanel > .chart-toggle-row,
#cellGraphPanel > .chart-toggle-row,
#cellInfoPanel > .chart-toggle-row{
  box-sizing:border-box !important;
  width:100% !important;
  flex:0 0 var(--tab-toolbar-h) !important;
  height:var(--tab-toolbar-h) !important;
  min-height:var(--tab-toolbar-h) !important;
  max-height:var(--tab-toolbar-h) !important;
  margin:0 !important;
  padding:8px 12px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  background:#fff !important;
  border:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  scrollbar-width:thin !important;
  scrollbar-color:#cbd5e1 transparent !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar{
  height:5px !important;
  display:block !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar-track,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar-track,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar-track,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar-track{
  background:transparent !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar-thumb,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar-thumb,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar-thumb,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar-thumb{
  background:#cbd5e1 !important;
  border-radius:999px !important;
}
.graph-panel > .chart-toggle-row .chart-toggle,
#mainGraphPanel > .chart-toggle-row .chart-toggle,
#cellGraphPanel > .chart-toggle-row .chart-toggle,
#cellInfoPanel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  height:30px !important;
  min-height:30px !important;
  line-height:28px !important;
  padding:0 14px !important;
  margin:0 !important;
  font-size:12px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#cellInfoPanel{
  overflow:hidden !important;
}
#cellInfoPanel .cell-info-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  margin:0 !important;
  padding:0 12px 8px !important;
  box-sizing:border-box !important;
}
@media (max-width:520px){
  .trip-chart-card{--tab-toolbar-h:46px;}
  .graph-panel > .chart-toggle-row,
  #mainGraphPanel > .chart-toggle-row,
  #cellGraphPanel > .chart-toggle-row,
  #cellInfoPanel > .chart-toggle-row{
    padding:8px 8px 9px !important;
    gap:7px !important;
  }
  .graph-panel > .chart-toggle-row .chart-toggle,
  #mainGraphPanel > .chart-toggle-row .chart-toggle,
  #cellGraphPanel > .chart-toggle-row .chart-toggle,
  #cellInfoPanel > .chart-toggle-row .chart-toggle{
    height:28px !important;
    min-height:28px !important;
    line-height:26px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }
  #cellInfoPanel .cell-info-grid{padding:0 8px 8px !important;}
}

/* Fixed zoom controls: keep zoom buttons outside the scrollable canvas.
   They stay centered below the graph, at the x-axis labels level, and never move with chart autoscroll. */
.graph-panel > .chart-zoom-overlay{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:6 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  min-width:132px !important;
  height:42px !important;
  margin:-2px auto 10px !important;
  padding:5px 10px !important;
  gap:12px !important;
  border:1px solid #dbe2ea !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.14) !important;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease !important;
  backdrop-filter:blur(8px);
}
.graph-panel > .chart-zoom-overlay.show{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}
.graph-panel > .chart-zoom-overlay .chart-zoom-btn{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  padding:0 !important;
  line-height:28px !important;
}
.graph-panel > .chart-zoom-overlay .chart-zoom-label{
  min-width:34px !important;
  text-align:center !important;
}
@media (max-width:520px){
  .graph-panel > .chart-zoom-overlay{
    height:40px !important;
    min-width:124px !important;
    margin:-1px auto 9px !important;
    padding:5px 9px !important;
    gap:10px !important;
  }
  .graph-panel > .chart-zoom-overlay .chart-zoom-btn{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    line-height:26px !important;
  }
}

/* Zoom controls fixed inside the graph area (bottom-center), independent from chart scrolling. */
#mainGraphPanel,
#cellGraphPanel{
  position:relative !important;
}
#mainGraphPanel > .chart-scroll,
#cellGraphPanel > .chart-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
#mainGraphPanel > .chart-zoom-overlay,
#cellGraphPanel > .chart-zoom-overlay{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:34px !important;
  transform:translateX(-50%) translateY(6px) scale(.98) !important;
  z-index:30 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  min-width:132px !important;
  height:42px !important;
  margin:0 !important;
  padding:5px 10px !important;
  gap:12px !important;
  border:1px solid #dbe2ea !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.14) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .16s ease, transform .16s ease !important;
  backdrop-filter:blur(8px) !important;
}
#mainGraphPanel > .chart-zoom-overlay.show,
#cellGraphPanel > .chart-zoom-overlay.show{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}
#mainGraphPanel > .chart-zoom-overlay .chart-zoom-btn,
#cellGraphPanel > .chart-zoom-overlay .chart-zoom-btn{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  padding:0 !important;
  line-height:28px !important;
}
#mainGraphPanel > .chart-zoom-overlay .chart-zoom-label,
#cellGraphPanel > .chart-zoom-overlay .chart-zoom-label{
  min-width:34px !important;
  text-align:center !important;
}
@media (max-width:520px){
  #mainGraphPanel > .chart-zoom-overlay,
  #cellGraphPanel > .chart-zoom-overlay{
    bottom:30px !important;
    height:40px !important;
    min-width:124px !important;
    padding:5px 9px !important;
    gap:10px !important;
  }
  #mainGraphPanel > .chart-zoom-overlay .chart-zoom-btn,
  #cellGraphPanel > .chart-zoom-overlay .chart-zoom-btn{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    line-height:26px !important;
  }
}


/* Expand graph area to use available vertical space */
.trip-chart-card{
  --graph-content-height: 390px !important;
}
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  flex:1 1 auto !important;
  height:auto !important;
}
#chart,
#cellChart{
  height:100% !important;
  min-height:320px !important;
}
.graph-panel{
  padding-top:4px !important;
  padding-bottom:0 !important;
}


/* Fix button: keep graph parameter buttons visible while zoomed.
   When Fix is off and graph is zoomed, only Fix remains visible so the user can restore controls. */
.chart-toggle.chart-fix{
  border-color:#94a3b8;
  color:#334155;
  background:#eef2f7;
  min-width:54px;
  text-transform:uppercase;
}
.chart-toggle.chart-fix.active{
  background:#dbeafe;
  border-color:#2563eb;
  color:#1d4ed8;
}
.chart-toggle-row.graph-toggles-collapsed .chart-toggle:not(.chart-fix){
  display:none!important;
}
.chart-toggle-row.graph-toggles-collapsed{
  justify-content:flex-start;
}

/* FIX button grey states only */
.chart-toggle.chart-fix{
  background:#f1f5f9!important;
  border-color:#cbd5e1!important;
  color:#64748b!important;
}
.chart-toggle.chart-fix.active{
  background:#e2e8f0!important;
  border-color:#94a3b8!important;
  color:#111827!important;
}
.chart-toggle.chart-fix:not(.active){
  opacity:1!important;
}
.cell-info-empty-label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}


/* Center empty state consistently in Cell Graph and Cell Info */
.cell-empty,
.cell-info-empty-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:220px;
  text-align:center;
}

.chart-toggle.chart-extra.active{background:color-mix(in srgb, var(--extra-color) 18%, transparent);border-color:var(--extra-color);color:var(--extra-color)}
.chart-toggle.cell-channel.active,.chart-toggle.cell-special.active{background:color-mix(in srgb, var(--cell-color) 18%, transparent);border-color:var(--cell-color);color:var(--cell-color)}


/* BMSDock final graph color sync */
.chart-toggle.chart-speed{border-color:#16a34a!important;color:#16a34a!important;}
.chart-toggle.chart-speed.active{background:color-mix(in srgb, #16a34a 18%, transparent)!important;border-color:#16a34a!important;color:#16a34a!important;}
.chart-toggle.chart-power{border-color:#ff9500!important;color:#ff9500!important;}
.chart-toggle.chart-power.active{background:color-mix(in srgb, #ff9500 18%, transparent)!important;border-color:#ff9500!important;color:#ff9500!important;}
.chart-toggle.chart-extra{border-color:var(--extra-color,#64748b)!important;color:var(--extra-color,#64748b)!important;}
.chart-toggle.chart-extra.active{background:color-mix(in srgb, var(--extra-color,#64748b) 18%, transparent)!important;border-color:var(--extra-color,#64748b)!important;color:var(--extra-color,#64748b)!important;}
.chart-toggle.chart-temp{border-color:var(--temp-color,#2563eb)!important;color:var(--temp-color,#2563eb)!important;}
.chart-toggle.chart-temp.active{background:color-mix(in srgb, var(--temp-color,#2563eb) 18%, transparent)!important;border-color:var(--temp-color,#2563eb)!important;color:var(--temp-color,#2563eb)!important;}
.cell-graph-toggle.cell-special{border-color:var(--cell-color,#64748b)!important;color:var(--cell-color,#64748b)!important;}
.cell-graph-toggle.cell-special.active{background:color-mix(in srgb, var(--cell-color,#64748b) 18%, transparent)!important;border-color:var(--cell-color,#64748b)!important;color:var(--cell-color,#64748b)!important;}
.cell-graph-toggle.cell-line.active{background:color-mix(in srgb, var(--cell-color,#94a3b8) 18%, transparent)!important;border-color:var(--cell-color,#94a3b8)!important;color:var(--cell-color,#94a3b8)!important;}

/* Final Cell Info colors: keep fonts, color text by cell state. */
.cell-card{
  color:#2563a8;
}
.cell-card .cell-name,
.cell-card .cell-role-inline{
  color:#3b6fae;
}
.cell-card .cell-value{
  color:#1e4f91;
}
.cell-card.max{
  border-color:#22c55e;
  background:#f0fdf4;
}
.cell-card.max::before{
  background:rgba(34,197,94,.18);
}
.cell-card.max .cell-name,
.cell-card.max .cell-role-inline{
  color:#2f8f4a;
}
.cell-card.max .cell-value{
  color:#145a32;
}
.cell-card.min{
  border-color:#ef4444;
  background:#fff5f5;
}
.cell-card.min::before{
  background:rgba(239,68,68,.18);
}
.cell-card.min .cell-name,
.cell-card.min .cell-role-inline{
  color:#c44545;
}
.cell-card.min .cell-value{
  color:#7a1f1f;
}

/* Stable empty state for Cell Graph / Cell Info: the warning stays in one visual position when switching tabs. */
.cell-empty-toolbar-spacer{
  flex:0 0 auto;
  width:1px;
  height:28px;
  visibility:hidden;
  pointer-events:none;
}
.cell-info-grid.cell-info-grid-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  height:230px;
  min-height:230px;
  max-height:230px;
  overflow:hidden;
  padding-right:0;
}
.cell-info-grid.cell-info-grid-empty .cell-empty{
  grid-column:auto;
  align-self:auto;
  justify-self:auto;
  padding:0 8px;
  width:100%;
  text-align:center;
}
@media (max-width:520px){
  .cell-info-grid.cell-info-grid-empty{height:230px;min-height:230px;max-height:230px;}
}


/* Final fix: identical empty-state position in Cell Graph and Cell Info.
   Both tabs keep the same toolbar height and center the warning in the same content area. */
#cellInfoPanel .cell-info-grid.cell-info-grid-empty{
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
}
#cellInfoPanel .cell-info-grid.cell-info-grid-empty .cell-empty{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#cellGraphPanel #cellChartScroll,
#cellInfoPanel .cell-info-grid.cell-info-grid-empty{
  flex:1 1 auto !important;
}


/* FINAL stable empty-state position for Cell Graph and Cell Info.
   Same text, same font, same punctuation, same content-box center. */
#cellChartScroll{
  position:relative !important;
}
#cellGraphEmpty.cell-empty-fixed,
#cellInfoPanel .cell-info-grid.cell-info-grid-empty .cell-empty-fixed{
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#64748b !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}
#cellGraphEmpty.cell-empty-fixed{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
}
#cellGraphEmpty.cell-empty-fixed[hidden]{
  display:none !important;
}
#cellInfoPanel .cell-info-grid.cell-info-grid-empty{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
  padding:0 !important;
}
#cellInfoPanel .cell-info-grid.cell-info-grid-empty .cell-empty-fixed{
  flex:1 1 auto !important;
}

/* Final UI polish: prevent accidental browser text selection while tapping/dragging graph controls.
   This removes blue text highlights on empty-state labels and +/- zoom buttons. */
html,
body,
.app,
.sheet,
.trip-chart-card,
.graph-panel,
.chart-scroll,
.chart-toggle-row,
.chart-toggle,
.chart-zoom-overlay,
.chart-zoom-overlay *,
.chart-zoom-btn,
.chart-zoom-label,
.cell-empty,
.cell-empty-fixed,
.cell-info-empty-label,
.stat-tabs,
.stat-tab,
button{
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
input,
textarea,
select{
  -webkit-user-select:text !important;
  -moz-user-select:text !important;
  -ms-user-select:text !important;
  user-select:text !important;
}
::selection{background:transparent;}
::-moz-selection{background:transparent;}


/* Final: collapsible stats table handle between map and table */


/* Final: make the collapse arrow a built-in part of the stats table slot. */


/* Ride link loading overlay: spinner in the center of the map + simple blue bar at the lower map edge. */
.ride-loading-overlay{position:absolute;inset:0;z-index:540;pointer-events:none;opacity:0;transition:opacity .18s ease;}
.ride-loading-overlay.show{opacity:1;}
.ride-loading-spinner{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:5px solid rgba(255,255,255,.72);border-top-color:#22c7ff;filter:drop-shadow(0 3px 10px rgba(0,0,0,.28));animation:rideSpin .82s linear infinite;}
.ride-loading-bar{position:absolute;left:90px;right:90px;bottom:43px;height:22px;border:2px solid #111;border-radius:2px;background:rgba(255,255,255,.92);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.22);}
.ride-loading-bar span{display:block;width:0;height:100%;background:#22c7ff;transition:width .18s ease;}
@keyframes rideSpin{to{transform:rotate(360deg)}}
@media (max-width:520px){.ride-loading-bar{left:84px;right:86px;}}


/* Donate prototype */


.donate-heart{
  width:58px;
  height:58px;
  margin:0 auto 10px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff1f4;
  color:#ef476f;
  font-size:35px;
  box-shadow:inset 0 0 0 1px rgba(239,71,111,.18);
}

.donate-text{
  margin:0 0 16px;
  color:#64748b;
  font-size:14px;
}


.donate-payment-actions{
  margin-top:4px;
}
.donate-divider{
  height:1px;
  width:100%;
  margin:16px 0 10px;
  background:linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.donate-contact-title{
  margin:0 0 10px;
  color:#94a3b8;
  font-size:13px;
  font-weight: 400;
}

.donate-stub{
  margin:14px 0 0;
  color:#94a3b8;
  font-size:13px;
}


/* Map control sizing + donate button */
.side-tools .round-tool,
.right-tools .round-tool{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

.side-tools{
  gap:12px !important;
}

.right-tools{
  position:absolute;
  top:18px;
  right:18px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.right-tools #infoBtn{
  position:static !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
}


#donateBtn span{
  display:block;
  font-size:36px;
  line-height:1;
  transform:translateY(-1px);
  font-weight: 400;
}


#donateModal{
  pointer-events:auto !important;
}

/* Final UI fix */
.side-tools .round-tool,
#infoBtn,
#donateBtn{
 width:44px!important;
 height:44px!important;
 min-width:44px!important;
 min-height:44px!important;
 border-radius:50%!important;
}


#donateBtn span{
 font-size:28px!important;
 line-height:1!important;
}


.settings-row{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.settings-item,#clearTrackBtnSettings,#shareTrackBtnSettings,#refreshMotorList{border:1px solid #e2e8f0;border-radius:14px;padding:10px;background:#f8fafc}
#motorPreset,#motorPoles{border:1px solid #e2e8f0;border-radius:12px;padding:8px}


/* Settings panel redesign */
.settings-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.settings-panel-close{
  flex:0 0 auto;
  width:34px;
  height:16px;
  border:0;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.track-info-section summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.track-info-section summary::-webkit-details-marker{display:none}
.track-info-section summary::after{
  content:"⌄";
  position:absolute;
  right:32px;
  margin-top:2px;
  color:#94a3b8;
  font-weight:900;
}
.track-info-section[open] summary::after{content:"⌃"}


.settings-diagnostics{
  margin-top:10px;
  color:#334155 !important;
  background:#fff !important;
  border:1px solid #e2e8f0;
  border-radius:14px !important;
  padding:10px 12px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  max-height:165px;
  overflow:auto;
}

.performance-settings-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.performance-setting-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.settings-switch{
  flex:0 0 auto;
  position:relative;
  width:50px;
  height:30px;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.settings-switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.settings-switch-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#cbd5e1;
  box-shadow:inset 0 1px 3px rgba(15,23,42,.18);
  transition:background .18s ease;
}
.settings-switch-slider::before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.22);
  transition:transform .18s ease;
}
.settings-switch input:checked + .settings-switch-slider{
  background:#16a34a;
}
.settings-switch input:checked + .settings-switch-slider::before{
  transform:translateX(20px);
}
.settings-switch input:focus-visible + .settings-switch-slider{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.motor-settings-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.motor-settings-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 78px 44px;
  gap:8px;
  align-items:center;
}
.settings-select,
.settings-input{
  min-height:42px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:800;
  padding:0 10px;
  box-sizing:border-box;
}
.settings-input{
  text-align:center;
}

.settings-hint{
  color:#94a3b8;
  font-size:12px;
  font-weight:750;
}
.clear-track-btn.settings-action{
  display:block !important;
  width:100%;
  min-height:46px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#f8fafc;
  color:#111827;
  padding:0 14px;
  font-size:15px;
  font-weight:900;
  text-align:center;
  box-shadow:none;
}
.clear-track-btn.settings-action.danger{
  color:#dc2626;
  background:#fff7f7;
  border-color:#fecaca;
}
.settings-build-label{
  width:100%;
  margin-top:-5px;
  color:#94a3b8;
  font-size:11px;
  font-weight: 400;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:520px){
  .motor-settings-grid{
    grid-template-columns:1fr 72px 42px;
  }
}


/* Settings as full-screen popup overlay */


/* Blur background when settings popup is open */
/* Settings overlay identical to donate modal */
/* Map layer menu */
.layers-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.layer-menu{position:absolute;left:62px;top:132px;z-index:590;display:none;min-width:146px;padding:6px;border-radius:16px;background:rgba(19,27,35,.78);backdrop-filter:blur(3px)}
.layer-menu.show{display:flex;flex-direction:column;gap:4px}
.layer-menu button{border:0;border-radius:12px;background:#fff;padding:9px 11px;font-weight: 400;text-align:left}
.layer-menu button.active{background:#10172c;color:#fff}

.layer-menu button.active{background:#10172c!important;color:#fff!important}
.layer-menu button.active::after{content:"✓";float:right;margin-left:14px;font-weight:900}


/* Unified lighter transparent buttons */
.side-tools .round-tool,
.right-tools .round-tool,
#infoBtn,


.side-tools .round-tool.active,
.right-tools .round-tool.active,
#infoBtn.active,


/* Cell Info compact cards + rounded main progress bar */
.cell-info-grid{
  gap:4px !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}

.cell-card{
  height:48px !important;
  min-height:48px !important;
  padding:4px 4px !important;
  border-radius:11px !important;
}

.cell-name{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  font-size:9px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

.cell-name span:first-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

.cell-role-inline,
.cell-role{
  font-size:8px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  margin-left:1px !important;
  flex:0 0 auto !important;
}

.cell-value{
  margin-top:1px !important;
  font-size:16px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

.timeline{
  border-radius:999px !important;
  overflow:visible !important;
}

.timeline::-webkit-slider-runnable-track{
  border-radius:999px !important;
}

.timeline::-moz-range-track{
  border-radius:999px !important;
}


/* Main progress bar capsule without clipping thumb */
.timeline{
  border-radius:999px !important;
  border:1px solid #111 !important;
  overflow:visible !important;
  background-clip:padding-box !important;
}

.timeline::-webkit-slider-runnable-track{
  height:18px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:transparent !important;
}

.timeline::-moz-range-track{
  height:18px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:transparent !important;
}

.timeline::-webkit-slider-thumb{
  position:relative !important;
  z-index:2 !important;
  margin-top:-4px !important;
}

.timeline::-moz-range-thumb{
  position:relative !important;
  z-index:2 !important;
}


/* Cell Info denser rectangular mobile cards */
.cell-info-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  column-gap:2px !important;
  row-gap:7px !important;
}

.cell-card{
  height:42px !important;
  min-height:42px !important;
  padding:3px 2px !important;
  border-radius:10px !important;
}

.cell-name{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  font-size:8px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

.cell-name span:first-child{
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.cell-role-inline,
.cell-role{
  font-size:7px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.2px !important;
  margin-left:1px !important;
  flex:0 0 auto !important;
}

.cell-value{
  margin-top:1px !important;
  font-size:16px !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
}

@media (max-width:520px){
  .cell-info-grid{
    column-gap:2px !important;
    row-gap:7px !important;
  }
  .cell-card{
    height:42px !important;
    min-height:42px !important;
    padding-left:1px !important;
    padding-right:1px !important;
  }
  .cell-value{
    font-size:15px !important;
  }
}


/* Timeline custom thumb overlay: native thumb hidden, visual thumb is drawn above the bar */
.timeline{
  height:34px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0 !important;
}

.timeline::-webkit-slider-runnable-track{
  height:22px !important;
  background:var(--timeline-bg) !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.timeline::-moz-range-track{
  height:22px !important;
  background:var(--timeline-bg) !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}

.timeline::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:34px !important;
  height:34px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
  margin-top:-6px !important;
}

.timeline::-moz-range-thumb{
  width:34px !important;
  height:34px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
}

.timeline-thumb-overlay{
  position:absolute;
  width:32px;
  height:32px;
  border-radius:50%;
  border:5px solid #fff;
  background:#15e94f;
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:545;
  box-sizing:border-box;
}

/* FINAL: graph touch/zoom scrolling fixes.
   The graphs use custom pointer handling, so mobile browsers must not wait for
   native horizontal scroll/click heuristics. Cell Graph must be horizontally
   draggable just like Main Graph. */
#chartScroll,
#cellChartScroll,
.chart-scroll{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y !important;
  overscroll-behavior-x:contain;
  user-select:none;
}
#chartScroll canvas,
#cellChartScroll canvas{
  pointer-events:auto !important;
  touch-action:pan-y !important;
}
#chartScroll.graph-dragging,
#cellChartScroll.graph-dragging{
  cursor:grabbing;
}

/* FINAL BMSDock top timeline fix (2026-06-18)
   Timeline is vertically centered with side buttons.
   The visual thumb stays inside the progress bar: its left edge aligns with the
   bar start at 0%, and its right edge aligns with the bar end at 100%. */
.timeline{
  bottom:40px !important;
  height:34px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.timeline::-webkit-slider-runnable-track{
  height:22px !important;
  background:var(--timeline-bg) !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.timeline::-moz-range-track{
  height:22px !important;
  background:var(--timeline-bg) !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}
.timeline::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:34px !important;
  height:34px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
  margin-top:-6px !important;
}
.timeline::-moz-range-thumb{
  width:34px !important;
  height:34px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
}
.timeline-thumb-overlay{
  position:absolute !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  border:5px solid #fff !important;
  background:#15e94f !important;
  box-shadow:0 2px 8px rgba(0,0,0,.55) !important;
  transform:translate(0,-50%) !important;
  pointer-events:none !important;
  z-index:545 !important;
  box-sizing:border-box !important;
}
@media (max-width:520px){
  .timeline{bottom:37px !important;}
}

/* FINAL 2026-06-18: vertical chart zoom controls on the right side.
   Keep the existing zoom logic and button IDs; only change layout/position.
   DOM order is: minus, label, plus. column-reverse renders it as: plus, label, minus. */
#mainGraphPanel > .chart-zoom-overlay,
#cellGraphPanel > .chart-zoom-overlay{
  position:absolute !important;
  left:auto !important;
  right:10px !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) translateX(8px) scale(.98) !important;
  z-index:30 !important;
  display:flex !important;
  flex-direction:column-reverse !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  min-width:44px !important;
  height:auto !important;
  min-height:126px !important;
  margin:0 !important;
  padding:7px 5px !important;
  gap:9px !important;
  border:1px solid #dbe2ea !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.16) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .16s ease, transform .16s ease !important;
  backdrop-filter:blur(8px) !important;
}
#mainGraphPanel > .chart-zoom-overlay.show,
#cellGraphPanel > .chart-zoom-overlay.show{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(-50%) translateX(0) scale(1) !important;
}
#mainGraphPanel > .chart-zoom-overlay .chart-zoom-btn,
#cellGraphPanel > .chart-zoom-overlay .chart-zoom-btn{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  padding:0 !important;
  line-height:28px !important;
}
#mainGraphPanel > .chart-zoom-overlay .chart-zoom-label,
#cellGraphPanel > .chart-zoom-overlay .chart-zoom-label{
  min-width:32px !important;
  width:32px !important;
  text-align:center !important;
  font-size:12px !important;
  line-height:16px !important;
}
@media (max-width:520px){
  #mainGraphPanel > .chart-zoom-overlay,
  #cellGraphPanel > .chart-zoom-overlay{
    right:7px !important;
    width:40px !important;
    min-width:40px !important;
    min-height:116px !important;
    padding:6px 4px !important;
    gap:8px !important;
  }
  #mainGraphPanel > .chart-zoom-overlay .chart-zoom-btn,
  #cellGraphPanel > .chart-zoom-overlay .chart-zoom-btn{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    line-height:26px !important;
  }
  #mainGraphPanel > .chart-zoom-overlay .chart-zoom-label,
  #cellGraphPanel > .chart-zoom-overlay .chart-zoom-label{
    width:30px !important;
    min-width:30px !important;
    font-size:12px !important;
  }
}


/* BMSDock welcome / demo launcher */


/* Final fix: stable stats collapse handle size and centered rotating arrow */
.stats-card .stats-collapse-handle,
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 0 6px 0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

.stats-card .stats-collapse-arrow,
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  width:32px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}


@media (max-width:520px){
  .stats-card .stats-collapse-handle,
  .sheet.stats-collapsed .stats-card .stats-collapse-handle{
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
  }
  .stats-card .stats-collapse-arrow,
  .sheet.stats-collapsed .stats-card .stats-collapse-arrow{
    width:32px !important;
    height:32px !important;
    font-size:28px !important;
  }
}

/* Final BMSDock stats arrow: compact centered built-in button, stable size */

.stats-card .stats-collapse-handle,
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  transform:translate(-50%,-50%) !important;
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d7dde6 !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  color:#94a3b8 !important;
  box-shadow:0 3px 10px rgba(15,23,42,.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  overflow:hidden !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  z-index:3 !important;
}
.stats-card .stats-collapse-handle:active,
.sheet.stats-collapsed .stats-card .stats-collapse-handle:active{
  background:#eef2f7 !important;
}
.stats-card .stats-collapse-handle:focus,
.sheet.stats-collapsed .stats-card .stats-collapse-handle:focus{
  outline:none !important;
}
.stats-card .stats-collapse-handle:focus-visible,
.sheet.stats-collapsed .stats-card .stats-collapse-handle:focus-visible{
  outline:2px solid #cbd5e1 !important;
  outline-offset:2px !important;
}
.stats-card .stats-collapse-arrow,
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform-origin:center center !important;
  transform:rotate(0deg) !important;
  transition:transform 180ms ease !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}


@media (max-width:520px){
  
  .stats-card .stats-collapse-handle,
  .sheet.stats-collapsed .stats-card .stats-collapse-handle{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
  }
  .stats-card .stats-collapse-arrow,
  .sheet.stats-collapsed .stats-card .stats-collapse-arrow{
    font-size:18px !important;
  }
}


/* SEO/onboarding feature cards in the stats-table slot */
.stats-card.feature-mode .stats-collapse-handle{display:none!important}


/* BMSDock SEO/onboarding cards: standalone block between map and graph */
.sheet.feature-panel-mode{
  padding-top:10px;
}
.stats-card.feature-hidden{
  display:none!important;
}


/* Final SEO feature card icon cleanup: keep card frame, remove icon frame */


/* Start screen guide inside graph block: VESC / BMSDock / GPX */
.trip-chart-card.onboarding-mode .graph-panel,
.trip-chart-card.onboarding-mode .chart-zoom-overlay{
  display:none!important;
}


/* feature carousel scroll mode */


/* BMSDock feature carousel: real horizontal scroll + desktop drag */


/* Support tab on the start screen */
.support-graph-tab{display:none!important;}
.trip-chart-card.onboarding-mode .support-graph-tab{display:inline-flex!important;}


.support-lead{
  margin:0 auto 12px;
  max-width:720px;
  color:#334155;
  font-size:14px;
  line-height:1.45;
  font-weight:650;
  text-align:center;
}
.support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 12px;
}
.support-grid div{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(248,250,252,.92);
  border-radius:8px;
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.support-grid b{
  display:block;
  color:#0f172a;
  font-size:13px;
  line-height:1.2;
  margin-bottom:4px;
}
.support-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
  font-weight: 400;
}
.support-note{
  margin:0 auto 12px;
  max-width:700px;
  color:#64748b;
  font-size:12.5px;
  line-height:1.4;
  font-weight: 400;
  text-align:center;
}


@media (max-width:520px){
  
  .support-grid{grid-template-columns:1fr;gap:8px;}
  .support-lead{font-size:13px;margin-bottom:9px;}
  .support-note{font-size:12px;margin-bottom:10px;}
  .support-grid div{padding:8px 10px;}
}


/* Four graph tabs: keep one row, scroll horizontally only if the screen is too narrow */


.support-graph-tab{display:none!important;}
.trip-chart-card.onboarding-mode .support-graph-tab{display:flex!important;}


.support-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:16px 0;
}
.support-grid > div{
  width:min(100%,520px);
  text-align:center;
  padding:12px;
  border:1px solid var(--border,#d9e2ec);
  border-radius:12px;
  background:var(--card-bg,#fff);
}
.support-grid > div b{
  display:block;
  margin-bottom:6px;
}


/* Support tab scrollbar spacing: keep text/cards away from the vertical scrollbar */


/* Fixed onboarding tab height: Support / VESC / BMSDock / GPX use one common box height */
.trip-chart-card.onboarding-mode{
  --onboarding-tab-height:260px;
}


@media (max-width:520px){
  .trip-chart-card.onboarding-mode{
    --onboarding-tab-height:260px;
  }
  
  
}


/* Language switcher */
.language-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.language-dropdown-toggle{
  height:16px;
  min-width:108px;
  padding:0 11px 0 13px;
  border:1px solid rgba(148,163,184,.30);
  border-radius:999px;
  background:rgba(19,27,35,.72);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(0,0,0,.20);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  -webkit-tap-highlight-color:transparent;
}
.language-current{white-space:nowrap;line-height:1}
.language-arrow{font-size:11px;line-height:1;opacity:.82;transform:translateY(-1px)}
.language-dropdown-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 7px);
  min-width:132px;
  padding:6px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:rgba(15,23,42,.94);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;
  flex-direction:column;
  gap:4px;
}
.language-dropdown.open .language-dropdown-menu{display:flex}
.language-option{
  width:100%;
  height:32px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  padding:0 10px;
  font-size:12px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}
.language-option:hover{background:rgba(255,255,255,.10)}
.language-option.active{
  background:#22c55e;
  color:#fff;
}
.start-language-switch{
  position:absolute;
  left:14px;
  top:14px;
  right:auto;
  bottom:auto;
  z-index:3;
}
.start-language-switch .language-dropdown-menu{
  left:0;
  right:auto;
  top:calc(100% + 7px);
  bottom:auto;
}
.start-language-switch .language-arrow{transform:translateY(1px)}
.settings-panel-head{
  gap:12px;
}
.settings-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.settings-language-switch .language-dropdown-toggle{
  height:30px;
  min-width:96px;
  padding:0 9px 0 11px;
  background:#f1f5f9;
  color:#64748b;
  border-color:#e2e8f0;
  box-shadow:none;
  font-size:12px;
}
.settings-language-switch .language-dropdown-menu{
  right:0;
  top:calc(100% + 6px);
  bottom:auto;
  background:#fff;
  border-color:#e2e8f0;
  box-shadow:0 14px 24px rgba(15,23,42,.16);
  z-index:20;
}
.settings-language-switch .language-option{
  color:#334155;
}
.settings-language-switch .language-option:hover{background:#f1f5f9}
.settings-language-switch .language-option.active{background:#22c55e;color:#fff}
.language-settings-section{display:none!important}
@media (max-width:520px){
  .start-language-switch{left:12px;top:12px;right:auto;bottom:auto}
  .language-dropdown-toggle{height:32px;min-width:100px;font-size:11px;padding:0 10px 0 12px}
  .language-dropdown-menu{min-width:126px}
  .settings-head-actions{gap:7px}
  .settings-language-switch .language-dropdown-toggle{height:29px;min-width:88px;font-size:11px;padding:0 8px 0 10px}
}


/* Settings language menu opens downward; start screen keeps upward menu */
.settings-language-switch{z-index:30;}
.settings-language-switch .language-arrow{transform:translateY(1px);}

/* 2026-06-21: stable onboarding text layout, no clipping, language preserved */
.trip-chart-card.onboarding-mode{
  --onboarding-info-min-height: 390px;
}


@media (max-width: 760px){
  .trip-chart-card.onboarding-mode{
    --onboarding-info-min-height: 410px;
  }
  
  
  
  
}
@media (max-width: 520px){
  .trip-chart-card.onboarding-mode{
    --onboarding-info-min-height: 430px;
  }
  
  
  
  
  
}

/* 2026-06-21: unify onboarding tab typography and lock stable height without clipping */
.trip-chart-card.onboarding-mode{
  --onboarding-info-height: 390px;
}


@media (max-width: 760px){
  .trip-chart-card.onboarding-mode{
    --onboarding-info-height: 410px;
  }
  
  
  
}
@media (max-width: 520px){
  .trip-chart-card.onboarding-mode{
    --onboarding-info-height: 430px;
  }
  
  
  
  
  
  
  
}

/* Donate modal icons */

.donate-actions button::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  font-size:13px;
  font-weight:900;
  line-height:1;
}
#donateSbpBtn::before{
  content:"T";
  background:#ffdd2d;
  color:#111827;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.08);
}
#donateBoostyBtn::before{
  content:"B";
  background:#f15f2c;
  color:#fff;
}
#donateTelegramBtn::before{
  content:"✈";
  background:#229ED9;
  color:#fff;
  font-size:12px;
}
#donateEmailBtn::before{
  content:"@";
  background:#64748b;
  color:#fff;
  font-size:13px;
}

/* 2026-06-24: bank-style onboarding feature carousel
   Static rounded frame, horizontally scrolling cards inside, progress dots inside the frame. */


/* 2026-06-24: carousel dots cleanup + interaction opacity */


.donate-qr-row{display:flex;justify-content:center;gap:20px;margin:12px 0 18px}
.donate-qr-item{text-align:center}
.donate-qr-item canvas,.donate-qr-item img{width:110px!important;height:110px!important;background:#fff;padding:6px;border-radius:10px}
.donate-qr-label{display:none !important}


/* Donate modal logo header */

.donate-logo-img{
  display:block;
  width:100%;
  max-width:260px;
  height:auto;
  margin:0 auto 12px;
  background:transparent !important;
}


/* 2026-06-24: align each donate QR exactly over its payment button */
.donate-qr-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  width:100% !important;
  justify-content:stretch !important;
  align-items:center !important;
  margin:12px 0 18px !important;
}
.donate-qr-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-width:0 !important;
}
.donate-qr-item canvas,
.donate-qr-item img{
  display:block !important;
  margin:0 auto !important;
}

/* Fix donation QR duplicate rendering from qrcode.js: show only canvas, hide fallback img */
.donate-qr-item canvas{
  display:block !important;
  width:110px !important;
  height:110px !important;
  margin:0 auto !important;
  background:#fff !important;
  padding:6px !important;
  border-radius:10px !important;
  box-sizing:content-box !important;
}
.donate-qr-item img{
  display:none !important;
}

/* 2026-06-24: Start screen language dropdown width matches the main language button.
   Prevents the opened menu from overlapping the logo. */
.start-language-switch{
  display:inline-flex;
}
.start-language-switch .language-dropdown-toggle{
  width:auto;
}
.start-language-switch .language-dropdown-menu{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.start-language-switch .language-option{
  box-sizing:border-box;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
}
@media (max-width:520px){
  .start-language-switch .language-dropdown-menu{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}


/* 2026-06-24: make feature carousel swipe responsive.
   Disable snap while dragging so short swipes can be measured and then snap manually. */


/* 2026-06-24: tighten vertical rhythm of feature carousel cards.
   Make title, description and dots feel evenly spaced instead of leaving a large empty lower area. */


#mainGraphPanel > .chart-cursor-overlay{
  position:absolute !important;
  z-index:24 !important;
  pointer-events:none !important;
}

/* Stage 3.4: graph vertical spacing refinement
   15px between graph channel buttons and canvas,
   15px between graph canvas/content area and bottom graph tabs. */
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  margin-top:15px !important;
}

@media (max-width:520px){
  #mainGraphPanel .chart-scroll,
  #cellGraphPanel .chart-scroll{
    margin-top:15px !important;
  }
  
}

/* Stage 3.4b: make requested 15px spacing controlled by canvas plot paddings, not by extra DOM gaps. */
#mainGraphPanel .chart-scroll,
#cellGraphPanel .chart-scroll{
  margin-top:0 !important;
}

.graph-panel{
  padding-top:0 !important;
}
@media (max-width:520px){
  #mainGraphPanel .chart-scroll,
  #cellGraphPanel .chart-scroll{
    margin-top:0 !important;
  }
  
  .graph-panel{
    padding-top:0 !important;
  }
}

/* Stage 3.4c: make chart canvas fill the graph panel so the ruler sits exactly 15px above tabs.
   The previous gap was not a CSS margin: the canvas was keeping an old intrinsic/min/max height,
   leaving unused space inside the graph panel below the ruler. */
#mainGraphPanel,
#cellGraphPanel{
  --graph-canvas-gap-to-tabs:15px;
}
#mainGraphPanel > .chart-scroll,
#cellGraphPanel > .chart-scroll{
  flex:0 0 calc(var(--graph-content-height) - var(--tab-toolbar-h)) !important;
  height:calc(var(--graph-content-height) - var(--tab-toolbar-h)) !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:stretch !important;
}
#mainGraphPanel > .chart-scroll > #chart{
  flex:1 1 auto !important;
  display:block !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
}
#cellGraphPanel > .chart-scroll > #cellChart{
  /* Never allow flexbox to shrink the timeline canvas calculated by JS. */
  flex:0 0 auto !important;
  display:block !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
}

/* 2026-06-26: Start screen language switch as a compact round button,
   mirrored to the welcome close button. The dropdown keeps full language names. */
.start-language-switch{
  left:14px !important;
  top:14px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:4 !important;
  width:38px;
  height:38px;
}
.start-language-switch .language-dropdown-toggle{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 !important;
  border:0;
  border-radius:50%;
  justify-content:center;
  gap:0;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  background:rgba(19,27,35,.72);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.start-language-switch .language-current{
  display:block;
  width:100%;
  text-align:center;
}
.start-language-switch .language-arrow{
  display:none !important;
}
.start-language-switch .language-dropdown-menu{
  left:0 !important;
  right:auto !important;
  top:calc(100% + 7px) !important;
  bottom:auto !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  padding:6px !important;
  box-sizing:border-box;
  align-items:stretch;
}
.start-language-switch .language-option{
  width:100%;
  min-width:max-content;
  box-sizing:border-box;
  padding:0 10px !important;
  white-space:nowrap;
  text-align:left;
}
@media (max-width:520px){
  .start-language-switch{
    left:12px !important;
    top:12px !important;
    width:38px;
    height:38px;
  }
  .start-language-switch .language-dropdown-toggle{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    font-size:13px;
    padding:0 !important;
  }
  .start-language-switch .language-dropdown-menu{
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* Touch graph smooth scroll: during manual drag the canvas is moved by native scrollLeft,
   while heavy graph redraws are throttled in JS. */
#chartScroll.graph-dragging,
#cellChartScroll.graph-dragging{
  scroll-behavior:auto !important;
}
#chartScroll.graph-dragging canvas,
#cellChartScroll.graph-dragging canvas{
  will-change:transform;
}

/* Stage 3.8: smoother native touch panning for zoomed graphs.
   Horizontal graph panning should be handled by the browser, while vertical
   swipes still scroll the page. JS only syncs cursor/timeline via rAF. */
#chartScroll,
#chartScroll canvas{
  touch-action: pan-x pan-y !important;
}

.speed-btn.park{background:rgba(255,178,0,.86);color:#111;}


/* BMSDock v5: fixed four-minute graph viewport + overview timeline */
.fixed-scale-hidden{display:none!important}
.mini-timeline-wrap{
  position:relative;
  height:58px;
  margin:8px 12px 15px;
  border:1px solid #dbe2ea;
  border-radius:10px;
  overflow:hidden;
  background:#f8fafc;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
#miniTimeline{
  display:block;
  width:100%;
  height:58px;
  cursor:ew-resize;
  touch-action:pan-y;
}
.mini-timeline-wrap.is-scrubbing{box-shadow:0 0 0 2px rgba(37,99,235,.18)}
@media (max-width:520px){
  .mini-timeline-wrap{margin:7px 8px 15px;height:54px}
  #miniTimeline{height:54px}
}

/* v5.1 main graph touch controller: horizontal gestures are handled by JS and
   routed into the shared timeline controller; vertical gestures scroll page. */
#chartScroll,
#chartScroll canvas{
  touch-action:pan-y !important;
  overscroll-behavior-x:contain !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* Stage 2.12: Cell Graph uses the same fixed viewport UI layer as Main Graph. */
#cellGraphPanel > .cell-graph-ui-overlay{
  position:absolute !important;
  z-index:24 !important;
  pointer-events:none !important;
}

/* Stage 7.1: the scroll host is the only gesture surface. Render layers must
   never intercept pointer events; horizontal touch is owned by TouchController. */
#chartScroll,
#cellChartScroll{
  touch-action:pan-y !important;
  overscroll-behavior-x:contain !important;
}
#chartScroll canvas,
#cellChartScroll canvas,
#mainGraphCursorOverlay,
#cellGraphCursorOverlay,
#mainGraphUiOverlay,
#cellGraphUiOverlay{
  pointer-events:none !important;
  touch-action:pan-y !important;
}

/* BMSDock v7.6.0-fix5 — compact graph spacing.
   The main graph touches the card edges. The toggle-row reserves exactly a
   10px lower strip for its horizontal scrollbar. The overview timeline uses
   10px spacing above, at both sides, and below. */
.trip-chart-card{
  --tab-toolbar-h:45px !important;
}
.graph-panel{
  padding:0 !important;
}
.graph-panel > .chart-toggle-row,
#mainGraphPanel > .chart-toggle-row,
#cellGraphPanel > .chart-toggle-row,
#cellInfoPanel > .chart-toggle-row{
  flex-basis:var(--tab-toolbar-h) !important;
  height:var(--tab-toolbar-h) !important;
  min-height:var(--tab-toolbar-h) !important;
  max-height:var(--tab-toolbar-h) !important;
  padding:5px 8px 10px !important;
  align-items:flex-start !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar{
  height:5px !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar-thumb,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar-thumb,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar-thumb,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar-thumb{
  background:#cbd5e1 !important;
}
.graph-panel > .chart-toggle-row:not(:hover)::-webkit-scrollbar-thumb,
#mainGraphPanel > .chart-toggle-row:not(:hover)::-webkit-scrollbar-thumb,
#cellGraphPanel > .chart-toggle-row:not(:hover)::-webkit-scrollbar-thumb,
#cellInfoPanel > .chart-toggle-row:not(:hover)::-webkit-scrollbar-thumb{
  background:transparent !important;
}
#mainGraphPanel > .chart-scroll,
#cellGraphPanel > .chart-scroll,
#chart,
#cellChart{
  margin:0 !important;
}
.mini-timeline-wrap{
  margin:10px 10px 10px !important;
}

@media (max-width:520px){
  .trip-chart-card{
    --tab-toolbar-h:43px !important;
  }
  .graph-panel > .chart-toggle-row,
  #mainGraphPanel > .chart-toggle-row,
  #cellGraphPanel > .chart-toggle-row,
  #cellInfoPanel > .chart-toggle-row{
    padding:5px 8px 10px !important;
  }
  .mini-timeline-wrap{
    margin:10px 10px 10px !important;
  }
}


/* BMSDock v7.6.0-fix7 — unified 10px graph layout.
   Controls → graph, graph → overview, and overview → tabs all use 10px.
   In FIX mode the renderer owns the full canvas width; scales are overlays. */
.trip-chart-card{
  --tab-toolbar-h:40px !important;
}
.graph-panel > .chart-toggle-row,
#mainGraphPanel > .chart-toggle-row,
#cellGraphPanel > .chart-toggle-row,
#cellInfoPanel > .chart-toggle-row{
  flex:0 0 var(--tab-toolbar-h) !important;
  height:var(--tab-toolbar-h) !important;
  min-height:var(--tab-toolbar-h) !important;
  max-height:var(--tab-toolbar-h) !important;
  padding:0 10px 10px !important;
  gap:10px !important;
  align-items:flex-start !important;
}
.graph-panel > .chart-toggle-row::-webkit-scrollbar,
#mainGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellGraphPanel > .chart-toggle-row::-webkit-scrollbar,
#cellInfoPanel > .chart-toggle-row::-webkit-scrollbar{
  height:5px !important;
}
#mainGraphPanel > .chart-scroll,
#cellGraphPanel > .chart-scroll,
#mainGraphPanel > .chart-scroll > #chart,
#cellGraphPanel > .chart-scroll > #cellChart{
  margin:0 !important;
  padding:0 !important;
}
.mini-timeline-wrap{
  margin:10px 10px 10px !important;
}

@media (max-width:520px){
  .trip-chart-card{--tab-toolbar-h:40px !important;}
  .graph-panel > .chart-toggle-row,
  #mainGraphPanel > .chart-toggle-row,
  #cellGraphPanel > .chart-toggle-row,
  #cellInfoPanel > .chart-toggle-row{
    padding:0 10px 10px !important;
    gap:10px !important;
  }
  .mini-timeline-wrap{margin:10px 10px 10px !important;}
}


/* BMSDock v7.6.0-fix8 — final exact 10px graph rhythm.
   This block intentionally overrides the accumulated legacy layout rules.
   Buttons → graph, graph → mini timeline and mini timeline → tabs are 10px.
   In FIX mode the main viewport and canvas touch both card edges. */
.trip-chart-card{
  --bms-gap:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-h:calc(var(--bms-toolbar-button-h) + var(--bms-gap)) !important;
  --tab-toolbar-h:var(--bms-toolbar-h) !important;
  --graph-content-height:auto !important;
}
.graph-panel{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  overflow:hidden !important;
}
.graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.graph-panel > .chart-toggle-row,
#mainGraphPanel > .chart-toggle-row,
#cellGraphPanel > .chart-toggle-row,
#cellInfoPanel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-h) !important;
  min-height:var(--bms-toolbar-h) !important;
  max-height:var(--bms-toolbar-h) !important;
  margin:0 !important;
  padding:0 10px 10px !important;
  gap:10px !important;
  align-items:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
.graph-panel > .chart-toggle-row .chart-toggle,
#mainGraphPanel > .chart-toggle-row .chart-toggle,
#cellGraphPanel > .chart-toggle-row .chart-toggle,
#cellInfoPanel > .chart-toggle-row .chart-toggle{
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
}
#mainGraphPanel > .chart-scroll,
#cellGraphPanel > .chart-scroll{
  box-sizing:border-box !important;
  flex:0 0 350px !important;
  width:100% !important;
  height:350px !important;
  min-height:350px !important;
  max-height:350px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
#mainGraphPanel > .chart-scroll > #chart,
#cellGraphPanel > .chart-scroll > #cellChart{
  display:block !important;
  height:350px !important;
  min-height:350px !important;
  max-height:350px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
/* The moving canvas may be wider than the viewport, but the viewport itself
   must always start and end exactly at the card edges in FIX mode. */
.trip-chart-card.graph-fix-mode #mainGraphPanel,
.trip-chart-card.graph-fix-mode #mainGraphPanel > .chart-scroll{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.mini-timeline-wrap{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  margin:10px 10px 10px !important;
}

@media (max-width:520px){
  .trip-chart-card{
    --bms-toolbar-button-h:28px !important;
  }
  .graph-panel > .chart-toggle-row,
  #mainGraphPanel > .chart-toggle-row,
  #cellGraphPanel > .chart-toggle-row,
  #cellInfoPanel > .chart-toggle-row{
    padding:0 10px 10px !important;
    gap:10px !important;
  }
  #mainGraphPanel > .chart-scroll,
  #cellGraphPanel > .chart-scroll,
  #mainGraphPanel > .chart-scroll > #chart,
  #cellGraphPanel > .chart-scroll > #cellChart{
    height:320px !important;
    min-height:320px !important;
    max-height:320px !important;
    flex-basis:320px !important;
  }
  .mini-timeline-wrap{margin:10px 10px 10px !important;}
}


/* BMSDock v7.6.0-fix9 — audited compact UI layout.
   One definitive rule set after all legacy overrides:
   10px card top inset, 10px between buttons, 10px toolbar-to-graph,
   10px graph-to-mini-timeline, and 10px mini-timeline-to-tabs. */
.trip-chart-card:not(.onboarding-mode){
  --bms-ui-gap:10px !important;
  --bms-button-h:30px !important;
  --bms-toolbar-h:50px !important;
  padding:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-h) !important;
  min-height:var(--bms-toolbar-h) !important;
  max-height:var(--bms-toolbar-h) !important;
  margin:0 !important;
  padding:10px 10px 10px !important;
  gap:10px !important;
  align-items:flex-start !important;
  background:#fff !important;
  border:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin !important;
  scrollbar-color:#cbd5e1 transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  box-sizing:border-box !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  line-height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #chart,
.trip-chart-card:not(.onboarding-mode) #cellChart{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:top !important;
}
.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap{
  box-sizing:border-box !important;
  height:58px !important;
  margin:10px 10px 10px !important;
  padding:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #miniTimeline{
  display:block !important;
  width:100% !important;
  height:58px !important;
  margin:0 !important;
}

.trip-chart-card.graph-fix-mode #mainGraphPanel,
.trip-chart-card.graph-fix-mode #mainGraphPanel > .chart-scroll,
.trip-chart-card.graph-fix-mode #mainGraphPanel > .chart-scroll > #chart{
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){
    --bms-button-h:28px !important;
    --bms-toolbar-h:48px !important;
  }
  .trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
    padding:10px 10px 10px !important;
    gap:10px !important;
  }
  .trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }
  .trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap{
    height:54px !important;
    margin:10px 10px 10px !important;
  }
  .trip-chart-card:not(.onboarding-mode) #miniTimeline{height:54px !important;}
}

/* BMSDock v7.6.0-fix10 — verified UI geometry.
   This is the single final override for the loaded-track graph card.
   The native horizontal scrollbar occupies a 10px strip and its 4px thumb is
   vertically centred inside that strip. The plot itself has no hidden top
   padding; therefore the visible button-to-plot gap is exactly 10px. */
.trip-chart-card:not(.onboarding-mode){
  --bms-ui-gap:10px !important;
  --bms-button-height:30px !important;
  --bms-scrollbar-strip:10px !important;
  --bms-toolbar-height:calc(10px + var(--bms-button-height) + var(--bms-scrollbar-strip)) !important;
  padding:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-height) !important;
  width:100% !important;
  height:var(--bms-toolbar-height) !important;
  min-height:var(--bms-toolbar-height) !important;
  max-height:var(--bms-toolbar-height) !important;
  margin:0 !important;
  padding:10px 10px 0 !important;
  gap:10px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  background:#fff !important;
  border:0 !important;
  scrollbar-width:thin !important;
  scrollbar-color:#cbd5e1 transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  height:var(--bms-button-height) !important;
  min-height:var(--bms-button-height) !important;
  max-height:var(--bms-button-height) !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
/* Chromium/WebView: use the whole 10px strip, but centre a 4px visible thumb. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:block !important;
  width:auto !important;
  height:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-track{
  background:transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-thumb{
  background:#cbd5e1 !important;
  border:3px solid transparent !important;
  border-radius:999px !important;
  background-clip:content-box !important;
}
/* Keep the strip geometrically present; hide only the inactive thumb. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row:not(:hover)::-webkit-scrollbar-thumb{
  background-color:transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row:hover::-webkit-scrollbar-thumb,
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row:active::-webkit-scrollbar-thumb{
  background-color:#cbd5e1 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll > #chart,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll > #cellChart{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  vertical-align:top !important;
}
.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap{
  box-sizing:border-box !important;
  margin:10px 10px 10px !important;
  padding:0 !important;
}

@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){
    --bms-button-height:28px !important;
  }
  .trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
    padding:10px 10px 0 !important;
    gap:10px !important;
  }
}


/* BMSDock v7.6.0-fix11 — exact top toolbar geometry.
   Layout is intentionally split into two boxes:
   1) button row = 10px top inset + button height;
   2) custom scrollbar strip = exactly 10px between buttons and graph.
   Native scrollbar geometry is disabled on every platform. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-scroll-strip:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  min-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  max-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 10px 0 !important;
  gap:10px !important;
  align-items:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar{
  position:relative !important;
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-scroll-strip) !important;
  width:100% !important;
  height:var(--bms-toolbar-scroll-strip) !important;
  min-height:var(--bms-toolbar-scroll-strip) !important;
  max-height:var(--bms-toolbar-scroll-strip) !important;
  margin:0 !important;
  padding:3px 10px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:#fff !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar-thumb{
  display:block !important;
  height:4px !important;
  width:0;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0;
  transform:translateX(0);
  transition:opacity .16s ease !important;
  will-change:transform,width;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar.is-scrollable.is-active .chart-toggle-scrollbar-thumb{
  opacity:.9 !important;
}
/* The graph starts immediately after the dedicated 10px strip. */
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  margin-top:0 !important;
  padding-top:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){
    --bms-toolbar-button-h:28px !important;
  }
}

/* BMSDock v7.6.0-fix12 — audited toolbar spacing.
   One toolbar box owns the complete geometry:
   10px top inset + button height + 10px lower strip.
   The custom scroll thumb is absolutely centred inside the lower strip,
   so it never adds a second row or changes the graph position. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-bottom:10px !important;
  --bms-toolbar-total:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-bottom)) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-total) !important;
  width:100% !important;
  height:var(--bms-toolbar-total) !important;
  min-height:var(--bms-toolbar-total) !important;
  max-height:var(--bms-toolbar-total) !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 10px var(--bms-toolbar-bottom) !important;
  gap:10px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar{
  position:absolute !important;
  z-index:4 !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  box-sizing:border-box !important;
  width:auto !important;
  height:var(--bms-toolbar-bottom) !important;
  min-height:var(--bms-toolbar-bottom) !important;
  max-height:var(--bms-toolbar-bottom) !important;
  margin:0 !important;
  padding:3px 10px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  border:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar .chart-toggle-scrollbar-thumb{
  display:block !important;
  box-sizing:border-box !important;
  height:4px !important;
  min-height:4px !important;
  max-height:4px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0 !important;
  transform:translateX(0);
  transition:opacity .16s ease !important;
  will-change:transform,width;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar.is-scrollable.is-active .chart-toggle-scrollbar-thumb{
  opacity:.9 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){
    --bms-toolbar-button-h:28px !important;
  }
}


/* BMSDock v7.6.0-fix13 — single native toolbar scrollbar.
   Authoritative final rule: 10px top inset, current button height,
   one native 10px scrollbar strip. No custom scrollbar elements exist. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-scroll-h:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  width:100% !important;
  height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  min-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  max-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 10px 0 !important;
  gap:10px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:thin !important;
  scrollbar-color:#94a3b8 transparent !important;
  -ms-overflow-style:auto !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:block !important;
  width:auto !important;
  height:var(--bms-toolbar-scroll-h) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-track{
  background:transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-thumb{
  background:#94a3b8 !important;
  border:3px solid transparent !important;
  border-radius:999px !important;
  background-clip:content-box !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar,
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar-thumb{
  display:none !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  margin:0 !important;
  padding:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){
    --bms-toolbar-button-h:28px !important;
  }
}

/* BMSDock v7.6.0-fix14 — deterministic toolbar geometry.
   Exact structure: 10px card inset, button row, 10px indicator strip, graph.
   Native scrollbars are suppressed on every engine; only one custom thumb exists. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-strip-h:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 0 0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-button-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
  padding:0 10px !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
  -webkit-appearance:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar{
  display:block !important;
  box-sizing:border-box !important;
  position:relative !important;
  flex:0 0 var(--bms-toolbar-strip-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-strip-h) !important;
  min-height:var(--bms-toolbar-strip-h) !important;
  max-height:var(--bms-toolbar-strip-h) !important;
  margin:0 !important;
  padding:3px 10px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:#fff !important;
  border:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar .chart-toggle-scrollbar-thumb{
  display:block !important;
  box-sizing:border-box !important;
  height:4px !important;
  min-height:4px !important;
  max-height:4px !important;
  width:0;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0 !important;
  transform:translateX(0);
  transition:opacity .16s ease !important;
  will-change:transform,width;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-scrollbar.is-scrollable.is-active .chart-toggle-scrollbar-thumb{
  opacity:.9 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){--bms-toolbar-button-h:28px !important;}
}


/* BMSDock v7.6.0-fix15 — single native toolbar scrollbar and exact compact height.
   Final geometry: 10px top inset + 30px buttons + 10px native scrollbar.
   No custom scrollbar element and no extra spacer row. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-scroll-h:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 0 0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 calc(var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  width:100% !important;
  height:calc(var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  min-height:calc(var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  max-height:calc(var(--bms-toolbar-button-h) + var(--bms-toolbar-scroll-h)) !important;
  margin:0 !important;
  padding:0 10px !important;
  gap:10px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:thin !important;
  scrollbar-color:#94a3b8 transparent !important;
  -ms-overflow-style:auto !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:block !important;
  width:auto !important;
  height:var(--bms-toolbar-scroll-h) !important;
  -webkit-appearance:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-track{
  background:transparent !important;
  border:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar-thumb{
  background:#94a3b8 !important;
  border:3px solid transparent !important;
  background-clip:padding-box !important;
  border-radius:999px !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar,
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar-thumb{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){--bms-toolbar-button-h:28px !important;}
}


/* BMSDock v7.6.0-fix16 — compact toolbar progress strip.
   Exact geometry: 10px top inset + button row + 10px progress strip.
   Native scrollbar is fully hidden; the only visible indicator is the
   dedicated 4px progress thumb centered inside the 10px strip. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-progress-h:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 0 0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-button-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
  padding:0 10px !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  position:relative !important;
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-progress-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-progress-h) !important;
  min-height:var(--bms-toolbar-progress-h) !important;
  max-height:var(--bms-toolbar-progress-h) !important;
  margin:0 !important;
  padding:0 10px !important;
  border:0 !important;
  background:#fff !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  position:absolute !important;
  top:3px !important;
  left:10px;
  height:4px !important;
  width:0;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0;
  transition:opacity .16s ease !important;
  will-change:left,width,opacity;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-scrollable .bms-toolbar-progress-thumb{
  opacity:.72;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-active .bms-toolbar-progress-thumb{
  opacity:1;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){--bms-toolbar-button-h:28px !important;}
}


/* BMSDock v7.6.0-fix17 — final toolbar geometry.
   One custom progress indicator only. The native scrollbar remains functional
   for scrolling but is physically clipped inside a 30px viewport.
   Geometry: 10px top inset + 30px buttons + 10px progress strip.
   Progress strip: 2px white + 6px thumb + 2px white. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-top:10px !important;
  --bms-toolbar-button-h:30px !important;
  --bms-toolbar-progress-h:10px !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 0 0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  display:flex !important;
  flex-direction:column !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-button-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box !important;
  width:100% !important;
  height:calc(var(--bms-toolbar-button-h) + 14px) !important;
  min-height:calc(var(--bms-toolbar-button-h) + 14px) !important;
  max-height:calc(var(--bms-toolbar-button-h) + 14px) !important;
  margin:0 !important;
  padding:0 10px 14px !important;
  gap:10px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  border:0 !important;
  background:#fff !important;
  scrollbar-width:auto !important;
  -ms-overflow-style:auto !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  position:relative !important;
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-progress-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-progress-h) !important;
  min-height:var(--bms-toolbar-progress-h) !important;
  max-height:var(--bms-toolbar-progress-h) !important;
  margin:0 !important;
  padding:0 10px !important;
  border:0 !important;
  background:#fff !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  position:absolute !important;
  top:2px !important;
  left:10px;
  height:6px !important;
  width:0;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0 !important;
  transition:opacity .16s ease !important;
  will-change:left,width,opacity;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-active .bms-toolbar-progress-thumb{
  opacity:1 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress:not(.is-scrollable) .bms-toolbar-progress-thumb{
  display:none !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar,
.trip-chart-card:not(.onboarding-mode) .chart-toggle-scrollbar-thumb{
  display:none !important;
}
@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode){--bms-toolbar-button-h:28px !important;}
}

/* BMSDock v7.6.0-fix18 — stable Cell Info and compact start page.
   Loaded track: Cell Info keeps the same content height as both 230px graph canvases.
   Start page: the mini timeline is removed from layout and the guide block uses
   natural height, leaving one consistent 18px gap before the guide tabs. */
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel > #cellInfoGrid.cell-info-grid{
  box-sizing:border-box !important;
  flex:0 0 230px !important;
  width:100% !important;
  height:230px !important;
  min-height:230px !important;
  max-height:230px !important;
  margin:0 !important;
  padding:14px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  align-content:start !important;
}

.trip-chart-card.onboarding-mode #miniTimelineWrap,
.trip-chart-card.onboarding-mode #miniTimeline{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}


@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode) #cellInfoPanel > #cellInfoGrid.cell-info-grid{
    padding:12px !important;
  }
  
  
}


/* BMSDock v7.6.0-fix19 — stable graph panel geometry and persistent controls.
   Main Graph, Cell Graph and Cell Info occupy exactly the same panel height.
   FIX changes only axis behaviour; parameter buttons remain visible and the
   toolbar remains horizontally scrollable in both FIX ON and FIX OFF. */
.trip-chart-card:not(.onboarding-mode){
  --bms-graph-content-h:230px !important;
  --bms-graph-panel-h:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-toolbar-progress-h) + var(--bms-graph-content-h)) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-graph-panel-h) !important;
  width:100% !important;
  height:var(--bms-graph-panel-h) !important;
  min-height:var(--bms-graph-panel-h) !important;
  max-height:var(--bms-graph-panel-h) !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel > #cellInfoGrid.cell-info-grid{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-graph-content-h) !important;
  height:var(--bms-graph-content-h) !important;
  min-height:var(--bms-graph-content-h) !important;
  max-height:var(--bms-graph-content-h) !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-toggle-row.graph-toggles-collapsed .chart-toggle:not(.chart-fix){
  display:inline-flex !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  justify-content:flex-start !important;
  overflow-x:auto !important;
}


/* BMSDock v9 Stage 4.5 — clean graph geometry.
   One source of truth: 230px data plot + 1px clear gap + 6px ruler frame. */
.trip-chart-card:not(.onboarding-mode){
  --bms-graph-plot-h:230px !important;
  --bms-ruler-gap-h:1px !important;
  --bms-minute-ruler-h:6px !important;
  --bms-graph-content-h:calc(var(--bms-graph-plot-h) + var(--bms-ruler-gap-h) + var(--bms-minute-ruler-h)) !important;
  --bms-graph-panel-h:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-graph-controls-bottom-pad) + var(--bms-toolbar-progress-h) + var(--bms-graph-content-h)) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{
  flex-basis:var(--bms-graph-panel-h) !important;
  height:var(--bms-graph-panel-h) !important;
  min-height:var(--bms-graph-panel-h) !important;
  max-height:var(--bms-graph-panel-h) !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel > #cellInfoGrid.cell-info-grid{
  flex-basis:var(--bms-graph-content-h) !important;
  height:var(--bms-graph-content-h) !important;
  min-height:var(--bms-graph-content-h) !important;
  max-height:var(--bms-graph-content-h) !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-scroll > #chart,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll > #cellChart{
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}


/* BMSDock v7.6.0-fix22 — Cell Graph full-bleed horizontal geometry.
   The chart viewport and canvas touch the left and right edges of the graph
   panel. No inherited panel padding, canvas margin, border or corner radius may
   create empty side gutters. Toolbar spacing and the minute ruler are unchanged. */
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel{
  padding-left:0 !important;
  padding-right:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll{
  box-sizing:border-box !important;
  align-self:stretch !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border-left:0 !important;
  border-right:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-scroll > #cellChart{
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
}


/* BMSDock v7.6.0-fix25 — onboarding tabs use the complete Support tab as the single
   height reference. The measured Support content height is written to
   --bms-support-panel-height by index.html. All four start tabs then occupy
   exactly the same box, so the card and lower tab bar do not jump. */
.trip-chart-card.onboarding-mode{
  --bms-support-panel-height:430px;
}


/* BMSDock v7.6.0-fix25 — natural-height measurement pass.
   Temporarily release every fixed-height rule so JavaScript can measure the
   complete Support content, including the donate button and its top margin. */


/* BMSDock v7 Stage 7.01 — fixed time-window selector.
   The existing tap/show/hide overlay is preserved; only its label becomes two lines. */
#mainGraphPanel > .chart-zoom-overlay .chart-zoom-label,
#cellGraphPanel > .chart-zoom-overlay .chart-zoom-label{
  white-space:pre-line !important;
  font-weight:700 !important;
  line-height:13px !important;
}


/* BMSDock v8 Stage 5 Fix 2: Cell Graph empty state is a sibling of the
   scrolling surface. It cannot inherit canvas width or scrollLeft. */
#cellGraphPanel{
  position:relative !important;
}
#cellGraphEmpty.cell-empty-fixed{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  margin:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  pointer-events:none !important;
  z-index:8 !important;
}
#cellGraphEmpty.cell-empty-fixed[hidden]{
  display:none !important;
}
#cellChartScroll.cell-graph-is-empty{
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  overscroll-behavior-x:none !important;
}
#cellGraphPanel.cell-graph-panel-is-empty #cellChartZoomOverlay{
  pointer-events:none !important;
}


/* Stage 5 Fix 4: both no-data labels are centered inside the same content area
   below the toolbar/progress row. The Cell Graph overlay lives in the scroll
   viewport; its canvas is display:none while empty, so it cannot scroll. */
#cellGraphPanel #cellChartScroll.cell-graph-is-empty{
  position:relative !important;
  overflow:hidden !important;
}
#cellGraphPanel #cellChartScroll > #cellGraphEmpty.cell-empty-fixed{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  pointer-events:none !important;
  z-index:4 !important;
}
#cellGraphPanel #cellChartScroll > #cellGraphEmpty.cell-empty-fixed[hidden]{
  display:none !important;
}


/* BMSDock v8 Stage 6: Main Graph fixed-viewport kernel */
#chartScroll{
  overflow-x:hidden !important;
  overscroll-behavior-x:none !important;
}
#chart{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}


/* BMSDock v9 Stage 9.1.1 — Визуальная доработка загрузки */


@keyframes bmsFileLoadingIndeterminate{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(245%)}
}


/* BMSDock v9 Stage 1.1 — Mobile Controls & Scroll Layer Fix
   Unified stacking for Main Graph, Cell Graph and Cell Info. */
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  position:relative !important;
  isolation:isolate !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  position:relative !important;
  z-index:20 !important;
  overflow:hidden !important;
  pointer-events:auto !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  position:relative !important;
  z-index:20 !important;
  background:transparent !important;
  pointer-events:auto !important;
  touch-action:pan-x !important;
  overscroll-behavior-x:contain !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport .chart-toggle,
.trip-chart-card:not(.onboarding-mode) #cellInfoToggleRow .cell-info-toggle{
  position:relative !important;
  z-index:30 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  z-index:10 !important;
  transform:translateY(calc(-1 * var(--bms-toolbar-progress-h))) !important;
  margin-bottom:calc(-1 * var(--bms-toolbar-progress-h)) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) .graph-panel > .cell-info-grid{
  position:relative !important;
  z-index:1 !important;
}
#cellInfoToggleRow,
#cellInfoToggleRow *{
  pointer-events:auto;
}


/* BMSDock v9 Stage 1.1.1 — one toolbar standard for all graph tabs.
   Shared DOM contract in Main Graph, Cell Graph and Cell Info:
   chart-toggle-viewport -> chart-toggle-row -> bms-toolbar-progress -> content.
   The button row owns native horizontal scrolling; the progress indicator is a
   separate visible layer immediately below it and never intercepts touches. */
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  isolation:isolate !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  position:relative !important;
  z-index:20 !important;
  flex:0 0 calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  width:100% !important;
  height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  min-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  max-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h)) !important;
  overflow:hidden !important;
  pointer-events:auto !important;
  background:#fff !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:var(--bms-toolbar-top) 10px 0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  touch-action:pan-x pan-y !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  pointer-events:auto !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport .chart-toggle{
  position:relative !important;
  z-index:30 !important;
  flex:0 0 auto !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  position:relative !important;
  z-index:10 !important;
  flex:0 0 var(--bms-toolbar-progress-h) !important;
  width:100% !important;
  height:var(--bms-toolbar-progress-h) !important;
  min-height:var(--bms-toolbar-progress-h) !important;
  max-height:var(--bms-toolbar-progress-h) !important;
  margin:0 !important;
  padding:3px 10px !important;
  transform:none !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:#fff !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  position:absolute !important;
  top:3px !important;
  left:10px;
  height:4px !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
  opacity:0 !important;
  transition:opacity .16s ease !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-scrollable .bms-toolbar-progress-thumb{
  opacity:.72 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-scrollable.is-active .bms-toolbar-progress-thumb{
  opacity:1 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-scroll,
.trip-chart-card:not(.onboarding-mode) .graph-panel > .cell-info-grid{
  position:relative !important;
  z-index:1 !important;
}


/* BMSDock v9 Stage 1.1.2 — final unified toolbar controller.
   One native mobile scroll model and one indicator state for all graph tabs. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row,
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle,
.trip-chart-card:not(.onboarding-mode) #cellInfoToggleRow .cell-info-toggle{
  touch-action:pan-x !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb,
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-scrollable .bms-toolbar-progress-thumb{
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .18s ease, visibility 0s linear .18s !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress.is-scrollable.is-active .bms-toolbar-progress-thumb{
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .18s ease, visibility 0s linear 0s !important;
}

/* BMSDock v9 Stage 1.1.3 — symmetric toolbar spacing.
   Stage 1.1.2 applied the top inset twice: once on graph-panel and once inside
   chart-toggle-row. Keep the inset only inside the shared scroll row so the
   distance above the buttons equals the 10px progress strip below them. */
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  padding-top:0 !important;
}


/* BMSDock v9 Stage 1.2 — unified compact Mini Timeline height.
   One fixed geometry for phone, tablet and desktop. */
.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap {
  box-sizing: border-box !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}
.trip-chart-card:not(.onboarding-mode) #miniTimeline {
  display: block !important;
  width: 100% !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}
@media (max-width: 520px){
  .trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap,
  .trip-chart-card:not(.onboarding-mode) #miniTimeline {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
  }
}


/* Stage 3.7 — external rotation wrapper. Leaflet continues to transform
   .leaflet-map-pane internally for pan/zoom; this parent composes rotation. */
#map .external-map-rotation-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  pointer-events:none;
}
#map .external-map-rotation-stage>.leaflet-map-pane{
  pointer-events:auto;
}


/* BMSDock v9 Stage 4.1 — interface refinement.
   Production-safe polish only: safe areas, predictable touch targets,
   keyboard focus, gesture containment and reduced-motion support. */
html{
  min-height:100%;
  background:#1a2228;
  -webkit-text-size-adjust:100%;
}
body{
  min-height:100%;
  
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.app{
  min-height:100dvh;
}
.map-card{
  min-height:320px;
  
  isolation:isolate;
}
button,
[role="button"],
input[type="range"],
select{
  -webkit-tap-highlight-color:transparent;
}
button,
.round-tool,
.info-btn,
.play,
.speed-btn,
.chart-toggle,
.cell-info-toggle{
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:3px;
}
.side-tools,
.right-tools{
  top:max(14px,env(safe-area-inset-top));
}
.side-tools{
  left:max(14px,env(safe-area-inset-left));
}
.right-tools{
  right:max(14px,env(safe-area-inset-right));
}
.play{
  right:max(16px,env(safe-area-inset-right));
  bottom:max(25px,env(safe-area-inset-bottom));
}
.speed-btn{
  left:max(14px,env(safe-area-inset-left));
  bottom:max(25px,env(safe-area-inset-bottom));
}
.timeline{
  bottom:max(43px,calc(env(safe-area-inset-bottom) + 18px));
}
.mode-menu,
.layer-menu{
  max-height:min(60vh,420px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}.chart-toggle-viewport,
.cell-info-grid,
.info-panel{
  overscroll-behavior:contain;
}
@media (max-width:520px){
  .round-tool,
  .info-btn{
    min-width:48px;
    min-height:48px;
  }
  .map-card{
    height:62dvh;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* BMSDock v9 Stage 4.1.1 — Start Screen Height + Settings Carousel Fix
   1) The welcome launcher owns the complete visible viewport while open, so
      the upload button and its loading strip can never be clipped by the
      normal 62vh map height.
   2) Mobile feature cards use one native horizontal scroll path only. */


/* BMSDock v9 Stage 4.1.2 — Viewport Overlay Stacking Fix
   The previous 4.1.1 workaround enlarged the map card to 100dvh. That
   prevented mobile clipping, but created a large empty map area on desktop.
   Welcome and Settings are now true viewport overlays while the underlying
   map keeps its normal 62/63vh layout. */
.map-card.settings-active{
  z-index:110000 !important;
}


/* BMSDock v9 Stage 4.1.3 — Start Content Layering Fix
   Keep the fullscreen welcome background and the corrected Settings overlay,
   but return the feature carousel and application description above the
   welcome backdrop. The backdrop no longer swallows page scrolling. */


/* BMSDock v9 Stage 4.1.4 — Unified Start Page Flow Fix
   The launcher is rendered in its final layout from the first paint. It is no
   longer promoted to a fullscreen fixed layer after JavaScript starts.
   Welcome controls, feature carousel and Support content now participate in
   one normal document flow, eliminating the brief lower-panel flash/jump. */


/* BMSDock v9 Stage 4.1.5 — Compact Start Loading Space
   The space below "Upload your track" is the same visual size as the
   horizontal button inset. The permanently reserved 24px loading strip fits
   inside that space, so starting a load never shifts the feature carousel. */


/* Stage 4.2 — TAB Slot View */


@keyframes bms-slot-wiggle{
  from{transform:rotate(-1.3deg) translateY(-1px)}
  to{transform:rotate(1.3deg) translateY(1px)}
}


/* Stage 4.2.1 — TAB View UI Refinement
   GRID and TAB are mutually exclusive full interface modes.
   The legacy table collapse control is removed in both modes. */
.stats-card,
.sheet.stats-collapsed .stats-card{
  max-height:none!important;
  overflow:visible!important;
}
.stats-card .stats-collapse-handle,
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  display:none!important;
}
.sheet.stats-collapsed .stats-card .stats,
.sheet.stats-collapsed .stats{
  display:grid!important;
}


/* In TAB mode the slot strip is the interface element itself, without the
   old circular/arrow area or an extra collapsible header. */


/* Stage 4.2.2 — Independent slots + reliable mobile scrolling/reordering */


/* Stage 4.2.3 — Six-slot compact layout + smooth free scrolling */


/* Stage 4.2.4 — unified spacing and shared Main/Cell slot strip */
:root{--bms-slot-edge-gap:10px;}


/* The TAB region now uses one spacing module on all four sides: graph → TAB,
   TAB → map, and left/right viewport edges. */


/* Stage 4.2.5 — exact 10 px perimeter around the independent slot strip. */
:root{--bms-slot-perimeter:10px;}

/* The graph card already had its own top margin. Remove that extra margin in
   TAB mode so the slot-to-graph distance is exactly the slot card's 10 px. */


/* Stage 4.2.6 — vertical slot interaction area.
   Keep the visible slot-to-neighbour distance at 10 px, while reserving
   an internal 8 px safety area above and below for wiggle/drag transforms. */
:root{
  --bms-slot-visible-gap:10px;
  --bms-slot-motion-pad:8px;
  --bms-slot-card-edge-gap:calc(var(--bms-slot-visible-gap) - var(--bms-slot-motion-pad));
}


/* Stage 4.2.7 — Graph controls interaction area + slot-edit pause.
   Keep button geometry unchanged, but reserve enough vertical space below the
   row for active/pressed transforms and shadows. Use one 10 px spacing module
   between the numeric stats card, graph controls and the right/left edges. */
:root{
  --bms-graph-controls-gap:10px;
  --bms-graph-controls-bottom-pad:8px;
}
/* Exactly 10 px between the numeric table/slot strip and graph card. */


.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  box-sizing:border-box!important;
  height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-graph-controls-bottom-pad))!important;
  min-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-graph-controls-bottom-pad))!important;
  max-height:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-graph-controls-bottom-pad))!important;
  flex-basis:calc(var(--bms-toolbar-top) + var(--bms-toolbar-button-h) + var(--bms-graph-controls-bottom-pad))!important;
  overflow:hidden!important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box!important;
  padding:var(--bms-toolbar-top) var(--bms-graph-controls-gap) var(--bms-graph-controls-bottom-pad)!important;
  align-items:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
/* Preserve a complete final button when scrolled to the end. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row::after{
  content:"";
  flex:0 0 1px;
  height:1px;
}

/* BMSDock v9 Stage 4.2.8 — White container top padding fix.
   The numeric GRID table begins exactly 10 px below the upper edge of the
   white sheet. Legacy spacing reserved for the removed collapse handle is
   disabled only in normal GRID mode. Slot-mode geometry stays unchanged. */
.sheet:not(.feature-panel-mode) > .stats-card:not(.stats-slot-card-mode){
  margin-top:8px !important; /* 2 px sheet padding + 8 px margin = 10 px */
  padding-top:0 !important;
}
.sheet:not(.feature-panel-mode) > .stats-card:not(.stats-slot-card-mode) .stats{
  margin-top:0 !important;
}

/* BMSDock v9 Stage 4.2.9 — Stats grid inner top spacing.
   Keep the table card itself in the approved position, but reserve exactly
   10 px between its inner top border and the first row of numeric values. */
.sheet:not(.feature-panel-mode) > .stats-card:not(.stats-slot-card-mode) .stats{
  padding-top:10px !important;
}

/* BMSDock v9 Stage 4.3 — Cell Info battery-card styling.
   Cards keep the existing dimensions, but gain a battery terminal on the right. */
#cellInfoPanel .cell-info-grid{
  column-gap:9px !important;
}

#cellInfoPanel .cell-card{
  --cell-terminal-color:#4f83c2;
  overflow:visible !important;
  isolation:isolate;
  border-width:1.5px !important;
}

#cellInfoPanel .cell-card::before{
  border-radius:inherit;
  overflow:hidden;
}

#cellInfoPanel .cell-card::after{
  content:"";
  position:absolute;
  top:50%;
  right:-6px; /* 5 px terminal + exactly 1 px gap from the cell body */
  width:5px;
  height:18px;
  transform:translateY(-50%);
  border-radius:0 999px 999px 0; /* flat on the left, Apple-style rounded right edge */
  background:var(--cell-terminal-color);
  box-shadow:none;
  opacity:.78;
  pointer-events:none;
  z-index:2;
}

#cellInfoPanel .cell-card:not(.min):not(.max){
  --cell-terminal-color:#4f83c2;
  border-color:#7ba3d2 !important;
  background:linear-gradient(90deg, rgba(219,234,254,.72), rgba(248,250,252,.94)) !important;
}

#cellInfoPanel .cell-card.max{
  --cell-terminal-color:#22a447;
  border-color:#35b85b !important;
  background:linear-gradient(90deg, rgba(220,252,231,.88), rgba(240,253,244,.96)) !important;
}

#cellInfoPanel .cell-card.min{
  --cell-terminal-color:#ef4b55;
  border-color:#ef5962 !important;
  background:linear-gradient(90deg, rgba(254,226,226,.84), rgba(255,245,245,.96)) !important;
}

/* BMSDock v9 Stage 4.3.1 — adaptive six-slot sizing.
   Keep every slot 60 px high, 80–100 px wide, with a fixed 10 px gap.
   The strip remains horizontally scrollable; no more than six complete slots
   are intended to be visible in the normal mobile/tablet viewport. */


/* BMSDock v9 Stage 4.3.2 — slot scroll area aligned to graph width.
   The slot scrolling viewport now uses the same horizontal bounds as the
   main graph card. Keep the vertical interaction reserve and slot geometry. */


/* BMSDock v9 Stage 4.3.3 — graph line width setting */
.graph-line-width-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(118px,150px);
  gap:12px;
  align-items:center;
}
.graph-line-width-select{
  width:100%;
  cursor:pointer;
}
@media (max-width:520px){
  .graph-line-width-section{grid-template-columns:minmax(0,1fr) 126px;}
}


/* BMSDock v9 Stage 4.3.4 — exact slot spacing + native responsive scrolling.
   The slot row keeps exactly 10 px above and below the 60 px cards, while
   horizontal touch scrolling uses the browser's native momentum — the same
   interaction model as the graph control button rows. */


/* BMSDock v9 Stage 4.3.5 — stable long-time layout + native scroll with long-press drag. */


/* Native swipe remains active in normal mode. Once long-press editing starts,
   the strip must stop browser scrolling so the held card can be reordered. */


/* BMSDock v9 Stage 4.3.6 — compact hour format + stable stats row alignment.
   GRID cells use the same fixed value/label tracks, so a smaller long-time
   font cannot move either the number or the "time" caption vertically. */


/* Stage 4.4 — unified small SVG icons */
.small-ui-icon{width:24px;height:24px;display:block;margin:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.play-state-icon{width:30px;height:30px;display:block;margin:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.info-btn{font-size:0!important;line-height:1!important}
.donate-tool,.layers-tool,#kmBtn,#rotateResetBtn{font-size:0!important;line-height:1!important}
.play:not(.csv-mode){font-size:0!important;line-height:1!important;display:flex;align-items:center;justify-content:center}
@media (max-width:520px){.small-ui-icon{width:22px;height:22px}.play-state-icon{width:27px;height:27px}}

/* Stage 4.5 cleanup: obsolete 240px hard overrides removed.
   Graph, overlay and scroll host inherit the shared 237px content height. */


/* BMSDock v9 Stage 4.5.1 — panel height synchronization fix.
   Include the 8px controls bottom interaction area in the parent panel height,
   so the 230px plot + 1px gap + 6px ruler are not clipped by overflow:hidden. */
.trip-chart-card:not(.onboarding-mode){
  --bms-graph-panel-h:calc(
    var(--bms-toolbar-top)
    + var(--bms-toolbar-button-h)
    + var(--bms-graph-controls-bottom-pad)
    + var(--bms-toolbar-progress-h)
    + var(--bms-graph-content-h)
  ) !important;
}

/* BMSDock v9 Stage 4.5.2 — exact 10px buttons-to-graph spacing.
   The toolbar owns the entire visual gap: 30px controls + 10px bottom space.
   The graph canvas starts immediately after the toolbar and adds no CSS gap. */
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-toggle-row,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-toggle-row{
  box-sizing:border-box !important;
  flex:0 0 40px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:0 10px 10px !important;
  align-items:flex-start !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-toggle-row .chart-toggle,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-toggle-row .chart-toggle{
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > #chartScroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > #cellChartScroll{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* BMSDock v9 Stage 4.5.3 — 12px toolbar-to-graph strip with centered 6px scrollbar.
   Final DOM geometry:
   10px top inset -> button viewport -> 12px progress strip -> graph content.
   The progress thumb is 6px high and vertically centered (3px + 6px + 3px).
   Native scrollbars stay hidden; horizontal swipe and button hit areas are unchanged. */
.trip-chart-card:not(.onboarding-mode){
  --bms-toolbar-progress-h:12px !important;
  --bms-graph-controls-bottom-pad:0px !important;
  --bms-graph-panel-h:calc(
    var(--bms-toolbar-top)
    + var(--bms-toolbar-button-h)
    + var(--bms-toolbar-progress-h)
    + var(--bms-graph-content-h)
  ) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel{
  box-sizing:border-box !important;
  padding:var(--bms-toolbar-top) 0 0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  box-sizing:border-box !important;
  flex:0 0 var(--bms-toolbar-button-h) !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box !important;
  width:100% !important;
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
  padding:0 10px !important;
  align-items:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  height:var(--bms-toolbar-button-h) !important;
  min-height:var(--bms-toolbar-button-h) !important;
  max-height:var(--bms-toolbar-button-h) !important;
  margin:0 !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  position:relative !important;
  box-sizing:border-box !important;
  flex:0 0 12px !important;
  width:100% !important;
  height:12px !important;
  min-height:12px !important;
  max-height:12px !important;
  margin:0 !important;
  padding:0 10px !important;
  transform:none !important;
  border:0 !important;
  background:#fff !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  position:absolute !important;
  top:3px !important;
  height:6px !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > #chartScroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > #cellChartScroll{
  margin:0 !important;
  padding:0 !important;
}

/* BMSDock v9 Stage 4.5.4 — 29px toolbar buttons in a 30px viewport.
   Buttons stay aligned to the top edge. The remaining 1px at the bottom
   absorbs the active translateY(1px) state so the border is not clipped. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  height:29px !important;
  min-height:29px !important;
  max-height:29px !important;
  align-self:flex-start !important;
  margin:0 !important;
}

/* BMSDock v9 Stage 4.5.5 — universal toolbar button geometry.
   Platform-independent rule for all graph toolbar buttons: Android/WebView,
   iOS Safari and desktop browsers use the same 29px box without native
   vertical padding. The 30px viewport keeps 1px below for press movement. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  height:29px !important;
  min-height:29px !important;
  max-height:29px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
  vertical-align:top !important;
  align-self:flex-start !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* BMSDock v9 Stage 4.5.6 — Android-safe toolbar paint area.
   Keep the visible layout unchanged (effective 30px), but give rounded button
   borders a 33px internal paint/scroll area. The -3px compensation preserves
   the existing 12px scrollbar strip and graph position. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  box-sizing:border-box !important;
  flex:0 0 33px !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  margin:0 0 -3px 0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  padding:2px 10px !important;
  align-items:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle{
  box-sizing:border-box !important;
  height:29px !important;
  min-height:29px !important;
  max-height:29px !important;
  margin:0 !important;
  align-self:flex-start !important;
}


/* BMSDock v9 Stage 4.5.7 — Apple-style Cell Info terminal.
   The cell card body is unchanged. The terminal keeps a 1 px gap,
   has a flat left edge and a fully rounded right edge. */

/* BMSDock v9 Stage 4.5.9 — visible 1 px Cell Info terminal gap.
   The cell body is unchanged. The 3 px rectangular terminal is shifted
   one extra pixel to account for the card border, leaving a visible 1 px gap. */
#cellInfoPanel .cell-card::after{
  right:-5px !important; /* 3 px terminal + 2 px offset = 1 px visible gap after 1 px card border */
  width:3px !important;
  height:12px !important;
  border-radius:0 !important;
}

/* BMSDock v9 Stage 4.5.11 — smooth live slot reorder (FLIP + drag layer). */


/* Stage 4.6.5 — metric controls use the centralized COLORS palette */
.chart-toggle.chart-speed{border-color:var(--metric-speed)!important;color:var(--metric-speed)!important;}
.chart-toggle.chart-speed.active{background:color-mix(in srgb,var(--metric-speed) 18%,transparent)!important;border-color:var(--metric-speed)!important;color:var(--metric-speed)!important;}
.chart-toggle.chart-power{border-color:var(--metric-power)!important;color:var(--metric-power)!important;}
.chart-toggle.chart-power.active{background:color-mix(in srgb,var(--metric-power) 18%,transparent)!important;border-color:var(--metric-power)!important;color:var(--metric-power)!important;}
.chart-toggle.chart-temp{border-color:var(--temp-color,var(--metric-tempMotor))!important;color:var(--temp-color,var(--metric-tempMotor))!important;}
.chart-toggle.chart-temp.active{background:color-mix(in srgb,var(--temp-color,var(--metric-tempMotor)) 18%,transparent)!important;border-color:var(--temp-color,var(--metric-tempMotor))!important;color:var(--temp-color,var(--metric-tempMotor))!important;}
.cell-graph-toggle[data-cell-chart="avg"]{border-color:var(--metric-cellAverage);color:var(--metric-cellAverage);}
.cell-graph-toggle[data-cell-chart="avg"].active{background:color-mix(in srgb,var(--metric-cellAverage) 18%,transparent);color:var(--metric-cellAverage);border-color:var(--metric-cellAverage);}
.cell-graph-toggle[data-cell-chart="delta"]{border-color:var(--metric-cellDelta);color:var(--metric-cellDelta);}
.cell-graph-toggle[data-cell-chart="delta"].active{background:color-mix(in srgb,var(--metric-cellDelta) 18%,transparent);color:var(--metric-cellDelta);border-color:var(--metric-cellDelta);}
.cell-graph-toggle[data-cell-chart="speed"]{border-color:var(--metric-speed);color:var(--metric-speed);}
.cell-graph-toggle[data-cell-chart="speed"].active{background:color-mix(in srgb,var(--metric-speed) 18%,transparent);color:var(--metric-speed);border-color:var(--metric-speed);}
.cell-graph-toggle[data-cell-chart="min"]{border-color:var(--metric-cellMin);color:var(--metric-cellMin);}
.cell-graph-toggle[data-cell-chart="min"].active{background:color-mix(in srgb,var(--metric-cellMin) 18%,transparent);color:var(--metric-cellMin);border-color:var(--metric-cellMin);}
.cell-graph-toggle[data-cell-chart="max"]{border-color:var(--metric-cellMax);color:var(--metric-cellMax);}
.cell-graph-toggle[data-cell-chart="max"].active{background:color-mix(in srgb,var(--metric-cellMax) 18%,transparent);color:var(--metric-cellMax);border-color:var(--metric-cellMax);}
.cell-graph-toggle.cell-line.cell-min{--cell-color:var(--metric-cellMin);}
.cell-graph-toggle.cell-line.cell-max{--cell-color:var(--metric-cellMax);}
.cell-card.min{border-color:var(--metric-cellMin);background:color-mix(in srgb,var(--metric-cellMin) 8%,#fff);}
.cell-card.min::before{background:color-mix(in srgb,var(--metric-cellMin) 14%,transparent);}
.cell-card.max{border-color:var(--metric-cellMax);background:color-mix(in srgb,var(--metric-cellMax) 8%,#fff);}
.cell-card.max::before{background:color-mix(in srgb,var(--metric-cellMax) 14%,transparent);}
.cell-card.min .cell-role{color:var(--metric-cellMin);}
.cell-card.max .cell-role{color:var(--metric-cellMax);}


/* Stage 4.6.8 — compact settings header and unified graph settings block */
.settings-panel-head{
  min-height:34px;
  flex-wrap:nowrap;
}

.settings-head-actions{
  flex:0 0 auto;
  flex-wrap:nowrap;
}
.settings-panel-close{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 0 2px;
}
.graph-settings-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.graph-settings-title{
  margin-bottom:1px;
}
.graph-setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(132px,46%);
  align-items:center;
  gap:12px;
}


@media (max-width:520px){
  .graph-setting-row{
    grid-template-columns:minmax(0,1fr) minmax(126px,48%);
    gap:9px;
  }
  .graph-setting-label{font-size:12px;}
}


/* Stage 4.6.9 — unified settings controls */
.settings-section select.settings-select,
.graph-setting-select,
#motorPresetSelect{
  width:100%;
  min-height:42px;
  height:42px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background-color:#fff;
  color:#111827;
  padding:0 36px 0 12px;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  box-sizing:border-box;
}
.settings-section select.settings-select option,
.graph-setting-select option,
#motorPresetSelect option{
  font-family:inherit;
  font-size:14px;
  font-weight:400;
}

.settings-section select.settings-select:focus-visible,
.graph-setting-select:focus-visible,
#motorPresetSelect:focus-visible{
  outline:3px solid rgba(37,99,235,.22);
  outline-offset:1px;
  border-color:#94a3b8;
}


/* Stage 4.6.10 — stable map viewport and mutually exclusive map menus */
.map-card{
  overflow-anchor:none;
  contain:layout paint;
}
#map,
#map .leaflet-map-pane,
#map .leaflet-pane{
  overflow-anchor:none;
}
#map{
  contain:layout paint;
  overscroll-behavior:contain;
}
#map .leaflet-map-pane{
  will-change:transform;
}

/* Keep the mobile map height stable when Android browser chrome changes. */
@media (max-width:520px){
  .map-card{
    height:62vh;
    height:62svh;
  }
}

/* Compact layer selector: selected state is shown by green text, not a tick. */
.layer-menu{
  min-width:124px !important;
  width:max-content;
  max-width:180px;
  padding:5px !important;
  border-radius:14px !important;
}
.layer-menu.show{gap:3px !important}
.layer-menu button{
  min-height:38px;
  padding:7px 10px !important;
  border-radius:10px !important;
  font-size:15px;
  font-weight:400 !important;
  line-height:1.2;
  white-space:nowrap;
}
.layer-menu button.active{
  background:#fff !important;
  color:#16a34a !important;
  font-weight:500 !important;
}
.layer-menu button.active::after{
  content:none !important;
  display:none !important;
}


/* Stage 4.6.11 — one visual standard for dark map popup menus */
.mode-menu,
.layer-menu{
  min-width:132px !important;
  width:max-content !important;
  max-width:190px !important;
  padding:5px !important;
  border-radius:14px !important;
  background:rgba(19,27,35,.82) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.32) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.mode-menu.show,
.layer-menu.show{
  display:flex;
  flex-direction:column;
  gap:4px !important;
}
.mode-menu button,
.layer-menu button{
  width:100%;
  min-height:38px;
  border:0 !important;
  border-radius:10px !important;
  padding:8px 11px !important;
  background:rgba(255,255,255,.94) !important;
  color:#111827 !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  text-align:left !important;
  white-space:nowrap;
  cursor:pointer;
}
.mode-menu button.active,
.layer-menu button.active{
  background:#16a34a !important;
  color:#ffffff !important;
  font-weight:900 !important;
}
.mode-menu button.active::after,
.layer-menu button.active::after{
  content:none !important;
  display:none !important;
}
.mode-menu button:active,
.layer-menu button:active{
  transform:scale(.985);
}

/* Stage 4.6.12 — reliable popup interaction and top-level modal layering */
.mode-menu,
.layer-menu{
  background:rgba(19,27,35,.68) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}
.mode-menu button,
.layer-menu button{
  touch-action:manipulation;
  pointer-events:auto;
}

/* Settings is re-parented to body at startup, matching Donate's modal layer. */
body > body > /* Stage 4.6.16 — map point size settings */
.map-settings-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.map-settings-title{margin-bottom:1px;}


/* 2026-08-07: approved feature cards use dedicated vector artwork */


/* Stage 4.6.25 — feature icons keep 152×152 PNG source files for HiDPI quality,
   while the UI displays them at a compact 76×76 CSS px. */


/* UI 1.8.12 — Chrome scroll-chain fix.
   The document owns vertical wheel/trackpad scrolling.
   Inner start-page content must hand scroll to the page at its edges. */

html,
body {
  overscroll-behavior-y: auto !important;
}

/* Start/support content must not trap vertical wheel gestures. */
.sheet,
.trip-chart-card.onboarding-mode,
.trip-chart-card.onboarding-mode .graph-panel,
.trip-chart-card.onboarding-mode .support-panel,
.trip-chart-card.onboarding-mode .feature-panel {
  overscroll-behavior-y: auto !important;
}

/* Map does not suppress desktop browser wheel/trackpad page scrolling. */
@media (hover: hover) and (pointer: fine){
  .map-card,
  #map {
    touch-action: auto !important;
  }
}

/* On touch devices preserve map touch interaction without affecting desktop Chrome. */
@media (hover: none), (pointer: coarse){
  .map-card,
  #map {
    touch-action: none;
  }
}

/* UI 1.8.12 — page scroll remains native outside the map. */
html,
body {
  overscroll-behavior-y: auto !important;
}