/* ECL Sports Data — shared styles */

:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #f0f2ee;
  --border: #dce0d8;
  --text: #1b2019;
  --text-dim: #5c665a;
  --accent: #1f6b4a;
  --accent-soft: #e3efe8;
  --accent-text: #14512f;
  --gold: #a97514;
  /* Chart series. Validated with the dataviz palette checker against this
     surface: lightness band, chroma floor, CVD separation (ΔE 12.5 deutan),
     normal-vision floor (21.2) and contrast all pass. */
  --chart-winner: #b87f04;
  --chart-focus: #c1032f;
  --radius: 10px;
  --sidebar-w: 288px;
  --header-h: 60px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12150f;
    --surface: #1a1e16;
    --surface-2: #22271e;
    --border: #333a2d;
    --text: #e9ece5;
    --text-dim: #9aa694;
    --accent: #4caf80;
    --accent-soft: #1e2c23;
    --accent-text: #7fd3a6;
    --gold: #d9a441;
    /* Dark steps are selected, not flipped: re-validated against #1a1e16
       (ΔE 9.5 deutan, 18.7 normal, contrast pass). */
    --chart-winner: #a87708;
    --chart-focus: #ef5a74;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent-text); }

code, .mono { font-family: var(--mono); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  /* The wordmark yields before the header can overflow. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav {
  margin-left: auto;
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-dim);
  text-decoration: none;
}

.site-nav a:hover { background: var(--surface-2); color: var(--text); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }

.sidebar-toggle {
  display: none;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- browse layout ---------- */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 18px 14px 40px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sidebar h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.field input,
.field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.field input:focus,
.field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; margin-bottom: 0; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.track-list { margin: 0; padding: 0; list-style: none; }

.track-group + .track-group { margin-top: 2px; }

.track-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.track-toggle:hover { background: var(--surface-2); }
.track-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }

.chev {
  flex: none;
  width: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.track-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }

.track-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

.date-list { margin: 2px 0 6px; padding: 0 0 0 20px; list-style: none; }

.date-list a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
}

.date-list a:hover { background: var(--surface-2); color: var(--text); }

.date-list a.active {
  background: var(--accent);
  color: #fff;
}

.date-list a.active .races { color: rgba(255, 255, 255, 0.8); }

.races { font-size: 11px; }

.race-list { margin: 2px 0 6px; padding: 0 0 0 14px; list-style: none; }

.race-list a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 9px;
  border-radius: 6px;
  border-left: 2px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
}

.race-list a:hover { background: var(--surface-2); color: var(--text); }

.race-list a.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.no-dates {
  padding: 5px 9px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
}

.hidden { display: none !important; }

/* ---------- browse main ---------- */

.main { padding: 26px 28px 64px; min-width: 0; }

.crumbs {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.main h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.main .meta { margin: 0 0 24px; color: var(--text-dim); font-size: 14px; }

.main h2.block,
.main h3.block {
  margin: 28px 0 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.main h3.block { margin: 20px 0 10px; }

.crumbs a { color: inherit; }
.warn-text { color: var(--gold); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 -1px;
  border-bottom: 1px solid var(--border);
}

.tab {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-dim);
  text-decoration: none;
}

.tab:hover { color: var(--text); background: var(--surface-2); }

.tab.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent-text);
}

.tab-body {
  padding: 20px 0 0;
}

/* ---------- data tables ---------- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

table.data th,
table.data td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

table.data thead th {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

table.data thead th small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }

table.data .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data .name { font-weight: 550; white-space: nowrap; }
table.data .cum { color: var(--text-dim); }
table.data .best { color: var(--accent-text); font-weight: 650; }

table.data tr.winner .name { color: var(--gold); font-weight: 700; }
table.data tr.dnf td { color: var(--text-dim); font-style: italic; }
table.data tr.foot td {
  background: var(--surface-2);
  font-weight: 600;
  border-top: 1px solid var(--border);
}

.badge.warn {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- prose ---------- */

.summary {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
}

.para {
  margin: 0 0 12px;
  max-width: 78ch;
  font-size: 14px;
  color: var(--text-dim);
}

.para b { color: var(--text); }

.note {
  margin: 12px 0 0;
  max-width: 84ch;
  font-size: 12px;
  color: var(--text-dim);
}

/* ---------- key/value blocks ---------- */

dl.shape {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
}

