/* UI 1.9.17 — Playback / Main Timeline Layout Cleanup
   Toolbar geometry/visual declarations migrated from legacy style.css.
   Interaction, scrolling behavior, stacking, progress strip, timeline, tabs and playback remain untouched. */


/* BMSDock v10 UI 1.9.12 — Feature Cards Standardization
   Only graph-panel container geometry moved from legacy style.css.
   Toolbar, timeline, overlays, pointer-events, stacking and playback are untouched. */

.graph-panel{display:none;}
.graph-panel{box-sizing:border-box !important;}
.graph-panel{padding-bottom:0 !important;}
.graph-panel{padding-top:0 !important;}
.graph-panel{height:auto !important;min-height:0 !important;max-height:none !important;padding:0 !important;}
.graph-panel.active{display:flex !important;}
.trip-chart-card:not(.onboarding-mode) .graph-panel{height:auto !important;min-height:0 !important;max-height:none !important;}
.trip-chart-card:not(.onboarding-mode) .graph-panel{margin:0 !important;}
.trip-chart-card:not(.onboarding-mode) .graph-panel.active{display:flex !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;}
.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) .graph-panel{padding-top:0 !important;}
.trip-chart-card:not(.onboarding-mode) .graph-panel{box-sizing:border-box !important;padding:var(--bms-toolbar-top) 0 0 !important;}

/* BMSDock v10 UI 1.9.12 — Feature Cards Standardization
   Only outer trip-chart-card shell geometry/visuals migrated from legacy style.css.
   No graph panels, toolbar, timeline, stacking, pointer-events or playback logic here. */
.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;}
.sheet.stats-collapsed .trip-chart-card{
  margin-top:10px!important;
}
.sheet:has(.stats-card.stats-slot-card-mode) .stats-card.stats-slot-card-mode + .trip-chart-card{
  margin-top:0!important;
}
.trip-chart-card:not(.onboarding-mode){
  margin-top:0!important;
}

/* BMSDock UI 1.8.12 — Graph UI standardization
   Visual layer only. Chart rendering, viewport geometry and playback logic stay untouched. */

:root{
  --graph-ui-text:var(--ui-color-text);
  --graph-ui-muted:var(--ui-color-muted);
  --graph-ui-border:#e5e7eb;
  --graph-ui-surface:var(--ui-color-surface);
  --graph-ui-soft:var(--ui-color-surface-soft);
  --graph-ui-radius:var(--ui-radius-card);
  --graph-ui-control-radius:var(--ui-radius-control);
  --graph-ui-font:var(--ui-font-control);
  --graph-ui-weight:var(--ui-weight-bold);

  /* Slot / Tab shared control contract.
     One geometry owner for Main Graph and Cell Graph. */
  --graph-view-toggle-width:80px;
  --graph-view-toggle-height:29px;
  --graph-view-toggle-icon-size:18px;
  --graph-view-toggle-gap:4px;
  --graph-view-toggle-label-width:34px;
  --graph-view-toggle-padding-x:8px;
}

/* Shared graph card */
.trip-chart-card:not(.onboarding-mode){
  background:var(--graph-ui-surface) !important;
  border:1px solid var(--graph-ui-border) !important;
  border-radius:var(--graph-ui-radius) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}

/* Main / Cell / Info toolbar buttons share one typographic and geometric language. */


/* Preserve channel identity only for active state. */


/* The toolbar scroll indicator is a secondary neutral element. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress{
  background:var(--graph-ui-surface) !important;
}
.trip-chart-card:not(.onboarding-mode) .graph-panel > .bms-toolbar-progress .bms-toolbar-progress-thumb{
  background:#cbd5e1 !important;
  border-radius:999px !important;
}

/* Zoom overlay follows the same control geometry as Settings / Donate. */
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > .chart-zoom-overlay,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > .chart-zoom-overlay{
  border:1px solid #dbe2ea !important;
  border-radius:var(--graph-ui-control-radius) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.12) !important;
  backdrop-filter:blur(8px) !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-zoom-overlay .chart-zoom-btn{
  border:1px solid #dbe2ea !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--graph-ui-text) !important;
  font-weight:var(--graph-ui-weight) !important;
  box-shadow:none !important;
}
.trip-chart-card:not(.onboarding-mode) .chart-zoom-overlay .chart-zoom-label{
  font-size:var(--graph-ui-font) !important;
  font-weight:var(--graph-ui-weight) !important;
  color:var(--graph-ui-muted) !important;
}

