/* The QuickDraft Index: a late-'90s home page (mockup B). Browser defaults, mostly. The cream page sits
   in a charcoal surround (owner, 2026-10-29), like a fixed-width page on a dark background tile. */

html { background: #2b2b2b; }
body {
  max-width: 640px;
  margin: 16px auto;
  padding: 4px 16px 12px;
  border: 3px outset #888;
  background: #fffff0;
  color: #000;
  font: 16px 'Times New Roman', Times, serif;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
h1 { text-align: center; font-size: 28px; margin: 8px 0 4px; color: #800000; }
/* the site's header on every page (Craig, 2026-10-31): its name (the front page's title), what it is
   and where to go; a page's own title (h1) comes under it */
.site-name { text-align: center; font-size: 36px; font-weight: bold; margin: 8px 0 4px; color: #800000; }
.site-name a, .site-name a:visited { color: #800000; text-decoration: none; }
h2 { font-size: 22px; color: #800000; }
hr { border: 0; border-top: 2px groove #aaa; margin: 18px 0; }
.center { text-align: center; }
.pick, .on { font-weight: bold; }
a.on { color: #000; text-decoration: none; }

table.ladder { margin: 12px auto; border: 3px outset #bbb; border-spacing: 2px; background: #fff; }
.ladder th, .ladder td { border: 1px inset #bbb; padding: 2px 10px; }
.ladder th { background: #ffffcc; }
.ladder .num { text-align: right; }
/* a goal picked on the score chart: its row in the goals' list lit up yellow, fading over 1.5 s (match.js) */
tr.flash td { animation: flash 1.5s ease-out; }
@keyframes flash { from { background: #ffff66; } to { background: transparent; } }

.msg { text-align: center; color: #666; }
.updated, .small { font-size: 13px; }
address { text-align: center; font-size: 13px; }
h3 { font-size: 17px; margin: 14px 0 4px; }
.warn { color: #800000; font-weight: bold; }

/* the Index's tables: wide ones scroll inside the column; headings that sort; the winners and the
   page's own player in bold */
#board, #recent, #with, #against, #as-captain, #drafted-by { overflow-x: auto; }
.ladder th.sort { cursor: pointer; text-decoration: underline dotted; }
.ladder td.won, .ladder a.me { font-weight: bold; }
/* a team's totals under its players (match.js playTable) */
.ladder tr.total td { font-weight: bold; background: #f4f4e8; }
.ladder th, .ladder td { white-space: nowrap; }
.ladder td.team { white-space: normal; }
/* a table of many columns (a player's recent games): smaller, to fit the column */
table.ladder.wide { font-size: 14px; }
.ladder.wide th, .ladder.wide td { padding: 2px 5px; }

/* the MMR chart (chart.js): white like the tables, in a beveled box, with a yellow tooltip */
.chartbox { position: relative; width: fit-content; max-width: 100%; margin: 8px auto; border: 3px outset #bbb; background: #fff; }
/* a box with no chart in it (nothing to draw yet, e.g. an empty league's Rank Race) isn't a 6 px bevelled square */
.chartbox:empty { display: none; }
.chartbox svg { display: block; max-width: 100%; height: auto; }
/* the dotted focus outline for the keyboard only (the arrow keys step through a chart), never after a click (Craig, 2026-10-31) */
.chartbox svg:focus { outline: none; }
.chartbox svg:focus-visible { outline: 1px dotted #000; }
.chart text { font-family: 'Times New Roman', Times, serif; fill: #333; }
.chart .tick { font-size: 12px; }
.chart .axis { font-size: 13px; fill: #666; }
.chart .end { font-size: 13px; font-weight: bold; fill: #800000; }
.tip { position: absolute; padding: 2px 5px; background: #ffffe1; border: 1px solid #000; font-size: 13px; white-space: nowrap; pointer-events: none; }

/* the other charts (chart.js): names at the lines' ends in ink, and a key's swatches */
.chart .label { font-size: 12px; fill: #333; }
svg.swatch { vertical-align: -1px; }
.scroll, #by-region { overflow-x: auto; }
/* a match's clip, embedded from UBClips: 640 wide and 4:3, narrowing with the page (match.js clipEmbed) */
/* a goal's clip beside its link while the pointer is on it (match.js peekShow) */
.goal-peek { position: absolute; z-index: 10; width: 360px; max-width: calc(100vw - 16px); aspect-ratio: 4 / 3; border: 3px outset #bbb; background: #000; }
.goal-peek iframe { display: block; width: 100%; height: 100%; border: 0; }
iframe.clip { display: block; width: 640px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 8px auto; border: 3px outset #bbb; background: #000; }

/* a win percentage, shaded red below 50%, gray around it and blue above (the number stays in the cell) */
.ladder td.pct0 { background: #f0b4ad; }
.ladder td.pct1 { background: #f8dcd8; }
.ladder td.pct2 { background: #ececec; }
.ladder td.pct3 { background: #d6e1f8; }
.ladder td.pct4 { background: #a9c1f2; }

/* a player's last 10 results (player.js formSection): a box a game, shaded as the win percentages are */
a.form { display: inline-block; width: 18px; margin: 0 1px; border: 1px solid #888; color: #000; font-weight: bold; text-align: center; text-decoration: none; }
a.form.win { background: #a9c1f2; }
a.form.loss { background: #f0b4ad; }
/* how often a final score happened (stats.js scoresSection): one hue, light to dark */
.ladder td.heat1 { background: #f6e7d9; }
.ladder td.heat2 { background: #ecc9b8; }
.ladder td.heat3 { background: #d99a85; }
.ladder td.heat4 { background: #c0634f; color: #fff; }
.ladder td.heat5 { background: #8a1f15; color: #fff; }
/* a percentile as a bar (player.js styleSection) */
td.barcell { width: 164px; }
.bar { display: inline-block; width: 160px; height: 11px; border: 1px solid #999; background: #ececec; vertical-align: middle; }
.bar > span { display: block; height: 100%; background: #800000; }
/* the overrated-or-underrated meter: -100 at the left, 100 at the right, the middle marked */
.meter { position: relative; width: 320px; max-width: 100%; height: 14px; margin: 0 auto; border: 2px inset #ccc; background: #ececec; }
.meter > .mid { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed #999; }
.meter > .fair { position: absolute; top: 0; bottom: 0; background: #dcdcdc; }
.meter > .mark { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #800000; }
/* the scouting report: a meter a row between its two ends, the verdict after */
table.scout { margin: 0 auto; border-collapse: collapse; }
table.scout td { padding: 4px 6px; vertical-align: middle; }
table.scout td.end { white-space: nowrap; font-size: 14px; }
table.scout td.right { text-align: left; }
table.scout td.end:first-child { text-align: right; }
table.scout td.verdict { font-style: italic; white-space: nowrap; font-size: 12px; color: #444; }
table.scout .meter { width: 240px; }

/* the league's records: small tables two to a row, the wide ones across */
.cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
/* a record's table scrolls in its own box (common.js scrolls), its heading staying put */
.record { min-width: 0; }
.record h3 { text-align: center; }
.record table.ladder { margin: 4px auto 8px; }
.wide-record { grid-column: 1 / -1; }

/* a match's page: the score, an upset, and the odds' bar (Red's chance and Blue's) */
.score { text-align: center; font-size: 28px; font-weight: bold; margin: 8px 0 4px; }
.upset { color: #800000; font-weight: bold; }
.chart text.split { font-size: 14px; font-weight: bold; fill: #fff; }

/* the environment's label on top of every page but production's (common.js): staging, the public preview,
   this computer */
.env-bar { margin: 0 0 10px; padding: 5px 12px; text-align: center; font-size: 14px; font-weight: bold; border-bottom: 2px groove #aaa; }
.env-bar.env-staging { background: #ffd8a8; }
.env-bar.env-preview { background: #ffff99; }
.env-bar.env-local { background: #dcdcdc; }

/* Phones: keep a strip of charcoal down the sides too. */
@media (max-width: 700px) {
  body { margin: 8px; padding: 4px 8px 12px; }
  .ladder th, .ladder td { padding: 2px 5px; white-space: nowrap; }
  .cols { grid-template-columns: 1fr; }
  /* the scouting report on a phone: shorter meters and tighter cells, so a row fits the screen */
  table.scout .meter { width: 72px; }
  table.scout td { padding: 3px 3px; }
  table.scout td.end { font-size: 12px; }
  table.scout td.verdict { font-size: 11px; }
}