/* ==================================================================
   Pose arranger — bench chrome.

   Deliberately unlike the page around it. Everything here is a control on
   a dark chip: it should never be mistaken for part of the shop, and the
   moment the running order is settled this file and its script come out
   together, leaving no trace in run.css.

   The panel sits directly over the hud, so the bin is a hand's travel from
   the thumbnails it takes.
================================================================== */

.arr {
  position: absolute;
  left: 1.5rem;
  bottom: 4.1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: calc(100% - 3rem);
  padding: 0.25rem 0.35rem;
  border-radius: 3px;
  background: rgba(20, 20, 20, 0.86);
  color: #fff;
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.arr__tag {
  padding: 0 0.3rem;
  opacity: 0.45;
  font-weight: 600;
}

.arr__rule {
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.2);
}

.arr__btn {
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background 140ms ease;
}

.arr__btn:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.26);
}

.arr__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.arr__btn:focus-visible,
.arr__bin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* --- the bin -------------------------------------------------------
   A button in shape only — it is a target, not a press. It answers when a
   thumbnail is over it and does nothing when clicked. */

.arr__bin {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  background: transparent;
  color: #fff;
  cursor: default;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.arr__bin svg {
  width: 0.95rem;
  height: 0.95rem;
}

.arr__bin.is-armed {
  background: #b3261e;
  border-color: #ff6b5e;
  border-style: solid;
  transform: scale(1.12);
}

.arr__status {
  padding: 0 0.35rem;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arr__status.is-flash {
  opacity: 1;
  color: #ffe08a;
}

/* --- the band being dragged ---------------------------------------- */

/* The thumbnails are the handles, so they stop behaving like text and like
   a scroll surface while a press is on one of them. */
.arr-band .run__thumb {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

body.arr-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* the original stays in the row as a gap, so the row's arithmetic — and
   the caret that reads it — is the arithmetic of the row you can see */
.run__thumb.is-carried {
  opacity: 0.18;
  border-style: dashed;
}

/* the carried copy, under the pointer and out of the layout entirely */
.arr__ghost {
  position: fixed;
  z-index: 60;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(20, 20, 20, 0.5);
  background: #fff;
  overflow: hidden;
  opacity: 0.92;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.arr__ghost img,
.arr__ghost video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* the ghost carries a copy of the index badge; it would read as the number
   the look is about to take, which it is not */
.arr__ghost .run__idx {
  display: none;
}

/* where it lands */
.arr__caret {
  position: fixed;
  z-index: 59;
  width: 2px;
  background: #ffe08a;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.5);
  pointer-events: none;
}

@media (max-width: 760px) {
  .arr {
    left: 0.9rem;
    bottom: 2.9rem;
    max-width: calc(100% - 1.8rem);
    font-size: 0.55rem;
  }

  .arr__bin {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/* ---------------------------------------------------------- the numbers

   Numbers every frame and every thumbnail so a run can be talked about by
   position. Lived in run.css while the picker was on for everyone; it is
   the arranger's now, so it sits with the rest of the bench chrome. Only
   rendered where the page asks for it — see `index` in run.js, which the
   editorial page turns on only under ?dev=1. */

.run__idx {
  position: absolute;
  top: calc(var(--run-bar) + 1.25rem);
  right: 1.5rem;
  z-index: 3;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  background: rgba(20, 20, 20, 0.82);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The boxes are 1.9rem, so a badge sized to be read is a badge that covers
   the image. Corner tag, translucent, bottom-right — enough to count along
   the row, little enough to still see which frame is which. */
.run__idx--thumb {
  top: auto;
  right: 0;
  bottom: 0;
  padding: 0 0.15em;
  border-radius: 0;
  background: rgba(20, 20, 20, 0.62);
  font-size: 0.45rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}