/* /stats: the 40L speed page. The Coach stats stylesheet is loaded too, for
   the window picker and the shared table look; this file adds the sprint
   cards, the PPS chart and the loss breakdown. */

body.page-stats { --mode: var(--mino-I); }

.stats-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.stats-tabs a {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 700;
  text-decoration: none;
}

.stats-tabs a:hover {
  color: var(--text);
}

.stats-tabs a.is-active {
  border-color: var(--mode-line);
  background: var(--mode-faint);
  color: #fff;
}

.speed-body {
  display: grid;
  gap: 1.2rem;
}

.speed-body.is-loading {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.speed-notice p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}

/* The headline figures: same glass as a panel, a little shorter. */

.speed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
}

.speed-card {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--mode-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 38%,
      rgba(255, 255, 255, 0) 38.5%),
    linear-gradient(180deg, #1d1e23 0%, #141518 100%);
}

.speed-card-label {
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.speed-card-value {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.speed-card-sub {
  min-height: 1.1rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-min);
}

.speed-card-link {
  justify-self: start;
  margin-top: 0.15rem;
  color: var(--accent-strong);
  font-size: var(--text-min);
  text-decoration: none;
}

.speed-card-link:hover {
  text-decoration: underline;
}

.speed-panel {
  min-width: 0;
}

.speed-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.speed-panel-head .panel-title {
  margin-bottom: 0.4rem;
}

.speed-panel-head p {
  margin: 0 0 0.6rem;
  font-size: var(--text-min);
}

.speed-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--muted);
  font-size: var(--text-min);
}

.speed-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.speed-key::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--accent-strong);
}

.speed-key-pb::before {
  width: 0.9rem;
  height: 2px;
  border-radius: 0;
  background: var(--mino-O, #f59e0b);
}

.speed-key-daily::before {
  width: 0.9rem;
  height: 2px;
  border-radius: 0;
  background: #7dd3fc;
}

.speed-key-dot::before {
  opacity: 0.5;
}

.speed-key-band::before {
  width: 0.9rem;
  height: 0.55rem;
  border-radius: 2px;
  background: color-mix(in srgb, #7dd3fc 35%, transparent);
}

.speed-key-out::before {
  background: transparent;
  border: 1px solid var(--muted);
}

/* The PB chart: time on the y-axis, lower is better. */

.pb-sub {
  margin: 0 0 0.5rem;
  font-size: var(--text-min);
}

.pb-chart {
  position: relative;
  width: 100%;
  min-height: 240px;
}

.pb-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pb-grid {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.09;
}

.pb-tick {
  fill: var(--muted);
  font-size: var(--text-min);
  font-variant-numeric: tabular-nums;
}

.pb-line {
  fill: none;
  stroke: var(--mino-O, #f59e0b);
  stroke-width: 2.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pb-band {
  fill: color-mix(in srgb, #7dd3fc 13%, transparent);
}

.pb-run {
  fill: var(--accent-strong);
  stroke: #0b0d12;
  stroke-width: 0.7;
  opacity: 0.45;
  cursor: pointer;
  outline: none;
}

.pb-run:hover,
.pb-run:focus {
  opacity: 1;
  stroke: #fff;
  stroke-width: 1.2;
}

.pb-dot {
  fill: var(--mino-O, #f59e0b);
  stroke: #0b0d12;
  stroke-width: 1;
  cursor: pointer;
  outline: none;
}

.pb-dot:hover,
.pb-dot:focus {
  stroke: #fff;
  stroke-width: 1.6;
}

.pb-dot.is-start {
  fill: transparent;
  stroke: var(--mino-O, #f59e0b);
}

/* The speed chart */

.pps-band {
  fill: color-mix(in srgb, #7dd3fc 18%, transparent);
}

.pps-chart {
  position: relative;
  width: 100%;
  min-height: 320px;
}

.pps-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pps-grid {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.09;
}

.pps-tick {
  fill: var(--muted);
  font-size: var(--text-min);
  font-variant-numeric: tabular-nums;
}

.pps-pb {
  fill: none;
  stroke: var(--mino-O, #f59e0b);
  stroke-width: 2.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pps-daily {
  fill: none;
  stroke: #7dd3fc;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.95;
  vector-effect: non-scaling-stroke;
}

.pps-dot {
  fill: var(--accent-strong);
  stroke: #0b0d12;
  stroke-width: 0.8;
  opacity: 0.45;
  cursor: pointer;
  outline: none;
}

.pps-dot:hover,
.pps-dot:focus {
  opacity: 1;
  stroke: #fff;
  stroke-width: 1.4;
}

.pps-dot.is-pb {
  fill: var(--mino-O, #f59e0b);
  opacity: 1;
}

.pps-dot.is-excluded {
  fill: transparent;
  stroke: var(--muted);
  stroke-width: 1.1;
  opacity: 0.28;
}

.pps-day {
  fill: #7dd3fc;
  stroke: #0b0d12;
  stroke-width: 0.7;
  opacity: 0.55;
  cursor: pointer;
  outline: none;
}

.pps-day:hover,
.pps-day:focus {
  opacity: 1;
  stroke: #fff;
}

.pps-tip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 0.12rem;
  width: 11.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--mode-line);
  border-radius: 0.5rem;
  background: rgba(14, 16, 21, 0.97);
  box-shadow: 0 12px 28px -12px #000;
  color: var(--muted);
  font-size: var(--text-min);
  pointer-events: none;
}

.pps-tip strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* The loss breakdown: a diverging bar around the PB pace. */

.loss-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin-bottom: 0.6rem;
  color: var(--muted);
  font-size: var(--text-min);
}

.loss-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.loss-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
}

.loss-legend-note {
  margin-left: auto;
  opacity: 0.8;
}

.loss-chart {
  display: grid;
  gap: 0.38rem;
}

.loss-game {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(8rem, 1fr) 4.2rem;
  gap: 0.7rem;
  align-items: center;
  font-size: var(--text-min);
}

.loss-game-label {
  color: var(--muted);
  white-space: nowrap;
}

.loss-game-time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.loss-game-track {
  position: relative;
  display: flex;
  height: 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.loss-zero {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  z-index: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.loss-game-half {
  display: flex;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.loss-game-half.is-neg {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.loss-game-half.is-pos {
  flex-direction: row;
  justify-content: flex-start;
}

.loss-seg {
  height: 100%;
  min-width: 0;
}

.loss-game-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.loss-game-total.is-ahead {
  color: #4ade80;
}

.loss-game-total.is-behind {
  color: #f87171;
}

.loss-note {
  margin: 0.7rem 0 0;
  font-size: var(--text-min);
}

/* Whole dates, even when the table has to scroll on a phone. */

.top-date {
  white-space: nowrap;
}

.replay-link {
  color: var(--accent-strong);
  text-decoration: none;
}

.replay-link:hover {
  text-decoration: underline;
}

.speed-method p {
  max-width: 70ch;
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: var(--text-min);
}

.speed-method p:last-child {
  margin-bottom: 0;
}

tr.is-excluded td {
  color: var(--muted);
}

@media (max-width: 640px) {
  .loss-game {
    grid-template-columns: 7.5rem 1fr 3.6rem;
    gap: 0.45rem;
    font-size: var(--text-min);
  }

  .pps-chart {
    min-height: 250px;
  }
}