/* Reagent — css/reagent.css
 * Piece-specific styling on top of the shared engine base. The base carries the
 * frame (chrome, gate, about overlay, toast); this file adds the specimen label
 * — the designed typography that names each structure, gives its formula in
 * plain sight, says in ordinary words what it is, and keys the atom colours to
 * their elements — so a visitor always knows what they are looking at.
 * © 2026 Joshua Borsman. All rights reserved.
 */

@import url("/engine/styles.base.css");

#stage { cursor: default; }

/* Legend layer — sits above the field, below the chrome. Non-interactive. */
.legend {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

/* Specimen label — left side, vertically centred, like a museum wall label
   beside the object. Fades in/out as each structure enters and leaves. */
.legend__card {
  position: absolute;
  left: calc(var(--pad) + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  max-width: min(24rem, 34vw);
  opacity: 0;
  transition: opacity 1000ms ease;
}
.legend__card.is-visible { opacity: 1; }

.legend__kind {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lumen);
  margin: 0 0 0.7rem;
}
.legend__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}
.legend__formula {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  font-variant-numeric: tabular-nums;
}
.legend__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
}
.legend__key {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legend__key li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.legend__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  /* colour set inline per element, from its CPK colour */
  box-shadow: 0 0 8px 0 currentColor;
}

/* Portrait phones and short viewports: move the label to the bottom so it never
   sits over the model, and tighten it. */
@media (max-width: 720px), (max-height: 620px) {
  .legend__card {
    left: calc(var(--pad) + env(safe-area-inset-left));
    right: calc(var(--pad) + env(safe-area-inset-right));
    top: auto;
    bottom: calc(var(--pad) + env(safe-area-inset-bottom) + 3.2rem);
    transform: none;
    max-width: none;
  }
  .legend__name { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .legend__caption { font-size: 0.98rem; }
  .legend__key {
    flex-flow: row wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legend__card { transition: none; }
}