/* ============================================================
   allergy-insight.css — /projects/allergy-insight only.
   Loaded after base.css and project.css.
   Styles for the interactive 3D PCB viewer.
   ============================================================ */

.viewer-wrapper {
  position: relative;
  width: 100%;
  border-bottom: var(--border-thick) solid var(--line);
}

model-viewer {
  width: 100%;
  height: 460px;
  background-color: var(--bg);
  --poster-color: transparent;
  outline: none;
  display: block;
}

/* Interaction hint badges, floating over the viewer. */
.hint-container {
  position: absolute;
  bottom: var(--s4);
  right: var(--s4);
  display: flex;
  gap: var(--s3);
  z-index: 10;
  pointer-events: none;  /* clicks pass through to the 3D model */
}

.interaction-hint {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--s2) var(--s3);
  border: var(--border) solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
}

/* Camera preset buttons under the viewer. */
.viewer-controls {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  overflow-x: auto;
  background: var(--bg-raised);
}

.control-btn {
  background: transparent;
  border: var(--border) solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease;
}

.control-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--shadow);
}

.control-btn.active {
  background: var(--ink);
  color: var(--accent);
  transform: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  model-viewer { height: 340px; }
  .hint-container { display: none; }  /* touch UI needs no mouse hints */
}