/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-primary: #2563eb;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-bg-main: #f3f4f6;
  --color-bg-card: #ffffff;
  --color-border: #e5e7eb;
  --color-hover: #f9fafb;
  --color-chip: #eef2ff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --radius-card: 20px;
  --radius-button: 10px;
  --transition: all 0.25s ease;
  --layout-max-width: 1200px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text-primary);
  background: radial-gradient(circle at top, #ffffff 0%, var(--color-bg-main) 65%);
  line-height: 1.5;
}

/* ===== HEADER ===== */
.main-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.header-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  white-space: nowrap;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-image {
  display: block;
  width: 150px;
  max-width: min(40vw, 150px);
  height: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--color-bg-main);
  border-radius: 999px;
}

.lang-btn {
  border: none;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}

.lang-btn:hover {
  color: var(--color-text-primary);
}

.lang-btn.active {
  background: var(--color-bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ===== NAVIGATION ===== */
.main-nav {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.nav-shell {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-track {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.nav-track::-webkit-scrollbar {
  display: none;
}

.nav-container {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  width: max-content;
  min-width: 100%;
}

.scroll-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.scroll-btn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-chip);
}

.scroll-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.scroll-btn.is-hidden {
  display: none;
}

.scroll-track {
  position: relative;
}

.scroll-track::before,
.scroll-track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.scroll-track::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-card), rgba(255, 255, 255, 0));
}

.scroll-track::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-card), rgba(255, 255, 255, 0));
}

.scroll-track.show-fade-left::before {
  opacity: 1;
}

.scroll-track.show-fade-right::after {
  opacity: 1;
}

.nav-item {
  padding: 10px 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-button);
  transition: var(--transition);
  scroll-snap-align: start;
}

.nav-item:hover {
  background: var(--color-hover);
  color: var(--color-text-primary);
}

.nav-item.active {
  color: var(--color-primary);
  background: var(--color-chip);
}

/* ===== FILTERS ===== */
.filters-section {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.filters-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.filters-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.filters-buttons-track {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.filters-buttons-track::-webkit-scrollbar {
  display: none;
}

.filters-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filters-buttons {
  width: max-content;
  min-height: 44px;
}

.filters-controls {
  flex-wrap: nowrap;
}

.filter-btn {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  border-radius: var(--radius-button);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  scroll-snap-align: start;
}

.filter-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.05);
}

.filter-btn.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.filter-select {
  min-width: 190px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-bg-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
}

.filter-select:focus {
  outline: 2px solid rgba(37, 99, 235, 0.2);
  border-color: var(--color-primary);
}

/* ===== PERIOD SELECTOR ===== */
.period-selector,
.global-period-selector {
  display: flex;
  gap: 4px;
  background: var(--color-bg-main);
  padding: 4px;
  border-radius: var(--radius-button);
  flex-shrink: 0;
}

.period-selector {
  width: fit-content;
}

.period-btn,
.global-period-btn {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.period-btn:disabled,
.period-btn.is-unavailable {
  opacity: 0.45;
  color: var(--color-text-secondary);
  cursor: default;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}

.period-btn:hover,
.global-period-btn:hover {
  color: var(--color-text-primary);
}

.period-btn.active,
.global-period-btn.active {
  background: var(--color-bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ===== MAIN CONTENT ===== */
.main-content {
  padding: 28px 0;
  min-height: calc(100vh - 210px);
  width: min(100%, var(--layout-max-width));
  margin: 0 auto;
}

.content-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  /* Cards in a row share a height. Left to their natural size they ended a
     hundred pixels apart, which reads as a broken grid rather than as cards
     holding different amounts. */
  align-items: stretch;
}

/* ===== CARD ===== */
.stat-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: var(--shadow-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Let a long title wrap instead of squeezing the period control. */
  min-width: 0;
}

.card-title {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}

/* Two lines, then an ellipsis; the full text is the element's tooltip.
   A description runs as long as whoever wrote it felt like, and six lines of it
   pushed the figures halfway down the card. */
.card-subtitle {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-main);
  border-radius: 999px;
  padding: 5px 10px;
}

.stats-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* A grid column will otherwise refuse to shrink below its longest number,
     and a wide figure pushes its neighbour off the card. */
  min-width: 0;
}

.stat-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-secondary);
  font-weight: 600;
  /* The figure sits directly under the label, so the label's height *is* the
     figure's position: a two-line label next to a three-line one puts the two
     numbers on different lines and the row stops matching. Absorbing the slack
     is not enough — a longer delta underneath cancels it exactly, which is how
     the climate card came out crooked.

     So the label occupies two lines, always: shorter ones are padded, longer
     ones are cut with the full text kept in the tooltip. Every figure in a row
     then starts at the same height whatever it is called. */
  flex: 1 1 auto;
  min-height: calc(2 * 1.35em);
  max-height: calc(2 * 1.35em);
  overflow: hidden;
}

