/* ap-video-controls — progressive-enhancement strip added under every <video>
   element site-wide: skip ±10s and a visible playback-speed selector.
   Native <video controls> is left in place; this strip sits alongside it. */
.ap-vc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--ap-surface, #f4f1ea);
  border: 1px solid var(--ap-border, #ddd6c8);
  border-radius: 8px;
  font-family: inherit;
  flex-wrap: wrap;
}
.ap-vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ap-border, #ddd6c8);
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ap-ink, #2a2a2a);
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, transform .1s ease;
}
.ap-vc-btn:hover { background: #eee8da; }
.ap-vc-btn:active { transform: scale(0.96); }
.ap-vc-bar .ap-vc-sep {
  width: 1px;
  height: 20px;
  background: var(--ap-border, #ddd6c8);
  margin: 0 4px;
}
.ap-vc-speed-group {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}
.ap-vc-speed-btn {
  border: 1px solid var(--ap-border, #ddd6c8);
  background: #fff;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ap-muted, #6b6357);
  cursor: pointer;
}
.ap-vc-speed-btn.active {
  background: var(--ap-ink, #2a2a2a);
  color: #fff;
  border-color: var(--ap-ink, #2a2a2a);
}
.ap-vc-label {
  font-size: 12px;
  color: var(--ap-muted, #6b6357);
  margin-right: 2px;
}