/* Bottom graph tabs: one level, one type scale. */


/* Cell Info adopts the same text hierarchy. */


.trip-chart-card:not(.onboarding-mode) .cell-role,
.trip-chart-card:not(.onboarding-mode) .cell-role-inline{
  font-size:12px !important;
  font-weight:var(--graph-ui-weight) !important;
}
.trip-chart-card:not(.onboarding-mode) .cell-empty,
.trip-chart-card:not(.onboarding-mode) .cell-info-empty-label{
  font-size:var(--graph-ui-font) !important;
  font-weight:var(--ui-weight-regular) !important;
  color:var(--graph-ui-muted) !important;
}

/* Mini timeline remains a secondary navigation element. */



/* UI 1.8.12 — Cell Graph / Cell Info refinements */
/* Selected cell filters must read as active, not disabled. Keep chart line colors unchanged. */


/* Preserve the established Min / Max card surfaces and borders. */


/* Only the voltage text receives the semantic Min / Max color. */


/* UI 1.8.12 — Cell Info semantic Min/Max text colors.
   Card backgrounds, borders and geometry remain unchanged. */


/* MIN label */


/* MIN voltage */


/* MAX label */


/* MAX voltage */


/* Cell Graph: active cell is clear but not heavy/dark. */


/* Bottom graph tabs: no extra top selection stripe. */


/* Cell Info extrema — real markup selectors only. */


/* UI 1.8.12 — exact Graph UI fixes. */

/* Main Graph Speed: use the same canonical color as the plotted Speed series. */


/* Cell Graph Speed and Delta: use the exact same colors as their plotted series. */


/* Cell Graph regular cells: match Cell Info's approved active-toggle pattern exactly. */


/* Bottom graph tabs: no extra active stripe. */


/* Working Min/Max selectors from UI 1.5.4 — keep unchanged. */


/* UI 1.9.16 — Graph Mini Timeline Layout
   Geometry / visual surface only.
   Interaction (touch-action, cursor, user-select, overflow), onboarding state,
   playback synchronization and JS scrubbing remain outside this section. */

.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap{
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  height:45px !important;
  min-height:45px !important;
  max-height:45px !important;
  margin:10px 10px 10px !important;
  padding:0 !important;
  border:1px solid #dbe2ea;
  border-radius:10px !important;
  background:#f8fafc;
}

.trip-chart-card:not(.onboarding-mode) #miniTimeline{
  display:block !important;
  width:100% !important;
  height:45px !important;
  min-height:45px !important;
  max-height:45px !important;
  margin:0 !important;
}

.trip-chart-card:not(.onboarding-mode) .mini-timeline-wrap.is-scrubbing{
  box-shadow:0 0 0 2px rgba(37,99,235,.18);
}

/* UI 1.9.16 — Cell selector color parity
   Regular Cell Graph and Cell Info selectors share one neutral visibility-state
   palette. Metric buttons (Speed/Average/Delta/Min/Max) keep their semantic colors. */


/* UI 1.9.21 — Cell Graph Controls
   Single owner for Cell Graph selector color states.
   Geometry/toolbar interaction stay in the shared Graph Toolbar layer.
   Cell Info is intentionally owned separately. */

