/* universe-moves.css — The overview page: a bar to drag through the scenes. */

/* universe-scrub.css — the bar sits below the text and left of the arrows; the ticks by the counter go, being the same thing twice. */
html[data-moves] .counter .ticks { display: none; }
html[data-moves] .scene { bottom: clamp(92px, 12vh, 124px); }
.us-bar { position: fixed; z-index: 21; left: clamp(16px, 4vw, 64px); right: calc(clamp(16px, 3vw, 40px) + 124px); bottom: clamp(20px, 3.4vw, 44px); height: 28px; touch-action: none; cursor: ew-resize; outline: none; -webkit-user-select: none; user-select: none; }
html[data-us-bench] .us-bar { left: max(190px, 4vw); }
.us-bar::before { content: ""; position: absolute; left: -12px; right: -12px; top: -10px; bottom: -10px; }
.us-track { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: rgba(205, 191, 154, .3); }
.us-fill { position: absolute; inset: 0; background: #b48a3a; transform: scaleX(0); transform-origin: 0 50%; display: block; }
.us-bar b { position: absolute; top: 10px; width: 1px; height: 9px; background: rgba(205, 191, 154, .5); pointer-events: none; }
.us-bar b.past { background: #b48a3a; }
.us-knob { position: absolute; left: -14px; top: 0; width: 28px; height: 28px; will-change: transform; pointer-events: none; }
.us-knob span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #b48a3a; background: #0d1813; color: #f1ece0; font: 500 10px/1 "JetBrains Mono", monospace; transition: background .25s, color .25s; }
.us-bar:focus-visible .us-knob span, .us-bar.is-drag .us-knob span { background: #b48a3a; color: #0d1813; }
.us-name { position: absolute; left: 0; bottom: 100%; margin-bottom: 7px; white-space: nowrap; font: 400 10.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; color: #cdbf9a; pointer-events: none; will-change: transform; }
/* phones: the bar shares the bottom line with the arrows and leaves the height to the text */
@media (max-width: 699.98px) {
  html[data-moves] .scene { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px); }
  .us-bar, html[data-us-bench] .us-bar { left: max(30px, calc(env(safe-area-inset-left) + 14px)); right: calc(max(16px, env(safe-area-inset-right)) + 124px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 9px); }
}
/* on their side there is no line to spare: the name shows only while dragging */
@media (max-height: 500px) and (hover: none) {
  html[data-moves] .scene { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 50px); }
  .us-bar, html[data-us-bench] .us-bar { left: max(30px, calc(env(safe-area-inset-left) + 14px)); right: calc(max(16px, env(safe-area-inset-right)) + 124px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 7px); }
  .us-name { opacity: 0; transition: opacity .2s; }
  .us-bar.is-drag .us-name { opacity: 1; }
}