/* ============================================================================
   VIS Athlete Results - styling
   Adapted from the VIS Research app design system:
   navy #0b233f brand · light-grey #f4f5f7 canvas · white sticky navbar with
   uppercase pill tabs · dark navy hero-strip per tab · white cards on grey.
   ============================================================================ */

/* ── Reset & base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #f4f5f7;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

/* navbarPage wraps the tab body in a Bootstrap .container-fluid whose default
   gutter padding creates a grey frame around the hero. Strip it so the hero
   sits flush below the navbar and spans full width; inner sections carry their
   own horizontal padding. Scope to the page-level container only. */
.navbar + .container-fluid {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
/* Remove the vertical gap between the sticky navbar and each tab's hero strip.
   bslib adds `margin-top: var(--bslib-navbar-margin)` (20px) to the tab-pane just
   below the navbar, which shows as a grey band above the navy hero. Zero that
   variable so the hero sits flush under the navbar. */
.navbar + div > .tab-content > .tab-pane {
  --bslib-navbar-margin: 0px;
  margin-top: 0 !important;
  padding-top: 0;
}
.hero-strip { margin-top: 0; }

h3, h4, h5 { font-weight: 700; }
h6 { font-size: 10px; font-weight: 600; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */

.navbar {
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 32px;
  min-height: 52px;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1030;
  margin-bottom: 0;
}

.navbar-brand {
  color: #111 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0;
  display: flex !important;
  align-items: center;
  height: 52px;
}

.navbar-brand:hover { color: #111 !important; }

.navbar-nav { gap: 12px; }

.nav-link,
.navbar-nav > li > a {
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px !important;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover,
.navbar-nav > li > a:hover {
  color: #111 !important;
  background: #f4f5f7 !important;
}

.nav-link.active,
.navbar-nav > .active > a,
.navbar-nav > .active > a:focus,
.navbar-nav > .active > a:hover {
  color: #fff !important;
  background: #0b233f !important;
  border-radius: 6px;
}

/* ── Hero strip (dark navy, per tab) ───────────────────────────────────────── */

.hero-strip {
  background: #0b233f;
  padding: 26px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 40px;
}

.hero-strip-left {
  display: flex;
  flex-direction: column;
  flex: 1 1 360px;
  min-width: 300px;
  max-width: 760px;
}

.hero-strip-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}

.hero-strip-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-strip-subtitle {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.hero-strip-icon {
  font-size: 52px;
  color: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ── Page content area ─────────────────────────────────────────────────────── */

.page-content {
  padding: 28px 48px;
  max-width: 1500px;
  margin: 0 auto;
}

/* Review Scraped uses the same content width as every other tab (Overview,
   Results Entry). The modifier class is kept for markup stability but no longer
   overrides the standard .page-content cap. */
.page-content-wide { max-width: 1500px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.entry-card {
  background: #fff;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  margin-bottom: 22px;
  box-shadow: none;
}

.entry-card-header {
  padding: 14px 24px;
  border-bottom: 1px solid #f1f3f6;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #33414f;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.entry-card-header .fa,
.entry-card-header .glyphicon,
.entry-card-header svg { color: #0b233f; }

.entry-card-body { padding: 22px 24px 8px; }

/* Grouped section inside a card body - mirrors the edit-modal sections:
   a small uppercase label with a hairline rule, then the fields. */
.entry-section { margin-bottom: 6px; }
.entry-section + .entry-section { margin-top: 4px; }
.entry-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a94a0;
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid #eef1f4;
}

/* Right-aligned submit row at the foot of a card body. */
.entry-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 0 14px;
  margin-top: 2px;
}
.entry-actions .btn-submit { min-width: 180px; }

/* Heading row above an existing-data table inside a card */
.entry-table-caption {
  font-size: 13px;
  font-weight: 600;
  color: #33414f;
  margin: 0;
}

/* ── Form controls ─────────────────────────────────────────────────────────── */

.control-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a94a0 !important;
  margin-bottom: 5px;
}

/* Notes column: the textarea stretches to fill the full height of the two
   stacked rows in the right-hand column beside it. */
.notes-col { display: flex; }
.notes-col .form-group,
.notes-col .shiny-input-container { display: flex; flex-direction: column; width: 100%; }
.notes-col textarea.form-control {
  flex: 1 1 auto;
  min-height: 120px;
  resize: none;
}

.form-control {
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.form-control:focus {
  border-color: #0b233f;
  box-shadow: 0 0 0 2px rgba(11,35,63,0.08);
  background: #fff;
  outline: none;
}

.checkbox-inline, .checkbox { font-size: 12px; }
.checkbox label, .checkbox-inline { color: #33414f; }

/* Rank-flag column: centre the label AND the Top 3 / Top 8 checkboxes. */
.rank-flag-col { text-align: center; }
.rank-flag-col .control-label { display: block; text-align: center; }
.rank-flag-col .shiny-options-group { display: inline-flex; gap: 14px; justify-content: center; }

/* Date input widget */
.datepicker { z-index: 1100 !important; }
.datepicker-days { z-index: 1100 !important; }

/* ── Selectize ─────────────────────────────────────────────────────────────── */

.selectize-control { border: none !important; box-shadow: none !important; padding: 0 !important; }
.selectize-input {
  background: #fafafa !important;
  box-shadow: none !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.selectize-input.focus {
  border-color: #0b233f !important;
  box-shadow: 0 0 0 2px rgba(11,35,63,0.08) !important;
  background: #fff !important;
}
.selectize-dropdown { background: #fff !important; z-index: 99999 !important; font-size: 12px; }
.selectize-dropdown-content .option { background: #fff !important; color: #111 !important; padding: 6px 10px !important; }
.selectize-dropdown-content .option.active { background: #0b233f !important; color: #fff !important; }
.selectize-dropdown-content .option.active span,
.selectize-dropdown-content .option.active div { color: #fff !important; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn { font-size: 12px; }

/* Primary submit - navy brand */
.btn-primary,
.btn-submit {
  background: #0b233f !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background 0.15s ease;
}
.btn-primary:hover, .btn-primary:focus,
.btn-submit:hover, .btn-submit:focus {
  background: #143a63 !important;
  color: #fff !important;
}

/* Neutral / dark secondary */
.btn-dark {
  background: #33414f !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.btn-dark:hover { background: #1f2933 !important; color: #fff !important; }

/* Danger - used in edit modals */
.btn-danger {
  background: #e0533d !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(224, 83, 61, 0.3);
  transition: background 0.15s ease;
}
.btn-danger:hover, .btn-danger:focus { background: #c83f2b !important; color: #fff !important; }

/* Outline cancel */
.btn-outline {
  background: #fff !important;
  color: #0b233f !important;
  border: 1.5px solid #d0d7de !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}
.btn-outline:hover, .btn-outline:focus {
  background: #f5f7f9 !important;
  color: #0b233f !important;
  border-color: #0b233f !important;
}

/* ── Edit modal ────────────────────────────────────────────────────────────── */

.modal-dialog { max-width: 860px; }

.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(11, 35, 63, 0.28);
  overflow: hidden;
}

/* Kill the default bootstrap modal-body padding - our own sections pad instead. */
.modal-body { padding: 0; }

/* Navy header bar: title + a summary of the row being edited. */
.edit-modal-head {
  background: #0b233f;
  color: #fff;
  padding: 20px 28px 18px;
}
.edit-modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.edit-modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
}
/* Summary chips: key/value pairs describing the record being edited. */
.edit-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 14px;
}
.edit-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 5px 11px;
  white-space: nowrap;
  max-width: 100%;
}
.edit-summary-chip-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.5);
}
.edit-summary-chip-value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body sections, each introduced by a small uppercase label. */
.edit-modal-body { padding: 22px 28px 6px; }
.edit-section + .edit-section { margin-top: 6px; }
.edit-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a94a0;
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #eef1f4;
}

/* Footer action bar. */
.edit-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #eef1f4;
  background: #fafbfc;
}
/* Delete sits left, apart from the confirm/cancel pair on the right. */
.edit-modal-foot .btn-danger { margin-right: auto; }
/* A footer with no left-aligned delete: push its buttons to the right as a pair. */
.edit-modal-foot-end { justify-content: flex-end; }

/* On narrow screens, stack summary chips and let the footer wrap. */
@media (max-width: 640px) {
  .edit-modal-foot { flex-wrap: wrap; }
  .edit-modal-foot .btn-danger { margin-right: 0; }
}

/* ── Reactable niceties ────────────────────────────────────────────────────── */

.rt-search { font-size: 11px; padding: 4px 8px; }
.ReactTable, .rt-table { font-family: inherit; }

/* Give rows a comfortable minimum height so cells whose text now wraps (rather
   than truncating) have room to breathe. Cells vertically-center their content
   (vAlign='center'), so single-line rows sit centred and wrapped rows grow. */
.rt-tr .rt-td { min-height: 44px; }

/* Row "Edit" button in the existing-data tables - a bounded, single-click
   button aligned to the right of each row. */
.row-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  color: #0b233f;
  background: #fff;
  border: 1.5px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.row-edit-btn:hover {
  background: #0b233f;
  border-color: #0b233f;
  color: #fff;
}
.row-edit-btn .fa { font-size: 11px; }

/* Benchmark-event star toggle, sized to match the edit pencil and sitting just
   left of it. Hollow grey by default; gold-filled when the row is a BME. */
.row-bme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  margin-right: 6px;
  color: #b6bec7;
  background: #fff;
  border: 1.5px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.row-bme-btn:hover { border-color: #e8a825; color: #e8a825; }
.row-bme-btn.is-bme {
  color: #fff;
  background: #e8a825;
  border-color: #e8a825;
}
.row-bme-btn.is-bme:hover { background: #d1961f; border-color: #d1961f; }
.row-bme-btn .fa { font-size: 11px; }

/* ── Overview tab ──────────────────────────────────────────────────────────── */

/* Headline counts describing what the automated feeds have delivered. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat-tile {
  background: #fff;
  border: 1px solid #e6eaee;
  border-left: 3px solid #0b233f;
  border-radius: 4px;
  padding: 16px 18px;
}
.stat-tile-value {
  font-family: Archivo, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0b233f;
  line-height: 1.15;
}
.stat-tile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a94a0;
  margin-top: 6px;
}
.stat-tile-hint {
  font-size: 11px;
  color: #6c757d;
  margin-top: 3px;
}

/* Source provenance pills inside the Overview tables. */
.src-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.src-auto   { background: #e3f0e6; color: #1d6b32; }
.src-manual { background: #eef1f4; color: #5a6470; }

.overview-hint {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 12px;
}

/* Keep long result tables from pushing the page sideways. */
.overview-table-wrap { margin-top: 6px; }

/* Bulk-confirm action bar above the Review Scraped table. */
.review-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 12px;
}
.review-bulk-hint { font-size: 12px; color: #6c757d; }

/* ── Review Scraped - inline row controls ──────────────────────────────────── */

/* Per-row athlete dropdown embedded in the reactable. Native <select> so its
   popup escapes the cell without needing overflow hacks. */
.rev-row-cell { display: block; width: 100%; }
.rev-athlete-select {
  width: 100%;
  max-width: 100%;
  height: 28px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12px;
  color: #24303d;
  background: #fff;
  border: 1.5px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
}
.rev-athlete-select:focus {
  outline: none;
  border-color: #0b233f;
}

/* Confirm (tick) + remove (bin) buttons, sharing the row-edit button look. */
/* Keep the confirm + reject buttons on one line (they used to wrap in a narrow
   action column). flex-nowrap guarantees they sit side by side. */
.rev-actions { display: flex; flex-wrap: nowrap; align-items: center; }
.rev-confirm, .rev-bin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: #fff;
  border: 1.5px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rev-confirm { color: #1d6b32; margin-right: 4px; }
.rev-confirm:hover:not(:disabled) { background: #1d6b32; border-color: #1d6b32; color: #fff; }
.rev-confirm:disabled { color: #c2c8ce; border-color: #e6eaee; cursor: not-allowed; }
.rev-bin { color: #b23b3b; }
.rev-bin:hover:not(:disabled) { background: #b23b3b; border-color: #b23b3b; color: #fff; }
.rev-bin:disabled { color: #d8b3b3; border-color: #efdada; cursor: not-allowed; }
.rev-confirm .fa, .rev-bin .fa { font-size: 11px; }

/* Rows acted on this session stay visible, tinted: green = confirmed & added to
   results, red = rejected. Applied via the reactable rowClass callback. The tint
   sits above the default/hover background so it persists on hover. */
.rev-row-approved,
.rev-row-approved:hover { background: rgba(29, 107, 50, 0.12) !important; }
.rev-row-rejected,
.rev-row-rejected:hover { background: rgba(178, 59, 59, 0.12) !important; }
/* Locked controls read as muted inside a tinted row. */
.rev-row-approved .rev-athlete-select:disabled,
.rev-row-rejected .rev-athlete-select:disabled {
  background: transparent;
  border-color: transparent;
  color: #3c4b3f;
  cursor: default;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ── Shiny error suppression (unchanged behaviour) ─────────────────────────── */

.shiny-output-error,
.shiny-output-error:before { visibility: hidden; }

/* Validation messages are deliberate empty-state copy, not faults - the blanket
   rule above would otherwise hide them. */
.shiny-output-error-validation {
  visibility: visible !important;
  display: block;
  padding: 18px 2px;
  font-size: 12.5px;
  color: #6c757d;
}
.shiny-output-error-validation:before { visibility: visible !important; }

/* ── Sub-tabs inside a top-level tab (Results ▸ …) ─────────────────────────── */
/* Flat pill row for the primary sub-tabs (All Results / Entry / Review) and a
   lighter underline row for the nested review switch. Both sit on the grey
   canvas directly below the hero, above the cards. */

.page-content .nav-pills {
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: none;
}
.page-content .nav-pills > li > a {
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #55606c;
  background: #fff;
  border: 1px solid #e6eaee;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.page-content .nav-pills > li > a:hover {
  color: #0b233f;
  border-color: #cfd6dd;
}
.page-content .nav-pills > .active > a,
.page-content .nav-pills > .active > a:focus,
.page-content .nav-pills > .active > a:hover {
  background: #0b233f;
  border-color: #0b233f;
  color: #fff;
}

/* Nested review switch - quieter underline tabs */
.subtab-body .nav-tabs {
  border-bottom: 1px solid #e6eaee;
  margin-bottom: 20px;
  gap: 4px;
}
.subtab-body .nav-tabs > li > a {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 4px;
  margin-right: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a94a0;
  background: transparent;
}
.subtab-body .nav-tabs > li > a:hover {
  color: #0b233f;
  border-bottom-color: #cfd6dd;
  background: transparent;
}
.subtab-body .nav-tabs > .active > a,
.subtab-body .nav-tabs > .active > a:focus,
.subtab-body .nav-tabs > .active > a:hover {
  color: #0b233f;
  border-bottom-color: #0b233f;
  background: transparent;
}

.subtab-body { padding-top: 2px; }

/* ── Ghost button (secondary / reset actions) ─────────────────────────────── */
.btn-ghost {
  background: #fff;
  border: 1px solid #dfe4e9;
  color: #55606c;
  font-weight: 600;
  border-radius: 6px;
  padding: 7px 14px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.btn-ghost:hover, .btn-ghost:focus {
  border-color: #0b233f;
  color: #0b233f;
  background: #f7fafd;
}

/* ── Action bar (domain screen: add button + review banner) ───────────────── */
.action-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.action-bar .btn-submit { min-width: 160px; flex-shrink: 0; }

/* Muted placeholder banner (Competitions review-pending strip) */
.review-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 260px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.review-banner-muted {
  background: #f5f7f9;
  border: 1px solid #e6eaee;
  color: #8a94a0;
}
.review-banner-muted .fa { color: #aab3bd; }

/* ── Results view switcher (segmented control) ────────────────────────────── */
.view-switch-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
/* Two segmented groups (Entry | Review) laid out in one row with a divider. */
.view-switch-groups {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.view-switch-divider {
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: #d7dde3;
  margin: 0 4px;
}

/* shinyWidgets radioGroupButtons rendered as a flat pill segment. The control
   emits a .btn-group of .btn.view-switch buttons; style the group as one unit. */
.view-switch-bar .btn-group {
  background: #eef1f4;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  display: inline-flex;
}
.view-switch-bar .btn-group .btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #55606c !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, color 0.12s;
}
.view-switch-bar .btn-group .btn .fa { color: #8a94a0; font-size: 12px; }
.view-switch-bar .btn-group .btn:hover { color: #0b233f !important; }
.view-switch-bar .btn-group .btn.active {
  background: #fff !important;
  color: #0b233f !important;
  box-shadow: 0 1px 3px rgba(11,35,63,0.10) !important;
}
.view-switch-bar .btn-group .btn.active .fa { color: #0b233f; }

/* Count badge inside a segment */
.seg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: #d7dde3;
  color: #4a5560;
}
.seg-badge-warn { background: #f6c65b; color: #6b4a08; }
.btn.active .seg-badge-warn { background: #e8a825; color: #fff; }

/* ── Home review call-outs ────────────────────────────────────────────────── */
.callout-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.callout-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  text-align: left;
  padding: 16px 20px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #edf0f3;
  color: #33414f;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.callout-card:hover {
  border-color: #0b233f;
  box-shadow: 0 2px 10px rgba(11,35,63,0.06);
  color: #0b233f;
}
.callout-card .fa { font-size: 22px; color: #c9821f; }
.callout-card .callout-n {
  font-size: 22px;
  font-weight: 700;
  color: #0b233f;
  margin-right: 2px;
}
.callout-card .callout-label { font-size: 13px; color: #55606c; }

/* ── Compact icon-only reset button (All Results filter row) ───────────────── */
.filter-reset-col { display: flex; flex-direction: column; }
.btn-reset-sm {
  width: 40px;
  min-width: 40px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.btn-reset-sm .fa { margin: 0; }

/* ── Duplicate-merge review: card per pairing ─────────────────────────────── */
.dedup-card-list { display: flex; flex-direction: column; gap: 18px; }

.dedup-card {
  border: 1px solid #e6eaee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* Heading: athlete / sport + confidence */
.dedup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: #f7f9fb;
  border-bottom: 1px solid #eef1f4;
}
.dedup-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0b233f;
  letter-spacing: -0.01em;
}
.dedup-card-sport {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8a94a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dedup-card-conf { text-align: right; flex-shrink: 0; }
.dedup-conf-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a94a0;
}
.dedup-conf-value { font-size: 18px; font-weight: 700; color: #0b233f; }

/* Body band: pairing table | reasoning | actions */
.dedup-card-body {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.dedup-card-pairing { flex: 1 1 55%; min-width: 0; padding: 14px 20px; overflow-x: auto; }
.dedup-card-reason {
  flex: 1 1 28%;
  min-width: 200px;
  padding: 16px 20px;
  border-left: 1px solid #eef1f4;
  background: #fcfdfe;
}
.dedup-card-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  border-left: 1px solid #eef1f4;
  min-width: 150px;
}

/* Pairing table */
.dedup-pair-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dedup-pair-table th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a94a0;
  padding: 4px 12px 8px 0;
  border-bottom: 1px solid #eef1f4;
  white-space: nowrap;
}
.dedup-pair-table td {
  padding: 9px 12px 9px 0;
  color: #24303d;
  border-bottom: 1px solid #f4f6f8;
  vertical-align: top;
}
.dedup-pair-table tr:last-child td { border-bottom: none; }
.dedup-td-center { text-align: center; }

/* Reasoning block */
.dedup-card-reason-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a94a0;
  margin-bottom: 6px;
}
.dedup-card-reason-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #33414f;
}

/* Action buttons */
.dedup-card-actions .btn { width: 100%; justify-content: center; }
.dedup-btn-merge { }
.dedup-btn-keep { color: #c83f2b; border-color: #f0c4bb; }
.dedup-btn-keep:hover { color: #c83f2b; border-color: #c83f2b; background: #fdf4f2; }

/* Stack the body band on narrow screens */
@media (max-width: 1100px) {
  .dedup-card-body { flex-direction: column; }
  .dedup-card-reason, .dedup-card-actions { border-left: none; border-top: 1px solid #eef1f4; }
  .dedup-card-actions { flex-direction: row; }
}

/* ── Extraction input row: source input + Extract button on one line ───────── */
/* Flex layout (not Bootstrap columns) so the button always stays on the input's
   line: the input area grows to fill, the button holds a fixed width. */
.extract-input-row { display: flex; align-items: flex-end; gap: 16px; }
.extract-input-col { flex: 1 1 auto; min-width: 0; }
/* Kill the default Shiny form-group bottom margins so the row aligns cleanly. */
.extract-input-col .form-group { margin-bottom: 0; }
.extract-input-col .input-group { margin-bottom: 0; }
/* The fileInput's progress bar sits BELOW the input box and hangs past it, so
   align-items:flex-end would drop the button below the box. Collapse the empty
   progress bar to zero height so the box is the control's true bottom edge; it
   expands normally during an actual upload. */
.extract-input-col .shiny-file-input-progress { height: 0; margin: 0; overflow: hidden; }
.extract-input-col .shiny-file-input-progress .progress-bar { min-height: 0; }
.extract-run-col { flex: 0 0 auto; }
.extract-run-col .btn-submit { min-width: 160px; white-space: nowrap; }

/* ── Extraction token summary ─────────────────────────────────────────────── */
.extract-status { margin-top: 12px; }
.extract-status-line { font-size: 12.5px; color: #6c757d; margin-bottom: 8px; }
.extract-token-row { display: flex; flex-wrap: wrap; gap: 8px; }
.extract-token-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 8px;
  background: #f5f7f9;
  border: 1px solid #e6eaee;
}
.extract-token-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a94a0;
}
.extract-token-value { font-size: 13px; font-weight: 600; color: #33414f; }
.extract-token-total { background: #eef4fb; border-color: #d3e2f2; }
.extract-token-total .extract-token-value { color: #0b233f; }

/* ── Extraction missing-required-field note ───────────────────────────────── */
.extract-missing {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  margin: 4px 0 14px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fce4c4;
  color: #8a5a12;
  font-size: 12.5px;
  font-weight: 500;
}
.extract-missing .fa { color: #c9821f; }


/* ═══════════════════════════════════════════════════════════════════════════
   Competition calendar — editorial list
   ---------------------------------------------------------------------------
   Design intent: this is a VIS-branded results sheet, not a dashboard of
   floating cards. One restrained accent (brand orange #F8991C) over the navy
   structure; sport shown as an editorial overline, not a coloured tag; rows
   read as a ruled list, with orange reserved for benchmark events.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --vis-navy:   #0c233f;
  --vis-navy-2: #16324f;
  --vis-orange: #f8991c;
  --vis-ink:    #1b2733;
  --vis-muted:  #6b7885;
  --vis-rule:   #e7ebef;
}

/* Month band — a strong, branded chapter heading. Bold condensed navy label,
   an orange tick to its left, a hairline running out to the event count. */
.cc-month-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0 2px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--vis-navy);
}
.cc-month-divider:first-child { margin-top: 4px; }
.cc-month-label {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-style: italic;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vis-navy);
  position: relative;
  padding-left: 15px;
}
.cc-month-label::before {   /* orange tick, echoing the logo mark */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 68%;
  background: var(--vis-orange);
}
.cc-month-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vis-muted);
  white-space: nowrap;
}

/* The list itself — ruled rows, no gaps, no floating cards. */
.cc-grid {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--vis-rule);
}

.cc-card {
  display: flex;
  align-items: stretch;
  background: transparent;
  border-top: 1px solid var(--vis-rule);
  transition: background 0.12s ease;
}
.cc-card:hover { background: #f6f8fa; }

/* Kill the old grid decorations. */
.cc-accent-bar { display: none; }

/* Date block — a tight stack, left of each row, carrying the SPORT colour: a
   coloured left edge, the month in that colour, the day as the hero italic.
   This is the one place per-sport colour lives, so the calendar stays scannable
   by sport without scattering colour across the row. */
.cc-chip {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  text-align: center;
}
.cc-card { --cc-sport: var(--vis-navy); }
.cc-chip-mon {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vis-muted);
}
.cc-chip-day {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vis-navy);
  margin: 1px 0;
}
.cc-chip-yr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #aab4bf;
}
.cc-chip-tbc .cc-chip-mon { color: var(--vis-muted); }
.cc-chip-tbc .cc-chip-day { color: #c3ccd4; font-style: normal; }

/* Row body — sport overline + title on the left, meta on the right. */
.cc-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.cc-body-main { flex: 1 1 auto; min-width: 0; }

/* Sport as a filled square pill in the sport's own colour — a fast visual
   anchor that ties back to the coloured date block. */
.cc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.cc-sport {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--cc-sport, var(--vis-navy));
  padding: 1px 5px;
  border-radius: 3px;
}
/* Benchmark marker — navy label with an orange star, set off by a rule so it
   reads as a distinct role from the orange sport overline beside it. */
.cc-benchmark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vis-orange);
  padding-left: 11px;
  border-left: 1px solid var(--vis-rule);
}
.cc-benchmark .fa { font-size: 9px; color: var(--vis-orange); }

.cc-title {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--vis-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta — dates over location, right-aligned, plain type with a middot rhythm.
   No icons: hierarchy and alignment carry it. */
.cc-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  max-width: 340px;
}
.cc-meta-dates {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vis-navy);
  white-space: nowrap;
}
.cc-meta-loc {
  font-size: 12px;
  color: var(--vis-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

/* Benchmark row — a whisper of warm tint across the row. The sport colour keeps
   the left date edge; the orange marker + star in the header do the flagging, so
   the two colour roles never collide. */
.cc-card.is-benchmark {
  background: linear-gradient(90deg, rgba(248,153,28,0.07) 0%, rgba(248,153,28,0.02) 45%, transparent 75%);
}
.cc-card.is-benchmark:hover {
  background: linear-gradient(90deg, rgba(248,153,28,0.11) 0%, #f6f8fa 55%);
}

/* Load more — a quiet left-aligned text control, not a centered CTA. */
.cc-loadmore {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 6px;
  padding-top: 4px;
}
.cc-loadmore-count {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vis-muted);
}
.cc-loadmore .btn,
.cc-loadmore .btn-outline {
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  color: var(--vis-navy) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--vis-orange) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-loadmore .btn:hover,
.cc-loadmore .btn-outline:hover { color: var(--vis-orange) !important; }
.cc-loadmore .btn .fa { color: var(--vis-orange); }

/* Empty state — restrained, on-brand. */
.cc-empty {
  text-align: center;
  padding: 56px 20px;
  border-top: 1px solid var(--vis-rule);
}
.cc-empty .fa { font-size: 26px; color: #cdd5dd; margin-bottom: 12px; }
.cc-empty > div { font-size: 14px; color: var(--vis-ink); font-weight: 600; }
.cc-empty-sub { margin-top: 4px; font-size: 12px !important; color: var(--vis-muted) !important; font-weight: 400 !important; }

@media (max-width: 720px) {
  .cc-body { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cc-meta { align-items: flex-start; text-align: left; }
  .cc-chip { flex-basis: 66px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Competition filter toolbar + collapsible panel
   ═══════════════════════════════════════════════════════════════════════════ */

.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* The toggle — a light outline button so it sits calmly on the canvas, with an
   orange funnel and a caret that flips when the panel is open. */
.filter-toggle-btn.btn,
.filter-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  background: #fff !important;
  color: var(--vis-navy) !important;
  border: 1px solid #dbe1e7 !important;
  border-radius: 6px !important;
  padding: 8px 15px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.filter-toggle-btn:hover {
  background: #fff !important;
  border-color: var(--vis-orange) !important;
}
.filter-toggle-btn:active { transform: translateY(1px); }
.filter-toggle-btn .fa-sliders { color: var(--vis-orange); }
.filter-toggle-btn .filter-caret {
  display: inline-flex;
  margin-left: 2px;
  transition: transform 0.25s ease;
  opacity: 0.7;
}
.filter-toggle-btn .filter-caret .fa { font-size: 10px; }
/* Open state — orange wash + rotated caret so it reads as "active". */
.filter-toggle-btn.is-open {
  background: var(--vis-orange) !important;
  color: var(--vis-navy) !important;
  box-shadow: 0 1px 0 rgba(180,110,10,0.35);
}
.filter-toggle-btn.is-open .fa-sliders { color: var(--vis-navy); }
.filter-toggle-btn.is-open .filter-caret { transform: rotate(180deg); opacity: 1; }

/* Active-filter chips shown inline in the toolbar. */
.filter-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2f6;
  color: var(--vis-navy);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
}
.filter-chip .fa { font-size: 10px; color: var(--vis-orange); }
.filter-chip-muted {
  background: transparent;
  color: #9aa4af;
  font-weight: 500;
  font-style: italic;
  padding-left: 2px;
}

.filter-toolbar-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vis-muted);
  white-space: nowrap;
}
.filter-toolbar-count .fa { display: none; }   /* drop the old magnifier icon */

/* The collapsible panel — a bordered card that slides open beneath the toolbar. */
.filter-panel {
  background: #fff;
  border: 1px solid var(--vis-rule);
  border-radius: 8px;
  margin-bottom: 34px;
  box-shadow: 0 10px 30px -16px rgba(12,35,63,0.28);
  /* No overflow clipping — the Sport dropdown must be free to open past the
     panel's bottom edge. */
}
/* A soft warm wash gives the panel some depth so it doesn't read as a flat
   white box. Matches the panel's rounded corners. */
.filter-panel-inner {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 20px 24px 22px;
  flex-wrap: wrap;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(248,153,28,0.05) 0%, rgba(248,153,28,0) 60%),
    #fff;
}
.filter-field { flex: 1 1 240px; min-width: 200px; display: flex; flex-direction: column; }
/* Zero the default Bootstrap form-group margin so the input sits flush at the
   bottom of its column and lines up with the Reset button. */
.filter-field .form-group,
.filter-field .shiny-input-container { margin-bottom: 0; }
.filter-field-reset { flex: 0 0 auto; min-width: 0; margin-left: auto; }
.filter-field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vis-navy);
  margin-bottom: 7px;
}
/* Orange tick before each field label, echoing the month bands. */
.filter-field-label::before {
  content: "";
  display: inline-block;
  width: 8px; height: 2px;
  background: var(--vis-orange);
  vertical-align: middle;
  margin-right: 7px;
  margin-top: -2px;
}
/* Reset field holds only the button; align-items:flex-end on the panel bottom-
   aligns it with the inputs. */
.filter-field-reset { flex: 0 0 auto; margin-left: auto; }
.filter-reset-btn.btn,
.filter-reset-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 37px;                      /* match the selectize / date input height */
  background: #fff !important;
  border: 1px solid var(--vis-rule) !important;
  color: var(--vis-navy) !important;
  border-radius: 6px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filter-reset-btn:hover {
  border-color: var(--vis-orange) !important;
  color: var(--vis-orange) !important;
  background: #fffaf2 !important;
}
.filter-reset-btn .fa { font-size: 11px; color: var(--vis-orange); }

/* The card wrapper around the list no longer needs its own chrome now that the
   filters have moved out — let the list sit flush on the page. */
.entry-card-flush {
  border: none !important;
  background: transparent !important;
}
.entry-card-flush .entry-card-body { padding: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Competitions hero with attached filter toolbar
   The toolbar sits in the hero footer (on navy), so the header flows straight
   into the calendar list with no disconnected grey gap between them.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-strip-attached {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0;
}
.hero-strip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 40px;
}

/* The toolbar row, restyled for the dark hero background. */
.filter-toolbar-hero {
  margin: 20px 0 0;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
/* Chips on navy: translucent light fill, white text. */
.filter-toolbar-hero .filter-chip {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.filter-toolbar-hero .filter-chip .fa { color: var(--vis-orange); }
.filter-toolbar-hero .filter-chip-muted {
  background: transparent;
  color: rgba(255,255,255,0.5);
}
/* Count on navy. */
.filter-toolbar-hero .filter-toolbar-count { color: rgba(255,255,255,0.55); }

/* Give the calendar list a little breathing room below the attached hero, and
   pull the whole page-content up snug against it. */
.hero-strip-attached + .page-content { padding-top: 22px; }

/* When the filter panel opens it should feel like it drops out of the hero:
   square its top corners and lose the top margin so it butts the hero edge. */
.hero-strip-attached + .page-content .filter-panel {
  margin-top: 0;
}

/* The toggle button on the navy hero: a light outline so it reads against the
   dark ground; opens to solid orange like before. */
.filter-toolbar-hero .filter-toggle-btn {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: none;
}
.filter-toolbar-hero .filter-toggle-btn:hover {
  background: rgba(255,255,255,0.16) !important;
}
.filter-toolbar-hero .filter-toggle-btn .fa-sliders { color: var(--vis-orange); }
.filter-toolbar-hero .filter-toggle-btn.is-open {
  background: var(--vis-orange) !important;
  color: var(--vis-navy) !important;
  border-color: var(--vis-orange) !important;
}
.filter-toolbar-hero .filter-toggle-btn.is-open .fa-sliders { color: var(--vis-navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   Filter summary label (replaces the small chips / count text)
   A bold, readable line next to the Filters button showing what's applied.
   ═══════════════════════════════════════════════════════════════════════════ */
.filter-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vis-navy);
}
.filter-summary-sport {
  color: var(--vis-orange);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.filter-summary-sep { color: #c3ccd4; font-weight: 400; }
.filter-summary-muted {
  color: var(--vis-muted);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Athlete page — profile header + year-by-year results timeline
   ═══════════════════════════════════════════════════════════════════════════ */

/* Athlete picker (sport + name) */
.athlete-picker {
  display: flex;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.athlete-picker-field { display: flex; flex-direction: column; }
.athlete-picker-field .form-group,
.athlete-picker-field .shiny-input-container { margin-bottom: 0; }
.athlete-picker-sport { flex: 0 1 240px; min-width: 200px; }
.athlete-picker-name  { flex: 1 1 360px; min-width: 260px; }

/* Empty state before an athlete is chosen. */
.ath-empty {
  text-align: center;
  padding: 60px 20px;
  border-top: 1px solid var(--vis-rule);
}
.ath-empty .fa { font-size: 30px; color: #cdd5dd; margin-bottom: 14px; }
.ath-empty > div { font-size: 14.5px; color: var(--vis-ink); font-weight: 600; }


/* ── Profile header — light, no panel, no rule. A full-width overline (sport
   left, categorisation right) above the athlete name. ── */
.ath-header {
  display: flex;
  flex-direction: column;
  padding: 6px 0 4px;
  margin-bottom: 0;
}

/* Overline spans the whole row: sport pinned left, categorisation pushed to
   the far right by the space-between. */
.ath-overline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vis-rule);
}
.ath-sport-over {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vis-orange);
}
.ath-category {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vis-muted);
  white-space: nowrap;
}
.ath-name {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--vis-navy);
}

/* Totals — orange numerals, muted labels, on the canvas. */
.ath-stats { display: flex; gap: 34px; flex-shrink: 0; padding-bottom: 3px; }
.ath-stat { text-align: center; }
.ath-stat-num {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--vis-orange);
}
.ath-stat-lbl {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vis-muted);
}

/* ── Year dividers — same band treatment as the calendar months. ── */
.ath-body { margin-top: 20px; }
.ath-year-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 0;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--vis-navy);
}
.ath-year-divider:first-child { margin-top: 6px; }
.ath-year-label {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-style: italic;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vis-navy);
  position: relative;
  padding-left: 15px;
}
.ath-year-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 68%;
  background: var(--vis-orange);
}
.ath-year-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vis-muted);
}

/* ── Results table — a real column grid. ── */
.ath-table { display: flex; flex-direction: column; }

/* Shared column grid: date · event · competition · phase · result · rank. */
.ar-row {
  display: grid;
  grid-template-columns: 78px minmax(150px, 1.1fr) minmax(180px, 1.6fr) 110px 110px 72px;
  align-items: center;
  gap: 16px;
  padding: 11px 8px;
  border-top: 1px solid var(--vis-rule);
}
.ath-table .ar-row:last-child { border-bottom: 1px solid var(--vis-rule); }
.ar-row:not(.ar-head):hover { background: #f6f8fa; }

/* Column-header row. */
.ar-head {
  border-top: none;
  padding-top: 6px;
  padding-bottom: 8px;
}
.ar-head .ar-c {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa4af;
}

/* Body cells — uniform across every column: same font, size, weight, colour.
   Only the header row and the rank alignment differ. */
.ar-c {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  color: var(--vis-ink);
}
.ar-c-rank { text-align: right; }

/* Phase shown as plain text like the rest, not a pill. */
.ar-phase { display: inline; }

@media (max-width: 820px) {
  .ath-header { align-items: flex-start; }
  .ath-stats { gap: 24px; }
  /* Collapse the table to date · event · result · rank on narrow screens. */
  .ar-row { grid-template-columns: 64px 1fr 90px 60px; gap: 12px; }
  .ar-c-comp, .ar-c-phase { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   All Results — filter panel + minimal month-grouped table
   (same clean grid as the Athlete page, with sport + athlete columns)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Count line above the table. */
.results-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 10px;
}
.results-count-num {
  font-family: 'Archivo', 'Funnel Sans', sans-serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 800;
  color: var(--vis-orange);
  line-height: 1;
}
.results-count-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vis-muted);
}

/* Sport pill — shared with the calendar/athlete pills. */
.rt-sport {
  display: inline-block;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Minimal grouped table. */
.arx-table { display: flex; flex-direction: column; }

.arx-row {
  display: grid;
  grid-template-columns:
    64px 110px minmax(120px, 1fr) minmax(130px, 1.2fr)
    minmax(160px, 1.5fr) 100px 90px 66px;
  align-items: center;
  gap: 16px;
  padding: 11px 8px;
  border-top: 1px solid var(--vis-rule);
}
.arx-table .arx-row:last-child { border-bottom: 1px solid var(--vis-rule); }
.arx-row:not(.arx-head):hover { background: #f6f8fa; }

/* Uniform body cells — same font, size, weight, colour across every column. */
.arx-c {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  color: var(--vis-ink);
}

/* Column-header row. */
.arx-head {
  border-top: none;
  padding-top: 6px;
  padding-bottom: 8px;
}
.arx-head .arx-c {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa4af;
}

@media (max-width: 960px) {
  /* Collapse to date · sport · athlete · result · rank on narrow screens. */
  .arx-row {
    grid-template-columns: 58px 100px minmax(110px,1fr) 90px 60px;
    gap: 12px;
  }
  .arx-c-event, .arx-c-comp, .arx-c-phase { display: none; }
}