/* Race and class matrix. The scroll container contains the width on phones and at 200% zoom;
   the sticky race column keeps each row's identity visible during horizontal comparison. */
.rcc-page { padding-bottom: var(--s-6); }
.rcc-head .wfg-page-head { padding-bottom: var(--s-2); }
.rcc-head .wfg-page-meta .wfg-evidence { margin-left: .3rem; }
.rcc-tool { min-width: 0; }
.rcc-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-inner);
  background: var(--panel);
}
.rcc-controls[hidden], .rcc-open-class[hidden] { display: none; }
.rcc-controls label {
  display: grid;
  gap: .25rem;
  color: var(--ink-3);
  font: 400 .8rem/1.25 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rcc-controls select {
  width: 100%;
  min-height: 44px;
  padding: .45rem .6rem;
  border: 1px solid var(--line-control);
  border-radius: var(--r-ctl);
  color: var(--ink);
  background: var(--bg-3);
  font: 400 .95rem/1.25 var(--font-ui);
  letter-spacing: normal;
  text-transform: none;
}
.rcc-reset { min-height: 44px; }
.rcc-status { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font: 400 .95rem/1.4 var(--font-body); }
.rcc-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  contain: paint;
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-inner);
  background: var(--panel);
  overscroll-behavior-inline: contain;
}
.rcc-scroll-cue {
  margin: 0;
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-3);
  font: 400 .82rem/1.4 var(--font-body);
}
.rcc-matrix {
  width: 100%;
  min-width: 58rem;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font: 400 .9rem/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.rcc-matrix caption {
  padding: .65rem;
  color: var(--ink-2);
  text-align: left;
  font: 400 .9rem/1.4 var(--font-body);
}
.rcc-matrix th, .rcc-matrix td {
  padding: .5rem .45rem;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  white-space: nowrap;
}
.rcc-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-2);
}
.rcc-matrix .rcc-race-head, .rcc-matrix .rcc-race {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 10rem;
  text-align: left;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--line);
}
.rcc-matrix .rcc-race-head { z-index: 4; background: var(--panel-2); }
.rcc-matrix .rcc-race a { display: inline-block; min-height: 28px; color: var(--ink); }
.rcc-matrix .rcc-race small { margin-left: .25rem; color: var(--ink-3); font: 400 .78rem/1.25 var(--font-ui); }
.rcc-matrix .rcc-class-head { min-width: 4.8rem; }
.rcc-matrix .rcc-class-head a { color: var(--ink); }
.rcc-class-dot {
  display: block;
  width: .42rem;
  height: .42rem;
  margin: 0 auto .3rem;
  background: var(--accent);
}
.rcc-cell { min-width: 4.8rem; }
.rcc-cell > span { vertical-align: middle; }
.rcc-mark { display: inline-block; min-width: .9em; margin-right: .18rem; color: var(--ink-2); font-size: .8em; }
.rcc-no { color: var(--ink-3); }
.rcc-row-total b, .rcc-footer-count b { font-weight: 400; }
.rcc-cell [data-state="new"] { color: var(--new); }
.rcc-row-total, .rcc-total-head, .rcc-footer-count { min-width: 6rem; font-weight: 400; }
.rcc-matrix .rcc-group th {
  position: static;
  padding: .35rem .6rem;
  background: var(--bg-3);
  color: var(--ink-3);
  text-align: left;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rcc-matrix tfoot th, .rcc-matrix tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--panel-2); }
.rcc-matrix [data-rcc-class].is-selected { background-color: var(--bg-3); box-shadow: inset 0 -2px var(--line-strong); }
.rcc-matrix tr.is-selected .rcc-race { background: var(--bg-3); box-shadow: inset 3px 0 var(--line-strong), 1px 0 0 var(--line); }
.rcc-matrix tr.is-unavailable { opacity: .58; }
.rcc-matrix tr[hidden], .rcc-matrix [data-rcc-group-heading][hidden] { display: none; }
.rcc-panels { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.rcc-panels .wfg-facts { margin: 0; }
.rcc-lower { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.rcc-article { max-width: var(--measure); }
@media (min-width: 64rem) {
  .rcc-scroll-cue { display: none; }
}
/* Phones: two controls a row, and a matrix of narrow check columns. The words after the
   checks and counts hide visually (screen readers keep them), the race column shrinks to
   its name, and about four classes show beside it before the sideways swipe. */
@media (max-width: 44rem) {
  .rcc-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); }
  .rcc-controls .rcc-open-class { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .rcc-reset { align-self: end; width: 100%; justify-content: center; }
  .rcc-matrix { min-width: 0; font-size: .82rem; }
  .rcc-matrix caption { padding: .5rem .6rem; font-size: .85rem; }
  .rcc-matrix th, .rcc-matrix td { padding: .45rem .3rem; }
  .rcc-matrix .rcc-race-head, .rcc-matrix .rcc-race { min-width: 6.4rem; max-width: 7.5rem; white-space: normal; }
  .rcc-matrix .rcc-race small { display: block; margin: 0; }
  .rcc-matrix .rcc-class-head, .rcc-cell { min-width: 3.6rem; }
  .rcc-row-total, .rcc-total-head, .rcc-footer-count { min-width: 3.4rem; }
  .rcc-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rcc-mark { margin: 0; font-size: 1em; }
}
@media (min-width: 60rem) {
  .rcc-panels { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); align-items: start; }
  .rcc-panels > :nth-child(3), .rcc-panels > :nth-child(4) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rcc-page *, .rcc-page *::before, .rcc-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* 200% zoom on a phone leaves about 12rem: one control a row. */
@media (max-width: 24rem) {
  .rcc-controls { grid-template-columns: minmax(0, 1fr); }
}