/* No reserved positions: only rendered dimensions participate in the layout. */
.context-bubbles { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 20px 18px; padding: 28px 0 24px; }
.context-node { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px; min-width: 72px; min-height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 4px; }
.context-mark { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.context-bubble { display: block; width: var(--bubble-diameter); height: var(--bubble-diameter); border-radius: 50%; background: var(--map-fill, #dce6d5); outline: 1px solid var(--map-stroke, #9dab93); }
.context-node:hover .context-bubble, .context-node[aria-pressed="true"] .context-bubble { outline: 2px solid var(--forest); outline-offset: 3px; }
.context-node[aria-pressed="true"] .context-node-label { text-decoration: underline; text-underline-offset: 4px; }
.context-node:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.context-node-label { font: 12px/1.5 var(--sans); white-space: nowrap; }
.context-count { margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.context-node.unlinked .context-bubble { width: 24px; height: 24px; background: transparent; outline: 1px dashed var(--map-stroke, #9dab93); }
.map-scale { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.map-empty { min-height: 180px; display: flex; flex-direction: column; justify-content: center; }
.map-reveal { padding: 0 0 16px; }
.map-reveal .checkbox-row { margin: 0; font-size: 12px; }
@media (max-width: 480px) { .context-bubbles { gap: 20px 12px; } }