/* boc-model3d — viewer chrome.
 * Deliberately minimal + flat to match the editorial mono/serif system and the
 * [boc_images] gallery. Uses the theme tokens (--gap, --colmeasure) where they
 * exist, with safe fallbacks so the standalone test harness looks the same. */

.boc-model3d {
  --m3d-gap: var(--gap, 24px);
  --m3d-line: #111;
  --m3d-faint: #999;
  --m3d-hair: rgba(0, 0, 0, 0.14);
  --m3d-bg: transparent;
  margin: var(--m3d-gap) 0;
  font-family: inherit;
}

.boc-model3d .boc-m3d-stagewrap {
  position: relative;
  width: 100%;
}

.boc-model3d .boc-m3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 320px;
  background: var(--m3d-bg);
  border: 1px solid var(--m3d-hair);
  overflow: hidden;
  touch-action: none; /* let OrbitControls own touch gestures */
}

.boc-model3d .boc-m3d-stage canvas { display: block; width: 100%; height: 100%; }

.boc-model3d .boc-m3d-status {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--m3d-faint);
  text-align: center;
  padding: 0 1em;
  pointer-events: none;
}

.boc-model3d .boc-m3d-caption {
  margin-top: calc(var(--m3d-gap) * 0.4);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--m3d-line);
  min-height: 1em;
}

/* Thumbnail strip — a plain even grid, same register as an image grid. */
.boc-model3d .boc-m3d-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: calc(var(--m3d-gap) * 0.5);
  margin-top: calc(var(--m3d-gap) * 0.6);
}

.boc-model3d .boc-m3d-thumb {
  appearance: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--m3d-hair);
  background: #fff;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, opacity 0.12s ease;
  opacity: 0.72;
}
.boc-model3d .boc-m3d-thumb:hover { opacity: 1; }
.boc-model3d .boc-m3d-thumb.is-active { opacity: 1; border-color: var(--m3d-line); }

.boc-model3d .boc-m3d-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.boc-model3d .boc-m3d-thumb-fallback {
  font-size: 0.62rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--m3d-faint);
  padding: 0.4em;
  text-align: center;
  word-break: break-word;
}

/* Single-viewer variant ([model3d ...]) drops the strip entirely. */
.boc-model3d.is-single .boc-m3d-strip { display: none; }

/* Drag-over affordance for the standalone harness. */
.boc-model3d.is-dragover .boc-m3d-stage { border-color: var(--m3d-line); border-style: dashed; }

@media (max-width: 600px) {
  .boc-model3d .boc-m3d-stage { min-height: 260px; }
  .boc-model3d .boc-m3d-strip { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}