/* Source style section 2 */

:root {
  --bg: #0a0d16; /* dark navy */
  --bg-soft: #111629;
  --card: #141a2b; /* dark card */
  --card2: #1b2236;
  --ink: #f5ecec; /* primary text */
  --muted: #a8908f; /* secondary */
  --tert: #6b5453; /* tertiary */
  --line: rgba(255, 255, 255, 0.08); /* separator */
  --fill: rgba(255, 255, 255, 0.06);
  --fill2: rgba(255, 255, 255, 0.11);
  --orange: #e23b2e; /* red tint */
  --orange-soft: #2a1210;
  --teal: #4fb0aa;
  --radius: 11px;
  --blur: saturate(160%) blur(20px);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 22px 56px -30px rgba(0, 0, 0, 0.4);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  background: var(--bg);
  color: var(--ink);
  background-image:
    radial-gradient(
      1200px 600px at 72% -10%,
      rgba(205, 56, 38, 0.16) 0%,
      rgba(205, 56, 38, 0.1536) 6.96%,
      rgba(205, 56, 38, 0.135) 14.5%,
      rgba(205, 56, 38, 0.1082) 22.04%,
      rgba(205, 56, 38, 0.08) 29%,
      rgba(205, 56, 38, 0.0518) 35.96%,
      rgba(205, 56, 38, 0.025) 43.5%,
      rgba(205, 56, 38, 0.0064) 51.04%,
      rgba(205, 56, 38, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6%,
      rgba(44, 74, 160, 0.12) 0%,
      rgba(44, 74, 160, 0.1152) 7.2%,
      rgba(44, 74, 160, 0.1012) 15%,
      rgba(44, 74, 160, 0.0812) 22.8%,
      rgba(44, 74, 160, 0.06) 30%,
      rgba(44, 74, 160, 0.0388) 37.2%,
      rgba(44, 74, 160, 0.0187) 45%,
      rgba(44, 74, 160, 0.0048) 52.8%,
      rgba(44, 74, 160, 0) 60%
    );
  background-attachment: fixed;
  font-family:
    Manrope,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  letter-spacing: -0.022em;
  line-height: 1.12;
  font-weight: 700;
}
.mono {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}
::selection {
  background: #e8590f33;
}

/* ---------- nav : frosted bar ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(26, 13, 13, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 0.5px solid rgba(226, 59, 46, 0.14);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 20px;
}
/* the wordmark is a single image, so the brand scales as one object */
.brand {
  gap: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand svg {
  width: 30px;
  height: 30px;
}
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  background: var(--fill);
  border-radius: 99px;
  padding: 3px;
}
.nav-links a {
  position: relative;
  font-size: 14px;
  font-weight: 590;
  color: var(--muted);
  padding: 7px 16px;
  border-radius: 99px;
  /* Transition only the needed properties. */
  transition: color 0.28s cubic-bezier(0.3, 0.8, 0.35, 1);
}
.nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.055);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.3s cubic-bezier(0.3, 0.8, 0.35, 1),
    transform 0.3s cubic-bezier(0.3, 0.8, 0.35, 1);
}
.nav-links a:hover::before {
  opacity: 1;
  transform: scale(1);
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:active {
  transform: scale(0.97);
}
.nav-links a.active {
  color: var(--ink);
  background: var(--fill2);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.nav-links a.active::before {
  opacity: 0;
}
.nav-links a.dis {
  opacity: 0.4;
  pointer-events: none;
}
.burger {
  display: none;
  background: var(--fill);
  border: none;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--ink);
}

/* ---------- hero ---------- */
.hero {
  padding-block: 64px 44px;
  position: relative;
  overflow-x: clip;
}
.hero-grid {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal;
  color: #ee5d2e;
}
.hero h1 em svg {
  display: none;
}
.hero p {
  color: var(--muted);
  font-size: 16px;
  max-width: 60ch;
  margin: 0 auto;
}
.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero::before {
  content: '';
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(226, 59, 46, 0.2) 0%,
    rgba(226, 59, 46, 0.1921) 8.4%,
    rgba(226, 59, 46, 0.1688) 17.5%,
    rgba(226, 59, 46, 0.1353) 26.6%,
    rgba(226, 59, 46, 0.1) 35%,
    rgba(226, 59, 46, 0.0647) 43.4%,
    rgba(226, 59, 46, 0.0312) 52.5%,
    rgba(226, 59, 46, 0.0079) 61.6%,
    rgba(226, 59, 46, 0) 70%
  );
  pointer-events: none;
  z-index: -1;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 99px;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    opacity 0.2s;
  border: none;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 6px 20px -6px #e23b2e88;
}
.btn-primary:hover {
  box-shadow: 0 12px 30px -8px #e23b2eaa;
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--fill);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--fill2);
}
/* Hero figures: four compact tiles, value centred with a soft glow, unit
   smaller, mono caption below. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 34px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.stat {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 13px 15px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px -20px rgba(0, 0, 0, 0.9);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.stat:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.16);
}
.stat b i {
  font-style: normal;
  color: #ffc7b8;
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 16px rgba(255, 150, 120, 0.3);
}
.stat > span {
  display: block;
  font-family:
    JetBrains Mono,
    ui-monospace,
    Menlo,
    monospace;
  font-size: 9px;
  color: var(--tert);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* floating map window */
.scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.scroll-cue a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--tert);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.72;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}
.scroll-cue a:hover {
  opacity: 1;
  color: var(--orange);
}
.scroll-cue i {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  animation: cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob {
  0%,
  100% {
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.55;
  }
  50% {
    transform: translateY(3px) rotate(45deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i {
    animation: none;
  }
}
@media (max-width: 640px) {
  .scroll-cue {
    margin-top: 22px;
  }
}
.hero-visual {
  position: relative;
  margin-top: -40px;
  max-width: 100%;
  overflow: visible;
}
.orbit {
  position: absolute;
  inset: -8% -6% -8% -6%;
  border-radius: 14px;
  background:
    radial-gradient(120px 120px at 18% 22%, #f7c9a955, transparent 70%),
    radial-gradient(160px 160px at 88% 78%, #e8590f22, transparent 70%);
  filter: blur(4px);
  z-index: -1;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}
.ping {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e8590f;
  box-shadow:
    0 0 0 2px #1a0f10,
    0 2px 8px #e23b2e88;
}
.ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #e8590f;
  animation: ping 2.6s ease-out infinite;
}
.ping.p1 {
  top: 36%;
  left: 48%;
}
.ping.p2 {
  top: 35%;
  left: 69%;
  animation-delay: 0.8s;
}
.ping.p3 {
  top: 48%;
  left: 59%;
  animation-delay: 1.6s;
}
.ping.p2::after {
  animation-delay: 0.8s;
}
.ping.p3::after {
  animation-delay: 1.6s;
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}
.readout {
  position: absolute;
  right: -14px;
  bottom: -72px;
  background: rgba(40, 20, 20, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-radius: 11px;
  padding: 16px 20px;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  transition: transform 0.25s ease-out;
}
.rd-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.rd-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.rd-val b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rd-val em {
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: var(--orange);
}
.rd-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-top: 2px;
}
.rd-spark i {
  flex: 1;
  background: linear-gradient(180deg, #f5722e, var(--orange));
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: sparkGrow 0.5s ease-out forwards;
}
.rd-spark i:nth-child(1) {
  height: 40%;
  animation-delay: 0.1s;
}
.rd-spark i:nth-child(2) {
  height: 65%;
  animation-delay: 0.15s;
}
.rd-spark i:nth-child(3) {
  height: 50%;
  animation-delay: 0.2s;
}
.rd-spark i:nth-child(4) {
  height: 80%;
  animation-delay: 0.25s;
}
.rd-spark i:nth-child(5) {
  height: 55%;
  animation-delay: 0.3s;
}
.rd-spark i:nth-child(6) {
  height: 90%;
  animation-delay: 0.35s;
}
.rd-spark i:nth-child(7) {
  height: 70%;
  animation-delay: 0.4s;
}
.rd-spark i:nth-child(8) {
  height: 100%;
  animation-delay: 0.45s;
}
@keyframes sparkGrow {
  to {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbit,
  .ping::after,
  .rd-spark i {
    animation: none;
    transform: none;
  }
}
.window {
  background: var(--card);
  border-radius: 13px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 32px 80px -28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition: transform 0.25s ease-out;
  border: 0.5px solid var(--line);
  max-width: 100%;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: var(--blur);
}
.win-bar .dots {
  display: flex;
  gap: 6px;
}
.win-bar .dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fill2);
}
.win-bar .dots i:first-child {
  background: #ff5f57;
}
.win-bar .dots i:nth-child(2) {
  background: #febc2e;
}
.win-bar .dots i:nth-child(3) {
  background: #28c840;
}
.win-bar span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.win-body {
  position: relative;
  background:
    radial-gradient(420px 260px at 72% 78%, #f7c9a940, transparent 70%),
    radial-gradient(360px 220px at 12% 30%, #f0902e22, transparent 70%),
    linear-gradient(180deg, #1a0f10, #120a0b);
}
.heromap {
  padding: 26px 10px 40px;
  overflow: hidden;
}
.heromap svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
  max-width: 100%;
}
.heromap path {
  fill: #3a2422;
  stroke: #1a0f10;
  stroke-width: 0.6;
}
.heromap path.d1 {
  fill: #7a2418;
}
.heromap path.d2 {
  fill: #a52c1c;
}
.heromap path.d3 {
  fill: #d13a24;
}
.heromap path.d4 {
  fill: #f5502e;
}
@media (prefers-reduced-motion: no-preference) {
  .heromap path.d3,
  .heromap path.d4 {
    animation: heat 4s ease-in-out infinite;
  }
  @keyframes heat {
    50% {
      opacity: 0.78;
    }
  }
}
.win-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(40, 20, 20, 0.72);
  backdrop-filter: var(--blur);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.win-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink 2.4s infinite;
}

/* ---------- sections ---------- */
section {
  padding: 88px 0;
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.sec-head h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.sec-head p {
  color: var(--muted);
  font-size: 15px;
  max-width: 46ch;
}

/* ---------- explorer (flagship layers) ---------- */
/* hairline border over a soft shadow, matching the viewer's panels */
.explorer {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 456px 1fr;
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
}
.exp-side {
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.07);
}

/* same mode switch as the viewer, including the sliding thumb */
.seg {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  align-self: flex-start;
  padding: 4px;
  border-radius: 99px;
  /* Recessed track and bronze fill (viewer depth switch colours), pill
     shape kept. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.09),
    inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.seg::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.seg button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  transition: color 0.18s ease;
}
.seg button i {
  font-size: 10px;
  opacity: 0.7;
  transition:
    opacity 0.18s ease,
    color 0.18s ease;
}
.seg button:hover {
  color: var(--ink);
}
.seg button.on {
  color: #ffd0c0;
  text-shadow: none;
}
.seg button.on i {
  opacity: 1;
  color: #ffd0c0;
}
.seg-thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(226, 90, 31, 0.34), rgba(150, 38, 20, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.22),
    inset 0 0 0 0.5px rgba(255, 150, 110, 0.3),
    0 0 14px -4px rgba(226, 90, 31, 0.5);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1),
    width 0.3s cubic-bezier(0.2, 0.9, 0.25, 1);
}
/* no underline here: the filled thumb already says which one is active */

/* the viewer labels every panel with a mono eyebrow before the heading */
.exp-eyebrow {
  display: block;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 9px;
}

/* nowrap on a roomy column, wrapping only once the column really is narrow */
.exp-chips {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
}
@media (max-width: 1080px) {
  .exp-chips {
    flex-wrap: wrap;
  }
}
/* Single deep red for all of them; the button stays the brightest
   element. */
/* sized to fit the side column on one line: three pills, no wrap */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8907e;
  background: rgba(150, 38, 20, 0.22);
  border: 0.5px solid rgba(226, 90, 31, 0.3);
  padding: 6px 12px;
  border-radius: 99px;
}

.exp-side h3 {
  font-size: 25px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  letter-spacing: -0.02em;
}
.exp-side h3 .top {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-soft);
  padding: 4px 10px;
  border-radius: 99px;
}
.exp-side p {
  font-size: 14.5px;
  color: var(--muted);
}
.exp-side .map-link {
  margin-top: auto;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  align-self: flex-start;
  padding: 13px 26px;
  border-radius: 99px;
  transition: 0.2s;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  /* the hero's Explore the maps button, same saturated tone */
  background: var(--orange);
  border: none;
  box-shadow: 0 6px 20px -6px #e23b2e88;
}
.exp-side .map-link:hover {
  box-shadow: 0 12px 30px -8px #e23b2eaa;
}
.exp-side .map-link:hover {
  transform: translateY(-1px);
}
.exp-side .map-link:active {
  transform: scale(0.97);
}
.exp-view {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same map background as the viewer. */
  background: radial-gradient(680px 420px at 50% 42%, #141a26, #0c0f16 70%);
}
.expmap-hit {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.expmap {
  width: 100%;
  padding: 18px 20px;
}
.expmap path {
  transition: fill 0.25s ease;
}
.expmap-hit:hover .expmap path.d1,
.expmap-hit:hover .expmap path.d2,
.expmap-hit:hover .expmap path.d3,
.expmap-hit:hover .expmap path.d4 {
  filter: brightness(1.12);
}
.expmap svg {
  width: 100%;
  height: auto;
  display: block;
}
/* the viewer's own surface colours, so the preview is not a different map */
.expmap path {
  fill: #252a36;
  stroke: #161b26;
  stroke-width: 0.4;
  transition: fill 0.25s ease;
}
.expmap.has-plate path {
  fill: #2f3646;
  stroke: rgba(255, 255, 255, 0.07);
}
.expmap image {
  image-rendering: auto;
}
.expmap path.d1 {
  fill: #7a2418;
}
.expmap path.d2 {
  fill: #a52c1c;
}
.expmap path.d3 {
  fill: #d13a24;
}
.expmap path.d4 {
  fill: #f5502e;
}
/* frosted glass over the map, matching the viewer's own overlays */
.exp-badge {
  position: absolute;
  left: 18px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 12, 13, 0.8);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-radius: 99px;
  padding: 7px 13px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* the viewer's legend, same component, same numbers */
.exp-legend {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 4;
  pointer-events: none;
  padding: 11px 13px 10px;
  border-radius: 10px;
  background: rgba(22, 12, 13, 0.8);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.exp-legend h5 {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 199, 184, 0.75);
  margin: 0 0 8px;
}
.exp-legend .lg-bar {
  width: 196px;
  height: 11px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.exp-legend .lg-ticks {
  position: relative;
  height: 13px;
  width: 196px;
  margin-top: 5px;
}
.exp-legend .lg-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--tert);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.exp-legend .lg-ticks span:first-child {
  transform: none;
}
.exp-legend .lg-ticks span:last-child {
  transform: translateX(-100%);
}
.exp-legend .lg-bar.steps {
  display: flex;
  gap: 1px;
  overflow: hidden;
  background: none;
  border-radius: 2px;
}
.exp-legend .lg-bar.steps span {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  transform-origin: 50% 100%;
}
.exp-legend .lg-ticks.steps b {
  position: absolute;
  top: 0;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tert);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
}
/* Scale animates when the legend enters the viewport; lg-go is added by
   the observer and reset on each redraw. */
.exp-legend.lg-go .lg-bar.steps span {
  animation: lgStack 0.44s cubic-bezier(0.2, 1.25, 0.35, 1) both;
  animation-delay: calc(0.05s + var(--i, 0) * 42ms);
}
.exp-legend.lg-go .lg-ticks.steps b {
  animation: lgMark 0.34s ease both;
  animation-delay: calc(0.2s + var(--i, 0) * 42ms);
}
@media (prefers-reduced-motion: reduce) {
  .exp-legend .lg-bar.steps span,
  .exp-legend .lg-ticks.steps b {
    animation: none;
  }
  .exp-legend .lg-ticks.steps b {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@media (max-width: 560px) {
  .exp-legend {
    display: none;
  }
}
.exp-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink 2.4s infinite;
}
/* Minimum gap above the button; the taller card also keeps the legend clear
   of South America. */
.exp-eyebrow {
  display: block;
  margin-bottom: -4px;
}
.exp-fade {
  transition:
    opacity 0.3s 0.05s,
    transform 0.3s 0.05s;
  margin-bottom: 26px;
}
.exp-fade.out {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.exp-count {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(22, 12, 13, 0.8);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-radius: 99px;
  padding: 7px 13px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---------- highlights dashboard ---------- */
#highlights {
  background: transparent;
  border: none;
}
.dash {
  border-radius: 13px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 0.5px solid rgba(226, 59, 46, 0.14);
  background:
    radial-gradient(
      600px 340px at 78% 20%,
      rgba(226, 59, 46, 0.16) 0%,
      rgba(226, 59, 46, 0.1536) 8.16%,
      rgba(226, 59, 46, 0.135) 17%,
      rgba(226, 59, 46, 0.1082) 25.84%,
      rgba(226, 59, 46, 0.08) 34%,
      rgba(226, 59, 46, 0.0518) 42.16%,
      rgba(226, 59, 46, 0.025) 51%,
      rgba(226, 59, 46, 0.0064) 59.84%,
      rgba(226, 59, 46, 0) 68%
    ),
    radial-gradient(
      520px 300px at 10% 85%,
      rgba(226, 59, 46, 0.1) 0%,
      rgba(226, 59, 46, 0.096) 7.92%,
      rgba(226, 59, 46, 0.0844) 16.5%,
      rgba(226, 59, 46, 0.0677) 25.08%,
      rgba(226, 59, 46, 0.05) 33%,
      rgba(226, 59, 46, 0.0323) 40.92%,
      rgba(226, 59, 46, 0.0156) 49.5%,
      rgba(226, 59, 46, 0.004) 58.08%,
      rgba(226, 59, 46, 0) 66%
    ),
    linear-gradient(180deg, #1a0d0d, #140a0b);
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 26px;
  border-bottom: 0.5px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: var(--blur);
  flex-wrap: wrap;
}
.dash-head .t {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Updated stamp: same arrow icon as the impact stamps, then date and age; green
   when fresh, amber after 36 h. */
.dash-head .t.upd {
  gap: 8px;
  letter-spacing: 0.05em;
  color: var(--ink);
  white-space: nowrap;
}
.dash-head .t.upd .ud {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: #8fe3ae;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-head .t.upd .uk {
  color: #8fe3ae;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(95, 208, 138, 0.55),
    0 0 2px rgba(143, 227, 174, 0.35);
}
.dash-head .t.upd .ud {
  filter: drop-shadow(0 0 4px rgba(95, 208, 138, 0.6));
}
.dash-head .t.upd .ua {
  color: var(--tert);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
}
.dash-head .t.upd.stale .ud {
  stroke: #ffc978;
}
.dash-head .t.upd.stale .uk {
  color: #ffc978;
  text-shadow:
    0 0 10px rgba(240, 165, 40, 0.5),
    0 0 2px rgba(255, 201, 120, 0.35);
}
.dash-head .t.upd.stale .ud {
  filter: drop-shadow(0 0 4px rgba(240, 165, 40, 0.55));
}
@media (max-width: 600px) {
  .dash-head .t.upd .ua {
    display: none;
  }
}
.dash.in .dash-head {
  animation: fadeDown 0.5s ease both;
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.crow {
  display: grid;
  grid-template-columns: 16px 118px 1fr 52px 72px;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-bottom: 0.5px solid var(--line);
  border-radius: 9px;
  transition: background 0.15s;
  opacity: 0;
  transform: translateX(-18px);
}
.dash.in .crow {
  animation: slideRow 0.45s ease both;
}
.dash.in .crow:nth-child(1) {
  animation-delay: 0.08s;
}
.dash.in .crow:nth-child(2) {
  animation-delay: 0.16s;
}
.dash.in .crow:nth-child(3) {
  animation-delay: 0.24s;
}
.dash.in .crow:nth-child(4) {
  animation-delay: 0.32s;
}
.dash.in .crow:nth-child(5) {
  animation-delay: 0.4s;
}
.dash.in .crow:nth-child(6) {
  animation-delay: 0.48s;
}
.dash.in .crow:nth-child(7) {
  animation-delay: 0.56s;
}
.dash.in .crow:nth-child(8) {
  animation-delay: 0.64s;
}
@keyframes slideRow {
  to {
    opacity: 1;
    transform: none;
  }
}
.globe-wrap {
  position: relative;
  opacity: 0;
  transform: scale(0.94);
}
.dash.in .globe-wrap {
  animation: mapPop 0.8s cubic-bezier(0.22, 0.9, 0.36, 1) 0.25s both;
}
.dash.expanded .globe-wrap {
  animation: none;
  opacity: 1;
  transform: none;
}
@keyframes mapPop {
  to {
    opacity: 1;
    transform: none;
  }
}
.dash-cell .sec-head,
.dash-cell .mini-seg {
  opacity: 0;
  transform: translateY(10px);
}
.dash.in .dash-cell .sec-head {
  animation: fadeUp 0.5s ease 0.05s both;
}
.dash.in .dash-cell .mini-seg {
  animation: fadeUp 0.5s ease 0.15s both;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}
.dash-main {
  display: grid;
  grid-template-columns: 1fr;
}
.cont-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 36px;
  align-items: center;
}
.impact-cell {
  border-top: 0.5px solid var(--line);
}
/* iOS storage-style stacked bar */
.ibar {
  display: flex;
  gap: 3px;
  height: 27px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.ibar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  min-width: 6px;
  position: relative;
  /* widths are set once; only compositor-friendly properties animate */
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    filter 0.12s ease,
    box-shadow 0.18s ease;
  cursor: pointer;
  flex-basis: 0;
  box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.08);
  transform-origin: left center;
  will-change: transform;
}
/* entrance: each segment sweeps out from the left, no layout work */
.ibar.reveal span {
  transform: scaleX(0);
  opacity: 0;
}
.ibar.reveal.go span {
  animation: ibarIn 0.55s cubic-bezier(0.22, 0.9, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes ibarIn {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
/* every segment has the same corners; rounder ends turned a thin last
   segment into a half circle */
/* Each segment sets style.color, so the glow uses currentColor. */
.ibar span:hover {
  transform: scaleY(1.15);
  filter: brightness(1.18);
  box-shadow: 0 0 9px 1px currentColor;
}
.ibar.dim span {
  opacity: 0.18;
}
.ibar.dim span.hot {
  opacity: 1;
  transform: scaleY(1.15);
  filter: brightness(1.2);
  box-shadow: 0 0 10px 1.5px currentColor;
}
.impact-cell .cell-head,
.impact-cell .imp-sub,
.impact-cell #wtip {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.impact-cell.in .cell-head {
  opacity: 1;
  transform: none;
}
.impact-cell.in .imp-sub {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}
.impact-cell.in #wtip {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.dash-cell {
  padding: 28px 32px 30px;
  min-width: 0;
}
.dash-cell + .dash-cell {
  border-left: 0.5px solid var(--line);
}
.cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cell-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cell-head .hint {
  font-size: 11.5px;
  color: var(--tert);
  font-weight: 500;
}
/* reporting period of the two impact panels */
.imp-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 76ch;
  margin: -8px 0 14px;
}
.mini-seg {
  display: inline-flex;
  background: var(--fill);
  border-radius: 99px;
  padding: 2px;
  gap: 2px;
  position: relative;
  isolation: isolate;
}
/* Active pill is a single sliding element. */
.mini-seg::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  z-index: -1;
  width: var(--sw, 0px);
  transform: translateX(var(--sx, 0px));
  border-radius: 99px;
  opacity: var(--so, 0);
  background: linear-gradient(180deg, rgba(226, 90, 31, 0.3), rgba(150, 40, 25, 0.24));
  box-shadow: inset 0 0 0 0.5px rgba(255, 160, 120, 0.3);
  will-change: transform, width;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.9, 0.25, 1),
    width 0.34s cubic-bezier(0.2, 0.9, 0.25, 1),
    background 0.42s ease,
    box-shadow 0.42s ease,
    opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .mini-seg::before {
    transition: opacity 0.2s ease;
  }
}
.mini-seg button {
  border: none;
  background: transparent;
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 590;
  color: var(--muted);
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}
.mini-seg button:hover {
  color: var(--ink);
}
.mini-seg button.on {
  background: transparent;
  box-shadow: none;
  color: #ffe0d3;
}

/* ---------- 3D globe in the live summary ---------- */
.globe-wrap {
  position: relative;
  border-radius: 0;
  overflow: visible;
  background: none;
  height: 100%;
  min-height: 260px;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- hover feedback on the globe ---------- */
/* No hover scale on the WebGL canvas (caused visible re-rasterisation). */
.globe-stage {
  transform: none;
  transition:
    opacity 0.8s ease,
    filter 0.35s ease;
}

.globe-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(226, 59, 46, 0.14) 0%,
    rgba(226, 59, 46, 0.1344) 8.16%,
    rgba(226, 59, 46, 0.1181) 17%,
    rgba(226, 59, 46, 0.0947) 25.84%,
    rgba(226, 59, 46, 0.07) 34%,
    rgba(226, 59, 46, 0.0453) 42.16%,
    rgba(226, 59, 46, 0.0219) 51%,
    rgba(226, 59, 46, 0.0056) 59.84%,
    rgba(226, 59, 46, 0) 68%
  );
  transition: opacity 0.45s ease;
}
.globe-wrap::before {
  opacity: 0.42;
} /* steady glow: no hover state to pop */
/* entrance: the globe fades up slowly while the camera flies in, and the glow
   behind it blooms once before settling */
.globe-stage.gl-enter {
  transition:
    opacity 0.55s ease-out,
    filter 0.35s ease;
}
.globe-wrap.gl-wait::before {
  opacity: 0;
} /* no glow before the globe arrives */
.globe-wrap.gl-in::before {
  animation: glBloom 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes glBloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  35% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe-wrap.gl-in::before {
    animation: none;
  }
}

/* ---------- country lightbox ---------- */
.clb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 6, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.clb.open {
  opacity: 1;
  pointer-events: auto;
}
.clb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px;
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1),
    opacity 0.32s ease;
}
.clb.open .clb-card {
  transform: none;
  opacity: 1;
}
#clbSvg {
  width: min(84vw, 620px);
  height: min(64vh, 440px);
  filter: drop-shadow(0 18px 50px rgba(226, 59, 46, 0.3));
}
#clbSvg {
  overflow: visible;
}
#clbSvg .shape {
  fill: rgba(226, 90, 31, 0.9);
  stroke: rgba(255, 200, 170, 0.9);
  stroke-width: 1.2;
  stroke-linejoin: round;
  fill-opacity: 0;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  opacity: 0;
}
.clb.open #clbSvg .shape {
  animation:
    clbDraw 1s cubic-bezier(0.3, 0, 0.2, 1) 0.1s forwards,
    clbFill 0.8s ease 0.6s forwards;
}
@keyframes clbDraw {
  from {
    stroke-dashoffset: var(--len, 2000);
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes clbFill {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

/* a bright point runs along the outline while it draws */
#clbSvg .spark {
  fill: none;
  stroke: #fff3ea;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 190, 150, 0.9));
}
.clb.open #clbSvg .spark {
  animation: clbSpark 1s cubic-bezier(0.3, 0, 0.2, 1) 0.1s forwards;
}
@keyframes clbSpark {
  0% {
    stroke-dashoffset: var(--len, 2000);
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* then a light band sweeps across the filled shape */
#clbSvg .sweep {
  opacity: 0;
}
.clb.open #clbSvg .sweep {
  animation: clbSweep 1.1s ease 0.95s forwards;
}
@keyframes clbSweep {
  0% {
    opacity: 0;
    transform: translateX(-55%);
  }
  35% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(55%);
  }
}

/* and the whole card brightens briefly */
.clb.open #clbSvg {
  animation: clbGlow 1.4s ease 0.8s both;
}
@keyframes clbGlow {
  0% {
    filter: drop-shadow(0 18px 50px rgba(226, 59, 46, 0.1));
  }
  40% {
    filter: drop-shadow(0 18px 60px rgba(255, 140, 90, 0.5));
  }
  100% {
    filter: drop-shadow(0 18px 50px rgba(226, 59, 46, 0.3));
  }
}

.clb-name,
.clb-sub {
  opacity: 0;
  transform: translateY(8px);
}
.clb.open .clb-name {
  animation: clbUp 0.5s ease 0.95s forwards;
}
.clb.open .clb-sub {
  animation: clbUp 0.5s ease 1.1s forwards;
}
@keyframes clbUp {
  to {
    opacity: 1;
    transform: none;
  }
}
.clb-name {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.clb-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.clb-flag {
  height: 22px;
  width: auto;
  flex: none;
  border-radius: 3px;
  object-fit: contain;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.45);
}
.clb-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 208, 192, 0.55);
}
.clb-sub:empty {
  display: none;
}
.clb-sub::before,
.clb-sub::after {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 208, 192, 0.28));
}
.clb-sub::after {
  transform: scaleX(-1);
}
.clb-sub span {
  margin-right: -0.22em;
}
/* Readout under the country: total on the left, the global impact
   categories filtered to this country. */
.clb-panel {
  width: min(84vw, 620px);
  opacity: 0;
  transform: translateY(10px);
}
.clb.open .clb-panel {
  animation: clbUp 0.5s ease 1.25s forwards;
}
.clb-readout {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}
.clb-num {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.9;
  color: #ffd0c0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(226, 90, 31, 0.5);
}
.clb-num small {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tert);
  margin-top: 8px;
  text-shadow: none;
}
.clb-win {
  margin-left: auto;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tert);
}
.clb-bar {
  display: flex;
  gap: 1px;
  height: 9px;
}
.clb-bar i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: clbGrow 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
  cursor: pointer;
  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease;
}
.clb-bar i:first-child {
  border-radius: 4px 0 0 4px;
}
.clb-bar i:last-child {
  border-radius: 0 4px 4px 0;
}
.clb-bar i:only-child {
  border-radius: 4px;
}
@keyframes clbGrow {
  to {
    transform: scaleX(1);
  }
}
/* Hover/pin on a segment or its key highlights that category and dims the others. */
.clb-bar.hasHi i {
  opacity: 0.28;
}
.clb-bar i.hi {
  opacity: 1;
  filter: brightness(1.4) saturate(1.3);
  box-shadow: 0 0 14px 1px var(--c);
}
/* Country impact breakdown: quiet by default, ruler meters on demand. */
.clb-impact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  animation: clbFade 0.5s ease 1760ms forwards;
}
.clb-break-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 0 8px 12px;
  border: 0;
  background: none;
  color: #d9b8a8;
  font: inherit;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.2s ease;
}
.clb-break-toggle:hover {
  color: #ffe3d5;
}
.clb-break-toggle i {
  font-size: 10px;
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.clb-break-toggle[aria-expanded='true'] i {
  transform: rotate(180deg);
}
.clb-break-toggle:focus-visible,
.clb-cat:focus-visible {
  outline: 2px solid #efb49a;
  outline-offset: 3px;
  border-radius: 4px;
}
.clb-breakdown {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.48s cubic-bezier(0.2, 0.85, 0.25, 1),
    opacity 0.25s ease;
}
.clb-breakdown.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.clb-break-clip {
  min-height: 0;
  overflow: hidden;
}
.clb-break-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  padding: 16px 4px 8px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.09);
  margin-top: 6px;
}
.clb-cat {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  padding: 10px 5px 15px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.3s ease,
    color 0.2s ease,
    background 0.2s ease;
}
.clb-breakdown.open .clb-cat {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 24ms), calc(var(--i, 0) * 24ms), 0ms, 0ms;
}
.clb-cat-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.clb-cat-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.clb-cat-count {
  flex: none;
  margin-left: auto;
  color: #f4ded2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.clb-cat-track {
  display: block;
  position: relative;
  height: 2px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.clb-cat-track::after {
  content: '';
  position: absolute;
  inset: 5px 0 auto;
  height: 4px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.19) 0 1px, transparent 1px 25%) 0 0/100%
      4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5%) 0 0/100%
      2px no-repeat;
}
.clb-cat-fill {
  display: block;
  position: relative;
  width: var(--share);
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), var(--c));
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.clb-breakdown.open .clb-cat-fill {
  transform: scaleX(1);
  transition-duration: 0.6s;
  transition-delay: calc(65ms + var(--i, 0) * 24ms);
}
.clb-cat-fill::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 40%, #fff);
  box-shadow: 0 0 8px 1px var(--c);
}
.clb-cat:hover,
.clb-cat.hi {
  color: #ffe5d8;
  background: color-mix(in srgb, var(--c) 9%, transparent);
}
.clb-break-grid.hasHi .clb-cat:not(.hi) {
  opacity: 0.45;
}
.clb-count-note {
  grid-column: 1/-1;
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--muted);
}
.clb-num {
  min-width: 0;
}
.clb-num small {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.clb-win {
  flex-shrink: 0;
}
.clb {
  overflow-y: auto;
}
@media (max-width: 600px) {
  .clb-break-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-top: 10px;
  }
  .clb-cat {
    font-size: 13px;
    min-height: 58px;
    padding: 10px 5px 16px;
  }
  .clb-impact-footer {
    font-size: 12px;
    gap: 12px;
  }
  .clb-win {
    max-width: 110px;
    text-align: right;
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clb.open .clb-panel,
  .clb.open .clb-name,
  .clb.open .clb-sub {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .clb,
  .clb-card {
    transition: none;
  }
  .clb-impact-footer {
    animation: none;
    opacity: 1;
  }
  .clb-breakdown,
  .clb-break-toggle i,
  .clb-cat,
  .clb-cat-fill {
    transition: none !important;
  }
  .clb-bar i {
    animation: none;
    transform: none;
  }
}

/* Same track sizes as .crow so captions align with their columns. */
.cont-head {
  display: grid;
  grid-template-columns: 16px 118px 1fr 52px 72px;
  align-items: end;
  gap: 12px;
  padding: 0 6px 7px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 8.5px;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tert);
  opacity: 0.72;
}
.cont-head .ch-pct {
  text-align: right;
}
.cont-head .ch-ppl {
  text-align: right;
  letter-spacing: 0.05em;
}
.dash.expanded.cosy .cont-head {
  grid-template-columns: 15px 92px 1fr 44px 58px;
  gap: 9px;
}
.dash.expanded.tight .cont-head {
  display: none;
}
@media (max-width: 600px) {
  .cont-head {
    display: none;
  }
}
.clb-none {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tert);
  padding: 14px 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  animation: clbFade 0.6s ease 1500ms forwards;
}
@keyframes clbFade {
  to {
    opacity: 1;
  }
}
/* the impacts half of the card, sequenced after the drought half */
.clb-readout {
  opacity: 0;
  transform: translateY(7px);
  animation: clbRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1520ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .clb-sec,
  .clb-none,
  .clb-readout {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .clb-num {
    font-size: 30px;
  }
}
/* ---- Country card: drought block ----
   Label above value; cells appear with a short stagger in reading order. */
.clb-dr {
  padding: 15px 0 17px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
.clb-sec {
  opacity: 0;
  transform: translateY(6px);
  animation: clbRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 980ms forwards;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 13px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb59c;
}
.clb-sec em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--tert);
}
.clb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: flex-start;
}
.clb-stat {
  opacity: 0;
  transform: translateY(7px);
  animation: clbRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms) forwards;
}
@keyframes clbRise {
  to {
    opacity: 1;
    transform: none;
  }
}
.clb-lab {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 7px;
  white-space: nowrap;
}
.clb-val {
  font-size: 33px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: #ffd9cb;
  min-height: 33px;
  text-shadow: 0 0 24px rgba(226, 90, 31, 0.35);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.clb-val.go {
  opacity: 1;
}
.clb-val small {
  font-size: 16px;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.75;
}
.clb-val-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
  padding-top: 9px;
  min-height: 0;
}
.clb-val-t i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}
/* placeholder that holds the line height until the count starts */
.clb-skel {
  display: block;
  width: 62px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.05)
  );
  background-size: 200% 100%;
  animation: clbShim 1.1s linear infinite;
  margin-top: 12px;
}
@keyframes clbShim {
  to {
    background-position: -200% 0;
  }
}
.clb-scale {
  display: flex;
  gap: 2px;
  margin-top: 16px;
  height: 5px;
  opacity: 0;
  transform: scaleX(0.97);
  transform-origin: left;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}
