/* Time tools (lane L6): a slim strip at the bottom of the chart. The handle sits right of the zoom bar; the open strip
 * spans the chart above the zoom bar (and above the Directions timeline when that is docked). */
#center > #time-tools { position: absolute; left: 12px; right: 12px; bottom: 52px; z-index: 11; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font: 500 var(--fs-caption, 11px)/1.3 var(--ui-font, system-ui); }
#center:has(> #sphere-workspace-timeline:not([hidden])) > #time-tools { bottom: calc(var(--sws-timeline-h, 0px) + 52px); }
#time-tools > * { pointer-events: auto; }
#time-tools .tt-handle { order: 2; }
#time-tools .tt-body { order: 1; align-self: stretch; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--bd); border-radius: var(--r5, 6px); background: var(--pn); color: var(--tb); }
#time-tools .tt-body[hidden] { display: none; }
#time-tools .tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#time-tools .tt-group { display: inline-flex; align-items: center; gap: 4px; }
#time-tools .tt-select { font: inherit; color: inherit; background: transparent; border: 1px solid var(--bd); border-radius: 999px; padding: 2px 8px; min-height: 24px; }
#time-tools .tt-select option { background: var(--pn); color: var(--tb); }
#time-tools .tt-status { color: var(--td); min-width: 6em; }
#time-tools .tt-save { text-decoration: none; }
#time-tools .tt-save[hidden] { display: none; }
#time-tools .tt-track { position: relative; height: 30px; border-radius: 4px; cursor: ew-resize; touch-action: none; outline: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent); }
#time-tools .tt-track:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
#time-tools .tt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#time-tools .tt-readout { position: absolute; right: 6px; top: 2px; color: var(--td); font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
@media (max-width: 700px) {
  #center > #time-tools { left: 8px; right: 8px; }
  #time-tools .tt-status { display: none; }
}