/* ===============================================================
   transport.css — the fixed bar that always shows what is live.
   =============================================================== */

.transport {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--gutter);
  /* Opaque for the same reason as the header — see topbar.css. */
  background: linear-gradient(0deg, #05070A 55%, rgba(5, 7, 10, 0.95));
  border-top: 1px solid var(--line);
}

.transport::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--holo-line), transparent);
  opacity: .5;
}

.transport.is-live::before {
  background: linear-gradient(90deg, transparent, var(--ember-line), transparent);
  opacity: .9;
}

.transport__slot {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  font-variant-numeric: tabular-nums;
}

.transport.is-live .transport__slot {
  color: var(--ember);
  border-color: var(--ember-line);
  background: var(--ember-soft);
}

.transport__id {
  min-width: 0;
  flex: 1 1 180px;
}

.transport__name {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.transport__name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.caret {
  color: var(--ember);
  opacity: 0;
  flex: none;
}

@keyframes caret-blink { 50% { opacity: 0; } }
.caret.is-on { opacity: 1; animation: caret-blink 1.1s steps(1) infinite; }

.transport__hint {
  font-size: 10.5px;
  color: var(--muted-dim);
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transport__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.transport__controls .icon-btn { width: 34px; height: 34px; }
.transport__controls .icon-btn svg { width: 15px; height: 15px; }

.transport__scrub {
  flex: 2 1 180px;
  min-width: 80px;
  padding: 14px 0;
  cursor: pointer;
  touch-action: none;
}

.scrub__track {
  height: 3px;
  border-radius: 2px;
  background: var(--panel-hi);
  overflow: hidden;
}

.scrub__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ember), var(--ember-hot));
  box-shadow: 0 0 10px rgba(255, 166, 43, 0.5);
}

.transport__clock {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The jump buffer: type digits anywhere, this shows what you typed. */
.goto {
  flex: none;
  font-size: 12px;
  color: var(--holo);
  border: 1px solid var(--holo-line);
  background: var(--holo-soft);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}

.goto.is-on { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .transport__hint { display: none; }
  .transport__scrub { flex: 1 1 90px; }
}

@media (max-width: 620px) {
  .transport { gap: 10px; padding: 0 12px; }
  .transport__clock { display: none; }
  .transport__slot { font-size: 13px; padding: 3px 7px; }

  /* The seek bar becomes a full-width line along the top edge, which
     gives the clip name the room it needs on a phone and makes the
     target easier to hit than a 90px stub. */
  .transport__scrub {
    position: absolute;
    top: 0; left: 0; right: 0;
    flex: none;
    padding: 5px 0 9px;
  }
  .scrub__track { border-radius: 0; }
}