: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:700;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}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 12px;margin-top:18px}.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}.stats{gap:16px 6px}.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-btn.active{background:rgba(19,27,35,.82)}.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:700;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)}.round-tool:not(.active){opacity:.55}.round-tool.active{background:rgba(19,27,35,.82)}.map-tools{display:none}.map-card.no-tiles #map{background:#28363c}.km-marker{width:26px;height:26px;border-radius:50%;background:#11182a;color:#fff;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.38)}@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{display:none;border:0;border-radius:12px;background:rgba(255,255,255,.95);color:#111;padding:10px 12px;font-size:13px;font-weight:900;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}.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{width:26px;height:26px;border-radius:50%;background:#11e64f;border:4px solid #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:active,.speed-btn:active,.info-btn:active,.round-tool:active{transform:scale(.96)}
.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}

.trip-chart-card{margin-top:18px;background:linear-gradient(180deg,#0f1d2a 0%,#111a24 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.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:600;
}

.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 */
.trip-chart-card{
  margin-top:18px;
  background:#ffffff;
  border:1px solid #e8edf3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.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 */
.trip-chart-card{margin-top:18px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 24px rgba(15,23,42,.06);overflow:hidden}.graph-panel{display:none;padding:12px 12px 0px}.graph-panel.active{display:block}.graph-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #e5e7eb;background:#f8fafc;margin-top:-8px}.graph-tab{height:44px;border:0;border-right:1px solid #e5e7eb;background:#f8fafc;color:#64748b;font-size:13px;font-weight:900;cursor:pointer}.graph-tab:last-child{border-right:0}.graph-tab.active{background:#fff;color:#111827}.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}.graph-tab{height:42px;font-size:12px}.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;
  min-width:100% !important;
  width:100%;
  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;
}
.graph-tabs{
  margin-top: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 */
.stats-collapse-handle{
  width:100%;
  height:28px;
  margin:0 0 8px 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e2e8f0;
  border-top:0;
  border-radius:0 0 18px 18px;
  background:#fff;
  color:#94a3b8;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(15,23,42,.05);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.stats-collapse-handle:active{background:#f8fafc;}
.stats-collapse-arrow{
  display:block;
  font-size:34px;
  line-height:20px;
  font-weight:900;
  transform:translateY(-4px);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.sheet.stats-collapsed .stats{display:none!important;}
.sheet.stats-collapsed .trip-chart-card{margin-top:8px;}
.sheet.stats-collapsed .stats-collapse-handle{
  height:24px;
  margin-bottom:6px;
  border-radius:0 0 16px 16px;
}
.sheet.stats-collapsed .stats-collapse-arrow{
  transform:translateY(2px);
}
@media(max-width:520px){
  .stats-collapse-handle{height:26px;margin-bottom:6px;border-radius:0 0 16px 16px;}
  .stats-collapse-arrow{font-size:32px;}
}

/* Final: make the collapse arrow a built-in part of the stats table slot. */
.stats-card{
  margin-top:10px;
  margin-bottom:14px;
  padding:0 0 12px 0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
}
.stats-card .stats{
  margin-top:0;
  padding:0 12px 0 12px;
}
.stats-card .stats-collapse-handle{
  width:100%;
  height:24px;
  margin:0 0 6px 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#94a3b8;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.stats-card .stats-collapse-handle:active{background:rgba(148,163,184,.06);}
.stats-card .stats-collapse-arrow{
  display:block;
  font-size:28px;
  line-height:18px;
  font-weight:900;
  transform:translateY(-2px);
  pointer-events:none;
}
.sheet.stats-collapsed .stats-card{
  padding-bottom:0;
  margin-bottom:10px;
}
.sheet.stats-collapsed .stats-card .stats{display:none!important;}
.sheet.stats-collapsed .stats-card .stats-collapse-handle{
  height:24px;
  margin-bottom:0;
}
.sheet.stats-collapsed .stats-card .stats-collapse-arrow{
  transform:translateY(1px);
}
.sheet.stats-collapsed .trip-chart-card{margin-top:10px;}
@media(max-width:520px){
  .stats-card{margin-top:8px;margin-bottom:12px;border-radius:15px;padding-bottom:10px;}
  .stats-card .stats{padding-left:8px;padding-right:8px;}
  .stats-card .stats-collapse-handle{height:22px;margin-bottom:5px;}
  .stats-card .stats-collapse-arrow{font-size:27px;}
}