/* © 2026 OV Markets — shared zoom controls for OV Cycles and OV Valuation.
   The canvas keeps vertical swipes for the page (pan-y): only horizontal drags
   and pinches reach the chart, so zooming never gets in the way of scrolling. */
.chart-zoomable { touch-action:pan-y; cursor:crosshair; }
.chart-zoomable.is-pan-ready { cursor:grab; }
.chart-zoomable.is-panning { cursor:grabbing; }
.chart-zoomable.is-selecting { cursor:col-resize; }
.chart-zoomable:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--gold); }

/* The band a mouse selection draws before it zooms. */
.chart-zoom-selection {
  position:absolute; z-index:3; pointer-events:none;
  background:rgba(var(--gold-rgb, 245,158,11), .13);
  border-left:1px solid rgba(var(--gold-rgb, 245,158,11), .75);
  border-right:1px solid rgba(var(--gold-rgb, 245,158,11), .75);
}

/* The bar above the chart: zoom buttons on the left, how-to on the right. */
.chart-zoom-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; margin:10px 12px 0; }
.chart-zoom-controls { display:flex; gap:4px; }
.chart-zoom-controls button {
  min-width:30px; height:30px; padding:0 9px; border:1px solid var(--border2); border-radius:7px;
  background:var(--surface); color:var(--text);
  font:600 15px/1 'IBM Plex Mono', monospace; cursor:pointer;
  transition:border-color .15s, color .15s, opacity .15s;
}
.chart-zoom-controls button[data-zoom="reset"] { font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.chart-zoom-controls button:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.chart-zoom-controls button:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
.chart-zoom-controls button:disabled { opacity:.38; cursor:default; }
.chart-zoom-help { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.chart-zoom-help-touch { display:none; }
@media (hover:none) and (pointer:coarse) {
  .chart-zoom-help-mouse { display:none; }
  .chart-zoom-help-touch { display:inline; }
}

@media (max-width:700px) {
  .chart-zoom-bar { margin:8px 4px 0; }
  .chart-zoom-controls button { min-width:36px; height:36px; }
  .chart-zoom-help { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .chart-zoom-controls button { transition:none; } }