dl.shape div {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

dl.shape dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

dl.shape dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- horse runs ---------- */

.file-card dl.shape,
.file-card .para,
.file-card .table-wrap,
.file-card .note,
.file-card h3.block { margin-left: 16px; margin-right: 16px; }

.file-card .table-wrap { border-radius: 8px; }

.run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.run-head b { font-size: 15px; }
.run-head a { color: inherit; text-decoration: none; }
.run-head a:hover { text-decoration: underline; }

.horse-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

.horse-link:hover { background: var(--surface-2); }
.horse-link.active { background: var(--accent); color: #fff; }
.horse-link.active .pill { background: rgba(255, 255, 255, 0.2); color: #fff; }

.file-card {
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.file-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }

.mini {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}

.mini:hover { background: var(--surface-2); }

.mini .size {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
}

.empty {
  padding: 40px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-dim);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.result {
  display: block;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}

.result:hover { border-color: var(--accent); }
.result b { display: block; font-size: 15px; }
.result span { font-size: 13px; color: var(--text-dim); }

/* ---------- report page thumbnails ---------- */

.pages {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-thumb {
  flex: none;
  width: 172px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.page-thumb:hover { border-color: var(--accent); color: var(--text); }

.page-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.page-thumb .cap {
  display: block;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.page-thumb .cap b { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

.page-thumb.is-chart { border-color: var(--accent); }
.page-thumb.is-chart .cap b { color: var(--accent-text); }

/* ---------- full-screen report viewer ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0c0f0a;
  color: #eef1ea;
}

.viewer[hidden] { display: none; }

.viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #2b3226;
}

.viewer-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.viewer-title strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title span { flex: none; font-size: 12px; color: #9aa694; }
.viewer-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.viewer-tools .mini {
  background: #1a1e16;
  border-color: #333a2d;
  color: #eef1ea;
}

.viewer-tools .mini:hover { background: #252b1f; }
.viewer-tools .mini[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.viewer-stage {
  position: relative;
  min-height: 0;
}

/* The image box fills the stage exactly and letterboxes its contents, with
 * padding keeping the page clear of the arrows. Two things do not work here: a
 * max-width/max-height pair (the percentage height resolves against an
 * indefinite grid area, so tall pages overflow into the strip) and inset alone
 * (a replaced element with auto width takes its intrinsic size instead). */
.viewer-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 14px 62px;
  box-sizing: border-box;
  object-fit: contain;
  cursor: zoom-in;
}

/* Zoomed: the page renders at its rendered pixel size and the stage scrolls,
 * which is the only way a landscape chart is readable on a phone. */
.viewer-stage.is-zoomed { overflow: auto; -webkit-overflow-scrolling: touch; }

.viewer-stage.is-zoomed img {
  position: static;
  width: auto;
  height: auto;
  max-width: none;
  padding: 0;
  cursor: zoom-out;
}

.viewer-nav {
  position: absolute;
  top: 50%;
  /* Above the image, which fills the whole stage and would otherwise swallow
   * clicks on whichever arrow it paints over. */
  z-index: 2;
  transform: translateY(-50%);
  width: 42px;
  height: 62px;
  border: 1px solid #333a2d;
  border-radius: 8px;
  background: rgba(12, 15, 10, 0.72);
  color: #eef1ea;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.viewer-nav:hover { background: rgba(31, 107, 74, 0.9); }
.viewer-nav:disabled { opacity: 0.3; cursor: default; }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }

.viewer-strip {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-top: 1px solid #2b3226;
  scrollbar-width: thin;
}

.viewer-strip button {
  flex: none;
  width: 104px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.viewer-strip img { width: 100%; height: auto; border-radius: 4px; opacity: 0.55; }
.viewer-strip button:hover img { opacity: 0.85; }
.viewer-strip button[aria-current="true"] { border-color: var(--accent); }
.viewer-strip button[aria-current="true"] img { opacity: 1; }

@media (max-width: 700px) {
  .site-header { gap: 10px; padding: 0 14px; }
  .site-nav a { padding: 6px 9px; font-size: 13px; }
  .tab { padding: 8px 11px; font-size: 13px; }
  .main h1 { font-size: 21px; }
  .viewer-bar { padding: 8px 10px; gap: 8px; }
  .viewer-tools { gap: 6px; }
  .viewer-tools .mini { padding: 5px 9px; font-size: 12px; }
  /* Tap-to-zoom replaces the full-size link on small screens. */
  #viewer-full { display: none; }
  .viewer-nav { width: 34px; height: 52px; font-size: 20px; }
  .viewer-stage img { padding: 10px 42px; }
  .viewer-strip { padding: 8px 10px; }
  .viewer-strip button { width: 76px; }
  .viewer-title strong { font-size: 13px; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: min(320px, 88vw);
    z-index: 15;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  }
  .sidebar[hidden] { display: none; }
  .sidebar-toggle { display: block; }
  .main { padding: 20px 16px 56px; }
}


/* ---------- velocity profile chart ---------- */

.chart-wrap {
  position: relative;
  margin: 0 0 18px;
  padding: 12px 14px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.chart { display: block; width: 100%; height: auto; }

.c-grid { stroke: var(--border); stroke-width: 1; }
.c-tick, .c-axis-line { stroke: var(--border); stroke-width: 1; }
.c-cross { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.c-axis { fill: var(--text-dim); font-family: var(--mono); font-size: 10px; }
.c-unit { font-size: 9px; letter-spacing: 0.04em; }

/* Field lines are recessive by design — the gray is not a category. */
.c-series .c-line {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.42;
}

.c-series .c-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

.c-series.is-winner .c-line { stroke: var(--chart-winner); stroke-width: 2.5; opacity: 1; }

.c-dot {
  fill: var(--chart-winner);
  stroke: var(--surface);
  stroke-width: 2;
}

.c-series.is-focus .c-line { stroke: var(--chart-focus); stroke-width: 2.5; opacity: 1; }
.c-series.is-focus .c-dot { fill: var(--chart-focus); }
.c-series.is-dim .c-line { opacity: 0.18; }
.c-series.is-dim.is-winner .c-line { opacity: 0.5; }

.c-label {
  fill: var(--chart-winner);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
}

.c-tip {
  position: absolute;
  transform: translate(-50%, -180%);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  pointer-events: none;
}

.chart-wrap figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.c-key { display: inline-flex; align-items: center; gap: 6px; }

.c-key i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-dim);
  opacity: 0.42;
}

.c-key i.k-win { background: var(--chart-winner); opacity: 1; }
.c-note { flex: 1 1 260px; min-width: 0; }

/* ---------- expandable result rows ---------- */

.row-more {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}

.row-more:hover { background: var(--surface-2); color: var(--text); }
.row-more[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }

table.data tr.comment td { background: var(--surface-2); }

table.data tr.comment .para {
  display: block;
  margin: 0;
  max-width: 92ch;
  white-space: normal;
  font-size: 13px;
}

table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover { background: var(--accent-soft); }