/**
 * Navigator — extractable strip (Mockup D)
 * Scope: only under .navigator
 *
 * Controls: prev · restart · play · next | auto · speed
 */

.navigator {
  /* Color — prefer shell float tokens */
  --nav-ink: var(--ink, #1a1a1a);
  --nav-line: var(--line, #ebe4d6);
  --nav-control-h: var(--float-control-h, var(--touch, 44px));
  --nav-icon: var(--float-icon, 20px);
  --nav-btn-fill: var(--float-btn-fill, rgb(255 255 255 / 0.7));
  --nav-stroke: var(--float-stroke, 2px);
  /* Type (countdown digit + speed label) */
  --nav-digit-size: 1.05rem;
  --nav-digit-weight: 600;
  /* Motion */
  --nav-ease: cubic-bezier(0.2, 0, 0, 1);
  --nav-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --nav-ease-power2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-ease-io: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --nav-ms-fast: 160ms;
  --nav-ms: 250ms;
  --nav-ms-leave: 280ms;
  --nav-ms-press: 80ms;
  /* Infinity stroke draw — keep in sync with INF_DRAW_MS in navigator.js */
  --nav-inf-draw-ms: 2.2s;

  display: flex;
  gap: var(--float-control-gap, 0.4rem);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--float-pad-y, 0.45rem) var(--float-pad-x, 0.55rem);
  position: relative;
  z-index: 2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--nav-ink);
  box-sizing: border-box;
}

.navigator__sep {
  width: 1px;
  height: 28px;
  margin: 0 0.1rem;
  background: var(--nav-line);
  flex-shrink: 0;
  align-self: center;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.navigator button {
  box-sizing: border-box;
  height: var(--nav-control-h);
  min-height: var(--nav-control-h);
  min-width: var(--nav-control-h);
  padding: 0 0.65rem;
  border-radius: var(--radius-pill, 999px);
  border: var(--nav-stroke) solid var(--nav-ink);
  background: var(--nav-btn-fill);
  color: var(--nav-ink);
  font-weight: var(--float-label-weight, 700);
  font-size: var(--float-label-size, 0.85rem);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 0;
  flex-shrink: 0;
}

.navigator button.icon-only {
  width: var(--nav-control-h);
  padding: 0;
  position: relative;
  overflow: hidden; /* clip restart spin / glyph overflow */
  isolation: isolate;
  contain: paint;
  z-index: 0;
}

.navigator button.icon-only > svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--nav-icon);
  height: var(--nav-icon);
  display: block;
  pointer-events: none;
  transform-origin: center center;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform var(--nav-ms-leave) var(--nav-ease-io);
}

.navigator button.icon-only > svg.is-hidden {
  display: none !important;
}

.navigator button:focus-visible {
  outline: none;
}

.navigator button[aria-pressed="true"] {
  background: var(--nav-ink);
  color: #fff;
}

.navigator button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Play optical nudge (triangle is left-heavy) */
.navigator button.icon-only > svg[data-icon="play"] {
  transform: translate3d(1px, 0, 0);
}

/* Pause: filled bars */
.navigator button.icon-only > svg[data-icon="pause"] {
  fill: currentColor;
  stroke: none;
}

/* Auto ∞ slightly larger than 20px icons */
.navigator button.icon-only[data-nav="auto"] > svg.nav-infinity {
  width: 26px;
  height: 26px;
  overflow: visible;
  transform: translateZ(0);
}

/* ── Restart (rotate hub, not raw SVG — optical center) ──────────── */

.navigator button.icon-only[data-nav="restart"] .nav-restart-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transform-box: border-box;
  transition: transform var(--nav-ms-leave) var(--nav-ease-io);
  pointer-events: none;
}

.navigator button.icon-only[data-nav="restart"] .nav-restart-hub svg {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  display: block;
  transform: translate(0.5px, 0.5px); /* arc center, not arrow tip */
  pointer-events: none;
}

.navigator button.icon-only[data-nav="restart"]:hover:not(:disabled) .nav-restart-hub,
.navigator button.icon-only[data-nav="restart"]:focus-visible:not(:disabled) .nav-restart-hub {
  transform: translate(-50%, -50%) rotate(-16deg);
  transition-duration: var(--nav-ms-fast);
  transition-timing-function: var(--nav-ease);
}