.stat-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon img,
.stat-icon svg {
  width: 100%;
  height: 100%;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  /* Tabular figures keep a ticking counter from shifting the layout every time
     a digit changes width. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* Hug the number. As a flex child of .stat-item this element is otherwise
     stretched to the full column, and anything drawn on it — an underline, a
     background — runs the whole width of the cell rather than sitting under the
     figure. */
  display: block;
  width: fit-content;
  max-width: 100%;
}

/* The unit is a caption, on its own line.
   A card column is about 150px wide. An eight-digit figure at this size plus a
   Russian unit does not fit beside it, so inline units wrapped on some cards and
   not on others — leaving the two figures in a row at different heights. Below
   the number every cell has the same shape, whatever the number turns out to
   be. */
.stat-unit {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* "Approximately". A projection past the last observation is still the best
   answer available; it is not a measurement, and one character says so without
   adding a rule under the figure or a second line to the card. */
.stat-approx {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: help;
}

/* Rolling digits.
   Each digit is a window one line tall onto a column of eleven faces — 0 to 9
   and a second 0, so nine rolls forward into ten instead of snapping back. The
   ticker moves a column by whole ems, which is why every cell is exactly 1em:
   translateY(-3.5em) is the wheel resting between 3 and 4, which is the whole
   point of the effect. */

.odometer {
  display: inline-flex;
  align-items: flex-start;
  /* One cell is exactly one line of .stat-value, so the wheels occupy the same
     line box as a number that is not rolling. A shorter cell makes the rolling
     figures sit a pixel or two above the static ones beside them, and the row
     stops lining up.

     It is stated in the value's own font size rather than in em so that a long
     number, which shrinks its digits to fit the column, keeps the same line
     box — otherwise making it fit breaks the alignment it was fitting into. */
  --odo-cell: calc(18px * 1.25);
  vertical-align: top;
  /* The wheels carry every digit 0-9 in the DOM. Selecting them would copy all
     of it, so the text beside them is what a reader takes. */
  user-select: none;
}

.odo-digit {
  display: inline-block;
  overflow: hidden;
  height: var(--odo-cell);
  line-height: var(--odo-cell);
  /* Tabular width, so a wheel showing 1 is as wide as one showing 8 and the
     figure does not breathe as it turns. */
  width: 1ch;
  text-align: center;
}

.odo-track {
  display: block;
  transform: translateY(calc(var(--odo-cell) * -1 * var(--odo-pos, 0)));
  will-change: transform;
}

.odo-cell {
  display: block;
  height: var(--odo-cell);
  line-height: var(--odo-cell);
}

.odo-sep {
  display: inline-block;
  height: var(--odo-cell);
  line-height: var(--odo-cell);
  /* A narrow space, as an element: whitespace text nodes are not rendered
     between flex items. */
  width: 0.32ch;
}

/* A figure whose digits are turning is already visibly alive. Three of the four
   liveness animations move the whole value — lift raises it six pixels, ticker
   jogs it, pulse scales it — and on top of rolling wheels that reads as the
   counter bouncing rather than counting. Glow only changes a text-shadow, so it
   still applies. */
.stat-value.stat-value--rolling.live-lift,
.stat-value.stat-value--rolling.live-pulse,
.stat-value.stat-value--rolling.live-ticker {
  /* Three classes deliberately: .stat-value.live-lift carries the same weight
     as two, and it is declared further down the file, so an equally specific
     override here would lose to source order and the counters would go on
     hopping. */
  animation: none;
}

/* The ticker owns this transform and writes it every frame. Anything that
   animates it in between is fighting the wheel. */
.odo-track,
.odo-digit {
  transition: none;
}

/* A card column is about 150px. Ten digits fit; the world's cumulative CO2, at
   thirteen, does not. Condensing the digits keeps the figure inside its column
   without touching the line box, so the row still lines up. */
.odometer.is-long { font-size: 0.86em; }
.odometer.is-longer { font-size: 0.74em; }

/* The number as text: read by screen readers, taken by a copy, invisible on the
   page. Not display:none, which would hide it from both. */
.stat-value-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .odo-track {
    will-change: auto;
  }
}

.stat-value.is-empty {
  color: var(--color-text-muted);
  font-weight: 600;
}

.cards-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--color-text-secondary);
}

.stat-value.status-success {
  color: var(--color-success);
}

