/*
 * Statistics pages: only what is specific to them. Layout, navbar, banner, colours and fonts
 * come from the shared stylesheet (/shared/site.css).
 */
:root {
  --st-line: #e4e4e4;
  --st-sorted: #eef0fa;   /* sorted column: light tint of the purple accent */
  --win: #e3f1e5;
  --pay: #f8e4e4;
  --self: #fbf3dc;
}

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
table.stats, table.heat, table.hist, table.scores, table.details {
  width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; color: var(--text); background: #fff;
}
table.stats th, table.stats td, table.heat th, table.heat td, table.hist th, table.hist td,
table.scores th, table.scores td, table.details th, table.details td {
  padding: 5px 8px; border-bottom: 1px solid var(--st-line); text-align: left; white-space: nowrap; vertical-align: middle;
}
table.stats thead th, table.heat thead th, table.hist thead th, table.scores thead th, table.details thead th {
  background: #fff; color: var(--ink); font-weight: 700; vertical-align: bottom; border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 1;
}
table.stats thead th { white-space: normal; min-width: 4em; }
table.stats td, table.details td { text-align: right; }
table.stats td:first-child, table.details th { text-align: left; font-weight: 700; color: var(--ink); }
table.stats tbody tr:nth-child(even) td, table.details tbody tr:nth-child(even) td, table.details tbody tr:nth-child(even) th,
table.heat tbody tr:nth-child(even) td, table.heat tbody tr:nth-child(even) th { background: #fafafa; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--purple-dark); }
th.sortable::after { content: " \2195"; color: #b5b5b5; font-size: .9em; }
th.sorted-asc::after { content: " \25B2"; color: var(--purple); }
th.sorted-desc::after { content: " \25BC"; color: var(--purple); }
table.stats tbody tr:hover td { background: var(--grey-bg); }
table.stats td.sorted { background: var(--st-sorted) !important; color: var(--ink); font-weight: 700; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

details { margin: 12px 0; }
details > summary { cursor: pointer; color: var(--purple-dark); margin: 6px 0; }
details > summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button {
  font: 400 12px/1.5 Montserrat, sans-serif; letter-spacing: 2px; text-transform: uppercase;
  padding: 7px 16px; border: 1px solid var(--purple); border-radius: 0; background: #fff; color: var(--purple-dark); cursor: pointer;
}
.tabs button:hover { background: var(--st-sorted); }
.tabs button[aria-selected="true"] { background: var(--purple); color: #fff; }
.chart-box { position: relative; height: 460px; background: #fff; padding: 12px 0; }
@media (max-width: 640px) { .chart-box { height: 340px; padding: 4px 0; } }

table.heat td { text-align: center; min-width: 2.6em; }
table.heat th.rot { text-align: left; font-weight: 400; color: var(--ink); background: #fff; }

table.hist td { text-align: left; vertical-align: top; white-space: normal; min-width: 7.5em; color: var(--muted); font-size: 12px; line-height: 1.4; }
table.hist td b { color: var(--ink); font-size: 13px; }
table.hist td.r { white-space: nowrap; color: var(--ink); font-size: 13px; font-weight: 700; background: #fafafa; }
table.hist i { display: none; font-style: normal; font-size: 11px; }
table.hist.more i { display: block; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 12px; }
.toolbar label { font-weight: 400; color: var(--text); margin: 0; }
input[type=search] { padding: 7px 12px; border: 1px solid #cfcfcf; border-radius: 0; font: inherit; min-width: 15em; background: #fff; }
input[type=search]:focus { border-color: var(--purple); outline: 0; box-shadow: 0 0 0 3px rgba(128, 128, 190, .2); }

table.scores td { text-align: right; }
table.scores td.win { background: var(--win); font-weight: 700; color: var(--ink); }
table.scores td.self { background: var(--self); font-weight: 700; color: var(--ink); }
table.scores td.pay { background: var(--pay); }
table.scores td.out { color: #bbb; }
table.scores td.fans { text-align: left; white-space: normal; color: var(--muted); font-size: 12px; min-width: 14em; }
table.scores tbody th { color: var(--ink); font-weight: 700; background: #fafafa; }
table.scores tr.wind-start td, table.scores tr.wind-start th { border-top: 2px solid #c8c8c8; }
table.scores tfoot td, table.scores tfoot th { font-weight: 700; background: var(--grey-bg); color: var(--ink); }

.msg { padding: 12px 16px; margin: 10px 0 20px; border-left: 4px solid var(--line); background: var(--grey-bg); }
.msg.ok { color: #2e5e35; background: var(--green-100); border-left-color: var(--green); }
.msg.err { color: var(--red-dark); background: #fbecec; border-left-color: var(--red); }
form.upload { display: grid; gap: 14px; max-width: 34em; margin: 22px 0; }
form.upload input[type=file] { display: block; margin-top: 8px; font: 400 15px Lato, sans-serif; }
form.upload button { justify-self: start; }