/* ============================================================================
   Cross-cutting responsive and motion overrides. Declared last in the layer
   order (see tokens.css) so these reliably win over any component's rules,
   regardless of <link> order. Tokens only — see tokens.css.
   ========================================================================= */

@layer responsive {

/* Charts (.fig-plot) must never scroll -- that is the actual reader-facing
   bug this file exists to prevent. Data tables are different: each one
   lives inside a <details class="datatable"> a reader deliberately opens,
   and figures.css's .table-wrap already carries its own overflow-x: auto,
   so a wide table scrolls in its own box rather than the page. Below
   desktop this trims the table's chrome a step -- smaller font, tighter
   cell padding -- because that shrinks every column (word and nowrap alike)
   without breaking a dollar figure mid-value, but it stops there: it does
   NOT chase a zero-scroll target down to an unreadable size. This is
   deliberately broader than 720px (the maturity-wall table -- eight
   columns, several nowrap -- is already this size at 768px on the
   desktop-sized numbers alone). */
@media (max-width: 900px) {
  table { font-size: var(--fs-small); }
  th, td { padding: var(--s1) var(--s2); }
}

@media (max-width: 720px) {
  .masthead-inner { padding: var(--s6) var(--s4) var(--s4); }
  .shell { padding: 0 var(--s4) var(--s8); }
  .rail-compact { margin: 0 calc(-1 * var(--s4)); padding: var(--s2) var(--s4); }
  .fig-head { flex-direction: column; align-items: flex-start; }
  .basis-chip { margin-left: 0; }
  .status { gap: 0 var(--s4); }
  .theme-toggle { margin-left: 0; margin-top: var(--s2); }
  /* One KPI tile per row on a phone: three 180px tiles plus the delta do not
     fit side by side, and a squeezed tile wraps its rate onto two lines. */
  .kpi { flex-basis: 100%; }
  .kpi--delta { justify-content: flex-start; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

} /* @layer responsive */