.clb-scale.go {
  opacity: 1;
  transform: none;
}
.clb-scale i {
  flex: 1 1 0;
  border-radius: 99px;
  opacity: 0.2;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.clb-scale i.on {
  opacity: 1;
  transform: scaleY(2.1);
  box-shadow: 0 0 12px rgba(255, 180, 140, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .clb-stat,
  .clb-val,
  .clb-scale {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .clb-skel {
    animation: none;
  }
}
@media (max-width: 600px) {
  .clb-stats {
    gap: 14px 22px;
  }
  .clb-val {
    font-size: 26px;
    min-height: 26px;
  }
  .clb-val-t {
    font-size: 14px;
    padding-top: 6px;
  }
}

.clb-x {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: rgba(245, 236, 236, 0.78);
  font-size: 24px;
  cursor: pointer;
  transition:
    color 0.2s,
    transform 0.2s;
}
.clb-x:hover {
  color: #fff;
  transform: scale(1.08);
}
.clb-x,
.clb-nav {
  z-index: 5;
  touch-action: manipulation;
}
/* step through countries: the same action the arrow keys perform */
.clb-nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: rgba(245, 236, 236, 0.7);
  font-size: 28px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    color 0.2s,
    transform 0.2s,
    opacity 0.3s ease;
}
.clb.open .clb-nav {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.9s;
}
.clb-nav.prev {
  left: clamp(12px, 4vw, 42px);
  transform: translateY(-50%) translateX(-6px);
}
.clb-nav.next {
  right: clamp(12px, 4vw, 42px);
  transform: translateY(-50%) translateX(6px);
}
.clb.open .clb-nav.prev,
.clb.open .clb-nav.next {
  transform: translateY(-50%);
}
.clb-nav:hover {
  color: #fff;
}
.clb.open .clb-nav.prev:hover {
  transform: translateY(-50%) translateX(-3px);
}
.clb.open .clb-nav.next:hover {
  transform: translateY(-50%) translateX(3px);
}
body.fcskin .clb-nav:hover,
body.fcskin .clb-x:hover {
  color: #ffd28a;
}
@media (prefers-reduced-motion: reduce) {
  .clb-nav {
    transition: opacity 0.2s ease;
  }
}
/* Country lightbox: map height adapts to the space left by the panel; the
   card is centred with auto margins so overflow goes down only, and the
   overlay never scrolls horizontally. */
.clb {
  overflow-x: hidden;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: max(14px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom));
}
.clb-card {
  margin: auto 0;
  flex: none;
  max-width: 100%;
  box-sizing: border-box;
}
#clbSvg {
  width: min(620px, calc(100vw - 2 * clamp(12px, 4vw, 42px) - 120px));
  height: clamp(150px, calc(100vh - 470px), 440px);
  height: clamp(150px, calc(100dvh - 470px), 440px);
}
.clb-panel {
  width: min(620px, calc(100vw - 2 * clamp(12px, 4vw, 42px) - 120px));
}
/* Very short windows: overlay scrolls, controls pinned to the window. */
@media (min-width: 761px) and (max-height: 620px) {
  .clb {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #0a0506;
  }
  .clb-x,
  .clb-nav,
  .clb-nav.prev,
  .clb-nav.next {
    position: fixed;
  }
  .clb-card {
    gap: 8px;
  }
  .clb-name {
    font-size: 21px;
  }
  .clb-dr {
    padding: 11px 0 13px;
  }
}
/* Below 820px backdrop blur is off, so the veil needs a more opaque
   background. */
@media (max-width: 820px) {
  .clb,
  body.fcskin .clb {
    background: rgba(10, 5, 6, 0.96);
  }
}
/* ---- Country lightbox, phones ----
   Card is taller than the viewport: overlay scrolls, controls pinned to the window. */
@media (max-width: 760px) {
  .clb {
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 70px 0 92px;
    background: #0a0506;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .clb-card {
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 14px;
  }
  #clbSvg {
    width: 100%;
    height: min(28vh, 210px);
  }
  .clb-name {
    font-size: 21px;
    line-height: 1.2;
    text-align: center;
  }
  .clb-name {
    gap: 9px;
  }
  .clb-flag {
    height: 18px;
  }
  .clb-sub {
    font-size: 10px;
    gap: 9px;
  }
  .clb-panel {
    width: 100%;
  }
  .clb-x {
    position: fixed;
    top: 12px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}
/* Phones and touch screens: no arrows, a swipe moves between countries. The
   overlay keeps vertical scrolling but takes every sideways gesture, and the
   page underneath stays still. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .clb-nav {
    display: none;
  }
  .clb {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  html.clb-lock,
  html.clb-lock body {
    overflow: hidden;
  }
}
/* Fit the whole country card to the visible viewport, including expanded categories. */
.clb {
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
}
.clb.clb-fit-ready {
  overflow: hidden;
}
.clb .clb-card {
  gap: 8px;
  padding: 0 12px;
  transform-origin: center center;
}
.clb #clbSvg {
  height: var(--clb-map-height, 180px);
  flex: none;
  transition: height 0.48s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.clb.clb-break-open .clb-dr {
  padding: 10px 0 12px;
}
.clb.clb-break-open .clb-sec {
  margin-bottom: 9px;
}
.clb.clb-break-open .clb-break-grid {
  gap: 2px 20px;
  padding-top: 8px;
  padding-bottom: 4px;
}
.clb.clb-break-open .clb-cat {
  padding: 7px 5px 12px;
  min-height: 44px;
}
.clb.clb-break-open .clb-cat-track {
  margin-top: 7px;
}
.clb.clb-break-open .clb-readout {
  margin-bottom: 9px;
  padding-bottom: 9px;
}
@media (max-width: 760px) {
  .clb {
    padding: max(52px, env(safe-area-inset-top)) 0 max(62px, env(safe-area-inset-bottom));
  }
  .clb .clb-card {
    padding: 0 14px;
    gap: 6px;
  }
  .clb .clb-name {
    font-size: 19px;
  }
  .clb.clb-break-open .clb-break-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
  }
  .clb.clb-break-open .clb-cat {
    font-size: 11px;
    line-height: 1.3;
    min-height: 44px;
  }
  .clb .clb-cat-label {
    gap: 6px;
  }
  .clb.clb-break-open .clb-stats {
    gap: 10px 16px;
  }
  .clb.clb-break-open .clb-lab {
    font-size: 7.5px;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
  }
  .clb.clb-break-open .clb-val {
    font-size: 23px;
    min-height: 23px;
  }
  .clb.clb-break-open .clb-val-t {
    font-size: 13px;
    min-height: 0;
  }
  .clb.clb-break-open .clb-scale {
    margin-top: 10px;
  }
  .clb.clb-break-open .clb-num {
    font-size: 27px;
  }
  .clb .clb-impact-footer {
    margin-top: 4px;
  }
  .clb .clb-break-toggle {
    min-height: 40px;
  }
}
@media (min-width: 761px) and (max-height: 800px) {
  .clb.clb-break-open .clb-panel {
    width: min(800px, calc(100vw - 160px));
  }
  .clb.clb-break-open .clb-break-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 761px) and (max-height: 480px) {
  .clb .clb-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 24px;
    width: calc(100vw - 120px);
  }
  .clb #clbSvg {
    grid-column: 1;
    grid-row: 1;
    width: 180px;
  }
  .clb .clb-name {
    grid-column: 1;
    grid-row: 2;
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
  }
  .clb .clb-sub {
    grid-column: 1;
    grid-row: 3;
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  .clb .clb-panel,
  .clb.clb-break-open .clb-panel {
    grid-column: 2;
    grid-row: 1/4;
    width: 100%;
  }
  .clb .clb-break-grid {
    gap: 0 12px;
  }
  .clb .clb-cat {
    font-size: 11px;
    line-height: 1.2;
  }
  .clb .clb-dr {
    padding: 5px 0 8px;
  }
  .clb .clb-sec {
    margin-bottom: 6px;
  }
  .clb .clb-stats {
    gap: 12px;
  }
  .clb .clb-lab {
    font-size: 7px;
    letter-spacing: 0.05em;
  }
  .clb .clb-val {
    font-size: 23px;
    min-height: 23px;
  }
  .clb .clb-val-t {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clb #clbSvg {
    transition: none;
  }
}

/* Precision rails: full-width severity scale and fine impact segments. */
.clb .clb-stats {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.1fr;
  gap: 18px 26px;
}
.clb .clb-stats:has(.clb-stat:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}
.clb .clb-stat {
  min-width: 0;
}
.clb .clb-lab {
  white-space: normal;
}
.clb .clb-val-t {
  padding-top: 5px;
  min-height: 0;
}
.clb .clb-scale {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 18px;
  gap: 5px;
}
.clb .clb-scale i {
  border-radius: 0;
  min-width: 0;
  opacity: 0.22;
}
.clb .clb-scale i.on {
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.clb .clb-scale i::before,
.clb .clb-scale i::after {
  content: none;
}
.clb .clb-bar {
  position: relative;
  height: 3px;
  gap: 2px;
  margin: 6px 0 16px;
}
.clb .clb-bar i:first-child,
.clb .clb-bar i:last-child {
  border-radius: 0;
}
.clb .clb-scale::after,
.clb .clb-bar::after {
  content: '';
  position: absolute;
  inset: 8px 0 auto;
  height: 5px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(190, 160, 140, 0.22) 0 1px, transparent 1px 25%) 0 0/100%
      5px no-repeat,
    repeating-linear-gradient(90deg, rgba(190, 160, 140, 0.1) 0 1px, transparent 1px 5%) 0 0/100%
      2px no-repeat;
}
.clb-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  font-size: 11px;
  color: var(--muted);
}
.clb .clb-bar i {
  min-width: 0;
}
.clb .clb-bar i.hi {
  filter: brightness(1.16);
  box-shadow: 0 0 5px var(--c);
}
@media (max-width: 760px) {
  .clb .clb-stats,
  .clb.clb-break-open .clb-stats {
    gap: 12px;
  }
  .clb .clb-lab {
    min-height: 24px;
    line-height: 1.4;
  }
  .clb .clb-scale,
  .clb.clb-break-open .clb-scale {
    margin-top: 10px;
    gap: 2px;
  }
}
@media (min-width: 761px) and (max-height: 480px) {
  .clb .clb-stats {
    gap: 10px;
  }
}

