/* ==========================================================================
   HISTORY (ADR-0198, ADR-0208): the Activity page and Reports, full width.

   Loaded after v3.css (like follow-ups.css, injuries.css and camps.css), so a page
   rule beats the shared one. Almost everything here composes the app's own
   objects: `.attendance-toolbar` and `.attendance-search` (the search band and the
   Member field), `.chip` (the count chips AND Live, the range and More filters
   beside them), `.filter-chip` (an applied filter), `.state-chip` (a flag), `.card`,
   `.titled-section` and `.data-table` (Reports), `.empty-state`,
   `.overflow-menu-item`. What is this page's own is the chips' row, the row grid,
   the opened row, the person's strip, the calendar's cells and Reports' bars.

   No one-sided accent borders, no gradients, no pill radii (`--radius-sm`).
   ========================================================================== */

/* ── The page: the pinned controls, then what they act on ────────────────── */

/* THE VERTICAL RHYTHM (ADR-0206). One gap between groups, `--space-3`, and every space belongs to exactly one
   owner, so nothing stacks: the tab bar to the band is the band's own 10px (the body gives History no top padding), the
   band's rule to the chips is the pin's gap, the chips to the day heading is the heading's own top padding, and a
   region with nothing in it takes no space at all (a gap beside an empty region is how the page used to add up to 24px
   where it meant 12). Inside a group the step is `--space-1` (the chips and the line under them). */
#tab-history > .page-body { padding-top: 0; }

.hx-activity,
.hx-reports-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Reports has no band and no day headings (ADR-0213: a band holds a search field, and Reports has none). The body gives
   History no top inset because Activity's band sits flush under the tab bar, so Reports takes the inset back as its own:
   the months card starts one page inset under the tab bar, as every other page without a band does. */
.hx-reports-panel { padding-top: var(--page-body-pad); }

/* The controls that stay put (ADR-0206). The tab is the page's one scroll window (ADR-0079), so these pin
   under the page head by the same token every body-level sticky element reads, and rows scroll beneath them on the
   card's own ground. One step under the tab bar so a menu hanging from the head still paints over them; the menus
   hung from the band (the range, the account popover) paint inside this context, above the list. */
.hx-pin {
  position: sticky;
  top: var(--page-pin-h);
  z-index: calc(var(--z-chrome) - 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg-elevated);
  /* The pin bleeds to the card's edges like the band it holds (v3.css, `.page-body .attendance-toolbar`), so its
     background is as wide as the band's separator and no list row shows at either side while it is stuck. The page
     body's top inset is closed above (`#tab-history > .page-body`), so the band starts at the pin's top, and the
     pin's own gap is the space under it. (A phone draws Activity from its presenter, never from this markup.) */
  margin: 0 calc(-1 * var(--page-body-pad));
  padding: 0 var(--page-body-pad);
}
#history-activity .hx-pin > .attendance-toolbar {
  margin-top: 0;
}
/* Row 2, the filter panel and the summary line sit one --space-2 apart, and as one block --space-3 under the band
   (the pin's gap). The summary line owns no margin of its own. */
.hx-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* The regions under the pin. Each owns the space ABOVE it (--space-3) and an empty one owns none; the Feed's day
   headings own theirs (below), so the Feed's list asks for nothing and every other face of the list (an empty
   state, a loading line, an error) asks for the one gap. */
.hx-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hx-page > :empty,
.hx-filters > :empty { display: none; }
#history-member:not(:empty),
#history-active:not(:empty) { padding-top: var(--space-3); }
.history-list > :not(.hx-days):not(.hx-more-row) { margin-top: var(--space-3); }

.history-list {
  min-height: 300px;
}

/* ── The two rows (ADR-0208) ─────────────────────────────────────────────── */

/* ROW 1 is the app's search band and nothing else (ADR-0124): the Member field, full width, like Online Orders and
   Waivers. The field's one real job here is the positioning context the account popover is authored against. */
.history-search-box {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}

/* The account search popover's overlay host (ADR-0094): a zero-height
   positioning context under the field; the card floats over the page
   without moving it. Placement only: the card's look is v3.css's. */
.history-search-box .history-search-drop { position: relative; flex: none; display: block; min-height: 0; }
.history-search-box .history-search-drop .ov-drop { left: 0; top: 4px; width: 480px; max-width: calc(100vw - 120px); z-index: 50; }

