/* =========================================================
   Key figures — four counts as bento tiles, on the page ground
   directly after the opening plate. Follows the product theme
   (light and dark) from ui.css.

   Every tile has one structure: label, figure, breakdown,
   source, and a detail layer behind a native disclosure.
   Figures are never counted up; tiles reveal quietly as they
   enter (scroll-driven, transform/opacity/filter/clip-path only).
   ========================================================= */

/* ---------- Tokens ---------- */
.stats {
  --stats-num:  clamp(2.5rem, 1.6rem + 2.2vw, 3.75rem);
  --stats-lead: clamp(3.75rem, 1.8rem + 5.2vw, 7.5rem);
  --stats-pad:  var(--s-32);
  --stats-gap:  var(--gap-tile);

  /* Side colours: light theme's olive and navy are already matched (L 0.087 / 0.084) */
  --stats-pal: var(--pal);
  --stats-isr: var(--isr);
  /* Numeral luminance, cap height to baseline */
  --stats-grad-a: var(--text);
  --stats-grad-b: color-mix(in srgb, var(--text) 74%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  /* The dark theme's olive is brighter than its blue; this pair is matched (L 0.42, 8.8:1 each) */
  .rd:not([data-theme="light"]) .stats { --stats-pal: #a6b384; --stats-isr: #97b1cb; }
}

/* ---------- Layout ---------- */
.stats { padding: 0; }   /* the page stack owns the space around it */
.stats-title {
  max-width: 20ch;
  margin: 0 0 clamp(var(--s-48), 5vh, var(--s-64));
  font: 500 clamp(1.875rem, 1.3rem + 1.8vw, 3rem)/var(--lh-display) var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-wrap: balance;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(15rem, auto);
  gap: var(--stats-gap);
  margin: 0;
}
.stats-tile--lead { grid-column: span 2; grid-row: span 2; }
.stats-tile--wide { grid-column: span 2; }

.stats-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--stats-pad);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--e1);
  overflow: clip; /* clip, not hidden: hidden makes a scroll container, which captures scroll-driven timelines */
}
/* Side mark: a short rule at the top of the tile, in the data colour */
.stats-tile::before {
  content: "";
  width: var(--s-48);
  height: 2px;
  margin-bottom: var(--s-16);
  border-radius: 1px;
  background: var(--stats-mark);
}
.stats-tile--pal { --stats-mark: var(--stats-pal); }
.stats-tile--isr { --stats-mark: var(--stats-isr); }
:where(.stats-tile) dd { margin: 0; }   /* zero specificity, so each row sets its own spacing */

/* ---------- Typography ---------- */
.stats-label {
  font: 600 0.9375rem/var(--lh-label) var(--font-ui);
  letter-spacing: 0;
  color: var(--text-2);
  text-wrap: balance;
}
.stats-num {
  margin-top: auto;   /* the lead figure sits low in its tall tile */
  padding-top: var(--s-24);
  font: 600 var(--stats-num)/var(--lh-figure) var(--font-ui);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(180deg, var(--stats-grad-a) 35%, var(--stats-grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats-tile--lead .stats-num { font-size: var(--stats-lead); letter-spacing: var(--track-display); }
/* Smaller tiles hang the figure from the label, so figures in a row share one line
   whatever the length of their breakdowns; the controls share the bottom edge instead */
.stats-tile:not(.stats-tile--lead) .stats-num { margin-top: 0; }
.stats-tile:not(.stats-tile--lead) .stats-more { margin-top: auto; padding-top: var(--s-16); }
.stats-comma { margin-left: -0.02em; letter-spacing: -0.06em; } /* floor-ignore: optical kerning of the comma inside large figures, in em so it scales with them */

.stats-break {
  margin-top: var(--s-12);
  font: 400 0.875rem/var(--lh-caption) var(--font-ui);
  color: var(--text-2);
}
.stats-break b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stats-src {
  margin-top: var(--stack-tight);
  font: 400 0.8125rem/var(--lh-caption) var(--font-ui);
  color: var(--text-3);
}
/* Segments never split; each separator belongs to the segment before it */
.stats-break > span, .stats-src > span { display: inline-block; }
.stats-break > span:not(:last-child)::after,
.stats-src > span:not(:last-child)::after {
  content: "·";
  margin: 0 0.45em; /* floor-ignore: optical offset in em, scales with the type it adjusts */
  color: var(--text-4);
}

/* ---------- Detail layer ----------
   Opens only from its own control (click, tap, Enter/Space; Escape closes, in ui.js).
   It settles over the tile in place; the control stays where it was and reads "Close". */
.stats-more { margin-top: var(--s-16); }
.stats-details { position: static; }
.stats-info {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--inline);
  min-height: 32px;
  margin-left: calc(-1 * var(--s-8));
  padding: 0 var(--s-8);
  border-radius: var(--r-xs);
  font: 500 0.8125rem/var(--lh-figure) var(--font-ui);
  color: var(--text-2);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.stats-info::-webkit-details-marker { display: none; }
.stats-info::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-in-out);
}
.stats-details[open] .stats-info::after { transform: translateY(1px) rotate(-135deg); }
.stats-info-close { display: none; }
.stats-details[open] .stats-info-open { display: none; }
.stats-details[open] .stats-info-close { display: inline; }
.stats-info:hover { background: var(--fill); color: var(--text); }
.stats-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.stats-detail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1lh;   /* paragraphs one line apart, as in prose */
  overflow: auto;
  padding: var(--stats-pad);
  padding-bottom: calc(var(--stats-pad) + var(--s-32) + var(--s-16));   /* clear of the control */
  background: var(--surface);
  font: 400 0.9375rem/var(--lh-caption) var(--font-ui);
  color: var(--text-2);
}
.stats-detail p { margin: 0; max-width: 46ch; }
.stats-detail a { color: var(--text); text-decoration-color: var(--rule-3); text-underline-offset: 0.2em; }
.stats-detail a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  /* The surface covers the tile at once (the answer to the press); only its text lifts in,
     so the tile's own figure and the detail's words are never on screen together. */
  .stats-details[open] .stats-detail > * { animation: stats-lift var(--dur-emphasis) var(--ease-out) both; }
  .stats-details[open] .stats-detail > :nth-child(2) { animation-delay: var(--stagger); }
  .stats-details[open] .stats-detail > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
}
@keyframes stats-lift   { from { opacity: 0; transform: translateY(var(--s-8)); } }