/* Direct labels: equal categorical bands and labelled report shares. */
.clb .clb-stats {
  grid-template-columns: 1fr 1.3fr 1.1fr;
}
.clb .clb-scale,
.clb.clb-break-open .clb-scale {
  height: 5px;
  margin-top: 18px;
  gap: 2px;
}
.clb .clb-bar {
  height: 5px;
  gap: 2px;
  margin: 6px 0 0;
}
.clb .clb-scale::after,
.clb .clb-bar::after {
  content: none;
}
.clb .clb-scale i.on {
  transform: none;
  box-shadow: none;
}
.clb-class-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
.clb-class-labels .active {
  color: #ffe5d5;
  font-weight: 600;
}
.clb-direct-labels {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.clb-direct-labels > div {
  flex: 1;
  min-width: 0;
}
.clb-direct-labels > div:last-child {
  text-align: right;
}
.clb-direct-labels strong {
  display: block;
  font-weight: 500;
  color: #ead5c9;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.clb .clb-cat-fill::after {
  box-shadow: 0 0 3px var(--c);
}
.clb .clb-bar i.hi {
  box-shadow: 0 0 3px var(--c);
}
@media (max-width: 760px) {
  .clb .clb-scale,
  .clb.clb-break-open .clb-scale {
    margin-top: 14px;
  }
  .clb-class-labels span:not(.active):not(:first-child):not(:last-child) {
    visibility: hidden;
  }
  .clb-class-labels {
    font-size: 10px;
  }
  .clb-class-labels span:first-child {
    text-align: left;
  }
  .clb-class-labels span:last-child {
    text-align: right;
  }
}

/* Summary labels sit directly below their matching category segments. */
.clb .clb-direct-labels {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr 1fr;
}
.clb .clb-direct-labels > div {
  padding-right: 8px;
  min-width: 0;
}
.clb .clb-direct-labels > div:last-child {
  padding-right: 0;
}
.clb .clb-direct-labels strong {
  overflow-wrap: anywhere;
}
/* the last label never wraps; when its segment is narrower than the word it extends left, ending at the bar's edge */
.clb .clb-direct-labels > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.clb .clb-direct-labels > div:last-child strong {
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Drought metrics share the mean-class typography instead of dominating the scale. */
.clb .clb-val,
.clb.clb-break-open .clb-val {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 20px;
  letter-spacing: 0;
  text-shadow: none;
  padding-top: 0;
}
.clb .clb-val small {
  font-size: 12px;
  font-weight: 500;
}
@media (max-width: 760px) {
  .clb .clb-val,
  .clb.clb-break-open .clb-val {
    font-size: 14px;
    min-height: 18px;
  }
  .clb .clb-val small {
    font-size: 11px;
  }
  .clb .clb-direct-labels > div {
    padding-right: 5px;
  }
}

/* a short hint, shown when the view opens on a touch screen */
.clb-hint {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  color: rgba(245, 236, 236, 0.82);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.clb-hint.show {
  opacity: 1;
  transform: translateX(-50%);
}
.clb-hint-ic {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(245, 236, 236, 0.45);
}
/* Font Awesome pointing hand, swaying from side to side */
.clb-hand {
  display: block;
  width: 22px;
  height: 26px;
  margin: 0 6px;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: clbSwipe 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes clbSwipe {
  0%,
  100% {
    transform: translateX(-4px) rotate(-3deg);
  }
  50% {
    transform: translateX(4px) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clb-hand {
    animation: none;
  }
}

/* the globe pushes back as the panel opens */
body.clb-open .globe-stage {
  filter: brightness(0.7) blur(1px);
}

/* ---------- expand the live summary ---------- */
.dash-head-r {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-full {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  flex: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  position: relative;
}
.dash-full:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 16px -5px rgba(255, 255, 255, 0.5);
}
.dash-full:active {
  transform: scale(0.94);
}

/* two slow pulses on first appearance, then static */
.dash-full::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
}
.dash.in:not(.expanded) .dash-full::after {
  animation: fullPing 2.4s ease-out 1.2s 3;
}
@keyframes fullPing {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
.dash.expanded .dash-full::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .dash.in .dash-full::after {
    animation: none;
  }
}
/* No chip around it: the bare icon, a size up, still. */
.dash:not(.expanded) .dash-full,
.dash.fc:not(.expanded) .dash-full:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
  font-size: 17px;
}
.dash:not(.expanded) .dash-full::after {
  display: none;
}
.dash:not(.expanded) .dash-full i {
  display: block;
  opacity: 0.85;
  transition:
    opacity 0.2s ease,
    text-shadow 0.2s ease;
}
.dash:not(.expanded) .dash-full:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.dash:not(.expanded) .dash-full:hover i {
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.dash.expanded {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(
      60% 50% at 78% 8%,
      rgba(226, 59, 46, 0.1) 0%,
      rgba(226, 59, 46, 0.096) 8.16%,
      rgba(226, 59, 46, 0.0844) 17%,
      rgba(226, 59, 46, 0.0677) 25.84%,
      rgba(226, 59, 46, 0.05) 34%,
      rgba(226, 59, 46, 0.0323) 42.16%,
      rgba(226, 59, 46, 0.0156) 51%,
      rgba(226, 59, 46, 0.004) 59.84%,
      rgba(226, 59, 46, 0) 68%
    ),
    linear-gradient(180deg, #1a0d0d, #120809);
}
.dash.expanded::-webkit-scrollbar {
  width: 8px;
}
.dash.expanded::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
/* In fullscreen the button closes the view: shown as a cross at the start
   of the bar. */
.dash.expanded .dash-head {
  padding-left: 70px;
}
.dash.expanded .dash-full {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 99px;
  font-size: 15px;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
}
.dash.expanded .dash-full:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: translateY(-50%);
}
.dash.expanded .dash-full:active {
  transform: translateY(-50%) scale(0.94);
}
@media (max-width: 760px) {
  .dash.expanded .dash-head {
    padding-left: 60px;
  }
  .dash.expanded .dash-full {
    left: 14px;
  }
}

.dash.expanded .dash-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(20, 10, 11, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
body.dash-open {
  overflow: hidden;
}

/* fullscreen: every section on the left, a large globe pinned on the right */
.dash.expanded {
  --gw: 46vw;
  padding-right: var(--gw);
}
/* Column stretches to full height so the footer stays at the bottom when
   the content is short. */
.dash.expanded {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.dash.expanded .dash-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash.expanded .dash-main > .dash-cell:first-child {
  flex: 1 1 auto;
  min-height: 0;
}
.dash.expanded .dash-foot {
  margin-top: auto;
}
.dash.expanded .cont-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.dash.expanded .dash-cell,
.dash.expanded .strip-head,
.dash.expanded .dash-foot {
  padding-right: 34px;
}
.dash.expanded .dash-cell {
  padding: 30px 34px 32px;
  min-width: 0;
  overflow: hidden;
}
.dash.expanded .cont-grid,
.dash.expanded .crow,
.dash.expanded .dash-strip {
  min-width: 0;
}
.dash.expanded .globe-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--gw, 46vw);
  height: 100vh;
  min-height: 0;
  border-radius: 0;
  z-index: 2;
  border-left: none;
  overflow: hidden;
  background:
    radial-gradient(
      52% 46% at 50% 50%,
      rgba(226, 59, 46, 0.16) 0%,
      rgba(226, 59, 46, 0.1536) 8.64%,
      rgba(226, 59, 46, 0.135) 18%,
      rgba(226, 59, 46, 0.1082) 27.36%,
      rgba(226, 59, 46, 0.08) 36%,
      rgba(226, 59, 46, 0.0518) 44.64%,
      rgba(226, 59, 46, 0.025) 54%,
      rgba(226, 59, 46, 0.0064) 63.36%,
      rgba(226, 59, 46, 0) 72%
    ),
    radial-gradient(95% 85% at 50% 45%, #241010, #160a0a 62%, #100707 100%);
}

/* draggable split between the panel and the globe */
.dash-split {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 14px;
  z-index: 5;
  cursor: col-resize;
  right: calc(var(--gw, 46vw) - 7px);
  display: none;
  touch-action: none;
}
.dash.expanded .dash-split {
  display: block;
}
/* the line: grey at rest, warm while in use */
.dash-split::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0.3) 90%,
    transparent
  );
  transition: background 0.2s ease;
}
.dash-split:hover::before,
.dash-split.dragging::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 150, 110, 0.5) 10%,
    rgba(255, 150, 110, 0.5) 90%,
    transparent
  );
}
/* a solid grip, so the line never shows through it */
.dash-split::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  width: 12px;
  height: 64px;
  transform: translateY(-50%);
  border-radius: 99px;
  background: #6b6165;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    height 0.2s ease;
}
.dash-split:hover::after,
.dash-split.dragging::after {
  background: rgba(255, 255, 255, 0.6);
  height: 76px;
  box-shadow: 0 0 14px -3px rgba(255, 255, 255, 0.55);
}
body.split-drag {
  cursor: col-resize;
  user-select: none;
}

/* Fullscreen has its own animation sequence. */
.dash.expanded .dash-head,
.dash.expanded .dash-cell .sec-head,
.dash.expanded .dash-cell .mini-seg,
.dash.expanded .globe-wrap,
.dash.expanded .crow {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ---------- fullscreen: sections settle in one after another ---------- */
.dash.expanded.intro .dash-head {
  animation: fsDown 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dash.expanded.intro .dash-main .cell-head {
  animation: fsUp 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}
.dash.expanded.intro .crow {
  animation: fsUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.14s + var(--i, 0) * 45ms);
}
.dash.expanded.intro .impact-cell {
  animation: fsUp 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s both;
}
.dash.expanded.intro .strip-head {
  animation: fsUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
.dash.expanded.intro .rep-cell {
  animation: fsUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.56s + var(--i, 0) * 55ms);
}
.dash.expanded.intro .plexus {
  animation: fsFade 1.2s ease 0.5s both;
}

@keyframes fsUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fsDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fsFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* the backdrop itself washes in */
.dash.expanded {
  animation: fsIn 0.45s ease both;
}
@keyframes fsIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash.expanded,
  .dash.expanded.intro * {
    animation: none !important;
  }
}

/* narrow panel: everything fits one screen, no scrolling for the countries */
.dash.expanded.tight {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.dash.expanded.tight .dash-head {
  flex: none;
}
/* the continent list takes the slack and scrolls on its own if it must */
.dash.expanded.tight .dash-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dash.expanded.tight .dash-main .dash-cell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
.dash.expanded.tight #contRows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dash.expanded.tight #contRows::-webkit-scrollbar {
  width: 5px;
}
.dash.expanded.tight #contRows::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
/* the two lower blocks always stay in view */
.dash.expanded.tight .impact-cell,
.dash.expanded.tight .strip-head,
.dash.expanded.tight .dash-strip,
.dash.expanded.tight .dash-foot {
  flex: none;
}
/* impact categories shrink to a slim strip */
.dash.expanded.tight .impact-cell {
  padding-top: 14px;
  padding-bottom: 14px;
}
.dash.expanded.tight .impact-cell .cell-head {
  margin-bottom: 6px;
}
.dash.expanded.tight #wtip {
  font-size: 11px;
  margin-bottom: 6px;
}
.dash.expanded.tight .imp-sub {
  display: none;
}
.dash.expanded.tight .ibar {
  height: 20px;
  margin-bottom: 0;
}
.dash.expanded.tight .strip-head {
  padding-top: 12px;
  padding-bottom: 8px;
}
.dash.expanded.tight .dash-foot {
  display: none;
}

/* narrow panel: nothing is dropped, the layout just gets simpler */
.dash.expanded.cosy .crow {
  grid-template-columns: 15px 92px 1fr 44px 58px;
  gap: 9px;
  font-size: 12.5px;
}
.dash.expanded.cosy .crow .ppl {
  font-size: 11px;
}
.dash.expanded.cosy .dash-strip {
  grid-template-columns: repeat(3, 1fr);
}

/* tightest: the bar moves under the label, all values stay */
.dash.expanded.tight .crow {
  grid-template-columns: 15px 1fr auto auto;
  gap: 8px;
  padding: 9px 6px;
  font-size: 12.5px;
}
.dash.expanded.tight .crow .bar {
  grid-column: 2 / -1;
  grid-row: 2;
  height: 4px;
  margin-top: 2px;
}
.dash.expanded.tight .crow .cname {
  grid-row: 1;
}
.dash.expanded.tight .crow .arr {
  grid-row: 1;
}
.dash.expanded.tight .crow .pct {
  grid-row: 1;
  text-align: right;
  font-size: 12.5px;
}
.dash.expanded.tight .crow .ppl {
  grid-row: 1;
  text-align: right;
  font-size: 11px;
  padding-left: 8px;
}
/* country cards become a compact list: flag, name, count */
.dash.expanded.tight .dash-strip {
  grid-template-columns: 1fr;
}
.dash.expanded.tight .rep-cell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-left: none;
  border-top: 0.5px solid var(--line);
}
.dash.expanded.tight .rep-cell:first-child {
  border-top: none;
}
.dash.expanded.tight .rep-cell .rk {
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.dash.expanded.tight .rep-cell .rk .num {
  font-size: 10px;
  opacity: 0.7;
}
.dash.expanded.tight .rep-cell .cn b {
  font-size: 19px;
}
.dash.expanded.tight .rep-cell .rep-hit,
.dash.expanded.tight .rep-cell .rep-bar,
.dash.expanded.tight .rep-cell .meta {
  display: none;
}

.dash.expanded.cosy .dash-strip {
  grid-template-columns: repeat(3, 1fr);
}
.dash.expanded.cosy .rep-cell {
  padding: 14px 14px 13px;
}
.dash.expanded.cosy .rep-cell .cn b {
  font-size: 22px;
}
.dash.expanded.cosy .rep-cell .meta {
  font-size: 10px;
}
.dash.expanded.tight .cell-head {
  flex-wrap: wrap;
  gap: 8px;
}
.dash.expanded.tight .ibar {
  height: 28px;
}
/* narrow panel */
.dash.expanded.tight {
  overflow-y: auto;
}
.dash.expanded.tight .dash-main,
.dash.expanded.tight .dash-main .dash-cell {
  min-height: auto;
}
.dash.expanded.tight #contRows {
  flex: none;
  overflow: visible;
}
.dash.expanded.tight .dash-main {
  flex: none;
}
.dash.expanded.tight .strip-head {
  flex-wrap: wrap;
  row-gap: 5px;
  padding-left: 34px;
}
.dash.expanded.tight .strip-head h3 {
  white-space: nowrap;
}
.dash.expanded.tight .strip-head .hint {
  flex-basis: 100%;
  padding-left: 27px;
  line-height: 1.4;
}
.dash.expanded.tight .rep-cell {
  padding-left: 34px;
  padding-right: 34px;
}
.dash.expanded.tight .crow {
  grid-template-columns: 15px minmax(0, 1fr) 46px 68px;
}

