/* dinks & volleys — lo-fi score + recap system
   North star: plaintextsports.com
   Page column: 64ch. Boxes sit inside it.
   Two templates: tennis.html, pickleball.html — do not stretch one <pre>.
   Round field is 4ch (R128). Tiebreak: loser set is 6(4). Dreambreaker: recap only.
   Match H1 is the result line, 15px regular — not a magazine hed.
   Date pager: /all/YYYY-MM-DD/. Hubs: /tennis/ /pickleball/. Trailing slashes.
*/

:root, body.light {
  --bg: #fff;
  --fg: #000;
  --red: red;
  --blue: blue;
  --gray: gray;
  --odd: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --fg: #fff;
    --red: #ff5050;
    --blue: #9090ff;
    --gray: #9a9a9a;
    --odd: #202020;
  }
}

body.dark {
  --bg: #101010;
  --fg: #fff;
  --red: #ff5050;
  --blue: #9090ff;
  --gray: #9a9a9a;
  --odd: #202020;
}

* { box-sizing: border-box; }

body {
  margin: 8px auto;
  max-width: 64ch;
  padding: 0 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Courier New", Courier, monospace;
  font-size: 15px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--fg);
}

a.nav, .nav {
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
}

.wordmark {
  font-weight: 400;
  color: var(--fg);
  text-decoration: none;
}

.meta, .date-nav, .jumps, .box, .ticker {
  font-size: 13px;
  line-height: 1.25;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1ch;
}

.date-nav { margin: 1em 0 0.5em; }
.date-nav .today { font-weight: 700; text-align: center; flex: 1; }
.date-nav .nav { flex: 1; }
.date-nav .nav.right { text-align: right; }

.jumps { text-align: center; margin: 0.5em 0 1em; }

/* ASCII box: preformatted, spans for color/weight only */
.box {
  margin: 0 0 1em;
  white-space: pre;
  font-variant-ligatures: none;
  tab-size: 8;
}

.box a { color: inherit; text-decoration: none; }

.live { color: var(--red); font-weight: 700; }
.win  { font-weight: 700; }
.lose { color: var(--gray); }

h1.result, .result { font-size: 15px; font-weight: 400; margin: 0.75em 0; }
.recap  { margin: 0 0 0.75em; }
.gear   { color: var(--gray); margin: 0 0 1.5em; }

.ticker { margin: 0 0 1.25em; white-space: pre-wrap; }
.ticker .line { display: block; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--fg);
  opacity: 0.25;
  margin: 1.25em 0;
}

/* dark/light toggle — same trick as PTS */
.toggle input { display: none; }
.toggle label { color: var(--blue); cursor: pointer; }
.toggle input:checked ~ .toggle-on { display: none; }
.toggle input:not(:checked) ~ .toggle-off { display: none; }

.empty { color: var(--gray); margin: 0 0 1.25em; }
h1 { font-size: 15px; font-weight: 700; margin: 1em 0 0.5em; }
.foot { margin: 2em 0 1em; font-size: 13px; }