/*
 * track_record.css — /track-record/ dashboard styles.
 *
 * Palette: dark hero band at the top for impact, then a light
 * paper-cream surface for the rest of the page. Each section is a
 * white card with a soft shadow on the cream background — the
 * dark→light hand-off makes the data sections feel like a printed
 * supplement under the hero's masthead.
 *
 * Section namespacing (BEM-ish):
 *   .tr-hero            dark hero band at top (UNCHANGED)
 *   .tr-card            white card wrapper used by every body section
 *   .tr-filters         window pills + meeting select row
 *   .tr-heatmap         the meetings × sources matrix
 *   .tr-table           the demoted headline-numbers table
 *   .tr-log             the audit log of recent tips
 *   .tr-rules           the integrity contract list
 *   .tr-badge / .tr-pill   inline state chips (source / streak / sample)
 */

/* Page surface — paper-cream below the dark hero so the cards
   stand out as crisp printed inserts. */
.page-track-record { background: #F8F4EA; color: #1A1A1A; }

/* ───── HERO — dark band (unchanged from earlier design) ─────── */
.tr-hero {
  padding: 64px 24px 56px;
  background:
    radial-gradient(circle at 0% 50%, rgba(212, 175, 55, 0.12), transparent 40%),
    linear-gradient(180deg, #0c1018 0%, #161b2c 100%);
  color: #fafaf7;
  border-bottom: 4px solid #D4AF37;
}
.tr-hero__inner { max-width: 1280px; margin: 0 auto; }
.tr-hero__kicker {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.24em;
  color: #D4AF37;
  margin-bottom: 14px;
}
.tr-hero__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700; line-height: 1.15;
  color: #fafaf7; margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.tr-hero__sub {
  font-size: 16px; line-height: 1.6;
  color: rgba(250, 250, 247, 0.78);
  max-width: 64ch; margin: 0;
}

/* ───── SECTION WRAPS + WHITE CARDS ──────────────────────────── */
.tr-heatmap-wrap,
.tr-table-wrap,
.tr-log-wrap,
.tr-rules-wrap {
  padding: 40px 24px;
}
.tr-heatmap-wrap__inner,
.tr-table-wrap__inner,
.tr-log-wrap__inner,
.tr-rules-wrap__inner {
  max-width: 1280px; margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E8E2D4;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(212, 175, 55, 0.12),
    0 10px 40px -16px rgba(26, 26, 26, 0.08);
  padding: 32px 32px 28px;
}

/* Section heading — proper editorial masthead. Big serif title with
   a drop-number marker (the "01") and a gold underline that
   reads as a printed-page accent. */
.tr-section-heading {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  position: relative;
}
.tr-section-heading__num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 18px; font-weight: 800; letter-spacing: 0;
  font-style: italic;
  color: #9C7B12;
  background:
    linear-gradient(180deg, #FFFCF3 0%, #F5E49A 100%);
  border: 1px solid #D4AF37;
  border-radius: 8px;
  width: 38px; height: 38px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.18) inset,
    0 2px 6px -2px rgba(212, 175, 55, 0.40);
  flex-shrink: 0;
}
.tr-section-heading::after {
  content: '';
  display: block;
  position: absolute;
  left: 54px;        /* sits just after the drop-number + gap */
  bottom: -4px;
  width: 64px; height: 3px;
  background: linear-gradient(90deg, #D4AF37 0%, #F5E49A 100%);
  border-radius: 2px;
}

/* Caption — stronger ink. Spans the full inner-card width so it
   sits flush with the table beneath it (the old max-width: 64ch
   constraint left a noticeable empty gutter on the right when
   the caption is rendered above a wide multi-column table). */
.tr-table-caption {
  font-size: 14.5px;
  color: rgba(26, 26, 26, 0.72);
  margin: 18px 0 24px;
  line-height: 1.65;
  font-weight: 500;
}

/* ───── HEATMAP HEADER + FILTERS ─────────────────────────────── */
.tr-heatmap__header {
  display: flex; flex-wrap: wrap; gap: 22px;
  justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px;
}

.tr-filters {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
}
.tr-filter {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.tr-filter__label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.50);
}
.tr-filter__chips {
  display: inline-flex; gap: 4px;
  background: #FAF7F0;
  border: 1px solid #E8E2D4;
  border-radius: 999px;
  padding: 4px;
}
.tr-filter__chip {
  display: inline-flex; align-items: center;
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: rgba(26, 26, 26, 0.65);
  text-decoration: none;
  font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: 999px;
  /* Multi-word labels like "Last 7 days" must NEVER wrap — a
     2-line chip inflates the whole row's height and the active
     state ends up looking like an oversized blob. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.16s, color 0.16s, transform 0.12s;
}
.tr-filter__chip:hover {
  color: #1A1A1A;
  background: rgba(212, 175, 55, 0.08);
}
.tr-filter__chip.is-active {
  background: linear-gradient(180deg, #F5E49A 0%, #D4AF37 100%);
  color: #1A1A1A;
  box-shadow: 0 2px 6px -2px rgba(212, 175, 55, 0.4);
}
.tr-filter__chip:active { transform: scale(0.97); }

/* Meeting select — pill style matching the chip group. */
.tr-filter__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #FAF7F0
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%239C7B12' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
              no-repeat right 12px center / 12px;
  border: 1px solid #E8E2D4;
  border-radius: 999px;
  color: #1A1A1A;
  font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
  min-width: 220px;
  transition: border-color 0.16s, background-color 0.16s;
}
.tr-filter__select:hover  { border-color: #D4AF37; }
.tr-filter__select:focus  {
  outline: none;
  border-color: #D4AF37;
  background-color: #FFFCF3;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* ───── HEATMAP TABLE ────────────────────────────────────────── */
.tr-heatmap__scroll {
  overflow-x: auto; overflow-y: visible;
  border: 1px solid #EFE9DB;
  border-radius: 10px;
  background: #FFFFFF;
}
.tr-heatmap {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tr-heatmap th, .tr-heatmap td {
  padding: 10px 12px; vertical-align: middle;
  font-size: 12.5px;
  border-bottom: 1px solid #F1ECDD;
}
.tr-heatmap tbody tr:last-child td { border-bottom: none; }

.tr-heatmap thead th {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B4F0C;
  background: linear-gradient(180deg, #FFFCF3 0%, #F5E49A 100%);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 2px solid #D4AF37;
  padding: 14px 12px;
  text-align: center;
}
.tr-heatmap__meeting-col {
  text-align: left !important;
  min-width: 260px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 13px !important; font-style: italic;
}
.tr-heatmap__src-col { text-align: center; min-width: 170px; }
.tr-heatmap__src-label {
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1.25;
}
.tr-heatmap__src-icon { font-size: 16px; }

/* Day-divider — newspaper-style date band. Sits sticky below the
   column-header band so the editor always sees which day they're
   scrolling through. */
.tr-heatmap__day-row td { padding: 0; }
.tr-heatmap__day-cell {
  background:
    linear-gradient(90deg,
      rgba(212, 175, 55, 0.24) 0%,
      rgba(212, 175, 55, 0.06) 70%,
      rgba(212, 175, 55, 0.02) 100%);
  border-top: 1px solid #E8DEB7 !important;
  border-bottom: 1px solid #E8DEB7 !important;
  padding: 14px 18px !important;
  font-size: 12px;
  position: sticky;
  top: 38px;     /* sits below the column header band */
  z-index: 1;
}
.tr-heatmap__day-label {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 22px; font-weight: 700;
  font-style: italic;
  color: #6B4F0C;
  letter-spacing: -0.015em;
  margin-right: 16px;
  vertical-align: middle;
}
.tr-heatmap__day-date {
  color: #1A1A1A;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: 14px;
  border-left: 2px solid rgba(212, 175, 55, 0.55);
  vertical-align: middle;
}
.tr-heatmap__day-count {
  color: #9C7B12;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  float: right;
  padding: 4px 10px;
  background: rgba(212, 175, 55, 0.12);
  border-radius: 999px;
}

/* Meeting (race) column — laid out as a Racing-Post-style entry:
   prominent display-serif time in deep gold, course in all-caps
   ink, race name in a warm secondary brown that reads well on
   the cream-tinted hover. */
.tr-heatmap tbody tr {
  transition: background 0.16s, box-shadow 0.16s;
}
.tr-heatmap tbody tr:hover {
  background: linear-gradient(90deg, #FFFCF3 0%, #FCFAF2 100%);
  box-shadow: inset 4px 0 0 #D4AF37;
}
.tr-heatmap__meeting { padding: 14px 18px !important; }
.tr-heatmap__meeting-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px;
  text-decoration: none; color: inherit;
  align-items: baseline;
}
.tr-heatmap__meeting-link:hover .tr-heatmap__course {
  color: #6B4F0C;
}
/* Time spans both rows on the LEFT — display serif, gradient gold
   like a printed runner number. */
.tr-heatmap__time {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  background: linear-gradient(180deg, #C8A020 0%, #9C7B12 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Course on top-right — strong-weight all-caps editorial ink. */
.tr-heatmap__course {
  grid-row: 1;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 16px; font-weight: 700;
  color: #1A1A1A;
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
/* Race name on bottom-right — warmer brown so it's clearly
   secondary but still readable (was 50% opacity which felt dead). */
.tr-heatmap__race-name {
  grid-row: 2;
  font-size: 12.5px; font-weight: 500;
  color: #6B5C4F;
  letter-spacing: 0.005em;
  line-height: 1.35;
}

/* Cell — the medal chip. Light palette, soft borders, deeper shadow
   on hover for that "this is interactive" cue. */
.tr-heatmap__cell-td {
  text-align: center; padding: 6px 8px !important;
}
.tr-heatmap__cell {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px; align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  min-width: 140px;       /* wider — SP badge needs room */
  text-align: left;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
  transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.tr-heatmap__cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(26, 26, 26, 0.18);
}
.tr-heatmap__cell-glyph { font-size: 14px; line-height: 1; }
.tr-heatmap__cell-horse {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Right-edge stack — position chip stacked over the SP price.
   Two compact pills so winners read like "1st · 5/2" at a glance. */
.tr-heatmap__cell-result {
  display: inline-flex; flex-direction: column;
  align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.tr-heatmap__cell-pos {
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.10);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.tr-heatmap__cell-sp {
  font-size: 10.5px; font-weight: 800;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: inherit;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
/* Pending-price variant — same shape as the settled SP chip but
   visually softer so the user reads it as "live price snapshot"
   rather than "final settled price". Used on pending cells to
   surface odds_at_pick so the user can gauge value before the
   race goes off. The leading "~" hints at "approximate / live". */
.tr-heatmap__cell-sp--pick {
  background: rgba(46, 116, 220, 0.10);
  border-color: rgba(46, 116, 220, 0.30);
  color: #1E40AF;
  font-weight: 700;
  font-style: italic;
}
.tr-heatmap__cell-sp--pick::before {
  content: '~';
  margin-right: 1px;
  opacity: 0.65;
  font-style: normal;
}
.tr-heatmap__cell-empty {
  color: rgba(26, 26, 26, 0.20);
  font-size: 18px;
}

/* Cell tone palettes — light backgrounds with brand-ink text. */
.tr-heatmap__cell--win {
  background: linear-gradient(180deg, #FFF6CC 0%, #F5E49A 100%);
  border-color: #D4AF37;
  color: #6B4F0C;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22) inset,
              0 2px 6px -2px rgba(212, 175, 55, 0.40);
}
.tr-heatmap__cell--silver {
  background: linear-gradient(180deg, #EFEFEF 0%, #DEDEDE 100%);
  border-color: #B8B8B8;
  color: #3A3A3A;
}
.tr-heatmap__cell--bronze {
  background: linear-gradient(180deg, #F8DDC3 0%, #ECC4A1 100%);
  border-color: #B45309;
  color: #6B3104;
}
.tr-heatmap__cell--loss {
  background: #FBECEA;
  border-color: #E8B5AD;
  color: #8A2A1F;
}
.tr-heatmap__cell--pending {
  background: #E8F0FE;
  border-color: #B6CDF7;
  color: #1E40AF;
}
.tr-heatmap__cell--void {
  background: #F2EFEA;
  border-color: #D8D3C7;
  color: rgba(26, 26, 26, 0.50);
  opacity: 0.80;
}

.tr-heatmap__empty {
  padding: 40px 24px; text-align: center;
  color: rgba(26, 26, 26, 0.55);
  background: #FAF7F0;
  border: 1px dashed #D8D0BC;
  border-radius: 12px;
  font-size: 14px;
}

/* Truncation banner — shown when the row cap kicks in. */
.tr-heatmap__truncation {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 12.5px; line-height: 1.55;
  color: #6B4F0C;
  background: #FFFCF3;
  border: 1px solid #E8DEB7;
  border-radius: 8px;
}

/* ───── BADGES + PILLS (source / streak / sample) ───────────── */
.tr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.tr-badge__icon { font-size: 13px; line-height: 1; }

/* Source tints — each tipping surface gets a recognisable swatch. */
.tr-badge--fox     { background: #FFF6CC; border-color: #D4AF37; color: #6B4F0C; }
.tr-badge--ai      { background: #E8F0FE; border-color: #B6CDF7; color: #1E40AF; }
.tr-badge--steamer { background: #DCFCE7; border-color: #86EFAC; color: #15803D; }
.tr-badge--sr      { background: #FBECEA; border-color: #E8B5AD; color: #8A2A1F; }

.tr-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.tr-pill--streak-win {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}
.tr-pill--streak-loss {
  background: #FBECEA;
  color: #8A2A1F;
  border: 1px solid #E8B5AD;
}
.tr-pill--sample {
  background: #F5F5F4;
  color: #6B5C4F;
  border: 1px solid #D8D3C7;
}

/* ───── HEADLINE NUMBERS TABLE (demoted, light) ──────────────── */
.tr-table-wrap__scroll { overflow-x: auto; }
.tr-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tr-table th, .tr-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #F1ECDD;
  text-align: right; font-size: 13.5px;
  color: #1A1A1A;
}
.tr-table tbody tr:hover { background: #FCFAF2; }
.tr-table th {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(26, 26, 26, 0.55);
  background: #FAF7F0;
  border-bottom: 2px solid #E8DEB7;
}
/* IMPORTANT: keep this as a normal table-cell — `display:flex` on a
   <th>/<td> yanks the cell out of the table's column-sizing flow,
   which collapses the Source column to text width and pushes the
   LIFETIME / LAST 30 DAYS group headers leftward across their
   sub-columns. The vertical stack (name-row + slug) is done on the
   inner span instead. */
.tr-table__source {
  text-align: left;
  vertical-align: middle;
}
.tr-table__source-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tr-table__source strong { color: #1A1A1A; font-weight: 700; font-size: 14px; }
.tr-table__source-slug {
  display: block; margin-top: 6px;
  font-size: 10px;
  color: rgba(26, 26, 26, 0.40);
  letter-spacing: 0.04em;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.tr-table__group {
  text-align: center;
  border-bottom: 2px solid #D4AF37;
  font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6B4F0C;
  background: #FAF7F0;
}
.tr-table__group--recent {
  border-bottom-color: #B6CDF7;
  color: #1E40AF;
}
.tr-table__num { font-weight: 600; }
.tr-table__num--strong { color: #1A1A1A; font-weight: 700; }

/* P/L cell — the visceral money column. Green for profit, red for
   loss, neutral for break-even or empty. Tabular-nums via the table
   default keeps the +/- and digits column-aligned across rows. */
.tr-table__pl {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tr-table__pl--profit { color: #166534; }   /* deep green  — in profit */
.tr-table__pl--loss   { color: #B91C1C; }   /* deep red    — losing money */
.tr-table__pl--flat   { color: #6B7280; }   /* slate       — break-even */
.tr-table__pl--empty  { color: rgba(26, 26, 26, 0.30); font-weight: 600; }
/* Asterisk on the P/L number when some winners couldn't be priced
   (no SP captured + no at-pick odds snapshot). Tooltip carries the
   detail. Keep it subtle — it's a transparency footnote, not an
   alarm. */
.tr-table__pl-asterisk {
  margin-left: 2px;
  color: rgba(26, 26, 26, 0.55);
  font-weight: 700;
  font-size: 0.85em;
  vertical-align: super;
}

.tr-table__overall td {
  border-top: 2px solid #D4AF37;
  padding-top: 16px;
  background: #FFFCF3;
}
.tr-table__overall .tr-table__source strong { color: #6B4F0C; }
.tr-table__overall .tr-table__pl { font-size: 14.5px; }

/* ───── AUDIT LOG ─────────────────────────────────────────────── */
.tr-log {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.tr-log__row {
  display: grid;
  grid-template-columns: 90px 140px 1fr 200px 80px 130px;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #EFE9DB;
  border-left: 4px solid #D8D3C7;
  border-radius: 8px;
  font-size: 13px;
  transition: transform 0.14s, box-shadow 0.16s;
}
.tr-log__row:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px -6px rgba(26, 26, 26, 0.12);
}
.tr-log__row--win    { border-left-color: #1A7D4A; background: #F7FFF9; }
.tr-log__row--place  { border-left-color: #9C7B12; background: #FFFCF3; }
.tr-log__row--loss   { border-left-color: #C0392B; }
.tr-log__row--void   { border-left-color: #BFBAB0; opacity: 0.72; }
.tr-log__row--pending { border-left-color: #2563EB; background: #F5F8FE; }

.tr-log__time {
  color: rgba(26, 26, 26, 0.55);
  font-size: 11px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tr-log__source {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase;
}
.tr-log__source-icon { font-size: 13px; line-height: 1; }
.tr-log__source--fox     { color: #6B4F0C; }
.tr-log__source--ai      { color: #1E40AF; }
.tr-log__source--steamer { color: #15803D; }
.tr-log__source--sr      { color: #8A2A1F; }

.tr-log__race a { color: #1A1A1A; text-decoration: none; font-weight: 500; }
.tr-log__race a:hover { color: #6B4F0C; }
.tr-log__horse { color: #1A1A1A; font-weight: 700; }
.tr-log__saddle {
  color: rgba(26, 26, 26, 0.50);
  font-weight: 400; font-size: 11px;
  margin-left: 4px;
}
.tr-log__odds { color: rgba(26, 26, 26, 0.70); font-variant-numeric: tabular-nums; }
.tr-log__outcome {
  font-size: 12px; font-weight: 700;
  text-align: right;
}
.tr-log__outcome--win    { color: #15803D; }
.tr-log__outcome--place  { color: #9C7B12; }
.tr-log__outcome--loss   { color: rgba(26, 26, 26, 0.45); }
.tr-log__outcome--void   { color: rgba(26, 26, 26, 0.40); }
.tr-log__outcome--pending { color: #2563EB; }
.tr-log__empty {
  padding: 32px 24px; text-align: center;
  color: rgba(26, 26, 26, 0.55);
  background: #FAF7F0;
  border: 1px dashed #D8D0BC;
  border-radius: 10px;
}

/* Audit-log toolbar — sits above the list, with the count on the
   left and the per-page pills on the right. Mirrors the heatmap's
   filter row so the user gets a consistent visual grammar. */
.tr-log__toolbar {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1ECDD;
}
.tr-log__count {
  font-size: 13px; color: rgba(26, 26, 26, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.tr-log__count strong {
  color: #1A1A1A;
  font-weight: 700;
}

/* Pager — Prev / "Page X of Y" / Next at the bottom of the list. */
.tr-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1ECDD;
}
.tr-pager__btn {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.03em;
  padding: 9px 16px;
  border-radius: 999px;
  background: #FAF7F0;
  border: 1px solid #E8E2D4;
  color: #6B4F0C;
  text-decoration: none;
  transition: background 0.16s, border-color 0.16s, transform 0.12s;
}
.tr-pager__btn:hover {
  background: linear-gradient(180deg, #FFFCF3 0%, #F5E49A 100%);
  border-color: #D4AF37;
  color: #1A1A1A;
}
.tr-pager__btn:active { transform: scale(0.97); }
.tr-pager__btn--disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
  color: rgba(26, 26, 26, 0.40);
}
.tr-pager__indicator {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 110px;
  text-align: center;
}
.tr-pager__indicator strong {
  color: #1A1A1A;
  font-weight: 700;
}

/* ───── INTEGRITY CONTRACT ────────────────────────────────────── */
.tr-rules-wrap__inner {
  background:
    linear-gradient(135deg, #FFFCF3 0%, #FAF7F0 100%);
  border: 1px solid #E8DEB7;
  position: relative;
}
.tr-rules-wrap__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.08), transparent 50%);
}
.tr-rules {
  list-style-position: outside;
  margin: 14px 0 0 22px; padding: 0;
  display: grid; gap: 14px;
  color: rgba(26, 26, 26, 0.78);
  font-size: 14px; line-height: 1.65;
  max-width: 68ch;
  position: relative;
}
.tr-rules li::marker {
  color: #9C7B12;
  font-weight: 700;
}
.tr-rules li strong {
  color: #1A1A1A;
  font-weight: 800;
}

/* ───── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tr-hero { padding: 40px 18px 36px; }
  .tr-heatmap-wrap, .tr-table-wrap, .tr-log-wrap, .tr-rules-wrap {
    padding: 24px 14px;
  }
  .tr-heatmap-wrap__inner,
  .tr-table-wrap__inner,
  .tr-log-wrap__inner,
  .tr-rules-wrap__inner {
    padding: 22px 18px 20px;
    border-radius: 12px;
  }
  .tr-heatmap__header { gap: 14px; }
  .tr-heatmap__meeting-col { min-width: 180px; }
  .tr-heatmap__src-col { min-width: 120px; }
  .tr-heatmap__cell { min-width: 110px; padding: 6px 8px; }
  .tr-heatmap__cell-pos,
  .tr-heatmap__cell-sp { font-size: 10px; padding: 1px 4px; }
  .tr-heatmap__meeting { padding: 12px 14px !important; }
  .tr-heatmap__time { font-size: 22px; }
  .tr-heatmap__course { font-size: 14.5px; }
  .tr-heatmap__race-name { font-size: 11.5px; }
  .tr-heatmap__day-label { font-size: 18px; }
  .tr-heatmap__day-date { font-size: 10.5px; letter-spacing: 0.14em; }
  .tr-section-heading {
    font-size: 24px;
    gap: 12px;
  }
  .tr-section-heading__num { width: 32px; height: 32px; font-size: 15px; }

  /* Filter row — stacked, full-width, swipe-scrollable pills.
     Desktop puts window + meeting side-by-side; mobile is too
     narrow for that without the meeting select shrinking to a
     few characters wide and the window pills wrapping. Stack
     them as two full-width rows with the label above each, and
     turn the pill group into a horizontal swipe-strip so all
     four windows are reachable in one gesture. */
  .tr-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 14px;
  }
  .tr-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .tr-filter__label {
    align-self: flex-start;
    padding-left: 2px;
  }
  .tr-filter__chips {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 4px;
    /* Soft mask at the right edge so partially-visible chips
       look intentional (swipe cue) rather than truncated. */
    mask-image: linear-gradient(90deg,
      black 0%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
      black 0%, black 92%, transparent 100%);
  }
  .tr-filter__chips::-webkit-scrollbar { display: none; }
  .tr-filter__chip {
    padding: 8px 14px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .tr-filter__select {
    width: 100%;
    min-width: 0;
    max-width: 480px;
  }

  .tr-log__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tr-log__count { text-align: center; }
  .tr-pager { gap: 8px; flex-wrap: wrap; }
  .tr-pager__btn { padding: 8px 12px; font-size: 12px; }
  .tr-log__row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
  .tr-log__time { grid-column: 1; }
  .tr-log__source { grid-column: 2; justify-self: end; }
  .tr-log__race { grid-column: 1 / -1; font-size: 12.5px; }
  .tr-log__horse { grid-column: 1; }
  .tr-log__odds { grid-column: 2; text-align: right; }
  .tr-log__outcome { grid-column: 1 / -1; }
}

/* Very narrow phones (≤380px — landscape iPhone SE etc). Tighter
   chip padding so all four window pills fit visible in a single
   swipe-strip without horizontal scrolling on first view. */
@media (max-width: 380px) {
  .tr-filter__chip {
    padding: 7px 11px;
    font-size: 11.5px;
    letter-spacing: 0.02em;
  }
  .tr-heatmap-wrap__inner,
  .tr-table-wrap__inner,
  .tr-log-wrap__inner,
  .tr-rules-wrap__inner {
    padding: 18px 14px 16px;
  }
}