/* animated star field behind the globe, fullscreen only */
.plexus {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.dash.expanded .plexus {
  display: block;
}
.dash.expanded .plexus.on {
  opacity: 1;
}

/* focus readout */
.globe-focus {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffd9cf;
  white-space: nowrap;
  background: rgba(20, 11, 12, 0.82);
  border: 0.5px solid rgba(255, 150, 110, 0.24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.globe-focus.on {
  opacity: 1;
}
.globe-focus i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
/* what the hovered country holds, so nobody has to click blind */
.globe-focus em {
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 217, 207, 0.62);
  margin-left: -3px;
}
.globe-focus em::before {
  content: '\00b7';
  margin-right: 6px;
}
.globe-focus em:empty {
  display: none;
}
.globe-focus em.imp {
  color: #ffe6cf;
}
/* Cursor-following country preview. No tail, no intro animation. */
/* --k scales the panel: compact next to the inline globe, larger in
   fullscreen (set from JS; the panel is attached to <body>). */
.globe-tip {
  --k: 0.82;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  min-width: calc(210px * var(--k));
  max-width: calc(270px * var(--k));
  pointer-events: none;
  padding: calc(14px * var(--k)) calc(16px * var(--k)) calc(13px * var(--k));
  border-radius: calc(10px * var(--k));
  color: var(--ink, #f3ece8);
  background: rgba(22, 11, 12, 0.42);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: saturate(72%) contrast(104%) brightness(0.9) blur(40px);
  backdrop-filter: saturate(72%) contrast(104%) brightness(0.9) blur(40px);
  box-shadow:
    0 22px 54px -16px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 0.14s ease;
  will-change: transform;
}
.globe-tip.on {
  opacity: 1;
}
.globe-tip .c4 {
  position: absolute;
  width: calc(10px * var(--k));
  height: calc(10px * var(--k));
  border: 1px solid rgba(255, 199, 184, 0.3);
  opacity: 0.75;
}
.globe-tip .c4.tl {
  top: calc(6px * var(--k));
  left: calc(6px * var(--k));
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: calc(9px * var(--k));
}
.globe-tip .c4.tr {
  top: calc(6px * var(--k));
  right: calc(6px * var(--k));
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: calc(9px * var(--k));
}
.globe-tip .c4.bl {
  bottom: calc(6px * var(--k));
  left: calc(6px * var(--k));
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: calc(9px * var(--k));
}
.globe-tip .c4.br {
  bottom: calc(6px * var(--k));
  right: calc(6px * var(--k));
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: calc(9px * var(--k));
}
.globe-tip .hd {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--k));
}
.globe-tip .hd img {
  height: calc(15px * var(--k));
  width: auto;
  max-width: calc(30px * var(--k));
  flex: none;
  display: block;
  border-radius: calc(2px * var(--k));
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.globe-tip .nm {
  font-size: calc(14px * var(--k));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.globe-tip .dt {
  font-size: calc(10.5px * var(--k));
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.66);
  margin-top: calc(4px * var(--k));
  font-family:
    JetBrains Mono,
    ui-monospace,
    Menlo,
    monospace;
}
.globe-tip .tot {
  margin-top: calc(11px * var(--k));
  padding-top: calc(10px * var(--k));
  display: flex;
  align-items: baseline;
  gap: calc(8px * var(--k));
  border-top: 0.5px solid rgba(255, 255, 255, 0.14);
}
.globe-tip .tot b {
  font-size: calc(26px * var(--k));
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 22px rgba(255, 255, 255, 0.4),
    0 0 7px rgba(255, 255, 255, 0.22);
}
.globe-tip .tot span {
  font-size: calc(9.5px * var(--k));
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.globe-tip .rows {
  margin-top: calc(9px * var(--k));
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--k));
}
.globe-tip .r {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--k));
  font-size: calc(11.5px * var(--k));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #f3ece8);
}
.globe-tip .r i {
  width: calc(8px * var(--k));
  height: calc(8px * var(--k));
  border-radius: calc(2px * var(--k));
  flex: none;
  background: var(--c, #6a717e);
  filter: drop-shadow(0 0 3px var(--c, #6a717e));
}
.globe-tip .r span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.globe-tip .r b {
  font-weight: 700;
}
.globe-tip .none {
  margin-top: calc(8px * var(--k));
  font-size: calc(11px * var(--k));
  color: rgba(255, 255, 255, 0.55);
}
/* hint only, not a button: the panel follows the cursor and cannot be clicked */
.globe-tip .go {
  margin-top: calc(10px * var(--k));
  padding-top: calc(8px * var(--k));
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: calc(6px * var(--k));
  font-size: calc(10.5px * var(--k));
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 217, 207, 0.62);
}
.globe-tip .go svg {
  width: calc(11px * var(--k));
  height: calc(11px * var(--k));
  flex: none;
  opacity: 0.8;
}
.globe-tip.full {
  --k: 0.92;
}
/* fullscreen: only the panel side needs to blend */
.dash.expanded .globe-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 100%);
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 100%);
  mask-composite: add;
}
.dash.expanded .globe-hint {
  left: 50%;
  right: auto;
  bottom: 26px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 11.5px;
  padding: 0;
}
.dash.expanded .globe-focus {
  top: 26px;
}

/* ---------- forecast: amber skin for the live summary ---------- */
.dash,
.dash .bar i,
.dash .rep-bar i,
.globe-wrap::before,
.globe-focus,
.dash .mini-seg button.on,
.dash-head .t i {
  transition:
    background 0.5s ease,
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease;
}
.dash.fc {
  --orange: #f0a528;
  border-color: rgba(240, 165, 40, 0.16);
  background:
    radial-gradient(
      600px 340px at 78% 20%,
      rgba(240, 165, 40, 0.16) 0%,
      rgba(240, 165, 40, 0.1536) 8.16%,
      rgba(240, 165, 40, 0.135) 17%,
      rgba(240, 165, 40, 0.1082) 25.84%,
      rgba(240, 165, 40, 0.08) 34%,
      rgba(240, 165, 40, 0.0518) 42.16%,
      rgba(240, 165, 40, 0.025) 51%,
      rgba(240, 165, 40, 0.0064) 59.84%,
      rgba(240, 165, 40, 0) 68%
    ),
    radial-gradient(
      520px 300px at 10% 85%,
      rgba(240, 165, 40, 0.1) 0%,
      rgba(240, 165, 40, 0.096) 7.92%,
      rgba(240, 165, 40, 0.0844) 16.5%,
      rgba(240, 165, 40, 0.0677) 25.08%,
      rgba(240, 165, 40, 0.05) 33%,
      rgba(240, 165, 40, 0.0323) 40.92%,
      rgba(240, 165, 40, 0.0156) 49.5%,
      rgba(240, 165, 40, 0.004) 58.08%,
      rgba(240, 165, 40, 0) 66%
    ),
    linear-gradient(180deg, #1a1206, #140d05);
}
.dash.fc .bar i {
  background: linear-gradient(90deg, #f5b93a, var(--orange));
}
.dash.fc .rep-bar i {
  background: linear-gradient(90deg, #f5b93a, #c98314);
}
.dash.fc .globe-wrap::before {
  background: radial-gradient(
    circle,
    rgba(240, 165, 40, 0.15) 0%,
    rgba(240, 165, 40, 0.144) 8.16%,
    rgba(240, 165, 40, 0.1266) 17%,
    rgba(240, 165, 40, 0.1015) 25.84%,
    rgba(240, 165, 40, 0.075) 34%,
    rgba(240, 165, 40, 0.0485) 42.16%,
    rgba(240, 165, 40, 0.0234) 51%,
    rgba(240, 165, 40, 0.006) 59.84%,
    rgba(240, 165, 40, 0) 68%
  );
}
.dash.fc .globe-focus {
  color: #ffe7c2;
  background: rgba(22, 15, 8, 0.82);
  border-color: rgba(255, 200, 110, 0.24);
}
.dash.fc .mini-seg::before {
  background: linear-gradient(180deg, rgba(240, 165, 40, 0.3), rgba(150, 95, 18, 0.24));
  box-shadow: inset 0 0 0 0.5px rgba(255, 200, 120, 0.3);
}
.dash.fc .mini-seg button.on {
  color: #ffe7c2;
}
.mini-seg {
  background: rgba(226, 90, 31, 0.07);
}
.dash.fc .mini-seg {
  background: rgba(240, 165, 40, 0.07);
}
.mini-seg button:hover {
  color: #ffcbb5;
}
.dash.fc .mini-seg button:hover {
  color: #ffdca8;
}

/* Single crossfade for all accent-coloured surfaces, rules and text. */
.dash,
.dash .dash-head,
.dash .dash-cell,
.dash .impact-cell,
.dash .strip-head,
.dash .dash-foot,
.dash .dash-foot a,
.dash .rep-cell,
.dash .rep-cell::before,
.dash .rep-bar,
.dash .rep-bar i,
.dash .bar,
.dash .bar i,
.dash .crow,
.dash .warn-title,
.dash .info > svg,
.dash .trend,
.dash .hint,
.dash .cell-head h3,
.dash .mini-seg,
.dash .mini-seg button,
.dash-head .t,
.dash-head .t i,
.dash-full,
.dash-split::before,
.dash-split::after,
.globe-wrap,
.globe-wrap::before,
.globe-focus,
.globe-hint {
  transition:
    background 0.42s ease,
    background-color 0.42s ease,
    border-color 0.42s ease,
    color 0.42s ease,
    box-shadow 0.42s ease,
    fill 0.42s ease;
}

/* Forecast mode: impact sections collapse, leaving the globe and the archive
   footer. Same in fullscreen. */
.dash .impact-cell,
.dash .strip-head,
.dash .dash-strip {
  overflow: hidden;
  /* Must come after the panel crossfade rule, otherwise the fold transition on
     impact-cell / strip-head is overridden. */
  transition:
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.34s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-top-width 0.5s linear,
    background 0.42s ease,
    background-color 0.42s ease,
    border-color 0.42s ease,
    color 0.42s ease,
    box-shadow 0.42s ease;
}
/* Per-block max-height close to the real height, so all three collapse
   in sync. */
.dash .impact-cell {
  max-height: 260px;
}
.dash .strip-head {
  max-height: 110px;
}
.dash .dash-strip {
  max-height: 280px;
}
@media (max-width: 1050px) {
  .dash .dash-strip {
    max-height: 560px;
  }
}
@media (max-width: 640px) {
  .dash .dash-strip {
    max-height: 1040px;
  }
}
@media (max-width: 640px) {
  .dash .impact-cell {
    max-height: 340px;
  }
}
.dash.expanded.tight .dash-strip {
  max-height: 1040px;
}
.dash.expanded.tight .strip-head {
  max-height: 180px;
}
.dash.fc .impact-cell,
.dash.fc .strip-head,
.dash.fc .dash-strip {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  pointer-events: none;
}
/* the fullscreen intro animates these with fill:both, which would pin opacity
   back to 1 and undo the fold */
.dash.fc.expanded.intro .impact-cell,
.dash.fc.expanded.intro .strip-head {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .dash .impact-cell,
  .dash .strip-head,
  .dash .dash-strip {
    transition-duration: 0.01s;
  }
}
/* coming back from forecast: the sections fade up again rather than snapping
   in behind the opening fold */
@keyframes dashBack {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dash .impact-cell.back,
.dash .strip-head.back {
  animation: dashBack 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.dash .dash-strip.back .rep-cell {
  animation: dashBack 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dash .dash-strip.back .rep-cell:nth-child(1) {
  animation-delay: 0.22s;
}
.dash .dash-strip.back .rep-cell:nth-child(2) {
  animation-delay: 0.28s;
}
.dash .dash-strip.back .rep-cell:nth-child(3) {
  animation-delay: 0.34s;
}
.dash .dash-strip.back .rep-cell:nth-child(4) {
  animation-delay: 0.4s;
}
.dash .dash-strip.back .rep-cell:nth-child(5) {
  animation-delay: 0.46s;
}
@media (prefers-reduced-motion: reduce) {
  .dash .impact-cell.back,
  .dash .strip-head.back,
  .dash .dash-strip.back .rep-cell {
    animation: none;
  }
}

.dash.fc .globe-hint {
  color: #f3ddba;
}
.dash.fc .dash-full:hover {
  background: rgba(240, 165, 40, 0.22);
  border-color: rgba(240, 165, 40, 0.4);
}

/* the flat country card is a separate overlay, so it takes the skin from body */
#clbSvg .shape {
  transition:
    fill 0.42s ease,
    stroke 0.42s ease;
}
body.fcskin #clbSvg .shape {
  fill: rgba(233, 173, 32, 0.92);
  stroke: rgba(255, 240, 200, 0.95);
}
body.fcskin #clbSvg .spark {
  stroke: #fff8e8;
  filter: drop-shadow(0 0 6px rgba(255, 214, 140, 0.9));
}
body.fcskin #clbSvg {
  filter: drop-shadow(0 18px 50px rgba(240, 165, 40, 0.3));
}
body.fcskin .clb.open #clbSvg {
  animation: clbGlowFc 1.4s ease 0.8s both;
}
@keyframes clbGlowFc {
  0% {
    filter: drop-shadow(0 18px 50px rgba(240, 165, 40, 0.1));
  }
  40% {
    filter: drop-shadow(0 18px 60px rgba(255, 205, 120, 0.5));
  }
  100% {
    filter: drop-shadow(0 18px 50px rgba(240, 165, 40, 0.3));
  }
}
body.fcskin .clb {
  background: rgba(12, 8, 3, 0.72);
}
body.fcskin .clb-x:hover {
  background: rgba(240, 165, 40, 0.28);
}
/* fullscreen surfaces carry their own warm washes, so they shift too */
.dash.expanded,
.dash.expanded .globe-wrap {
  transition: background 0.5s ease;
}
.dash.fc.expanded {
  background:
    radial-gradient(
      60% 50% at 78% 8%,
      rgba(240, 165, 40, 0.1) 0%,
      rgba(240, 165, 40, 0.096) 8.16%,
      rgba(240, 165, 40, 0.0844) 17%,
      rgba(240, 165, 40, 0.0677) 25.84%,
      rgba(240, 165, 40, 0.05) 34%,
      rgba(240, 165, 40, 0.0323) 42.16%,
      rgba(240, 165, 40, 0.0156) 51%,
      rgba(240, 165, 40, 0.004) 59.84%,
      rgba(240, 165, 40, 0) 68%
    ),
    linear-gradient(180deg, #1a1206, #120c05);
}
.dash.fc.expanded .globe-wrap {
  background:
    radial-gradient(
      52% 46% at 50% 50%,
      rgba(240, 165, 40, 0.14) 0%,
      rgba(240, 165, 40, 0.1344) 8.64%,
      rgba(240, 165, 40, 0.1181) 18%,
      rgba(240, 165, 40, 0.0947) 27.36%,
      rgba(240, 165, 40, 0.07) 36%,
      rgba(240, 165, 40, 0.0453) 44.64%,
      rgba(240, 165, 40, 0.0219) 54%,
      rgba(240, 165, 40, 0.0056) 63.36%,
      rgba(240, 165, 40, 0) 72%
    ),
    radial-gradient(95% 85% at 50% 45%, #241a0e, #160f06 62%, #100a04 100%);
}
.dash.fc .dash-split::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 200, 120, 0.5) 10%,
    rgba(255, 200, 120, 0.5) 90%,
    transparent
  );
}
.dash.fc .dash-split:hover::after,
.dash.fc .dash-split.dragging::after {
  background: #c28a1f;
  box-shadow: 0 0 18px -3px rgba(240, 165, 40, 0.85);
}
.dash.fc .rep-cell.top1 {
  background: linear-gradient(180deg, rgba(240, 165, 40, 0.1), transparent);
}
.dash.fc .rep-cell::before {
  background: linear-gradient(180deg, transparent, rgba(240, 165, 40, 0.08));
}
.dash.fc .trend.up {
  color: #f5b93a;
  background: rgba(240, 165, 40, 0.16);
}