/* Regular Cell N selectors: approved neutral visibility-state palette. */
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle.cell-line.active{
  background:#e5e7eb !important;
  border-color:#cbd5e1 !important;
  color:#111827 !important;
  opacity:1 !important;
  box-shadow:none !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle.cell-line:not(.active){
  background:#f8fafc !important;
  border-color:#d7dde6 !important;
  color:#475569 !important;
  opacity:.42 !important;
  box-shadow:none !important;
}

/* Semantic Cell Graph metrics. Inactive buttons continue to use the shared
   neutral toolbar state; active buttons retain the exact 1.9.20 palette. */
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle[data-cell-chart="speed"].active{
  background:color-mix(in srgb,var(--metric-speed) 12%,#fff) !important;
  border-color:var(--metric-speed) !important;
  color:var(--metric-speed) !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle[data-cell-chart="avg"].active{
  background:rgba(124,58,237,.10) !important;
  border-color:#7c3aed !important;
  color:#6d28d9 !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle[data-cell-chart="delta"].active{
  background:color-mix(in srgb,var(--metric-cellDelta) 12%,#fff) !important;
  border-color:var(--metric-cellDelta) !important;
  color:var(--metric-cellDelta) !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle[data-cell-chart="min"].active{
  background:color-mix(in srgb,var(--metric-cellMin) 18%,transparent) !important;
  border-color:var(--metric-cellMin) !important;
  color:var(--metric-cellMin) !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphToggleRow .cell-graph-toggle[data-cell-chart="max"].active{
  background:color-mix(in srgb,var(--metric-cellMax) 18%,transparent) !important;
  border-color:var(--metric-cellMax) !important;
  color:var(--metric-cellMax) !important;
}

/* Optional semantic line aliases retained for compatibility with legacy/data
   channel classification if these classes are assigned. */
#cellGraphToggleRow .cell-graph-toggle.cell-line.cell-min{
  --cell-color:var(--metric-cellMin);
}
#cellGraphToggleRow .cell-graph-toggle.cell-line.cell-max{
  --cell-color:var(--metric-cellMax);
}

/* UI 1.9.22 — Cell Info Controls + Cards
   Single visual owner for Cell Info toolbar states and loaded cell cards.
   Playback refresh, cellChannelSignature, touch/pointer interaction, panel height,
   scrolling and empty-state layout remain in their existing owners. */

.trip-chart-card:not(.onboarding-mode) #cellInfoToggleRow.cell-info-toggle-row{
  margin:2px 0 10px;
  padding-bottom:8px;
  flex:0 0 auto;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoToggleRow .cell-info-toggle.active{
  background:#e5e7eb !important;
  border-color:#cbd5e1 !important;
  color:#111827 !important;
  opacity:1 !important;
  box-shadow:none !important;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoToggleRow .cell-info-toggle:not(.active){
  background:#f8fafc !important;
  border-color:#d7dde6 !important;
  color:#475569 !important;
  opacity:.42 !important;
  box-shadow:none !important;
}

.trip-chart-card:not(.onboarding-mode) #cellInfoPanel > #cellInfoGrid.cell-info-grid:not(.cell-info-grid-empty){
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:9px !important;
  row-gap:7px !important;
  align-content:start;
}

.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card{
  --cell-terminal-color:#4f83c2;
  position:relative;
  box-sizing:border-box;
  width:auto;
  height:42px !important;
  min-height:42px !important;
  max-height:52px;
  padding:3px 2px !important;
  border:1.5px solid var(--graph-ui-border) !important;
  border-radius:10px !important;
  background:var(--graph-ui-soft) !important;
  overflow:visible !important;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card::before{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  top:0;
  bottom:0;
  width:var(--fill,0%);
  height:auto;
  border-radius:inherit;
  background:rgba(37,99,235,.12);
  overflow:hidden;
  z-index:0;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card>*{
  position:relative;
  z-index:1;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card::after{
  content:"";
  position:absolute;
  top:50%;
  right:-5px !important;
  width:3px !important;
  height:12px !important;
  transform:translateY(-50%);
  border-radius:0 !important;
  background:var(--cell-terminal-color);
  box-shadow:none;
  opacity:.78;
  pointer-events:none;
  z-index:2;
}

.trip-chart-card:not(.onboarding-mode) #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;
}
.trip-chart-card:not(.onboarding-mode) #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;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.min::before{
  background:rgba(239,68,68,.14) !important;
}
.trip-chart-card:not(.onboarding-mode) #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;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.max::before{
  background:rgba(34,197,94,.14) !important;
}

.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-name{
  width:100% !important;
  min-height:12px;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:var(--ui-weight-regular) !important;
  color:var(--graph-ui-muted) !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-name span:first-child{
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-value{
  margin-top:1px !important;
  font-size:var(--graph-ui-font) !important;
  line-height:1.02 !important;
  font-weight:var(--graph-ui-weight) !important;
  color:var(--graph-ui-text) !important;
  text-align:center;
  white-space:nowrap !important;
}

/* Approved semantic hierarchy: label uses bright semantic color; voltage uses dark semantic color. */
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.min .cell-name{color:#ef4444 !important;}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.min .cell-value{color:#991b1b !important;}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.max .cell-name{color:#22c55e !important;}
.trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card.max .cell-value{color:#166534 !important;}

@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode) #cellInfoPanel .cell-card{
    padding-left:1px !important;
    padding-right:1px !important;
  }
}

/* UI 1.9.23 — Graph Canvas / Plot Layout Cleanup
   Canonical owner for Main Graph + Cell Graph plot geometry only.
   Gesture, scroll, pointer, zoom and playback behavior remain in style.css/app.js. */

.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > #chartScroll,
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > #cellChartScroll{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:stretch !important;
  flex:0 0 var(--bms-graph-content-h) !important;
  width:100% !important;
  height:var(--bms-graph-content-h) !important;
  min-height:var(--bms-graph-content-h) !important;
  max-height:var(--bms-graph-content-h) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  line-height:0 !important;
}

/* Main Graph keeps the fixed V8 viewport full-width. */
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > #chartScroll{
  background:#fff;
}
.trip-chart-card:not(.onboarding-mode) #mainGraphPanel > #chartScroll > #chart{
  box-sizing:border-box !important;
  display:block !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0;
  background:#fff;
  vertical-align:top !important;
}

/* Cell Graph preserves the JS-owned horizontal canvas sizing while the
   viewport itself stays full-bleed to both panel edges. */
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel{
  padding-left:0 !important;
  padding-right:0 !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > #cellChartScroll{
  align-self:stretch !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;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.trip-chart-card:not(.onboarding-mode) #cellGraphPanel > #cellChartScroll > #cellChart{
  box-sizing:border-box !important;
  display:block !important;
  flex:0 0 auto !important;
  width:100% !important;
  min-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  vertical-align:top !important;
}

/* FIX mode changes axes/rendering behavior, not plot spacing. */
.trip-chart-card.graph-fix-mode #mainGraphPanel,
.trip-chart-card.graph-fix-mode #mainGraphPanel > #chartScroll,
.trip-chart-card.graph-fix-mode #mainGraphPanel > #chartScroll > #chart{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* UI 1.9.29 — Fixed Graph Tab/Slot control geometry. */


/* UI 1.9.30 — native CSV Power visibility is controlled by source policy. */
#chartPowerBtn[hidden]{
  display:none !important;
}

/* UI 1.9.31 — Graph Controls CSS Consolidation
   Single owner for Main Graph / Cell Graph toolbar geometry, interaction and
   common button states. Approved 1.9.30 visual geometry is preserved:
   33px toolbar paint area, 29px controls, 54x29px Tab/Slot. */

/* Toolbar shell and native horizontal interaction. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport{
  box-sizing:border-box !important;
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
  overflow:hidden !important;
  overscroll-behavior:contain;
  flex:0 0 33px !important;
  width:100% !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  margin:0 0 -3px 0 !important;
  padding:0 !important;
  background:#fff !important;
}

.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row{
  box-sizing:border-box !important;
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  margin:0 !important;
  padding:2px 10px !important;
  gap:8px !important;
  white-space:nowrap !important;
  border:0 !important;
  background:var(--graph-ui-surface) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  touch-action:pan-x !important;
  cursor:grab;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  -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;
}

.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row:active{
  cursor:grabbing;
}

.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::after{
  content:"";
  flex:0 0 1px;
  height:1px;
}

/* Common control paint and geometry. */
.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;
  position:relative !important;
  z-index:30 !important;
  pointer-events:auto !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;
  margin:0 !important;
  padding:0 12px !important;
  border:1px solid #dbe2ea;
  border-radius:var(--graph-ui-control-radius) !important;
  background:#fff;
  color:var(--graph-ui-muted);
  font-size:var(--graph-ui-font) !important;
  font-weight:var(--graph-ui-weight) !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease,transform .1s ease !important;
  vertical-align:top !important;
  align-self:flex-start !important;
  cursor:pointer;
  touch-action:pan-x !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Ordinary controls may size to content; Tab/Slot is the only fixed-width control. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:not(.chart-fix){
  min-width:0 !important;
}

.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:active{
  transform:translateY(1px);
}

.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:not(.active){
  background:var(--graph-ui-soft) !important;
  border-color:#dbe2ea !important;
  color:var(--graph-ui-muted) !important;
  opacity:1 !important;
}

.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:focus-visible{
  outline:2px solid rgba(37,99,235,.28) !important;
  outline-offset:2px !important;
}

/* Approved active channel identity colors. */
.trip-chart-card:not(.onboarding-mode) .chart-speed.active{
  background:color-mix(in srgb,var(--metric-speed) 12%,#fff) !important;
  border-color:var(--metric-speed) !important;
  color:var(--metric-speed) !important;
}

.trip-chart-card:not(.onboarding-mode) .chart-power.active{
  background:rgba(245,158,11,.10) !important;
  border-color:#f59e0b !important;
  color:#d97706 !important;
}

.trip-chart-card:not(.onboarding-mode) .chart-temp.active{
  background:rgba(37,99,235,.09) !important;
  border-color:var(--temp-color,#2563eb) !important;
  color:var(--temp-color,#2563eb) !important;
}

.trip-chart-card:not(.onboarding-mode) .chart-extra.active{
  background:color-mix(in srgb,var(--extra-color,#64748b) 10%,#fff) !important;
  border-color:var(--extra-color,#64748b) !important;
  color:var(--extra-color,#64748b) !important;
}

/* Slot/Tab is one shared icon+text control contract.
   Main Graph and Cell Graph use the same semantic class and geometry.
   A fixed icon column, fixed label column and explicit gap prevent the control
   from shifting when the label changes between SLOT and TABS. */
.trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle.graph-view-toggle{
  width:var(--graph-view-toggle-width) !important;
  min-width:var(--graph-view-toggle-width) !important;
  max-width:var(--graph-view-toggle-width) !important;
  height:var(--graph-view-toggle-height) !important;
  min-height:var(--graph-view-toggle-height) !important;
  max-height:var(--graph-view-toggle-height) !important;
  flex:0 0 var(--graph-view-toggle-width) !important;
  padding-left:var(--graph-view-toggle-padding-x) !important;
  padding-right:var(--graph-view-toggle-padding-x) !important;
  gap:var(--graph-view-toggle-gap) !important;
  text-transform:uppercase;
}

.trip-chart-card:not(.onboarding-mode) .graph-view-toggle .chart-fix-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--graph-view-toggle-icon-size);
  height:var(--graph-view-toggle-icon-size);
  flex:0 0 var(--graph-view-toggle-icon-size);
  color:inherit;
}

.trip-chart-card:not(.onboarding-mode) .graph-view-toggle .chart-fix-icon > svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
  color:inherit;
  pointer-events:none;
}

.trip-chart-card:not(.onboarding-mode) .graph-view-toggle .chart-fix-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--graph-view-toggle-label-width);
  min-width:var(--graph-view-toggle-label-width);
  flex:0 0 var(--graph-view-toggle-label-width);
  text-align:center;
}

.trip-chart-card:not(.onboarding-mode) .chart-fix.active{
  background:#f1f5f9 !important;
  border-color:#cbd5e1 !important;
  color:#334155 !important;
}

@media (max-width:520px){
  .trip-chart-card:not(.onboarding-mode) .graph-panel > .chart-toggle-viewport > .chart-toggle-row .chart-toggle:not(.chart-fix){
    padding-left:11px !important;
    padding-right:11px !important;
  }
}