@keyframes nav-restart-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

.navigator button.icon-only[data-nav="restart"].is-spinning .nav-restart-hub {
  animation: nav-restart-spin 0.5s var(--nav-ease);
  transition: none;
}

/* ── Next: countdown fill + cancel X ─────────────────────────────── */

@property --nav-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.navigator [data-nav="next"] {
  --nav-fill: 0%;
  overflow: hidden;
}

.navigator [data-nav="next"] .nav-next-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nav-fill);
  z-index: 0;
  background: var(--nav-ink);
  pointer-events: none;
}

.navigator [data-nav="next"] .nav-next-icon {
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity 0.15s var(--nav-ease-io);
}

.navigator [data-nav="next"].is-counting .nav-next-icon {
  opacity: 0;
  pointer-events: none;
}

/* Digit: white over fill, ink over unfilled */
.navigator [data-nav="next"] .nav-next-count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--nav-digit-size);
  font-weight: var(--nav-digit-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  background-image: linear-gradient(
    to right,
    #fff 0%,
    #fff var(--nav-fill),
    var(--nav-ink) var(--nav-fill),
    var(--nav-ink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.navigator [data-nav="next"].is-counting .nav-next-count {
  display: flex;
}

.navigator [data-nav="next"] .nav-next-cancel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms var(--nav-ease);
}

.navigator [data-nav="next"].is-counting .nav-next-cancel {
  display: block;
  pointer-events: auto;
}

.navigator [data-nav="next"].is-counting:hover .nav-next-count,
.navigator [data-nav="next"].is-counting:focus-within .nav-next-count {
  opacity: 0;
}

.navigator [data-nav="next"].is-counting:hover .nav-next-cancel,
.navigator [data-nav="next"].is-counting:focus-within .nav-next-cancel {
  opacity: 1;
}

.navigator [data-nav="next"] .nav-x-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.navigator [data-nav="next"] .nav-x-layer svg {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  stroke-width: 2;
  transform: scale(0.92);
  transition: transform 100ms var(--nav-ease);
}

.navigator [data-nav="next"].is-counting:hover .nav-x-layer svg,
.navigator [data-nav="next"].is-counting:focus-within .nav-x-layer svg {
  transform: scale(1);
}

.navigator [data-nav="next"] .nav-x-layer--ink svg {
  stroke: var(--nav-ink);
}

.navigator [data-nav="next"] .nav-x-layer--lite {
  clip-path: inset(0 calc(100% - var(--nav-fill)) 0 0);
}

.navigator [data-nav="next"] .nav-x-layer--lite svg {
  stroke: #fff;
}

.navigator [data-nav="next"] .nav-next-cancel:focus-visible {
  outline: none;
  opacity: 1;
}

/* ── Speed label ─────────────────────────────────────────────────── */

.navigator button.icon-only.nav-speed {
  letter-spacing: -0.03em;
  line-height: 1;
}

.navigator button.icon-only.nav-speed .nav-speed-label {
  pointer-events: none;
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: var(--nav-digit-size);
  font-weight: var(--nav-digit-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--nav-ink);
  transform-origin: center center;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform var(--nav-ms-leave) var(--nav-ease-io);
}

/* ═══════════════════════════════════════════════════════════════════
 * Hover / press (glyph only — button border never transforms)
 * ═══════════════════════════════════════════════════════════════════ */

/* Prev / next: instant side-shift (no tween), held while hover */
.navigator button.icon-only[data-nav="prev"] > svg,
.navigator button.icon-only[data-nav="next"] .nav-next-icon {
  transition: none;
}

.navigator button.icon-only[data-nav="prev"]:hover:not(:disabled) > svg,
.navigator button.icon-only[data-nav="prev"]:focus-visible:not(:disabled) > svg {
  transform: translate3d(-1.5px, 0, 0);
}

.navigator button.icon-only[data-nav="next"]:not(.is-counting):hover:not(:disabled) .nav-next-icon,
.navigator button.icon-only[data-nav="next"]:not(.is-counting):focus-visible:not(:disabled) .nav-next-icon {
  transform: translate3d(1.5px, 0, 0);
}

/* Play: held 110% while hover */
.navigator button.icon-only[data-nav="play"] > svg[data-icon="play"],
.navigator button.icon-only[data-nav="play"] > svg[data-icon="pause"] {
  transition: transform var(--nav-ms) var(--nav-ease-power3);
}

.navigator button.icon-only[data-nav="play"]:hover:not(:disabled) > svg[data-icon="play"],
.navigator button.icon-only[data-nav="play"]:focus-visible:not(:disabled) > svg[data-icon="play"] {
  transform: translate3d(1px, 0, 0) scale(1.1);
}

.navigator button.icon-only[data-nav="play"]:hover:not(:disabled) > svg[data-icon="pause"],
.navigator button.icon-only[data-nav="play"]:focus-visible:not(:disabled) > svg[data-icon="pause"] {
  transform: translateZ(0) scale(1.1);
}

/* Auto ∞: stroke-draw once per hover (class from JS; survives leave until end) */
.navigator button.icon-only[data-nav="auto"] .nav-infinity-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@keyframes nav-inf-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.navigator button.icon-only[data-nav="auto"].is-hover-paint:not(:disabled) .nav-infinity-path {
  animation: nav-inf-draw var(--nav-inf-draw-ms) var(--nav-ease-out) 1 forwards;
}

/* Speed: lift once per enter (class); click tick must not re-lift */
.navigator button.icon-only[data-nav="speed"].is-hover-lift:not(:disabled) .nav-speed-label {
  transform: translate3d(0, -2px, 0);
  transition-duration: 200ms;
  transition-timing-function: var(--nav-ease-power2);
}

.navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-up,
.navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-down {
  transition: none;
}

@keyframes nav-speed-tick-up {
  from { transform: translate3d(0, 5px, 0); opacity: 0.35; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes nav-speed-tick-down {
  from { transform: translate3d(0, -5px, 0); opacity: 0.35; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Tick ends at hover Y when lifted so click doesn’t re-play the lift */
@keyframes nav-speed-tick-up-lifted {
  from { transform: translate3d(0, 5px, 0); opacity: 0.35; }
  to   { transform: translate3d(0, -2px, 0); opacity: 1; }
}

@keyframes nav-speed-tick-down-lifted {
  from { transform: translate3d(0, -6px, 0); opacity: 0.35; }
  to   { transform: translate3d(0, -2px, 0); opacity: 1; }
}

.navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-up {
  animation: nav-speed-tick-up 0.22s var(--nav-ease-power3) both;
}

.navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-down {
  animation: nav-speed-tick-down 0.22s var(--nav-ease-power3) both;
}

.navigator button.icon-only[data-nav="speed"].is-hover-lift .nav-speed-label.is-tick-up {
  animation-name: nav-speed-tick-up-lifted;
}

.navigator button.icon-only[data-nav="speed"].is-hover-lift .nav-speed-label.is-tick-down {
  animation-name: nav-speed-tick-down-lifted;
}

/* Press + keyboard flash (is-key-active mirrors :active) */
.navigator button.icon-only:active:not(:disabled) > svg,
.navigator button.icon-only.is-key-active:not(:disabled) > svg {
  transition-duration: var(--nav-ms-press);
}

.navigator button.icon-only[data-nav="prev"]:active:not(:disabled) > svg,
.navigator button.icon-only[data-nav="prev"].is-key-active:not(:disabled) > svg {
  transform: translate3d(-1.5px, 0, 0) scale(0.94);
}

.navigator button.icon-only[data-nav="next"]:not(.is-counting):active:not(:disabled) .nav-next-icon,
.navigator button.icon-only[data-nav="next"]:not(.is-counting).is-key-active:not(:disabled) .nav-next-icon {
  transform: translate3d(1.5px, 0, 0) scale(0.94);
}

.navigator button.icon-only[data-nav="play"]:active:not(:disabled) > svg[data-icon="play"],
.navigator button.icon-only[data-nav="play"].is-key-active:not(:disabled) > svg[data-icon="play"] {
  transform: translate3d(1px, 0, 0) scale(0.94);
}

.navigator button.icon-only[data-nav="play"]:active:not(:disabled) > svg[data-icon="pause"],
.navigator button.icon-only[data-nav="play"].is-key-active:not(:disabled) > svg[data-icon="pause"] {
  transform: translateZ(0) scale(0.94);
}

.navigator button.icon-only[data-nav="auto"]:active:not(:disabled) > svg,
.navigator button.icon-only[data-nav="auto"].is-key-active:not(:disabled) > svg {
  transform: translateZ(0) scale(0.94);
}

.navigator button.icon-only[data-nav="speed"]:active:not(:disabled) .nav-speed-label,
.navigator button.icon-only[data-nav="speed"].is-key-active:not(:disabled) .nav-speed-label {
  transform: translate3d(0, 0, 0) scale(0.94);
  animation: none;
}

.navigator button.icon-only[data-nav="restart"]:active:not(:disabled):not(.is-spinning) .nav-restart-hub,
.navigator button.icon-only[data-nav="restart"].is-key-active:not(:disabled):not(.is-spinning) .nav-restart-hub {
  transform: translate(-50%, -50%) rotate(-16deg) scale(0.94);
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .navigator button.icon-only > svg,
  .navigator button.icon-only[data-nav="next"] .nav-next-icon,
  .navigator button.icon-only.nav-speed .nav-speed-label,
  .navigator [data-nav="next"] .nav-x-layer svg,
  .navigator button.icon-only[data-nav="restart"] .nav-restart-hub {
    transition: none !important;
    animation: none !important;
  }

  .navigator button.icon-only[data-nav="prev"]:hover:not(:disabled) > svg,
  .navigator button.icon-only[data-nav="prev"]:focus-visible:not(:disabled) > svg,
  .navigator button.icon-only[data-nav="prev"]:active:not(:disabled) > svg,
  .navigator button.icon-only[data-nav="next"]:not(.is-counting):hover:not(:disabled) .nav-next-icon,
  .navigator button.icon-only[data-nav="next"]:not(.is-counting):focus-visible:not(:disabled) .nav-next-icon,
  .navigator button.icon-only[data-nav="next"]:not(.is-counting):active:not(:disabled) .nav-next-icon {
    transform: translateZ(0);
  }

  .navigator button.icon-only[data-nav="play"]:hover:not(:disabled) > svg[data-icon="play"],
  .navigator button.icon-only[data-nav="play"]:focus-visible:not(:disabled) > svg[data-icon="play"],
  .navigator button.icon-only[data-nav="play"]:active:not(:disabled) > svg[data-icon="play"] {
    transform: translate3d(1px, 0, 0);
  }

  .navigator button.icon-only[data-nav="play"]:hover:not(:disabled) > svg[data-icon="pause"],
  .navigator button.icon-only[data-nav="play"]:focus-visible:not(:disabled) > svg[data-icon="pause"],
  .navigator button.icon-only[data-nav="play"]:active:not(:disabled) > svg[data-icon="pause"] {
    transform: none;
  }

  .navigator button.icon-only[data-nav="restart"]:hover:not(:disabled) .nav-restart-hub,
  .navigator button.icon-only[data-nav="restart"]:focus-visible:not(:disabled) .nav-restart-hub,
  .navigator button.icon-only[data-nav="restart"].is-spinning .nav-restart-hub {
    transform: translate(-50%, -50%);
    animation: none;
  }

  .navigator button.icon-only[data-nav="auto"] .nav-infinity-path,
  .navigator button.icon-only[data-nav="auto"].is-hover-paint .nav-infinity-path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .navigator button.icon-only[data-nav="auto"]:active:not(:disabled) > svg {
    transform: none;
  }

  .navigator button.icon-only[data-nav="speed"].is-hover-lift:not(:disabled) .nav-speed-label,
  .navigator button.icon-only[data-nav="speed"]:active:not(:disabled) .nav-speed-label,
  .navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-up,
  .navigator button.icon-only[data-nav="speed"] .nav-speed-label.is-tick-down {
    transform: none;
    animation: none;
  }
}