/*
 * WATERFALL
 * =========
 * Two waterfalls (HAR1 + HAR2) stacked in the same area on a shared
 * time axis. A slider blends between them via CSS opacity.
 */

.rangeWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 0 14px 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);

  .har-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }
}

.harwrapper {
  position: relative;
}

.har-canvas {
  width: 100%;

  canvas {
    display: block;
    width: 100%;
  }
}

/*
 * Base waterfall sits in normal flow so its rendered canvas drives
 * the wrapper's height. The overlay waterfall is positioned over it
 * and its opacity is controlled by the slider.
 */
.har-canvas--base {
  position: relative;
}

.har-canvas--overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* pointer-events is set per-frame by blendWaterfalls() in ux.js so
     hover follows whichever HAR is currently more visible. */
  pointer-events: none;
}

/*
 * Side-by-side mode — two waterfalls in a grid instead of stacked
 * with a blend slider. Useful for "which row is HAR1?" — overlaying
 * makes that question harder than it should be.
 */
.harwrapper--side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;

  .har-canvas {
    min-width: 0;
  }
  .har-canvas--base,
  .har-canvas--overlay {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 720px) {
  .harwrapper--side-by-side {
    grid-template-columns: 1fr;
  }
}

/* Floating tooltip used by the waterfall-tools onHover hook. Lives at
   document.body so it can pop over the card without being clipped by
   the .harwrapper overflow. */
.waterfall-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 480px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-surface-card);
  background: rgba(17, 24, 39, 0.92);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  word-break: break-all;
}

/* Slider styling — same brand-blue thumb as the rest of the UI. */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 240px;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;

  &:focus { outline: none; }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
  }
  &::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--color-blue);
    border: 2px solid var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
  }
  &::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-blue);
    border: 2px solid var(--color-surface-card);
    box-shadow: var(--shadow-sm);
  }

  &:focus-visible {
    &::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-blue-tint); }
    &::-moz-range-thumb     { box-shadow: 0 0 0 4px var(--color-blue-tint); }
  }
}