/* NBIF 3D model component. Values come from DESIGN.md tokens (focus-pilot/tokens.css); the fallbacks only
   matter when the component is used on a page without them. Markers use the site's one ring: 3px, on the edge. */
.nbif-3d { margin: 0; }

.nbif-3d__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-2, 8px);
  user-select: none;
  -webkit-user-select: none;
}
.nbif-3d__stage:focus-visible { outline: 3px solid var(--accent, #00688f); outline-offset: 4px; }
.nbif-3d__still,
.nbif-3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nbif-3d__still { object-fit: cover; cursor: pointer; transition: opacity var(--dur-base, 280ms) var(--ease-out, ease-out); }
.nbif-3d.is-3d .nbif-3d__still { opacity: 0; pointer-events: none; }
.nbif-3d__canvas { touch-action: pan-y; cursor: grab; }
.nbif-3d__stage.is-dragging .nbif-3d__canvas { cursor: grabbing; }

/* Numbered markers over the model (the legend below carries the words). */
.nbif-3d__markers { position: absolute; inset: 0; pointer-events: none; }
.nbif-3d__marker {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center;
  border: var(--ring-w, 3px) solid var(--ink, #283a47);
  border-radius: 50%;
  background: var(--paper, #fbf8f4);
  color: var(--ink, #283a47);
  font: 600 12px/1 var(--font-sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  pointer-events: auto; cursor: pointer;
  transition: opacity var(--dur-fast, 150ms), background-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
  will-change: transform;
}
.nbif-3d__marker.is-occluded { opacity: 0.4; }
.nbif-3d__marker.is-active,
.nbif-3d__marker.is-hover { background: var(--ink, #283a47); color: var(--paper, #fbf8f4); opacity: 1; }

.nbif-3d__toast {
  position: absolute; left: 50%; top: var(--space-4, 16px); transform: translateX(-50%);
  margin: 0; padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-2, 8px);
  background: var(--ink, #283a47); color: var(--paper, #fbf8f4);
  font: 500 var(--step-small, 0.9rem)/1.3 var(--font-sans, system-ui, sans-serif);
  pointer-events: none;
}

/* Controls sit under the model so they never cover it. */
.nbif-3d__start,
.nbif-3d__btn {
  min-height: 44px; min-width: 44px;
  padding: 0 var(--space-4, 16px);
  border-radius: var(--radius-2, 8px);
  font: 500 var(--step-small, 0.9rem)/1 var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
  transition: background-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}
.nbif-3d__start {
  margin-top: var(--space-4, 16px);
  border: 1px solid var(--accent, #00688f);
  background: var(--accent, #00688f); color: var(--paper, #fbf8f4);
}
.nbif-3d__start:hover { background: var(--accent-strong, #075f85); border-color: var(--accent-strong, #075f85); }
.nbif-3d__start:disabled { cursor: progress; }
.nbif-3d__btn { border: 1px solid var(--accent, #00688f); background: transparent; color: var(--accent, #00688f); }
.nbif-3d__btn--icon { padding: 0; font-size: 1.25rem; }
.nbif-3d__btn:hover { color: var(--accent-strong, #075f85); border-color: var(--accent-strong, #075f85); }
.nbif-3d__btn[aria-pressed="true"] { background: var(--accent, #00688f); color: var(--paper, #fbf8f4); }
.nbif-3d__btn:active, .nbif-3d__start:active { transform: translateY(1px); }
.nbif-3d__start:focus-visible, .nbif-3d__btn:focus-visible, .nbif-3d__item:focus-visible {
  outline: 3px solid var(--accent, #00688f); outline-offset: 4px;
}
.nbif-3d__toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-4, 16px);
}
.nbif-3d__group { display: inline-flex; gap: var(--space-2, 8px); }
.nbif-3d__hint {
  flex: 1 1 16rem; margin: 0 0 0 var(--space-2, 8px);
  color: var(--ink-muted, #56666f);
  font: 400 var(--step-small, 0.9rem)/1.4 var(--font-sans, system-ui, sans-serif);
}

/* Legend: real text, numbered like the markers. */
.nbif-3d__legend {
  list-style: none; margin: var(--space-6, 32px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-2, 8px) var(--space-5, 24px);
  font: 400 var(--step-small, 0.9rem)/1.4 var(--font-sans, system-ui, sans-serif);
  color: var(--ink, #283a47);
}
.nbif-3d__legend li,
.nbif-3d__item {
  display: grid; grid-template-columns: 30px 1fr; column-gap: var(--space-3, 12px); align-items: start;
}
.nbif-3d__item {
  grid-column: 1 / -1; /* the list item's grid holds just the button once the viewer has upgraded it */
  width: 100%; min-height: 44px; padding: var(--space-1, 4px) 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-1, 2px);
}
.nbif-3d__num {
  grid-row: span 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: var(--ring-w, 3px) solid var(--ink, #283a47); border-radius: 50%;
  font: 600 12px/1 var(--font-sans, system-ui, sans-serif); font-variant-numeric: tabular-nums;
}
.nbif-3d__name { font-weight: 600; padding-top: 5px; }
.nbif-3d__detail { color: var(--ink-muted, #56666f); }
.nbif-3d__item:hover .nbif-3d__name { color: var(--accent-strong, #075f85); text-decoration: underline; text-underline-offset: 3px; }
.nbif-3d__item[aria-current="true"] .nbif-3d__num { background: var(--ink, #283a47); color: var(--paper, #fbf8f4); }

.nbif-3d__credit {
  margin: var(--space-4, 16px) 0 0;
  color: var(--ink-muted, #56666f);
  font: 400 var(--step-small, 0.9rem)/1.4 var(--font-sans, system-ui, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
  .nbif-3d__still, .nbif-3d__marker, .nbif-3d__btn, .nbif-3d__start { transition: none; }
}