/* The picker replaces the toolbar in place, preserving the chart's bounds. */
html body #controls .chart-toolbar {position:relative;}
html body #controls .chart-ruler-trigger {
 position:absolute;inset:0;width:100%;height:100%;min-height:44px;
 border:0;border-radius:inherit;padding:0;background:transparent;color:inherit;cursor:pointer;
 touch-action:pan-x;
}
html body #controls .chart-ruler-trigger:focus-visible {outline:2px solid var(--text);outline-offset:-3px;}
html body #controls .chart-tool select[hidden] {display:none!important;}
html body #controls.time-ruler-open .chart-toolbar {
 margin-right:0;max-width:100%;overflow:hidden;mask-image:none;-webkit-mask-image:none;
}
html body #controls.time-ruler-open .chart-toolbar>.chart-tool {visibility:hidden;pointer-events:none;}
html body #app:has(#controls.time-ruler-open) #controls-toggle-btn {visibility:hidden;pointer-events:none;}
html body #controls .chart-time-ruler {
 position:absolute;inset:5px 8px;display:flex;align-items:center;gap:8px;min-width:0;
 border:1px solid var(--tg-rim,var(--line));border-radius:999px;padding:0 3px;
 background:var(--tg-panel,var(--panel));color:var(--text);
 box-shadow:inset 0 1px 0 var(--tg-shine,var(--line));
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 animation:chart-ruler-enter 180ms ease-out;isolation:isolate;
}
html body #controls .chart-time-ruler[hidden] {display:none!important;}
.chart-ruler-value {
 flex:0 0 62px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
 height:38px;border-radius:999px;background:var(--tg-soft,var(--surface-soft));
 font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
}
.chart-ruler-value strong {font-size:16px;font-weight:650;line-height:1.1;}
.chart-ruler-value small {max-width:56px;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.1;color:var(--muted);}
.chart-ruler-viewport {
 position:relative;flex:1 1 0;min-width:0;height:44px;overflow:hidden;cursor:grab;touch-action:none;
 user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
 mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);
 -webkit-mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);
}
.chart-ruler-viewport:focus-visible {outline:2px solid var(--text);outline-offset:-2px;border-radius:8px;}
.chart-ruler-viewport[data-dragging] {cursor:grabbing;}
.chart-ruler-strip {display:flex;width:max-content;height:44px;transition:transform 160ms cubic-bezier(.2,.8,.2,1);will-change:transform;}
.chart-ruler-viewport[data-dragging] .chart-ruler-strip {transition:none;}
.chart-ruler-stop {
 position:relative;flex:0 0 48px;width:48px;height:44px;display:flex;align-items:flex-end;
 justify-content:center;padding-bottom:4px;color:var(--muted);font-size:10px;font-weight:500;line-height:1;
}
.chart-ruler-stop::before {content:"";position:absolute;top:10px;left:23px;width:2px;height:12px;border-radius:2px;background:currentColor;}
.chart-ruler-stop::after {content:"";position:absolute;top:13px;left:35px;width:2px;height:6px;border-radius:2px;background:currentColor;box-shadow:12px 0 currentColor,24px 0 currentColor;opacity:.4;}
.chart-ruler-stop[data-selected] {color:var(--text);font-weight:700;}
.chart-ruler-stop[data-disabled] {opacity:.28;}
.chart-ruler-needle {position:absolute;top:6px;left:calc(50% - 1.5px);width:3px;height:20px;border-radius:2px;background:var(--text);pointer-events:none;}
html body #controls .chart-ruler-close {
 display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;
 padding:0;border:0;border-radius:50%;background:var(--tg-soft,var(--surface-soft));color:var(--text);cursor:pointer;
}
html body #controls .chart-ruler-close svg {width:20px;height:20px;}
.chart-ruler-close:focus-visible {outline:2px solid var(--text);outline-offset:-3px;}
.chart-ruler-close:active {opacity:.65;}
@keyframes chart-ruler-enter {from {opacity:0;transform:scale(.98);}to {opacity:1;transform:scale(1);}}
@media(prefers-reduced-motion:reduce) {.chart-ruler-strip {transition:none;}html body #controls .chart-time-ruler {animation:none;}}