/* ---------- Foot: key, the one as-of date, sources ---------- */
.stats-foot {
  display: grid;
  gap: var(--s-8);
  max-width: 72ch;
  margin-top: var(--s-24);
  font: 400 0.8125rem/var(--lh-caption) var(--font-ui);
  color: var(--text-3);
}
.stats-foot p { margin: 0; }
.stats-key { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-24); color: var(--text-2); }
.stats-key-item { display: inline-flex; align-items: center; gap: var(--s-8); }
.stats-key-item::before { content: ""; width: var(--s-16); height: 2px; border-radius: 1px; background: var(--stats-k); }
.stats-key-item--pal { --stats-k: var(--stats-pal); }
.stats-key-item--isr { --stats-k: var(--stats-isr); }
.stats-asof b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.stats-asof a { color: var(--text-2); text-decoration-color: var(--rule-3); text-underline-offset: 0.2em; }
.stats-asof a:hover { color: var(--text); text-decoration-color: currentColor; }

/* ---------- Motion: each figure comes into focus ----------
   Every figure sharpens as it reaches the reading line, on its own view
   timeline, so it reverses on scroll back. Its value never changes.
   Reduced motion: no pull, figures at rest. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stats-tile > .stats-num, .coda-num {
      animation: stats-focus linear both; /* floor-ignore: scroll-driven, progress maps 1:1 to scroll */
      animation-timeline: view();
      animation-range: entry 60% cover 50%;
    }
    /* The closing number sits alone on a dark ground: it focuses over a longer stretch */
    .coda-num { animation-range: entry 20% cover 45%; }
  }
}
@keyframes stats-focus {
  from { opacity: 0.5; filter: blur(var(--reveal-blur)); transform: scale(0.985); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, auto); }
  .stats-tile--lead { grid-row: span 1; }
}
@media (max-width: 640px) {
  .stats { --stats-pad: var(--s-24); --stats-num: 3rem; --stats-lead: 3.75rem; padding-top: var(--s-48); }
  .stats-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .stats-tile--lead, .stats-tile--wide { grid-column: auto; }
  .stats-tile { border-radius: var(--r-lg); }
  .stats-num { padding-top: var(--s-24); }
}

/* ---------- Variants ---------- */
/* A unit after a figure ("9.2 million"): set small, on the figure's baseline */
.stats-unit { font-size: 0.42em; font-weight: 600; letter-spacing: 0; } /* floor-ignore: proportional to its parent text, in em by design */
/* Figures with no side (the Iraq page): a neutral mark */
.stats-tile--neutral { --stats-mark: var(--rule-3); }
/* Ranges ("280,771–315,190") run twice as long as a single figure: sized so they fit their tile */
.stats-num--range { font-size: var(--fs-stats-num-range); white-space: nowrap; }
.stats-tile--lead .stats-num--range { font-size: var(--fs-stats-tile-lead-stats-num-range); }
@media (max-width: 640px) {
  .stats-num--range, .stats-tile--lead .stats-num--range { font-size: var(--fs-stats-num-range-stats); }
}