/* compressed panel: the tooltip only lists what the compact rows actually show */
.dash.expanded.tight .tip .t-share,
.dash.expanded.tight .tip .t-trend {
  display: none;
}

@media (max-width: 900px) {
  .dash.expanded {
    padding-right: 0;
  }
  .dash.expanded {
    --gw: 0px;
  }
  .dash.expanded .dash-split {
    display: none;
  }
  .dash.expanded .globe-wrap {
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    max-width: none;
    border-left: none;
    border-radius: 11px;
  }
  .dash.expanded .dash-cell {
    padding: 22px 18px 26px;
  }
}
.globe-stage {
  position: absolute;
  inset: 0;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.8s ease;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  mask-composite: intersect;
}
.globe-stage.ready {
  opacity: 1;
}
.globe-stage.dragging {
  cursor: grabbing;
}
.globe-hint {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  z-index: 2;
  width: max-content;
  max-width: 92%;
  text-align: center;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 225, 215, 0.8);
  /* text only, no pill: a soft dark halo keeps it readable over the globe */
  background: none;
  padding: 0;
  border: 0;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  opacity: 1;
  /* After the crossfade rule, so colour properties are repeated here. */
  transition:
    opacity 0.6s ease,
    background 0.42s ease,
    border-color 0.42s ease,
    color 0.42s ease;
}
.globe-hint.hide {
  opacity: 0;
}
.globe-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  padding: 22px;
  font-size: 12.5px;
  color: var(--tert);
  line-height: 1.6;
}
.globe-fallback.on {
  display: grid;
}
.crow {
  display: grid;
  grid-template-columns: 16px 118px 1fr 52px 72px;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-bottom: 0.5px solid var(--line);
  border-radius: 9px;
  transition: background 0.15s;
}
.crow:hover {
  background: var(--fill);
}
.crow:last-child {
  border: none;
}
.arr {
  font-size: 10px;
  text-align: center;
}
.arr.up {
  color: var(--orange);
}
.arr.dn {
  color: var(--teal);
}
.arr.fl {
  color: var(--tert);
}
.crow .cname {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar {
  height: 6px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #f5722e, var(--orange));
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Mode switch morphs instead of re-rendering: rows keep their identity, the
   fill retargets and the order re-sorts with a FLIP slide. */
#contRows .crow.settled {
  animation: none;
  opacity: 1;
  transform: translateY(var(--fy, 0px));
  transition:
    transform 0.62s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.15s;
}
/* Sheen runs along the fill while it animates. */
#contRows .crow.rising .bar i,
#contRows .crow.falling .bar i {
  position: relative;
  overflow: hidden;
}
#contRows .crow.rising .bar i::after,
#contRows .crow.falling .bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  background-size: 70px 100%;
  background-repeat: no-repeat;
  animation: barSheen 0.75s linear infinite;
}
@keyframes barSheen {
  from {
    background-position: -70px 0;
  }
  to {
    background-position: calc(100% + 70px) 0;
  }
}
#contRows .crow.rising .bar,
#contRows .crow.falling .bar {
  box-shadow: 0 0 0 1px rgba(245, 114, 46, 0.18);
}
.crow .pct,
.crow .ppl {
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.crow .pct {
  font-weight: 700;
}
.crow .ppl {
  color: var(--tert);
  font-size: 11.5px;
  font-weight: 500;
}

.waffle {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 3px;
  margin-bottom: 14px;
}
.waffle i {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--fill);
  cursor: pointer;
  transition:
    transform 0.12s,
    opacity 0.25s;
}
.waffle i:hover {
  transform: scale(1.35);
}
.waffle.dim i {
  opacity: 0.15;
}
.waffle.dim i.hot {
  opacity: 1;
}
#wtip {
  font-size: 12px;
  color: var(--muted);
  min-height: 17px;
  margin-bottom: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#wtip b {
  color: var(--ink);
  font-weight: 700;
}

.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 28px 16px;
  border-top: 0.5px solid var(--line);
}
.strip-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.warn-title {
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 9px;
}
.warn-title > svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.info {
  position: relative;
  display: inline-flex;
  color: var(--tert);
  cursor: help;
  outline: none;
}
.info > svg {
  width: 15px;
  height: 15px;
  transition: color 0.2s;
}
.info:hover > svg,
.info:focus > svg {
  color: var(--orange);
}
.info .tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: calc(100vw - 32px);
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: var(--blur);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 5;
}
.tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
/* each legend line stays on one line; the tip grows to fit instead */
@media (min-width: 601px) {
  .info .tip .tip-row {
    white-space: nowrap;
  }
}
/* a legend chip (the 12 wk pill) never breaks onto two lines; its caption wraps */
.tip-row > span:first-child {
  flex: none;
  white-space: nowrap;
}
/* Category under each country: colour square + name, truncated with an ellipsis. */
.rep-cell .meta .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  margin-left: 2px;
  box-shadow: 0 0 7px -1px currentColor;
}
.rep-cell .meta .cat {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbbcb6;
}
/* a category name cut short by its card shows in full on hover */
.cat-pop {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #1b1110;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.95);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #f3ece8);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(calc(-100% - 7px));
  opacity: 0;
  transition: opacity 0.14s ease;
}
.cat-pop.on {
  opacity: 1;
}
/* the hover wash over a card must not swallow the pointer, or the category
   name under it can never be hovered */
.rep-cell::before {
  pointer-events: none;
}
.cat-pop i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.info .tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(28, 28, 30, 0.92);
}
.info:hover .tip,
.info:focus .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* .strip-head clips its content for the forecast fold, which also clipped this
   tooltip. Unclipped while hovered/focused. */
.dash:not(.fc) .strip-head:hover,
.dash:not(.fc) .strip-head:focus-within {
  overflow: visible;
}
.strip-head .hint {
  font-size: 11.5px;
  color: var(--tert);
  font-weight: 500;
}
.hint .hupd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.3;
}
.hint .hupd svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: #8fe3ae;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hint .hupd span {
  color: #8fe3ae;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(95, 208, 138, 0.55),
    0 0 2px rgba(143, 227, 174, 0.35);
}
.hint .hupd svg {
  filter: drop-shadow(0 0 4px rgba(95, 208, 138, 0.6));
}
.hint .hupd b {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hint .hupd span,
.hint .hupd b {
  position: relative;
  top: 0.5px;
}
.dash-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.rep-cell {
  padding: 18px 20px 16px;
  border-left: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  position: relative;
  transition: background 0.2s;
  overflow: hidden;
}
.rep-cell:first-child {
  border-left: none;
}
.rep-cell {
  cursor: pointer;
}
.rep-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(226, 59, 46, 0.08));
  opacity: 0;
  transition: opacity 0.25s;
}
.rep-cell:hover::before {
  opacity: 1;
}
.rep-cell.top1 {
  background: linear-gradient(180deg, rgba(226, 59, 46, 0.1), transparent);
}
.rep-cell .rk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rep-cell .rk .num {
  font-size: 10px;
  color: var(--tert);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rep-cell .rk .row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-cell .rk .flag {
  height: 16px;
  width: auto;
  border-radius: 2px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.15);
  flex: none;
  display: block;
  object-fit: contain;
}
.rep-cell .cn {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.rep-cell .cn b {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rep-cell .cn span {
  font-size: 10.5px;
  color: var(--tert);
  font-weight: 600;
}
.rep-bar {
  height: 5px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
  position: relative;
}
.rep-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #f5722e, #c62d22);
  width: 0;
  animation: repGrow 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
/* category mix of this country's reports, largest first (matches the label below) */
.rep-bar i.mix,
.dash.fc .rep-bar i.mix {
  display: flex;
  gap: 1.5px;
  background: transparent;
}
.rep-bar i.mix b {
  display: block;
  height: 100%;
  flex: none;
  min-width: 2px;
  transition:
    opacity 0.12s ease,
    filter 0.12s ease;
}
/* Blocks are share minus the 1.5px gap; the last one fills the
   remainder. */
.rep-bar i.mix b:last-child {
  flex: 1 1 auto;
}
.rep-bar.none {
  visibility: hidden;
}
/* taller invisible hit zone so the 5px bar can be hovered segment by segment */
.rep-hit {
  padding: 7px 0;
  margin: -7px 0;
  cursor: default;
}
.rep-hit .rep-bar {
  transition: transform 0.15s ease;
}
.rep-hit:hover .rep-bar {
  transform: scaleY(1.8);
}
.rep-hit.dim i.mix b {
  opacity: 0.25;
}
.rep-hit.dim i.mix b.hot {
  opacity: 1;
  filter: brightness(1.2);
}
.cat-pop.below {
  transform: translateY(4px);
}
.cat-pop b {
  font-weight: 800;
}
.cat-pop em {
  font-style: normal;
  color: var(--tert);
  font-weight: 600;
}
@keyframes repGrow {
  to {
    width: var(--w);
  }
}
.rep-cell .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--tert);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 10px;
}
.trend.up {
  color: #f5722e;
  background: rgba(226, 59, 46, 0.16);
}
.trend.down {
  color: #4fb0aa;
  background: rgba(79, 176, 170, 0.16);
}
.dash-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 26px;
  border-top: 0.5px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  flex-wrap: wrap;
}
.dash-foot span {
  font-size: 12.5px;
  color: var(--muted);
}
.dash-foot a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--orange);
}

