/* SKYNET DVR timeline — 7-day scrubber. Cyan recorded spans over a dim track,
   day / 6-hour ticks, a position playhead. Builds on theme.css tokens. */

.sk-dvr {
  --sk-dvr-h: 26px;
  width: 100%;
  user-select: none;
}

/* the clickable track */
.sk-dvr-track {
  position: relative;
  height: var(--sk-dvr-h);
  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}

/* recorded ranges */
.sk-dvr-segs { position: absolute; inset: 0; }
.sk-dvr-seg {
  position: absolute;
  top: 3px; bottom: 3px;
  min-width: 1px;
  background: rgba(var(--cyan-rgb), .55);
  border-left: 1px solid rgba(var(--cyan-rgb), .9);
  box-shadow: inset 0 0 8px -3px rgba(var(--cyan-rgb), .9);
}
.sk-dvr-track:hover .sk-dvr-seg { background: rgba(var(--cyan-rgb), .72); }

/* ticks */
.sk-dvr-ticks { position: absolute; inset: 0; pointer-events: none; }
.sk-dvr-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .05);
}
.sk-dvr-tick--day { background: rgba(255, 255, 255, .16); }

/* playhead marker */
.sk-dvr-head {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(var(--orange-rgb), .9);
  pointer-events: none;
}

/* axis labels beneath the track */
.sk-dvr-axis {
  position: relative;
  height: 12px;
  margin-top: 2px;
}
.sk-dvr-daylbl {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* empty state — nothing recorded in window */
.sk-dvr--empty .sk-dvr-track { border-style: dashed; }
.sk-dvr--empty .sk-dvr-track::after {
  content: "NO FOOTAGE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--faint);
}

/* compact inline variant used inside a tile */
.sk-dvr--compact { --sk-dvr-h: 20px; }
.sk-dvr--compact .sk-dvr-axis { height: 10px; }
.sk-dvr--compact .sk-dvr-daylbl { font-size: 7px; }