/* ROW 2: the count chips fill the row and scroll sideways when they do not fit (no bar: a chip cut off at the edge is
   the cue); Live, the range and More filters hold the right end and never shrink. Never a third row of controls.
   Everything on it is a `.chip` (28px), so the row has one height and no control here is a band control (ADR-0205). */
.hx-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.hx-chips {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  /* A focus ring is not clipped by the scroller. */
  padding: 2px;
  margin: -2px;
}
.hx-chips::-webkit-scrollbar { display: none; }
.hx-bar .chip { white-space: nowrap; }
.hx-chips .chip { flex: none; padding: 0 7px; }
.hx-chips .chip-count { margin-left: 5px; }

.hx-ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
/* The painted part of row 2 sits in the flex row as if its children were the row's own. */
#history-controls { display: contents; }
.hx-ctl .chip { gap: 6px; }
.hx-ctl .chip .bi-chevron-down { font-size: 10px; color: var(--color-text-muted); }

/* Live is a chip that shares the one marker, `aria-pressed` (ADR-0129). Its dot is a TOGGLE STATE, not a fact: grey
   until Live is on, green and pulsing while it is. The base `.live-dot` (v3.css) owns the shape; this declares only
   the difference. */
.hx-live .live-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  transition: background 0.15s ease;
}
.hx-live[aria-pressed="true"] .live-dot {
  background: var(--color-success);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Active-filter count badge (sits inside the More filters button when filters are on). */
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 0;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: 0.7857rem;
  font-weight: 700;
  line-height: 1;
}

/* The button turns from a square icon into an icon and its count when filters are on. */
#history-filter-toggle:has(.filter-count-badge) { width: auto; padding: 0 8px; gap: 6px; }

/* More filters: an exact Action and Staff, in a panel below the band. */
.history-advanced-filters {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.history-advanced-filters .history-filter-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0;
}

.history-advanced-filters .filter-group {
  flex: 0 0 auto;
  min-width: 120px;
}

.history-advanced-filters .filter-group .form-label {
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
}

/* ── The note under the chips, and the applied filters ───────────────────── */

/* ONE quiet line: how many entries and for when, the quick readout, and what Essential holds back. It belongs to the chips
   above it, so its step is --space-1 where the pin's gap is --space-3. */
.hx-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: calc(var(--space-1) - var(--space-3)) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.hx-sep { color: var(--color-text-muted); }
/* A button that reads as a link: the "Show everything" under the chips, a month's name in Reports. */
.hx-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
}
.hx-link:hover { text-decoration: underline; }
.hx-faint { color: var(--color-text-muted); font-size: var(--text-sm); }

.history-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.history-active-filters .filter-chip {
  max-width: 240px;
  overflow: hidden;
}

