/**
 * pdb-thumb — 3D cocrystal thumbnail (gallery cards, list rows, etc.)
 *
 * The component sets layout-level dimensions on its container; this
 * stylesheet only handles the cosmetic shell:
 *   - stage (canvas host) fills the container
 *   - PDB id badge (mono chip, bottom-left)
 *   - fallback / error state
 *
 * Tokens — scilence only. The 3D canvas itself is a fixed visual
 * element (no token violation per ds-audit doctrine).
 */

.pdb-thumb__stage {
  position: absolute;
  inset: 0;
}

.pdb-thumb__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.pdb-thumb__badge {
  position: absolute;
  left: var(--s-space-2);
  bottom: var(--s-space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--s-color-fg-primary);
  background: color-mix(
    in oklch,
    var(--s-color-bg-app) 78%,
    transparent
  );
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  backdrop-filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

/* Affordance hint — subtle scale on hover so the thumb reads as an
 * interactive surface (matches gallery-card hover treatment). */
[data-pdb-thumb] {
  outline: none;
}

[data-pdb-thumb]:focus-visible {
  box-shadow: none;
}

.pdb-thumb__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-2);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  text-align: center;
  background: var(--s-color-bg-subtle);
}