/* Figma: 207 wide, padding 8, gap 12, radius 8, rgba(14,16,24,.82) */
.atlas__card {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 207px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(20, 20, 22, .92);   /* Figma: --Fill-Dark */
  backdrop-filter: blur(12px);
  color: var(--white, #fff);
  pointer-events: none;

  /* Pops out of the number it belongs to — from *above* the card now: it
     hangs below the tile, 26px off its centre, so the grown tile stays
     clear and the card never covers what you're pointing at. The origin is
     that same point, so it grows from the tile rather than from its own
     middle, and never travels between pins. Same spring as the legend. */
  --spring: linear(0, 0.0233, 0.0858, 0.1768, 0.2864, 0.4061, 0.5284, 0.6473,
    0.7582, 0.8576, 0.9434, 1.0145, 1.0707, 1.1124, 1.1407, 1.157, 1.1629,
    1.1604, 1.1511, 1.1369, 1.1194, 1.1001, 1.0802, 1.0606, 1.0423, 1.0258,
    1.0114, 0.9994, 0.9898, 0.9826, 0.9777, 0.9747, 0.9735, 0.9737, 0.9751,
    0.9772, 0.98, 0.9831, 0.9864, 0.9896, 0.9926, 0.9954, 0.9978, 0.9998,
    1.0014, 1.0027, 1.0035, 1.0041, 1);

  translate: -50% 26px;
  transform-origin: 50% -26px;
  scale: .82;
  opacity: 0;
  /* the resting state carries the exit: quick and quiet */
  transition:
    scale .16s var(--ease-out-quint, cubic-bezier(.23, 1, .32, 1)),
    opacity .12s ease-out;
}

/* arrival gets the spring — asymmetric on purpose */
.atlas__card.is-on {
  scale: 1;
  opacity: 1;
  transition:
    scale .4s var(--spring),
    opacity .14s ease-out;
}

/* The card leads with whichever reading the tiles are *not* showing:
   facility view leads with the score, safety view leads with the site photo.
   One element, two dresses. */
/* The plate carries the site's score in its band's ink — no photography. */
.atlas__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--pin-ink, #1f9e32) 26%, #1c1c1e);
  color: var(--pin-ink, #1f9e32);
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.atlas__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The human name leads; the asset code is the fine print. */
.atlas__place {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.12px;
  white-space: nowrap;
}

.atlas__code {
  margin-top: 3px;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  letter-spacing: -.07px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .atlas__card { width: 178px; gap: 9px; }
  .atlas__thumb { width: 32px; height: 32px; }
}