body {
  font-family: var(--font-ui);
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: var(--surface-2);
  color: var(--ink);
}

/* Dark mode overrides.

   The six hard-coded greys that used to live in this file — #121212, #444,
   #ddd, #cbd5e1, #375a9e, #33455c — were the last of the cool blue-slate ramp
   the colour block in tokens.css was written to retire, and this is the page a
   visitor is most likely to be shown. #121212 in particular is a NEUTRAL black
   where --paper in dark is #141413, a warm one, so the public analytics page
   was the one document in the product still made of a different material from
   the application it belongs to. */
.dark-mode { background-color: var(--paper); color: var(--ink); }
.dark-mode .bg-white { background-color: var(--surface) !important; }
.dark-mode select,
.dark-mode input,
.dark-mode button.time-range {
  background-color: var(--surface-2) !important; border-color: var(--line-strong) !important; color: var(--ink) !important;
}
.dark-mode button.time-range:hover { background-color: var(--accent-hover) !important; }
.dark-mode #plots h2 { color: var(--ink); }
/* Plotly container background helper */
.dark-mode .plot-container-bg { background-color: var(--surface-2) !important; }

/* Footer */
.site-footer { background: var(--surface-2); padding: var(--space-5) 0; margin-top: var(--space-5); text-align: center; border-top: 1px solid var(--line); }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: var(--space-6); margin-bottom: var(--space-3); }
.footer-logos img { max-height: 40px; width: auto; }
.site-footer p { margin: 0; color: var(--ink-3); font-size: var(--fs-1); }

.dark-mode .site-footer { background: var(--surface); border-top-color: var(--line); }
.dark-mode .site-footer p { color: var(--ink-2); }

/* ---------------------------------------------------------------------- */
/* Summary statistics table (under the plots)                             */
/*                                                                        */
/* Wide by construction — five statistics per variable — so the table      */
/* scrolls horizontally inside its own container while the Period column   */
/* stays pinned. Without the pin, scrolling right to reach the fourth      */
/* variable loses the row label and every number becomes unattributable.   */
/* ---------------------------------------------------------------------- */
/* Scrolls in BOTH axes inside its own box. The max-height is what gives the
   sticky header something to stick to — without a bounded container the header
   row scrolls away with the page and a 400-row daily table loses its column
   labels entirely. */
.stats-scroll { overflow: auto; max-height: 70vh; max-width: 100%; }

/* A SCROLLBAR YOU CAN SEE. Measured at 360px: an 819px table inside a 280px
   box — two thirds of every row off-screen — with `offsetHeight - clientHeight`
   equal to zero, i.e. no scrollbar occupying any space at all. Overlay
   scrollbars (the default on touch and on macOS) appear only mid-scroll, so
   the affordance existed exactly when it was no longer needed. Given a real
   height here, and a colour, so the box says up front that it goes further
   right. `scrollbar-*` covers Firefox; the `::-webkit-` rules cover Chrome,
   Edge and Safari, where naming a height opts the element out of overlay
   scrollbars entirely. */
.stats-scroll { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.55) rgba(100,116,139,.12); }
.stats-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.stats-scroll::-webkit-scrollbar-track { background: rgba(100,116,139,.12); border-radius: 5px; }
.stats-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.55); border-radius: 5px; }
.stats-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.8); }
.dark-mode .stats-scroll { scrollbar-color: rgba(148,163,184,.6) rgba(148,163,184,.15); }
.dark-mode .stats-scroll::-webkit-scrollbar-track { background: rgba(148,163,184,.15); }
.dark-mode .stats-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.6); }

/* On a phone the table is the whole screen wide and every cell's padding is
   width the numbers could have used. */
@media (max-width: 640px) {
  .stats-scroll { max-height: 60vh; }
  .stats-table { font-size: 0.8125rem; }
  .stats-table th, .stats-table td { padding: 0.4rem 0.45rem; }
}

.stats-table { width: 100%; border-collapse: separate; border-spacing: 0;
               font-size: var(--fs-1); line-height: var(--lh-ui); }
.stats-table th, .stats-table td { padding: var(--cell-pad-y) var(--cell-pad-x); white-space: nowrap; }

/* Numbers are read down a column and compared, so they are right-aligned and
   tabular-figure spaced: proportional digits make 1.115 look narrower than
   8.884 and defeat the comparison the column exists for. */
.stats-table td.stats-num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.94em; }
.stats-table th.stats-stat { text-align: right; font-weight: var(--w-med); font-size: var(--fs-0);
                            letter-spacing: var(--track-caps); color: var(--ink-3); }

