/* ============================================================
   60 — Global scale + stats
   Scope: .scale*  •  tokens only  •  light theme on --surface-alt
   ============================================================ */

.scale {
  isolation: isolate;
}

/* ---------------- Head ---------------- */

.scale__head {
  text-align: center;
  margin-bottom: clamp(var(--s-10), 6vw, var(--s-12));
}

/* --c-brand is 4.47:1 on --surface-alt — one notch under AA for 14px text. */
.scale__eyebrow {
  color: var(--c-brand-press);
  margin-bottom: var(--s-5);
}

.scale__title {
  max-width: 15em;
  margin-inline: auto;
  margin-bottom: var(--s-5);
}

.scale__lead {
  margin-inline: auto;
}

.scale__link {
  margin-top: var(--s-6);
  color: var(--c-brand-press);
}

.scale__link:hover {
  color: color-mix(in srgb, var(--c-brand-press) 84%, var(--c-navy));
}

/* ---------------- Map ---------------- */

.scale__map {
  position: relative;
  margin-bottom: clamp(var(--s-9), 5vw, var(--s-11));
}

/* Soft brand halo sitting behind the stipple, clipped by the map box. */
.scale__map-inner {
  position: relative;
  overflow: hidden;
}

.scale__map-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 74% at 50% 46%,
      color-mix(in srgb, var(--c-brand) 9%, transparent) 0%,
      transparent 72%),
    radial-gradient(38% 58% at 82% 34%,
      color-mix(in srgb, var(--c-cyan) 8%, transparent) 0%,
      transparent 70%);
  pointer-events: none;
}

.scale__svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 460;
}

.scale__dot {
  fill: var(--c-slate-light);
  fill-opacity: .6;
}

.scale__dot--coarse {
  fill-opacity: .72;
}

/* Fine grid is the default; the coarse grid takes over on narrow viewports. */
.scale__field--coarse { display: none; }

.scale__pulse {
  fill: var(--c-brand);
  transform-box: fill-box;
  transform-origin: center;
  animation: scale-pulse 3.4s var(--ease-inout) infinite;
  animation-delay: calc(var(--i, 0) * var(--t-base));
}

.scale__pulse:nth-child(3n + 2) { fill: var(--c-cyan); }
.scale__pulse:nth-child(4n + 3) { fill: var(--c-teal); }

@keyframes scale-pulse {
  0%, 100% { opacity: .5;  transform: scale(1); }
  16%      { opacity: 1;   transform: scale(1.85); }
  40%      { opacity: .5;  transform: scale(1); }
}

/* ---------------- Floating city pins ---------------- */

.scale__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* data-reveal sits on the <li> so node, stem and chip arrive as one object. */
.scale__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

/* node */
.scale__pin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s-2);
  height: var(--s-2);
  translate: -50% -50%;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  box-shadow:
    0 0 0 var(--s-1) color-mix(in srgb, var(--c-brand) 16%, transparent),
    var(--sh-xs);
}

/* hairline stem */
.scale__pin::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--s-3);
  translate: -50% -100%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-brand) 60%, transparent),
    color-mix(in srgb, var(--c-brand) 12%, transparent));
}

/* Every chip is centre-anchored over its node — no corner-hung exceptions. */
.scale__pin-card {
  position: absolute;
  bottom: var(--s-3);
  left: 0;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  box-shadow:
    inset 0 0 0 1px var(--c-hairline),
    var(--sh-sm);
}

.scale__pin-icon {
  flex: none;
  width: var(--s-4);
  height: var(--s-4);
  color: var(--c-brand);
}

.scale__pin-city {
  color: var(--text-strong);
  font-weight: var(--fw-semi);
}

.scale__pin-ms {
  position: relative;
  padding-left: var(--s-3);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.scale__pin-ms::before {
  content: "";
  position: absolute;
  left: var(--s-1);
  top: 50%;
  width: 1px;
  height: var(--s-3);
  translate: 0 -50%;
  background: var(--c-hairline);
}

/* Anchors — every node lands on land, every centred chip clears the box. */
.scale__pin--sfo { --x: 17%;   --y: 33.7%; }
.scale__pin--dub { --x: 48.3%; --y: 22%; }
.scale__pin--gru { --x: 36.2%; --y: 75%; }
.scale__pin--sin { --x: 78.8%; --y: 58.3%; }
.scale__pin--nrt { --x: 88.6%; --y: 33%; }

/* ---------------- Stat row ---------------- */

.scale__stats {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* One cap for the whole row, so all four figures share a size. */
  --num-cap: 5cqi;
}

.scale__stat {
  padding-inline: var(--s-6);
}

.scale__stat + .scale__stat { border-left: 1px solid var(--c-hairline); }
.scale__stat:first-child { padding-left: 0; }
.scale__stat:last-child  { padding-right: 0; }

.scale__stat-value {
  color: var(--text-strong);
  font-size: var(--fs-h1);
  /* Cap against the row width: the widest figure ("99.999%") is ~4em, so a
     fifth of a column keeps it inside its cell at any viewport and any root
     font size. --num-cap is restated per column count below. */
  font-size: min(var(--fs-h1), var(--num-cap));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}

/* Reserve the final digit count so the unit suffix never slides during count-up. */
.scale__num {
  display: inline-block;
  min-width: 3ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.scale__stat-label {
  max-width: 24ch;
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1199px) {
  /* Two up: rules meet, so padding — never row-gap — does the separating. */
  .scale__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); --num-cap: 10cqi; }
  .scale__stat { padding-inline: var(--s-5); }
  .scale__stat:nth-child(odd)  { border-left: 0; padding-left: 0; }
  .scale__stat:nth-child(even) { border-left: 1px solid var(--c-hairline); padding-right: 0; }
  .scale__stat:nth-child(-n + 2) { padding-bottom: var(--s-8); }
  .scale__stat:nth-child(n + 3)  { border-top: 1px solid var(--c-hairline); padding-top: var(--s-8); }
}

@media (max-width: 1023px) {
  /* San Francisco's chip and Dublin's chip converge below this width. */
  .scale__pin--sfo { display: none; }
}

@media (max-width: 900px) {
  /* Tokyo's chip starts to reach into the gutter below this width. */
  .scale__pin--nrt { display: none; }
}

@media (max-width: 680px) {
  /* Not enough vertical room in the map for three chips — keep two, uncrowded. */
  .scale__pin--sin { display: none; }
}

@media (max-width: 640px) {
  .scale__field { display: none; }
  .scale__field--coarse { display: block; }
}

@media (max-width: 480px) {
  .scale__stats { grid-template-columns: minmax(0, 1fr); --num-cap: 20cqi; }
  .scale__stat { padding-inline: 0; }
  .scale__stat:nth-child(-n + 2) { padding-bottom: 0; }
  .scale__stat + .scale__stat {
    border-left: 0;
    border-top: 1px solid var(--c-hairline);
    padding-top: var(--s-7);
  }
  .scale__stat-label { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scale__pulse { animation: none; opacity: .8; }
}