/* arrange — floating inspector panel while arrange mode is on.
   Glass to match the debug panel language. Positioned top-right, below
   the section-tag. */

.arr {
  position: fixed;
  z-index: 99;
  right: 84px;
  top: 96px;
  width: 260px;
  padding: 18px;
  border-radius: 16px;
  pointer-events: auto;
  color: var(--fg);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 24px 56px rgba(6, 16, 10, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.arr__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 3px;
}
.arr__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
  word-break: break-word;
}
.arr__row { margin-bottom: 13px; }
.arr__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.arr__label b { color: var(--fg); font-weight: 500; }
.arr__range { width: 100%; accent-color: var(--fg); cursor: pointer; }
.arr__btns { display: flex; gap: 8px; margin-top: 4px; }
.arr__btn {
  font-family: 'JetBrains Mono', monospace;
  flex: 1;
  padding: 9px 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.arr__btn:hover { background: rgba(255, 255, 255, 0.16); }

/* --- Floating resize handle at the selected asset's bottom-right corner.
   Anchored via inline top/left in JS. Follows on scroll/resize/drag. --- */
.arr-handle {
  position: fixed;
  z-index: 98;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 1px solid rgba(6, 16, 10, 0.55);
  border-radius: 2px;
  cursor: nwse-resize;
  box-shadow:
    0 2px 5px rgba(6, 16, 10, 0.45),
    0 0 6px rgba(159, 227, 180, 0.65);
  pointer-events: auto;
  transition: transform 0.1s ease;
}
.arr-handle:hover  { transform: scale(1.15); }
.arr-handle:active { transform: scale(1.25); }

/* --- Center badge (Phase D) — anchored to the SELECTED element's viewport
   center so there's always a visible cue for what's picked, even when the
   element's box extends offscreen (laptop case). --- */
.arr-center-label {
  position: fixed;
  z-index: 98;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(20, 30, 24, 0.9);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(159, 227, 180, 0.5);
}