/* Shared loop/crop + sleek transport scrubber (landing + engineer) */

.transport-seek {
  position: relative;
  width: 100%;
  /* Symmetric padding so the scrubber's own centre lines up with the rail,
     which is absolutely centred at top:50%. */
  padding: 12px 2px;
  min-height: 28px;
}

.transport-region-bar,
.tp-seek-rail {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 99px;
  pointer-events: none;
}

.transport-region-bar {
  z-index: 0;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.transport-region-bar::before {
  content: '';
  position: absolute;
  left: var(--crop-in-pct, 0%);
  right: calc(100% - var(--crop-out-pct, 100%));
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.35), rgba(52, 211, 153, 0.12));
  border-left: 2px solid rgba(52, 211, 153, 0.85);
  border-right: 2px solid rgba(52, 211, 153, 0.85);
}

.tp-seek-rail {
  z-index: 1;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.tp-seek-fill {
  display: block;
  height: 100%;
  width: var(--seek-pct, 0%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red, #dc2626) 0%, var(--red2, #ef4444) 100%);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
  transition: width 0.04s linear;
  pointer-events: none;
}

/* Type+attribute specificity is required here: the generic
   `input[type="range"]` rule in landing.css outranks a bare class, so without
   it the scrubber painted its own track on top of the real rail — and since
   --pct is never set on this input, that track sat permanently at the 50%
   fallback and read as "half played" no matter where the playhead was. */
input[type="range"].tp-seek,
input[type="range"].landing-seek-input {
  -webkit-appearance: none;
  appearance: none;
  /* block, not inline-block: the inline baseline strut added ~11px of dead
     height to .transport-seek and pushed the thumb off the rail centre. */
  display: block;
  width: 100%;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  background: transparent;
  box-shadow: none;
}

.tp-seek:hover:not(:disabled),
.landing-seek-input:hover:not(:disabled) {
  cursor: pointer;
}

.tp-seek:disabled,
.landing-seek-input:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.transport-seek:hover .tp-seek-rail {
  height: 5px;
}

.transport-seek:hover .tp-seek-fill {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.tp-seek::-webkit-slider-runnable-track,
.landing-seek-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 99px;
  background: transparent;
  border: none;
}

/* Thumb selectors carry the same type+attribute specificity as the box rule
   above; a bare class loses to landing.css's generic
   `input[type="range"]::-webkit-slider-thumb`, so the transport's own thumb
   never applied on the landing page. */
input[type="range"].tp-seek::-webkit-slider-thumb,
input[type="range"].landing-seek-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red2, #ef4444);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45), 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

input[type="range"].tp-seek::-webkit-slider-thumb:hover,
input[type="range"].landing-seek-input::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.tp-seek::-moz-range-track,
.landing-seek-input::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: transparent;
  border: none;
}

.tp-seek::-moz-range-progress,
.landing-seek-input::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: transparent;
}

input[type="range"].tp-seek::-moz-range-thumb,
input[type="range"].landing-seek-input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red2, #ef4444);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.btn-tp-region {
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  min-width: 2.2rem;
  /* WCAG 2.2 AA 2.5.8 minimum target; these were 21px tall on every pointer. */
  min-height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2, #a1a1aa);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}

.btn-tp-region:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.08);
}

.btn-tp-region.is-active,
.btn-tp-loop.is-active {
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) inset;
}

.btn-tp-loop.is-active {
  border-color: rgba(52, 211, 153, 0.55);
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2) inset;
}

.tp-region-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.landing-transport-extras {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Touch / mobile — engineer + landing seek bars (Android, iOS, coarse pointers) */
@media (pointer: coarse) {
  .transport-seek {
    /* Symmetric: an asymmetric 16/14 left the thumb 1px off the rail centre. */
    padding: 15px 2px;
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Must match the type+attribute specificity used above, or the base 24px
     scrubber height would win here and swallow the larger touch target. */
  input[type="range"].tp-seek,
  input[type="range"].landing-seek-input {
    height: 28px;
  }

  input[type="range"].tp-seek::-webkit-slider-thumb,
  input[type="range"].landing-seek-input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
  }

  input[type="range"].tp-seek::-moz-range-thumb,
  input[type="range"].landing-seek-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
}

@media (hover: none) {
  .transport-seek:hover .tp-seek-rail {
    height: 4px;
  }
}