/* cities.css (round 2, agent A): city labels (CSS2DObject elements inside #labels).
   Minimal: light Inter text to the right of the dot, no pill, no glow. Reads differently from the time-layer pills. */
.cl-label {
  display: flex; align-items: baseline; gap: 6px;
  padding: 1px 4px 1px 8px; /* left padding clears the dot */
  white-space: nowrap; pointer-events: none;
  font: 400 10.5px/1.2 var(--font-ui, "Inter", system-ui, sans-serif);
  letter-spacing: 0.03em;
  color: rgba(234, 227, 208, 0.72);
  text-shadow: 0 1px 2px rgba(2, 5, 11, 0.85); /* legibility only */
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cl-mid { color: rgba(238, 232, 218, 0.82); }
.cl-big { font-size: 11px; color: rgba(242, 237, 225, 0.9); }
.cl-cap {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 214, 170, 0.88); /* soft warm cream, no glow */
}
.cl-extra { display: none; font-weight: 400; font-size: 10px; letter-spacing: 0.02em; text-transform: none; color: var(--muted, #9AA3AE); font-variant-numeric: tabular-nums; }

/* hover / tap highlight */
.cl-hover {
  color: var(--text, #EAE3D0);
  background: rgba(6, 12, 24, 0.78);
  box-shadow: 0 0 0 1px rgba(234, 227, 208, 0.14), 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 2px 7px 2px 6px; margin-left: 4px; /* starts just right of the dot, text moves only ~2px */
  text-shadow: none;
}
.cl-hover.cl-cap { color: rgba(240, 222, 178, 1); }
.cl-hover .cl-extra:not(:empty) { display: inline; }

@media (max-width: 600px) {
  .cl-label { font-size: 10px; }
  .cl-big { font-size: 10.5px; }
  .cl-cap { font-size: 9.5px; }
}