/* Shares the design tokens of the baseball-records web app deliberately: the
   two are siblings over different data and should look it. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #0b3d2e;
  --green-light: #14523e;
  --cream: #faf7f0;
  --ink: #1c1c1c;
  --muted: #6b6b62;
  --accent: #b8442c;
  --line: #ddd8cc;
  --row-alt: #f3efe4;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.45;
}

/* The padding lives on .bar, not on header, so that .bar's content box lines
   up with main's: both are a 1100px box with 1.5rem inside it. Padding the
   header instead leaves the nav 24px to the left of every table on the page. */
header { background: var(--green); color: #f5f1e6; padding: 1.2rem 0 0; }
header .bar { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
header h1 { font-size: 1.6rem; letter-spacing: .02em; }
header h1 a { color: inherit; text-decoration: none; }
header .sub { color: #c9d6c5; font-size: .85rem; margin-top: .15rem; }

nav#tabs { margin-top: .9rem; display: flex; gap: .25rem; flex-wrap: wrap; }
nav#tabs a {
  color: #e8e4d5; text-decoration: none;
  padding: .45rem .95rem; border-radius: 6px 6px 0 0; font-size: .95rem;
}
nav#tabs a.active { background: var(--cream); color: var(--green); font-weight: bold; }
nav#tabs a:not(.active):hover { background: var(--green-light); }

main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 2.5rem; }

a { color: var(--green); }
a:hover { color: var(--accent); }

.controls { display: flex; gap: .9rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.controls label { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
input, select, button {
  font-family: inherit; font-size: 1rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
input[type="search"] { width: min(420px, 90vw); }
button { background: var(--green); color: #fff; border: none; cursor: pointer; padding: .5rem 1.2rem; }
button:hover { background: var(--green-light); }

h2 { font-size: 1.35rem; margin: .8rem 0 .3rem; color: var(--green); }
h3 { font-size: 1.05rem; margin: .85rem 0 .25rem; color: var(--green); }
.note { color: var(--muted); font-size: .82rem; margin: .2rem 0 .45rem; }
.crumb { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.crumb a { text-decoration: none; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: .7rem; }
/* Dense on purpose: a box score is a table you scan down, and generous row
   padding turns nine batters into a page of scrolling. */
table { border-collapse: collapse; width: 100%; font-size: .88rem; line-height: 1.25; }
th, td { padding: .17rem .5rem; text-align: right; white-space: nowrap; }
th:first-child, td:first-child, th.l, td.l { text-align: left; }
thead th { background: var(--green); color: #f0ecdf; position: sticky; top: 0; font-weight: normal; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: #eaf0e4; }
tr.totals td { border-top: 2px solid var(--green); font-weight: bold; background: #eef2e6; }
td.num { font-variant-numeric: tabular-nums; }

/* line score. The wrapper is what scrolls: an extra-innings game is 20-odd
   columns wide and would otherwise push the whole page sideways on a phone,
   taking the meta grid and every table with it. */
.linescore-wrap { overflow-x: auto; max-width: 100%; margin-bottom: 1rem; }
.linescore { display: inline-block; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.linescore table { width: auto; }
.linescore td, .linescore th { padding: .2rem .45rem; text-align: center; min-width: 1.6rem; }
.linescore td.team { text-align: left; padding-right: 1.2rem; font-weight: bold; }
.linescore td.rhe { font-weight: bold; background: var(--row-alt); }
.linescore th.rhe { background: var(--green-light); }

/* game header */
.gamehead { display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .3rem; }
.gamehead .score { font-size: 1.5rem; }
.gamehead .score .win { font-weight: bold; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .2rem .9rem; font-size: .85rem; margin-bottom: 1rem; }
.meta-grid .k { color: var(--muted); }

.pill { display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px;
        background: var(--green); color: #fff; vertical-align: middle; margin-left: .35rem; }
.pill.alt { background: var(--accent); }
.pill.quiet { background: #cfcabb; color: #4a463d; }

/* A pill that is a link is the one you are meant to press -- the way into a
   game. It sits first in the row, so it loses the inherited left margin. */
a.pill { text-decoration: none; margin-left: 0; }
a.pill:hover, a.pill:focus-visible { background: var(--accent); color: #fff; }
a.pill.quiet:hover, a.pill.quiet:focus-visible { background: var(--muted); color: #fff; }

/* A man who came into a place someone else started in, indented the way a
   box score indents him. */
.sub { display: inline-block; padding-left: 1.4rem; }

.result-W { color: var(--green); font-weight: bold; }
.result-L { color: var(--accent); }

/* The box-score notes. The label column is wide enough for "Batters faced"
   so the values line up down the page rather than stepping in and out. */
ul.events { list-style: none; font-size: .88rem; line-height: 1.35; margin-bottom: .75rem; }
ul.events li { padding: .04rem 0; display: flex; gap: .6rem; align-items: baseline; }
ul.events .k { color: var(--muted); flex: 0 0 7.5rem; }
@media (max-width: 600px) {
  ul.events li { display: block; }
  ul.events .k { display: block; font-size: .78rem; }
}

/* ------------------------------------------------------------- the calendar
   A season laid out a month to a grid. The months flow rather than sit in a
   fixed number of columns, because a season is anywhere from four months
   (1871's tail) to twelve (1926, which played on into December). */
.calendar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1.1rem 1.5rem; margin-bottom: .3rem;
}
.cal-month h4 {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .25rem; padding-bottom: .15rem; border-bottom: 1px solid var(--line);
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.cal-month h4 i { font-style: normal; color: var(--muted); font-size: .78rem; }
/* minmax(0, 1fr), not 1fr: a bare 1fr track refuses to shrink below its
   content, and "16" set bold in a cell is wider than a seventh of a narrow
   month. The tracks then push the grid past the page and take the legend and
   the footer sideways with them. min-width on the month is the same guard one
   level up. */
.cal-month { min-width: 0; }
.cal-dow, .cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
}
.cal-dow span { text-align: center; font-size: .62rem; color: var(--muted); line-height: 1.8; }

.cal-day {
  position: relative; aspect-ratio: 1 / .92; min-height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.cal-day .dnum {
  position: absolute; top: 1px; left: 3px; line-height: 1;
  font-size: .55rem; color: var(--muted); opacity: .8;
}
/* The glyph is the answer -- the number of games, or W/L/T. The tint only
   repeats it, so a reader who cannot separate the tints loses nothing. */
.cal-day .glyph { font-size: .78rem; font-weight: bold; line-height: 1; }
/* Small enough for the three letters of the eleven tripleheaders on record. */
.cal-day.dh .glyph { font-size: .55rem; letter-spacing: .02em; }
.cal-day.pad { visibility: hidden; }
.cal-day.off {
  border-color: var(--line);
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(107,107,98,.09) 3px 4px);
}
.cal-day.off .dnum { opacity: .45; }
button.cal-day { cursor: pointer; }
button.cal-day:hover { border-color: var(--green); }
button.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-day.sel { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); z-index: 1; }

/* Fixed thresholds: 1–2, 3–5, 6–8, 9–11, 12+ games in the day. */
.b1 { background: #e8eee6; color: #33513f; border-color: #dbe4d8; }
.b2 { background: #c8dacb; color: #29483a; border-color: #b9cebd; }
.b3 { background: #9cbfa7; color: #1c3c2d; border-color: #8db399; }
.b4 { background: #5f8d77; color: #f2f6f0; border-color: #547f6b; }
.b5 { background: #23543f; color: #f2f6f0; border-color: #1b452f; }
.b4 .dnum, .b5 .dnum { color: #dfe8dc; opacity: .8; }

/* Won, lost, tied -- the same green and rust the schedules and the pitching
   decisions already use, so a result reads the same wherever it appears. */
.r-W { --res: #d8e5da; background: var(--res); color: var(--green); border-color: #c3d6c8; }
.r-L { --res: #f2dcd4; background: var(--res); color: #96331f; border-color: #e6c9bf; }
.r-T { --res: #e6e2d6; background: var(--res); color: #55534a; border-color: #d8d3c4; }

/* A doubleheader split one apiece is half the day's colour and half the
   other's; filling it with the first game's would call the afternoon a win. */
.cal-day.dh {
  background: linear-gradient(90deg, var(--res) 0 50%, var(--res2, var(--res)) 50%);
  color: var(--ink); border-color: var(--line);
}
.cal-day.dh2-W { --res2: #d8e5da; }
.cal-day.dh2-L { --res2: #f2dcd4; }
.cal-day.dh2-T { --res2: #e6e2d6; }

.cal-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  font-size: .75rem; color: var(--muted); margin: .9rem 0 .2rem;
}
.cal-key .key-item { display: flex; align-items: center; gap: .28rem; }
.cal-key .key-sw {
  width: 18px; height: 15px; border-radius: 2px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: bold;
}
.cal-key .key-sw.off { background: var(--row-alt); border-color: var(--line); }

/* The park filter, which has no select because it is arrived at rather than
   chosen. Shaped like the controls beside it so it reads as one of them, with
   the cross that takes it off.

   The line-height is here to match a select's height, having inherited the
   body's 1.45 and stood 40px against their 37. `normal` overshot the other
   way at 35: a select reserves about 1.3em for its content box, where normal
   gives Georgia about 1.15. Measured in Chrome, so call it within a pixel
   elsewhere -- the padding, border and font-size are already identical, and
   this is the only thing left that differs. */
.parkfilter {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1rem; line-height: 1.3; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.parkfilter a {
  text-decoration: none; color: var(--muted); font-weight: bold;
  line-height: 1; font-size: 1.05rem;
}
.parkfilter a:hover, .parkfilter a:focus-visible { color: var(--accent); }

.gamelist { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.gamelist h3 { margin-top: 0; }

/* One month to a row on a phone. Two would fit, at about 24px a cell, and a
   24px target is not one you can hit with a thumb. */
@media (max-width: 600px) {
  .calendar { grid-template-columns: 1fr; gap: 1.1rem; }
}

.empty { color: var(--muted); padding: 1.2rem 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1.5rem; }

footer { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 2.5rem; color: var(--muted); font-size: .8rem; }
footer p { margin-bottom: .5rem; }

@media (max-width: 600px) {
  main { padding: 1rem .75rem 2rem; }
  header { padding: 1rem 0 0; }
  header .bar { padding: 0 .75rem; }
  footer { padding: 0 .75rem 2rem; }
  table { font-size: .82rem; }
  .gamehead { gap: .35rem; }
  .gamehead .score { font-size: 1.15rem; }
  .meta-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

h4 { font-size: .95rem; margin: .7rem 0 .2rem; color: var(--green); }

/* Pitching decisions, coloured to match the W/L used on a team schedule. */
.pill.win  { background: var(--green); color: #fff; }
.pill.loss { background: var(--accent); color: #fff; }
.pill.save { background: #4a6fa5; color: #fff; }

h5 { font-size: .88rem; margin: .55rem 0 .15rem; color: var(--muted); font-weight: normal; }

/* Play by play. The shorthand sits beside the English rather than under it:
   it is what Retrosheet recorded, and it is all there is where the parser
   has nothing to say. */
.play { display: grid; grid-template-columns: 12rem 1fr auto; gap: .5rem;
  padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.play .pbp-raw { color: var(--muted); font-size: .78rem; white-space: nowrap; }
@media (max-width: 40rem) {
  .play { grid-template-columns: 1fr; gap: .1rem; }
  .play .pbp-raw { justify-self: start; }
}