/* Variable grouping header: one cell spanning that variable's statistics. The
   left rule is what makes the groups readable once the table is wider than the
   viewport and the header row is the only thing tying columns together. */
.stats-table th.stats-group {
  text-align: center; font-weight: var(--w-strong); font-size: var(--fs-0);
  letter-spacing: var(--track-caps);
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.stats-table th.stats-group + th.stats-group,
.stats-table .stats-groupstart { border-left: 1px solid var(--line); }

.stats-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.stats-table thead tr:nth-child(2) th { top: 1.9rem; }

/* Pinned row label. z-index above the body cells but below the header corner. */
.stats-table .stats-period {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  font-weight: var(--w-med); text-align: left; border-right: 1px solid var(--line);
}
.stats-table thead .stats-period { z-index: 3; }

/* Note the bare .stats-period rather than td.stats-period: the row label is a
   <th scope="row"> (it names the row, so it is a header), and a td-qualified
   selector silently skips it — leaving the one pinned column unstriped and
   unhighlighted while every other column banded around it. */
.stats-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.stats-table tbody tr:nth-child(even) .stats-period { background: var(--surface-2); }
.stats-table tbody tr:hover td { background: var(--accent-tint); }
.stats-table tbody tr:hover .stats-period { background: var(--accent-tint); }

/* A period with no reading for a variable — distinct from a zero. */
.stats-table td.stats-empty { text-align: center; color: var(--ink-3); }

/* ---------------------------------------------------------------------- */
/* Quick time range (1D / 1W / 1M / 3M / 1Y / 1.5Y)                        */
/*                                                                        */
/* `setActiveRangeButton` has always set aria-pressed on these, and NOTHING */
/* ever styled it: all six buttons rendered bg-gray-200, so the range you   */
/* were looking at was announced to a screen reader and invisible to        */
/* everyone else. The Summary Statistics control below already solved this  */
/* on the same page; this is that solution, not a second one — same         */
/* aria-pressed hook, same accent fill, same focus ring — so the two rows    */
/* of buttons read as one idea.                                            */
/*                                                                        */
/* Specificity, not order: `.time-range[aria-pressed="true"]` (0,2,0) beats  */
/* the Tailwind `bg-gray-200` utility (0,1,0) wherever the sheets land, so   */
/* no !important is needed. The dark-mode rule above IS !important, though,  */
/* so the dark selected state has to match it to win.                       */
/* ---------------------------------------------------------------------- */
.time-range { transition: background-color .12s ease, color .12s ease; }
.time-range[aria-pressed="true"] {
  background-color: var(--accent); color: var(--accent-ink); font-weight: var(--w-med);
}
.time-range:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.dark-mode button.time-range[aria-pressed="true"] {
  background-color: var(--accent) !important; color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

/* Period toggle: a segmented control. aria-pressed carries the state, and the
   selected styling keys off it so the visual and the accessible state cannot
   drift apart. */
.stats-period-btn {
  display: inline-flex; align-items: center;
  height: var(--ctl-h-sm); box-sizing: border-box;
  padding: 0 var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-1);
  background: var(--surface-2); color: var(--ink-2); transition: background-color .12s ease, color .12s ease;
}
.stats-period-btn:hover { background: var(--line); }
.stats-period-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.stats-period-btn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

.dark-mode .stats-table thead th,
.dark-mode .stats-table .stats-period { background: var(--surface); }
.dark-mode .stats-table th.stats-group { color: var(--ink); border-bottom-color: var(--line); }
.dark-mode .stats-table th.stats-stat { color: var(--ink-3); }
.dark-mode .stats-table th.stats-group + th.stats-group,
.dark-mode .stats-table .stats-groupstart,
.dark-mode .stats-table .stats-period { border-color: var(--line); }
.dark-mode .stats-table tbody tr:nth-child(even) td { background: var(--surface); }
.dark-mode .stats-table tbody tr:hover td,
.dark-mode .stats-table tbody tr:hover .stats-period { background: var(--accent-tint); }
.dark-mode .stats-period-btn { background: var(--surface-2); color: var(--ink); }
.dark-mode .stats-period-btn:hover { background: var(--line); }
/* Corner button */
.corner-button {
  right: var(--space-5);
  display: inline-flex; align-items: center;
  height: var(--ctl-h); box-sizing: border-box;
  padding: 0 var(--space-4);
  background-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  /* `font-family: sans-serif` here meant this button, alone in the product,
     rendered in the browser's default sans rather than Sen. */
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: var(--w-med);
  transition: background-color 0.2s ease;
  z-index: 1000;
}
.corner-button:hover { background-color: var(--accent-hover); }