/* ---------- data explorer (layers) ---------- */
.dx {
  border-radius: 13px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 0.5px solid rgba(226, 59, 46, 0.14);
  background:
    radial-gradient(
      600px 340px at 78% 20%,
      rgba(226, 59, 46, 0.16) 0%,
      rgba(226, 59, 46, 0.1536) 8.16%,
      rgba(226, 59, 46, 0.135) 17%,
      rgba(226, 59, 46, 0.1082) 25.84%,
      rgba(226, 59, 46, 0.08) 34%,
      rgba(226, 59, 46, 0.0518) 42.16%,
      rgba(226, 59, 46, 0.025) 51%,
      rgba(226, 59, 46, 0.0064) 59.84%,
      rgba(226, 59, 46, 0) 68%
    ),
    radial-gradient(
      520px 300px at 10% 85%,
      rgba(226, 59, 46, 0.1) 0%,
      rgba(226, 59, 46, 0.096) 7.92%,
      rgba(226, 59, 46, 0.0844) 16.5%,
      rgba(226, 59, 46, 0.0677) 25.08%,
      rgba(226, 59, 46, 0.05) 33%,
      rgba(226, 59, 46, 0.0323) 40.92%,
      rgba(226, 59, 46, 0.0156) 49.5%,
      rgba(226, 59, 46, 0.004) 58.08%,
      rgba(226, 59, 46, 0) 66%
    ),
    linear-gradient(180deg, #1a0d0d, #140a0b);
}
.dx-strip {
  display: flex;
  align-items: stretch;
  border-bottom: 0.5px solid var(--line);
  background: rgba(26, 13, 13, 0.55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.dx-arrow {
  flex: none;
  width: 52px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  transition: 0.2s;
}
.dx-arrow:hover {
  color: #fff;
}
.dx-tabs {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
}
.dx-tabs::-webkit-scrollbar {
  display: none;
}
.dx-tab {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 15px 22px 13px;
  border: none;
  background: transparent;
  text-align: left;
  position: relative;
  min-width: 150px;
  transition: background 0.2s;
}
.dx-tab .t-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* the viewer's tab language: mono caps, warm bronze when lit, no bright white */
.dx-tab .t-name {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tert);
  transition: color 0.2s;
  white-space: nowrap;
}
.dx-tab .t-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.26);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.dx-tab::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 215, 195, 0.75);
  box-shadow: 0 0 6px rgba(255, 150, 110, 0.6);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dx-tab:hover {
  background: rgba(255, 255, 255, 0.05);
}
.dx-tab:hover .t-name {
  color: var(--muted);
}
.dx-tab.on {
  background: linear-gradient(180deg, rgba(226, 90, 31, 0.2), rgba(150, 38, 20, 0.1));
}
.dx-tab.on .t-name {
  color: #ffd0c0;
}
.dx-tab.on .t-sub {
  color: rgba(255, 208, 192, 0.42);
}
.dx-tab.on::after {
  transform: scaleX(1);
}
.dx-body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 236px;
}
.dx-detail {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dx-fade.out {
  opacity: 0;
  transform: translateY(6px);
}
.dx-detail h3 {
  font-size: 23px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
/* the viewer labels each panel with a mono eyebrow rather than a coloured icon */
/* Counter excluded from the crossfade; only its digits roll. */
.dx-fade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.dx-count {
  display: block;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 9px;
}
/* the roll window sits on the baseline; vertical-align:bottom would drop the
   digits below the baseline of the rest */
.dx-count .n {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  height: 1.15em;
  line-height: 1.15em;
  margin-bottom: -0.24em;
}
.dx-count .n b {
  display: block;
  font-weight: 700;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.dx-eyebrow {
  display: block;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 9px;
}
/* the layer's own scale, the same component the viewer puts under its map */
/* the flex column shrank this to its content; it needs its own width back */
.dx-scale .lg-bar.steps {
  display: flex;
  gap: 1px;
  overflow: hidden;
  background: none;
  box-shadow: none;
  animation: none;
}
/* Stepped scale: blocks animate in one by one; the track clips the
   overshoot. */
.dx-scale .lg-bar.steps span {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: lgStack 0.44s cubic-bezier(0.2, 1.25, 0.35, 1) both;
  animation-delay: calc(0.05s + var(--i, 0) * 42ms);
}
@keyframes lgStack {
  from {
    opacity: 0;
    transform: translate3d(0, 110%, 0) scaleY(0.35);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dx-marks {
  position: relative;
  height: 14px;
  margin-top: 6px;
}
.dx-marks b {
  position: absolute;
  top: 0;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tert);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: lgMark 0.34s ease both;
  animation-delay: calc(0.2s + var(--i, 0) * 42ms);
}
@keyframes lgMark {
  from {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.dx-scale .dx-marks + .lg-cap {
  margin-top: 2px;
}
.dx-scale {
  margin-top: 20px;
  width: 100%;
  max-width: 300px;
}
/* the track carries the rounding, so the sliding bar is revealed through a
   rounded window instead of a square cut */
.dx-track {
  overflow: hidden;
  border-radius: 2px;
}
.dx-scale .lg-bar {
  height: 11px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  will-change: transform;
  backface-visibility: hidden;
  animation: dxDraw 0.68s cubic-bezier(0.22, 0.9, 0.28, 1) 0.08s both;
}
/* translate inside a clipped track (clip-path / width would relayout every
   frame). */
@keyframes dxDraw {
  from {
    transform: translate3d(-101%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes dxCap {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dx-scale .lg-bar,
  .dx-scale .lg-cap,
  .dx-scale .lg-bar.steps span,
  .dx-marks b {
    animation: none;
  }
  .dx-marks b {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.dx-scale .lg-cap {
  margin-top: 7px;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 199, 184, 0.7);
  will-change: transform, opacity;
  animation: dxCap 0.5s cubic-bezier(0.22, 0.9, 0.28, 1) 0.26s both;
}
.dx-spec h4 {
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  letter-spacing: 0.16em;
}

.dx-detail p {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 56ch;
}
/* Instrument-style button: cut corner, mono caps, lit underline, bracket
   slides out on hover. */
/* clip-path removes the border at the cut corners, so the outline is a slightly
   larger clipped layer behind. */
.dx-btn {
  margin-top: auto;
  padding-top: 38px;
  padding-bottom: 18px;
  align-self: flex-start;
}
.dx-detail .btn {
  position: relative;
  align-self: flex-start;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 0;
  color: #ffd8c8;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  clip-path: polygon(
    0 0,
    calc(100% - 13px) 0,
    100% 13px,
    100% 100%,
    13px 100%,
    0 calc(100% - 13px)
  );
  transition:
    color 0.22s ease,
    letter-spacing 0.22s ease;
}
.dx-detail .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 150, 110, 0.55);
  clip-path: polygon(
    0 0,
    calc(100% - 13px) 0,
    100% 13px,
    100% 100%,
    13px 100%,
    0 calc(100% - 13px)
  );
  transition: background 0.22s ease;
}
.dx-detail .btn::after {
  content: '';
  position: absolute;
  inset: 1.2px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(226, 90, 31, 0.3), rgba(112, 28, 15, 0.86)),
    linear-gradient(180deg, #1a0f10, #1a0f10);
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
  transition: background 0.22s ease;
}
.dx-detail .btn .ar {
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.dx-detail .btn:hover {
  color: #fff3ec;
  letter-spacing: 0.19em;
}
.dx-detail .btn:hover::before {
  background: rgba(255, 180, 140, 0.85);
}
.dx-detail .btn:hover::after {
  background:
    linear-gradient(180deg, rgba(226, 90, 31, 0.5), rgba(140, 36, 18, 0.9)),
    linear-gradient(180deg, #1a0f10, #1a0f10);
}
.dx-detail .btn:hover .ar {
  transform: translate(5px, -1px);
}
.dx-spec {
  border-left: 0.5px solid var(--line);
  padding: 32px 36px;
  background: rgba(26, 13, 13, 0.35);
  display: flex;
  flex-direction: column;
  transition: opacity 0.22s;
}
.dx-spec.out {
  opacity: 0;
}
/* in-place swaps in the layer explorer */
.sw {
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the scale's wrapper spans the column, so the scale keeps its full width */
.dx-sc {
  width: 100%;
}
.sw.sw-out {
  opacity: 0;
  transform: translateY(-5px);
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease-in;
}
.sw.sw-in {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
.spec-row {
  transition:
    opacity 0.3s ease,
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.spec-row.sr-new {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
.spec-row.sr-gone {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .sw,
  .spec-row {
    transition: none;
  }
}
/* a real plate rather than a decoration: this is the map the button opens */
.dx-thumb {
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  width: 100%;
  aspect-ratio: 1431/637;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: radial-gradient(680px 420px at 50% 42%, #141a26, #0c0f16 70%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.dx-thumb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.dx-thumb:hover svg {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .dx-thumb:hover svg {
    transform: none;
  }
}
.dx-thumb path {
  fill: #2f3646;
  stroke: #474f61;
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
  transition: fill 0.3s ease;
}
.dx-thumb path.d1 {
  fill: #7a2418;
}
.dx-thumb path.d2 {
  fill: #a52c1c;
}
.dx-thumb path.d3 {
  fill: #d13a24;
}
.dx-thumb path.d4 {
  fill: #f5502e;
}
.dx-thumb image {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.dx-thumb.ready image {
  opacity: 0.9;
}
/* the layer's own colour fades in from the edge of each card */
/* Glow behind the plate, not on top (would alter the data colours). */
.dx-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  z-index: 0;
  background: radial-gradient(105% 70% at 50% 122%, var(--lc, transparent) 0%, transparent 55%);
  opacity: 0.12;
}
.dx-thumb svg {
  position: relative;
  z-index: 1;
}
.dx-thumb:hover {
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 12px 30px -14px rgba(0, 0, 0, 0.9);
}
.dx-thumb:hover image {
  opacity: 1;
}
.dx-thumb .dx-thumb-tag {
  position: absolute;
  left: 13px;
  bottom: 11px;
  z-index: 2;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 222, 232, 0.62);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
/* Own stacking context so the label is above the map SVG (z-index 1). */
.dx-thumb .dx-thumb-wait {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-family:
    JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 222, 232, 0.62);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  transition: opacity 0.3s ease;
}
.dx-thumb.ready .dx-thumb-wait {
  opacity: 0;
}
@media (max-width: 820px) {
  .dx-thumb {
    margin-bottom: 16px;
  }
}
.dx-spec h4 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 10px;
  font-weight: 600;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 13.5px;
}
.spec-row:last-of-type {
  border: none;
}
.spec-row span {
  color: var(--muted);
}
.spec-row b {
  font-weight: 600;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.archive-link {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--orange);
  white-space: nowrap;
}

/* ---------- footer ---------- */
footer {
  color: var(--ink);
  border-top: 0.5px solid rgba(226, 59, 46, 0.14);
  background: linear-gradient(180deg, #100707, #0a0505);
}
.f-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding-top: 56px;
  padding-bottom: 40px;
}
footer .brand {
  margin-bottom: 12px;
}
footer p {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 36ch;
}
footer h4 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tert);
  margin-bottom: 14px;
  font-weight: 600;
}
footer a.fl {
  display: block;
  font-size: 14px;
  color: var(--muted);
  padding: 4.5px 0;
  transition: color 0.2s;
}
footer a.fl:hover {
  color: var(--orange);
}
.f-logos {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.f-logos span {
  display: flex;
}
.f-logos img {
  height: 28px;
  width: auto;
}
.f-bottom {
  border-top: 0.5px solid var(--line);
  padding-top: 20px;
  padding-bottom: 28px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  color: var(--tert);
  flex-wrap: wrap;
}

.rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.85s,
    transform 0.85s;
}
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1020px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .explorer {
    grid-template-columns: 1fr;
  }
  .exp-side {
    border-right: 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  }
  .dash-main {
    grid-template-columns: 1fr;
  }
  .dash-cell + .dash-cell {
    border-left: none;
    border-top: 0.5px solid var(--line);
  }
  .dash-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .rep-cell {
    border-top: 0.5px solid var(--line);
  }
  .rep-cell:nth-child(odd) {
    border-left: none;
  }
  .dx-body {
    grid-template-columns: 1fr;
  }
  .dx-spec {
    border-left: none;
    border-top: 0.5px solid var(--line);
  }
  .f-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    background: rgba(22, 12, 13, 0.95);
    backdrop-filter: var(--blur);
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border-radius: 11px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  }
  .nav-links.open {
    display: flex;
  }
  .burger {
    display: block;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .crow {
    grid-template-columns: 14px 92px 1fr 48px;
  }
  .cont-grid {
    grid-template-columns: 1fr;
  }
  .globe-wrap {
    max-width: 320px;
    margin: 16px auto 0;
    height: auto;
    aspect-ratio: 1/1;
    min-height: 0;
  }
  .crow .ppl {
    display: none;
  }
  .exp-side,
  .dx-detail,
  .dx-spec {
    padding: 24px;
  }
  .f-top {
    grid-template-columns: 1fr;
  }
}

/* ---- scrollbars: one slim thumb for every scrolling box and the page ----
   Chrome drops these pseudo-elements on any element with scrollbar-color or
   scrollbar-width:thin, so those two are kept for browsers without them in the
   @supports block below. */
/* :where() keeps these at the lowest weight, so any element's own rule wins */
:where(html, body *)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:where(html)::-webkit-scrollbar {
  width: 12px;
}
:where(html, body *)::-webkit-scrollbar-track {
  background: transparent;
}
:where(html, body *)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
:where(html, body *)::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
:where(html, body *)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
:where(html, body *)::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
  body * {
    scrollbar-width: thin;
  }
}