.stat-value.live-lift,
.stat-value.live-pulse,
.stat-value.live-glow,
.stat-value.live-ticker,
.stat-value.live-breathe {
  position: relative;
}

.stat-value.live-lift {
  animation: statValueLiveLift 1.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  text-shadow: 0 0 0 rgba(34, 197, 94, 0);
}

.stat-value.live-pulse {
  animation: statValueLivePulse 1.4s ease-in-out infinite;
  text-shadow: 0 0 0 rgba(34, 197, 94, 0);
}

.stat-value.live-glow {
  animation: statValueLiveGlow 1.9s ease-in-out infinite;
}

.stat-value.live-ticker {
  animation: statValueLiveTicker 0.95s ease-in-out infinite;
}

.stat-value.live-breathe {
  animation: statValueLiveBreathe 2.6s ease-in-out infinite;
}

.stat-value.value-roll-up,
.stat-value.value-roll-down {
  will-change: transform, opacity, filter;
}

.stat-value.value-roll-up {
  animation: statValueRollUp 0.45s ease-out;
}

.stat-value.value-roll-down {
  animation: statValueRollDown 0.45s ease-out;
}

.stat-value.status-warning {
  color: var(--color-warning);
}

.stat-value.status-error {
  color: var(--color-error);
}

@keyframes statValueLiveLift {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  45% {
    transform: translateY(-6px);
    text-shadow: 0 6px 14px rgba(34, 197, 94, 0.22);
  }
  65% {
    transform: translateY(-6px);
    text-shadow: 0 8px 16px rgba(34, 197, 94, 0.28);
  }
  100% {
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes statValueLivePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.82;
  }
}

@keyframes statValueLiveGlow {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    text-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
  }
}

@keyframes statValueLiveTicker {
  0%,
  100% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  20% {
    transform: translateY(-4px);
    filter: blur(0.2px);
  }
  40% {
    transform: translateY(2px);
    opacity: 0.88;
  }
  60% {
    transform: translateY(-2px);
    filter: blur(0.1px);
  }
}

@keyframes statValueLiveBreathe {
  0%,
  100% {
    transform: scale(1);
    letter-spacing: normal;
  }
  50% {
    transform: scale(1.02);
    letter-spacing: 0.2px;
  }
}

@keyframes statValueRollUp {
  0% {
    transform: translateY(42%) skewY(-3deg);
    opacity: 0.2;
    filter: blur(1.5px);
  }
  100% {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes statValueRollDown {
  0% {
    transform: translateY(-42%) skewY(3deg);
    opacity: 0.2;
    filter: blur(1.5px);
  }
  100% {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
}

.stat-delta.trend-neutral {
  color: var(--color-text-muted);
  font-weight: 500;
}

.stat-delta.trend-up {
  color: var(--color-success);
}

.stat-delta.trend-down {
  color: var(--color-error);
}

.stat-delta.trend-neutral {
  color: var(--color-text-secondary);
}

.delta-arrow {
  width: 12px;
  height: 12px;
  display: inline-flex;
}

.delta-arrow svg {
  width: 100%;
  height: 100%;
}

.card-expand {
  margin-top: 4px;
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}

.card-expand:hover {
  background: #e9edf2;
}

.card-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.card-expand.expanded svg {
  transform: rotate(180deg);
}

/* ===== REVEAL ANIMATION ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible,
  .stat-card,
  .stat-card:hover,
  .stat-value[class*='live-'] {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1220px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 940px) {
  .filters-container {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-controls {
    justify-content: flex-end;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding-top: 20px;
  }

  .nav-shell,
  .header-container,
  .filters-container,
  .content-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .filters-controls {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .nav-scroll-btn,
  .filters-scroll-btn {
    display: none;
  }

  .filters-scroll {
    width: 100%;
  }

  .filters-buttons-track {
    width: 100%;
  }

  .filters-group {
    gap: 6px;
  }

  .filter-btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .global-period-selector {
    width: 100%;
    justify-content: space-between;
  }

  .global-period-btn {
    flex: 1;
    min-height: 34px;
  }

  .period-selector {
    width: fit-content;
    margin-left: auto;
  }

  .period-btn {
    flex: 0 0 auto;
    min-height: 32px;
  }

  .stat-card {
    min-height: auto;
  }

}

@media (max-width: 520px) {
  .main-content {
    width: 100%;
  }

  .logo {
    font-size: 16px;
  }

  .header-container {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .lang-btn {
    min-width: 40px;
    min-height: 32px;
    padding: 6px 10px;
  }

  .nav-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .stat-card {
    padding: 18px;
  }

  .card-title {
    font-size: 18px;
  }

  .card-subtitle {
    font-size: 13px;
  }
}