/* Zone admin-block cluster — Logo / 2026 fan (plans/zone-admin-cluster.md)
 *
 * Layout is 50% of the original 280px fan box (140px). --cluster-zoom-scale
 * follows LocalLoopCategoryMarkers.MARKER_ICON_SIZE_EXPR so the cluster
 * shrinks/grows with zoom like icon pins. At zoom 14 the Logo disc is ~28px,
 * matching HybridCard `small` markers.
 */

.zone-cluster {
  --cluster-zoom-scale: 1;
  --cluster-layout: 140px;
  --logo-size: 34px;
  --sat-size: 36px;
  position: relative;
  width: calc(var(--cluster-layout) * var(--cluster-zoom-scale));
  height: calc(var(--cluster-layout) * var(--cluster-zoom-scale));
  pointer-events: none;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  z-index: 20;
}

.zone-cluster__scaler {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cluster-layout);
  height: var(--cluster-layout);
  transform: translate(-50%, -50%) scale(var(--cluster-zoom-scale));
  transform-origin: center center;
  pointer-events: none;
}

.zone-cluster__hit {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  /* Collapsed: clicks pass through to nearby HybridCard / icon pins. */
  pointer-events: none;
}

.zone-cluster.is-open .zone-cluster__hit {
  pointer-events: auto;
}

/* Admin preview: the 139px hit disc is the drag handle, not only the Logo. */
.zone-cluster.zone-cluster--draggable,
.zone-cluster.zone-cluster--draggable .zone-cluster__scaler,
.zone-cluster.zone-cluster--draggable .zone-cluster__hit {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.zone-cluster.zone-cluster--draggable:active,
.zone-cluster.zone-cluster--draggable .zone-cluster__hit:active {
  cursor: grabbing;
}

.zone-cluster.is-selected,
.zone-cluster.is-dragging {
  z-index: 45;
}

.zone-cluster.is-inactive {
  opacity: 0.42;
  filter: grayscale(0.35);
}

.zone-cluster.is-inactive .zone-cluster__logo {
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.22), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.zone-cluster__halo {
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1px dashed rgba(56, 189, 248, 0.22);
  background: rgba(56, 189, 248, 0.04);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.zone-cluster.is-open .zone-cluster__halo {
  opacity: 1;
  transform: scale(1);
}

.zone-cluster__sat.is-off,
.zone-cluster__sat[hidden] {
  display: none;
}

.zone-cluster__sat {
  position: absolute;
  left: calc(50% + var(--sat-x, 0px) - (var(--sat-size) / 2));
  top: calc(50% + var(--sat-y, 0px) - (var(--sat-size) / 2));
  width: var(--sat-size);
  height: var(--sat-size);
  padding: 0;
  border-radius: 99px;
  border: 1.5px solid var(--sat-ring, #2563eb);
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5), 0 0 7px color-mix(in srgb, var(--sat-ring, #2563eb) 27%, transparent);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition:
    opacity 120ms ease calc(var(--sat-i, 0) * 30ms),
    transform 120ms ease calc(var(--sat-i, 0) * 30ms);
}

.zone-cluster.is-open .zone-cluster__sat {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 9;
}

.zone-cluster__sat.is-active {
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.5),
    0 0 0 2px color-mix(in srgb, var(--sat-ring, #2563eb) 55%, transparent);
}

.zone-cluster__sat-count {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  color: #f8fafc;
}

.zone-cluster__sat-label {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 5.64px; /* 6.72px * 0.84 — another 16% smaller */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sat-fg, #93c5fd);
}

.zone-cluster__logo {
  position: absolute;
  left: calc(50% - (var(--logo-size) / 2));
  top: calc(50% - (var(--logo-size) / 2));
  width: var(--logo-size);
  height: var(--logo-size);
  padding: 4px;
  border-radius: 99px;
  border: 1.5px solid #2563eb;
  background: #0f172a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 10;
  pointer-events: auto;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 6px 14px rgba(0, 0, 0, 0.5);
  transition: box-shadow 160ms ease;
  color: #eff6ff;
}

.zone-cluster.is-pinned .zone-cluster__logo {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.zone-cluster__logo:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.zone-cluster__logo-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.zone-cluster__logo-name {
  font-weight: 900;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #eff6ff;
}

.zone-cluster__pill {
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--logo-size) / 2) + 11px);
  transform: translate(-50%, 0);
  padding: 2px 6px 3px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid #2563eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 6;
  pointer-events: none;
}

.zone-cluster__pill-name {
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #dbeafe;
  white-space: nowrap;
  line-height: 1.15;
}

.zone-cluster__postcode {
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.08em;
  color: #93c5fd;
  white-space: nowrap;
  line-height: 1;
}

.zone-cluster.is-open .zone-cluster__pill,
.zone-cluster.is-open .zone-cluster__stem,
.zone-cluster.is-open .zone-cluster__stem-dot {
  display: none;
}

.zone-cluster__stem {
  display: block;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% + (var(--logo-size) / 2));
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: #2563eb;
  pointer-events: none;
  z-index: 6;
}

.zone-cluster__stem-dot {
  display: block;
  position: absolute;
  left: calc(50% - 1.5px);
  top: calc(50% + (var(--logo-size) / 2) + 6px);
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: rgba(147, 197, 253, 0.5);
  pointer-events: none;
  z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
  .zone-cluster__halo,
  .zone-cluster__sat,
  .zone-cluster__logo {
    transition: opacity 120ms ease;
  }

  .zone-cluster__halo,
  .zone-cluster.is-open .zone-cluster__halo,
  .zone-cluster__sat,
  .zone-cluster.is-open .zone-cluster__sat {
    transform: none;
  }
}