.history-clear-all-filters {
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

.history-clear-all-filters:hover {
  text-decoration: underline;
}

/* ── A person's strip: across the top of their list ──────────────────────── */

.hx-member {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hx-member-id { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hx-member-name { font-size: var(--text-lg); font-weight: var(--font-medium); }
.hx-member-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.hx-member-kv { display: flex; flex-direction: column; }
.hx-member-k { font-size: var(--text-xs); color: var(--color-text-muted); }
.hx-member-v { font-variant-numeric: tabular-nums; }
.hx-member-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── The Feed: one line per row, the whole width ─────────────────────────── */

/* A day's heading pins just below the controls, inside its own day, so the date at the top always belongs to the rows in
   view: the next day's heading pushes it out when its section ends (native sticky, no script). It owns the space around
   it: --space-3 above (the one gap between groups, and the air under the controls while it is stuck), --space-2 to its list. */
.hx-days { display: flex; flex-direction: column; }
.hx-day { display: flex; flex-direction: column; }
.hx-day-head {
  position: sticky;
  top: calc(var(--page-pin-h) + var(--hx-pin-h, 120px));
  z-index: 2;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  user-select: none;
}
.hx-day-head.is-stuck { box-shadow: inset 0 -1px 0 var(--color-border); }
.hx-day-head.is-today { color: var(--color-accent); }
.hx-day-stats {
  margin-left: auto;
  font-weight: var(--font-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.hx-day-chev { align-self: center; }

.hx-list {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Rides the list's top edge for stuck-heads.js to watch; takes no space and paints nothing. */
.hx-edge-sentinel { position: absolute; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none; visibility: hidden; }

.hx-group { border-bottom: 1px solid var(--color-border-subtle); }
.hx-group:last-child { border-bottom: 0; }
.hx-group.is-open { background: var(--color-bg-subtle); }
.hx-group.is-undone .hx-row > :not(.hx-time):not(.hx-chev) { opacity: .7; }
.hx-group.is-new { background: var(--color-accent-tint); transition: background 1s; }

.hx-row {
  display: grid;
  grid-template-columns: 70px 180px minmax(310px, 1.1fr) minmax(0, 1fr) 170px 16px;
  gap: var(--space-3);
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}
.hx-row:hover { background: var(--hover-row, var(--color-bg-subtle)); }
.hx-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.hx-time {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.hx-who { min-width: 0; overflow-wrap: anywhere; font-weight: var(--font-medium); }
.hx-what { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hx-what .badge,
.hx-what .pass-badge,
.hx-what .hx-more { flex: none; }
.hx-text { color: var(--color-text-secondary); }
.hx-more {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted, var(--color-bg-subtle));
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.hx-det {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hx-sub { overflow-wrap: anywhere; }
.hx-ctx { display: inline-flex; align-items: center; gap: 5px; }
.hx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hx-staff {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hx-chev { color: var(--color-text-muted); font-size: 12px; transition: transform .2s ease; }
.hx-group.is-open .hx-chev { transform: rotate(180deg); }

.hx-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* An opened row: each entry is one line, its facts beside it. */
.hx-detail { padding: 2px 12px 12px 88px; display: flex; flex-direction: column; gap: var(--space-2); }
.hx-entry {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 12px;
}
.hx-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hx-detail-icon { color: var(--color-text-muted); }
.hx-detail-action { font-weight: var(--font-semibold); }
.hx-facts { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); font-size: var(--text-sm); }
.hx-f { white-space: normal; }
.hx-fk { color: var(--color-text-muted); }
.hx-fv { color: var(--color-text); }
.hx-from { color: var(--color-text-muted); text-decoration: line-through; }
.hx-to { color: var(--color-text); }
.hx-facts .bi-arrow-right,
.hx-table-facts .bi-arrow-right { font-size: 11px; color: var(--color-text-muted); margin: 0 2px; }
.hx-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.hx-more-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) 0; }

/* ── The Reports calendar: a `.titled-section`, a month grid, a day with visitors is a button (ADR-0208) ───────────── */

/* Tone is restrained: ONE accent ramp (5, 11, 18 and 26 percent of the accent over the card's own ground), and only the
   two busiest steps colour their number. No green, no wash, no second colour. A step is a background and a number, never a
   one-sided border. */
.hx-cal-section { scroll-margin-top: calc(var(--page-pin-h) + 72px); }
.hx-cal-section.is-busy .hx-cal-grid { opacity: .5; }
.hx-cal-nav { gap: var(--space-1); }
.hx-cal-step { height: 28px; width: 28px; padding: 0; }
.hx-cal-month {
  min-width: 128px;
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

.hx-cal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hx-cal-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hx-cal-total { color: var(--color-text); font-weight: var(--font-semibold); }

.hx-cal-week,
.hx-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}
.hx-cal-wd {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

.hx-cal-day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 56px;
  padding: 6px var(--space-2);
  font: inherit;
  text-align: left;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease;
}
.hx-cal-day:disabled { cursor: default; }
.hx-cal-day:hover:not(:disabled) { border-color: var(--color-accent); }
.hx-cal-day:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.hx-cal-num { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hx-cal-count {
  align-self: flex-end;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hx-cal-day.level-1,
.hx-cal-swatch.level-1 { background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-elevated)); }
.hx-cal-day.level-2,
.hx-cal-swatch.level-2 { background: color-mix(in srgb, var(--color-accent) 11%, var(--color-bg-elevated)); }
.hx-cal-day.level-3,
.hx-cal-swatch.level-3 { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg-elevated)); }
.hx-cal-day.level-4,
.hx-cal-swatch.level-4 { background: color-mix(in srgb, var(--color-accent) 26%, var(--color-bg-elevated)); }
.hx-cal-day.level-3 .hx-cal-count,
.hx-cal-day.level-4 .hx-cal-count { color: var(--color-accent); }
.hx-cal-day.is-future { background: transparent; }
.hx-cal-day.is-future .hx-cal-num { opacity: .6; }
.hx-cal-day.is-today { border-color: var(--color-accent); }
.hx-cal-day.is-today .hx-cal-num { color: var(--color-accent); font-weight: var(--font-semibold); }

.hx-cal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
}
.hx-cal-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.hx-cal-swatch { width: 14px; height: 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }

/* ── The Log entry window ────────────────────────────────────────────────── */

.hx-entry-modal { max-width: 560px; }
.hx-entry-sum { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-3); }
.hx-entry-sum > .bi { font-size: 20px; color: var(--color-text-muted); }
.hx-entry-action { font-weight: var(--font-semibold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hx-table-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.hx-table-facts dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.hx-table-facts dd { margin: 0; overflow-wrap: anywhere; }
/* A phone's row holds several entries: each reads as its own block in the one window. */
.hx-table-facts + .hx-entry-sum { margin-top: var(--space-4); }
.hx-raw { margin-top: var(--space-3); }
.hx-raw > summary { cursor: pointer; font-weight: var(--font-medium); }
.hx-raw-json {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
  overflow: auto;
  max-height: 200px;
  white-space: pre-wrap;
  word-break: break-word;
}
.hx-entry-fields { margin-top: var(--space-2); }

/* ── Reports: full width, the two small blocks side by side ──────────────── */

.hx-reports { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.hx-reports-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hx-reports-pair.is-single { grid-template-columns: minmax(0, 1fr); }
.hx-reports-pair .report-dow { --bar-label-w: 96px; --bar-n-w: 44px; }
.hx-comps-note { margin: 8px 0 0; padding: 0 var(--space-3) var(--space-3); }
.hx-defs { padding: var(--space-3); }
.hx-defs p { margin: 6px 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.hx-month-link { font-weight: var(--font-medium); }

.report-block { margin-bottom: 0; }

/* A table wider than the column scrolls itself rather than the page. */
.report-scroll { overflow-x: auto; }

/* Numeric columns: right-aligned so the digits stack on one edge, and tabular
   so they stay stacked as the values change. `.data-table th` defaults to
   left and `td` inherits, so both need saying. */
.report-months .report-num,
.report-yoy .report-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The row label is a `<td>`, not a `<th scope="row">`, and that is a real
   decision: v3.css's `.data-table th` is the COLUMN-HEADER skin (uppercase,
   muted, on `--color-bg-subtle`) and it matches any `th`, so a row header would
   come out as a tiny uppercase caption on a tinted cell. Deliberately NOT
   `display: flex` either: a cell that becomes a flex container stops being a
   table-cell and drops out of the column grid. */
.report-month-name {
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
}

.report-month-name .state-chip {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* The value above its bar. A block so the bar gets the cell's full width to
   scale against, whatever the column ends up measuring. */
.report-num-v {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* A month with NO DATA versus a month with a real zero: the no-data row dims
   its whole line and carries no bar at all, while a real zero keeps its number
   and an empty TRACK. The track is what says "measured, and it was nothing". */
.report-row-nodata td,
.report-cell-nodata,
.report-nodata {
  color: var(--color-text-muted);
}

/* Busiest days and Comps: v3.css's bar list, inset in its card, the weekday
   names in a narrow label column. */
.report-dow {
  padding: var(--space-4);
  --bar-label-w: 42px;
  --bar-n-w: 52px;
}

.bar-row.is-peak .bar-row-n { font-weight: var(--font-semibold); color: var(--color-accent); }

/* Year over year: twelve months plus a year label is a lot of columns, so the cells take
   the compact type and a tighter inset than `.data-table`'s 8px/14px. Written
   `.report-yoy.data-table`, co-classed on the SAME element (0,2,1), because `.report-yoy td`
   alone is (0,1,1), the same as v3.css's `.data-table td`. */
.report-yoy { font-size: var(--text-sm); }

.report-yoy.data-table th,
.report-yoy.data-table td {
  padding: 6px 8px;
}

.report-yoy .bar { height: 3px; }

/* ── Narrower screens ──────────────────────────────────────── */

@media (max-width: 1100px) {
  .hx-row { grid-template-columns: 70px 170px minmax(150px, 0.9fr) minmax(0, 1.2fr) 16px; row-gap: 2px; }
  .hx-row .hx-staff { display: none; }
  .hx-reports-pair { grid-template-columns: minmax(0, 1fr); }
}