/* results_splits.css — splits modal and table */
/* ── Splits modal ── */
.splits-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.splits-overlay.open { opacity: 1; pointer-events: all; }
.splits-sheet {
  background: var(--white); border-radius: 24px 24px 0 0;
  width: 100%; max-width: 900px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateY(60px);
  transition: transform .28s cubic-bezier(.34,1.1,.64,1);
  max-height: 92dvh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
.splits-overlay.open .splits-sheet { transform: translateY(0); }
.splits-header {
  padding: 18px 22px 14px;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.splits-header-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.splits-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 800; color: var(--text);
  letter-spacing: 0.02em; line-height: 1;
}
.splits-club { font-size: 13px; color: var(--text-soft); margin-top: 3px; }
.splits-stats { display: flex; gap: 20px; margin-top: 12px; }
.splits-stat { display: flex; flex-direction: column; gap: 2px; }
.splits-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; color: var(--orange); line-height: 1;
}
.splits-stat-val.place-1 { color: #B8860B; }
.splits-stat-val.place-2 { color: #9E9E9E; }
.splits-stat-val.place-3 { color: #8B4513; }
.splits-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
}
.splits-close {
  background: var(--surface2); border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 14px; color: var(--text-mid);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.splits-close:hover { background: var(--border); }
.splits-view-toggle {
  display: flex; background: rgba(0,0,0,0.08);
  border-radius: 20px; padding: 2px; gap: 2px;
}
.splits-toggle-btn {
  border: none; border-radius: 18px; padding: 5px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  background: none; color: var(--text-mid);
  -webkit-tap-highlight-color: transparent;
}
.splits-toggle-btn.active {
  background: var(--white); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.splits-graph-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--orange); border: none; border-radius: 20px;
  padding: 6px 14px; color: white;
  font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.splits-graph-btn:hover { opacity: .85; }

.class-finisher-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
  background: var(--surface2);
  border-radius: 10px; padding: 1px 7px;
  letter-spacing: 0.02em;
}

.class-splits-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--orange-dim); border: 1.5px solid var(--orange-border);
  border-radius: 20px; padding: 3px 9px; color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.class-splits-btn:hover { background: var(--orange); color: white; }
.class-splits-btn:hover svg { stroke: white; }

/* ── Splits table ── */
.splits-table {
  border-collapse: collapse; min-width: max-content; width: 100%;
}
.splits-table .row-label {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface2);
  border-right: 2px solid var(--border);
  white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
  text-align: left;
}
.splits-table thead th {
  background: var(--surface2);
  padding: 8px 14px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  width: 76px; min-width: 76px;
}
.splits-table thead th.ctrl-num { color: var(--orange); font-size: 13px; }
.splits-table thead th.final-col { background: var(--orange-dim); color: var(--orange); }
.splits-table thead th.row-label-th {
  position: sticky; left: 0; z-index: 4;
  border-right: 2px solid var(--border);
  text-align: left; padding: 8px 16px;
}
.splits-table td {
  text-align: center;
  border-right: 1px solid var(--border);
  vertical-align: middle; white-space: nowrap;
  min-width: 76px;
}
.splits-table td.final-col { background: var(--orange-dim); }
.th-seq {
  font-size: 13px; font-weight: 800; color: var(--orange); line-height: 1;
}
.th-code {
  font-size: 10px; font-weight: 600; color: var(--text-soft);
  margin-top: 2px; letter-spacing: 0;
}
.splits-table thead th.final-col .th-seq,
.splits-table thead th.final-col .th-code { color: var(--orange); }
.splits-row-overall td,
.splits-row-overall .row-label {
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
  vertical-align: middle;
}
.splits-row-leg td,
.splits-row-leg .row-label {
  padding: 9px 14px;
  vertical-align: middle;
}
.splits-row-leg td { border-bottom: none; }
.sc-time {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--text); line-height: 1;
}
.sc-time.best-leg { color: #2A9D5C; font-weight: 800; }
.sc-time.sc-unsynced { color: #cc8800; font-size: 18px; cursor: default; }
.sc-place-row {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 3px;
}
.sc-place { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.sc-place.p1 { color: #B8860B; }
.sc-place.p2 { color: #9E9E9E; }
.sc-place.p3 { color: #8B4513; }
.sc-arrow { font-size: 10px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; gap: 1px; }
.sc-arrow.gain { color: #2A9D5C; }
.sc-arrow.loss { color: #E84040; }

/* ── Graph overlay ── */