/* ---- On Top of Spaghetti ----
   The controls and the division picker are Elbow Room's own classes, read from
   elbow-room.css, so they look and behave the same on both pages. What is here
   is the chart. Line colors are the teams' and are set by the script, measured
   against --plane; everything else is a token, so both themes follow. */

.br { margin: 0 0 8px; }
/* The average slider has one handle, so it is narrower than the years'. */
.eb-range.br-one { width: min(130px, 30vw); }
/* The division chips of the highlight control: Elbow Room's chips, in a row. */
.br-divs { display: flex; flex-wrap: wrap; gap: 4px; }
.br-svg { display: block; width: 100%; height: auto; overflow: visible; }

.br-rank, .br-year { fill: var(--ink-muted); font: 11px var(--sc-text); font-variant-numeric: tabular-nums; }
.br-rank { text-anchor: end; }
.br-year { text-anchor: middle; }

.br-grid { stroke: var(--grid); stroke-width: 1; }
.br-line { fill: none; stroke-width: 2.4; stroke-linecap: round; }
/* Ties a logo standing off in its column back to the point it belongs to. */
.br-lead { fill: none; stroke-width: 1; opacity: .7; }
/* The hover target: the whole line, wide and invisible. */
.br-reach { fill: none; stroke: transparent; stroke-width: 12; }
.br-dot { stroke: var(--plane); stroke-width: 1.2; }
.br-hit { fill: transparent; }
.br-team { cursor: pointer; }

/* A logo sits in a disc of the page's own surface, ringed in the team color. */
.br-disc { fill: var(--surface); stroke-width: 2; }
/* A face sits on the gray of MLB's studio backdrop -- the median of the
   backdrops their uncut photos were taken against, #a8acb2 -- so a cut-out
   reads as a portrait and an older uncut photo meets a ground near its own. */
.br-face .br-disc { fill: #a8acb2; }

/* The picked team: its own place among the teams its crowd wants to see. */
.br-me .br-line { stroke-width: 4; }

/* A pinned or hovered team stays; the rest fade. */
.br-hover .br-team:not(.br-on) { opacity: .14; }
.br-pin .br-line { stroke-width: 3.4; }

/* A career: drawn over the faded teams, in each team's color in turn. */
.br-player .br-line { stroke-width: 3.6; }
.br-player .br-missed { stroke-dasharray: 2 5; }
/* His name, haloed in the page's ground so a line through it stays legible. */
.br-pname { fill: var(--ink); font: 700 12px var(--sc-text); paint-order: stroke;
  stroke: var(--plane); stroke-width: 3px; stroke-linejoin: round; }

/* The player search: the Batted Ball Finder's box and list, on this page's
   tokens. */
.br-find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.br-combo { position: relative; width: min(240px, 70vw); }
.br-combo input { width: 100%; background: var(--surface); border: 1px solid var(--ring);
  border-radius: 6px; padding: 7px 10px; font: 13.5px var(--sc-text); color: var(--ink); }
.br-combo input:disabled { color: var(--ink-muted); }
.br-combo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.br-combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 244px; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); padding: 4px; margin: 0; list-style: none;
  min-width: 300px; }
.br-combo-list[hidden] { display: none; }
.br-combo-list li { padding: 5px 8px; border-radius: 5px; font-size: 13px; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-combo-list li.at, .br-combo-list li[data-pi]:hover { background: var(--row-hover); }
.br-combo-list li .meta { float: right; margin-left: 10px; font-size: 11px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; }
.br-combo-list li.none { color: var(--ink-muted); cursor: default; font-size: 11.5px; }

@media (max-width: 640px) {
  .br-line { stroke-width: 1.8; }
  .br-me .br-line, .br-pin .br-line { stroke-width: 3; }
  .br-player .br-line { stroke-width: 3; }
  .br-year { font-size: 10px; }
}

/* Retrosheet's notice, which its license asks to be shown with the data */
.br-credit { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.br-credit a { color: inherit; }