/* ===========================================================================
   table-focus.css -- cell states for assets/js/table-focus.js (chapter 02's
   time series / cross section / panel buttons). The buttons themselves use
   chapter 07's .dx-tab style from dist-explorer.css.

   Picked cells get a light UW-purple fill; the rest of the table stays in
   place in light grey, so the shape reads against the whole. The !important
   is needed to beat Bootstrap's table rules, which set cell colour and fill
   through high-specificity selectors and CSS variables.

   Nothing here is needed by the PDF build; the LaTeX format never loads css.
   =========================================================================== */

/* The strip sits just above the table, clear of the text before it. The
   .dx-tab rules read their colours from variables that dist-explorer.css sets
   on .dx; this strip is not inside a .dx, so it sets the same four itself. */
.tf {
  --dx-purple: #32006e; --dx-lilac: #c9b6e6; --dx-pale: #efeaf6; --dx-rule: #ddd8e2;
  margin: 0.6rem 0 0.2rem;
}

table.tf-table td, table.tf-table th {
  transition: color 200ms ease, background-color 200ms ease;
}
table.tf-table .tf-dim { color: #c2bdc7 !important; }
table.tf-table .tf-on  { background-color: rgba(50, 0, 110, 0.09) !important; color: #000 !important; }