/* Map labels: positioned by js/labels.js with transform only; never take the pointer. */
#labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  --ink-halo: color-mix(in srgb, var(--ink) 90%, transparent);
  --ink-halo-soft: color-mix(in srgb, var(--ink) 60%, transparent);
  /* tuning (tune.js): --lb-dk darkens the ink toward black, --lb-hk is the opacity and --lb-hr the radius scale of the light halo; 0.8 / 1 / 1 = owner defaults */
  --lb-dk: 0.8;
  --lb-hk: 1;
  --lb-hr: 1;
  --lh: color-mix(in srgb, var(--halo) calc(var(--lb-hk) * 100%), transparent);
  --lhs: color-mix(in srgb, var(--halo-soft) calc(var(--lb-hk) * 100%), transparent);
  --r2: calc(2px * var(--lb-hr));
  --r3: calc(3px * var(--lb-hr));
  --r5: calc(5px * var(--lb-hr));
  --r6: calc(6px * var(--lb-hr));
  --r8: calc(8px * var(--lb-hr));
  --r12: calc(12px * var(--lb-hr));
}
#labels .lb { color: color-mix(in srgb, var(--lb-c, var(--ink-soft)), black calc(var(--lb-dk) * 100%)); }

.lb {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
  font-family: var(--font-ui);
  line-height: 1;
  white-space: nowrap;
  --lb-c: var(--ink-soft);
}
.lb.on { opacity: 1; }
.lb .in { position: absolute; left: 0; top: 0; }
.lb .tx {
  position: absolute;
  top: -0.5em;
  text-shadow: 0 0 var(--r3) var(--lh), 0 0 var(--r6) var(--lhs);
}

/* City: dot and name, name to the right of the dot (or to the left when there is no room). */
.lb.city .dot {
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, currentColor 0 58%, transparent 68%);
}
.lb.city .tx { left: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; }
.lb.city.left .tx { left: auto; right: 8px; }

/* Capital: a ring around the dot and a heavier, darker name. */
.lb.city.cap { --lb-c: var(--ink); }
.lb.city.cap .dot {
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, currentColor 0 22%, transparent 30% 56%, currentColor 62% 80%, transparent 90%);
}
.lb.city.cap .tx { font-weight: 600; }
/* Capital that is not the priority city: the marker only. */
.lb.city.nm0 .tx { display: none; }

/* Country: spaced capitals, centred on the label point, quieter than the cities. */
.lb.country { --lb-c: var(--ink-faint); }
.lb.country .tx {
  font-family: var(--font-country);
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* The highlighted city: no dot of its own (the globe draws the marker), heavy ink. */
.lb.focus { --lb-c: var(--ink); }
.lb.focus .dot { display: none; }
.lb.focus .tx { left: 13px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.lb.focus.left .tx { left: auto; right: 13px; }
/* ?city=pin: the name is centred on the top of the pin. */
.lb.focus.pin .tx { left: 0; right: auto; transform: translateX(-50%); }
/* ?city=accent|ink|halo: the selected city's name is heavier and a little larger than the other names. */
.lb.focus.accent .tx, .lb.focus.ink .tx, .lb.focus.halo .tx { font-size: 15px; font-weight: 800; letter-spacing: 0.05em; }

/* Inside the dark ink circle a label takes the ground colour, with a dark halo instead of the light one. */
#labels .lb.lit { --lb-c: var(--ground); }
#labels .lb.lit .tx { text-shadow: 0 0 3px var(--ink-halo), 0 0 6px var(--ink-halo-soft); }

/* Country mode: the names sit over columns, so the halo is wider and more opaque; the ink stays as on the globe. */
#labels.flat .lb .tx {
  text-shadow: 0 0 var(--r2) var(--lh), 0 0 var(--r2) var(--lh), 0 0 var(--r3) var(--lh), 0 0 var(--r5) var(--lh), 0 0 var(--r8) var(--lh), 0 0 var(--r12) var(--lhs);
}
#labels.flat .lb.lit { --lb-c: var(--ground); }
#labels.flat .lb.lit .tx { text-shadow: 0 0 2px var(--ink-halo), 0 0 3px var(--ink-halo), 0 0 6px var(--ink-halo-soft); }

/* Column looks: the circle is a medium tone, not dark, so a label inside it keeps the ink and the wide halo. */
html[data-look] #labels .lb.lit { --lb-c: var(--ink); }
html[data-look] #labels .lb.lit .tx {
  text-shadow: 0 0 var(--r2) var(--lh), 0 0 var(--r2) var(--lh), 0 0 var(--r3) var(--lh), 0 0 var(--r5) var(--lh), 0 0 var(--r8) var(--lh), 0 0 var(--r12) var(--lhs);
}