/* ============================================================
   Western Reining Leaderboard — styles
   ============================================================
   The prototype relied on CSS variables (--color-*, --font-sans)
   supplied by its host environment. Standalone, those variables
   don't exist — so we define our own defaults in :root below.
   When this gets embedded in the association's site, the theme
   can be re-skinned by overriding just these variables.
   ============================================================ */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Dark theme matched to the association's Squarespace site */
  --color-background:     #3e3d3d;  /* site main background */
  --color-accent:         #8e7462;  /* site contrast color — active buttons, highlights */
  --color-accent-text:    #ffffff;

  --color-text-primary:   #f0efed;
  --color-text-secondary: #b3b0ab;
  --color-text-tertiary:  #7d7a76;

  --color-border-primary:   #6a6764;
  --color-border-secondary: #575553;
  --color-border-tertiary:  #4c4a48;

  --color-background-secondary: #4a4846;

  --border-radius-md: 6px;
  --border-radius-lg: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-text-primary);
  padding: 1rem;
  font-size: 13px;
}

/* Visually hidden but readable by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Association header art on a light card (dark logo needs light backing) */
.header-banner {
  background: #f5f3ef;
  border-radius: var(--border-radius-lg);
  padding: 10px 18px;
  margin: 0 auto 1rem;
  max-width: 560px;
}
.header-banner img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Header block is centered; nav and tables stay left-aligned */
h1 { font-size: 20px; font-weight: 500; margin-bottom: 3px; text-align: center; }

.subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Error banner — hidden unless the live data fetch fails */
.data-banner {
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 1rem;
  border: 0.5px solid #7a4a4a;
  border-radius: var(--border-radius-md);
  background: #4a2f2f;
  color: #e8b4b4;
  word-break: break-all;
}

/* ---------- Navigation (class + level button rows) ---------- */

/* Each nav row = a small label ("Class" / "Level") + its button row */
.nav-row { display: flex; gap: 10px; margin-bottom: .75rem; }
#levelRow { margin-bottom: 1.25rem; }

.nav-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  min-width: 42px;   /* both labels same width so button rows align */
  padding-top: 6px;  /* optically centers the label on the first button row */
}

.class-nav, .level-nav { display: flex; flex-wrap: wrap; gap: 6px; }

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.row-count { font-size: 12px; color: var(--color-text-secondary); }

.nav-btn {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-secondary);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all .12s;
}
.nav-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.nav-btn.active {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight: 500;
}

/* ---------- Detail / Year-end view toggle ---------- */

.view-toggle {
  display: flex;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.view-btn {
  font-size: 12px;
  padding: 5px 13px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all .12s;
}
.view-btn:hover { background: var(--color-background-secondary); }
.view-btn.active {
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 500;
}
.view-btn + .view-btn { border-left: 0.5px solid var(--color-border-secondary); }

/* ---------- Table ---------- */

/* overflow:auto gives horizontal scrolling on narrow screens instead of
   squishing the wide detail table — key part of the mobile strategy */
.table-wrap {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: auto;
}

/* table-layout:fixed + explicit <colgroup> widths (set in render.js) is what
   keeps the two-row header perfectly aligned with the data columns */
table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  table-layout: fixed;
}

th {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: right;
  padding: 7px 10px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}
th.l { text-align: left; }
th.c { text-align: center; }

td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  vertical-align: middle;
  border-right: 0.5px solid var(--color-border-tertiary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
td:last-child { border-right: none; }
tr:last-child td { border-bottom: none; }
td.l { text-align: left; }

/* Rider name leads; horse name secondary beneath it */
.rider { font-weight: 500; font-size: 13px; }
.horse { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }

/* ---------- Rank badges: gold / silver / bronze / plain ---------- */

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
}
.r1 { background: #FAC775; color: #412402; }
.r2 { background: #D3D1C7; color: #2C2C2A; }
.r3 { background: #F5C4B3; color: #4A1B0C; }
.rn { background: transparent; color: var(--color-text-secondary); }

/* ---------- Status treatments ---------- */

/* 65+ rider (may hold the saddle horn) — from trailing "+" in the sheet */
.senior-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 0.5px solid var(--color-border-secondary);
  margin-left: 4px;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
}

.dnq-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 0.5px solid var(--color-border-tertiary);
  margin-left: 4px;
  color: var(--color-text-tertiary);
}

.participation { font-size: 12px; color: var(--color-text-secondary); }

/* Non-participation: dimmed dash */
.empty { color: var(--color-text-tertiary); }

/* Dropped (low score): struck through — visually distinct from non-participation */
.dropped { text-decoration: line-through; color: var(--color-text-tertiary); }

/* Zero score (competed, no points): shown normally but placement is a dash */

.totals-sep { border-left: 0.5px solid var(--color-border-secondary) !important; }

.show-grp-hdr {
  text-align: center !important;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-text-secondary);
  border-right: 0.5px solid var(--color-border-secondary);
}
.show-grp-blank { border-bottom: 0.5px solid var(--color-border-tertiary); }

/* ---------- Green as Grass progress view ---------- */

.gag-caption { font-size: 12px; color: var(--color-text-secondary); padding: 10px 12px 2px; }
.gag-warning { font-size: 12px; color: #e8b4b4; padding: 8px 12px 0; }

/* Progress bar toward the 50-point graduation */
.gag-bar-track {
  height: 10px;
  border-radius: 99px;
  background: var(--color-background-secondary);
  overflow: hidden;
  min-width: 120px;
}
.gag-bar-fill { height: 100%; background: var(--color-accent); border-radius: 99px; }
.gag-bar-fill.grad { background: #FAC775; }  /* gold once graduated */

.grad-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #FAC775;
  color: #412402;
  margin-left: 6px;
  font-weight: 600;
}
/* Crossed 50 this season — the buckle to-do list */
.grad-pill.new {
  background: #412402;
  color: #FAC775;
  border: 1px solid #FAC775;
}

/* Archive of riders not seen recently — native collapsible element */
details.gag-archive { padding: 4px 12px 12px; }
details.gag-archive summary { cursor: pointer; font-size: 12px; color: var(--color-text-secondary); padding: 6px 0; }