/* Reference gallery: shot-type columns, Unsorted strip, Drop
   (docs/superpowers/specs/2026-10-06-reference-gallery-columns-design.md).
   Loaded globally from templates/base.html: the gallery renders in the workspace
   inspector / middle sections and on the classic project page. Columns keep a
   120px minimum and scroll sideways in narrow containers (inspector, phones). */
.ref-gallery { min-width: 0; max-width: 100%; overflow-x: auto; }
/* Flex/grid ancestors default to min-width:auto and would grow to the 6 columns; let them shrink so .ref-cols scrolls. */
#workspace-right, #workspace-middle, .inspector-panel { min-width: 0; }
.ref-cols-hint { font-size: 0.65rem; color: #8b949e; margin-bottom: 4px; }
.ref-cols {
  display: grid;
  grid-template-columns: repeat(var(--ref-col-count, 6), minmax(120px, 1fr));
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ref-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ref-col-extras, .ref-unsorted-list, .ref-drop-list {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px;
  border: 1px dashed #21262d; border-radius: 6px;
  transition: border-color 0.15s, background-color 0.15s;
}
.ref-unsorted-list, .ref-drop-list { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
.ref-drop-list { border-color: transparent; }
.ref-col-meta { font-size: 0.55rem; color: #6e7681; text-align: center; }
.ref-unsorted-title { font-size: 0.6rem; color: #d29922; margin-bottom: 2px; }
.ref-extra-tile { width: 64px; cursor: grab; touch-action: manipulation; }
.ref-extra-tile img {
  display: block; width: 64px; height: 64px; object-fit: cover;
  border-radius: 4px; border: 1px solid #30363d;
}
.ref-slot-card .ref-tile { cursor: grab; }
.ref-tile-bin { top: 1px; right: 1px; }
.ref-tile-bin .btn { color: #f85149; font-size: 0.6rem; }
.ref-tile-lock { top: 1px; right: 3px; color: #3fb950; font-size: 0.6rem; pointer-events: none; }
.ref-drop { border: 1px dashed #6e3630; background: #1a0f0f; }
.ref-drop-title { font-size: 0.65rem; color: #f85149; }
[data-ref-drop-target].ref-drop-hover {
  outline: 2px solid #58a6ff; outline-offset: -2px; background-color: rgba(88, 166, 255, 0.08);
}
.ref-tile-ghost { opacity: 0.35; }
.ref-tile-chosen img { box-shadow: 0 0 0 2px #58a6ff; }
.ref-tile-busy { position: relative; pointer-events: none; }
.ref-tile-busy img { opacity: 0.45; }
.ref-tile-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 3px solid rgba(201, 209, 217, 0.35); border-top-color: #58a6ff; border-radius: 50%;
  animation: ref-tile-spin 0.8s linear infinite;
}
@keyframes ref-tile-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ref-tile-busy::after { animation: none; } }
@media (max-width: 575.98px) {
  .ref-cols { scroll-snap-type: x proximity; }
  .ref-col { scroll-snap-align: start; }
}