/* Home page and text pages (owner: D). Only what app.css does not provide. Tokens from app.css. */

/* ---- home: first screen — everything centred, the round button is the main object */

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Slightly smaller than the product h1 so call + button fit on 1280×720. */
.home-hero__title {
  max-width: 12em;
  font-size: clamp(2.75rem, 1.6rem + 6vw, 6rem);
  line-height: 0.92;
  text-wrap: balance;
}

.home-hero__round { margin-top: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); }

/* Long translations: the main line steps down (class set by home.js after measuring). */
.btn-round.is-long .btn-round__main { font-size: calc(var(--d) * 0.13); }
.btn-round.is-longer .btn-round__main { font-size: calc(var(--d) * 0.1); line-height: 0.95; }

.home-stickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-4);
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* ---- home: ticker with a pause button (motion longer than 5 s must be stoppable) */

.home-ticker {
  position: relative;
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.home-ticker .ticker {
  min-height: calc(clamp(1.375rem, 1.1rem + 1vw, 2rem) + 1.1rem + 2 * var(--bw));
  padding-inline-end: 3.5rem;        /* room for the pause button */
}
.home-ticker.is-empty { display: none; }   /* every number failed to load */
.home-ticker.is-paused .ticker__track { animation-play-state: paused; }

.home-ticker__pause {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 3rem;
  min-height: 44px;
  border: 0;
  border-inline-start: var(--bw) solid var(--c-ink);
  border-block: var(--bw) solid var(--c-ink);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
}
.home-ticker__pause:hover { background: var(--c-pop); }
.home-ticker__pause:focus-visible { outline: 3px solid var(--c-ink); outline-offset: -6px; }
/* pause icon: two bars; play icon: triangle */
.home-ticker__icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.9rem;
  border-inline: 0.25rem solid currentColor;
  vertical-align: middle;
}
.home-ticker.is-paused .home-ticker__icon {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 0.5rem solid transparent;
  border-inline-start: 0.8rem solid currentColor;
  border-inline-end: 0;
}
@media (prefers-reduced-motion: reduce) {
  .home-ticker .ticker { padding-inline-end: 0; }
  .home-ticker__pause { display: none; }
}

/* ---- home: below the first screen */

.home-map[aria-busy="true"] { aspect-ratio: 1000 / 436; }
.home-map__skeleton { width: 100%; height: 100%; }
.home-map.is-broken { aspect-ratio: auto; }

.home-again { display: flex; justify-content: center; }

/* ---- text pages: sections separated by a black rule */

.prose h2 { padding-top: 0.45em; border-top: var(--bw) solid var(--c-ink); }

.cite__text { overflow-wrap: anywhere; }
.cite__actions { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cite__status { font-size: var(--fs-sm); }

.prose th[scope="row"] code { overflow-wrap: normal; white-space: nowrap; }
.prose .disclosure .table-wrap { margin-top: var(--s-3); }

.download-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }