:root { color-scheme: light dark; } /* browser-drawn parts (scrollbars, controls) follow the mode too */
body { background-color: #ffffff; color: #333333; }
@media (prefers-color-scheme: dark) {
  body { background-color: #242424; color: #f5f5f5; }
  h1, h2, h3, th { color: #dddddd; }
  a { color: #8ab4f8; }
  a:visited { color: #c58af9; }
  #ruleModal { background: #242424; color: #f5f5f5; }
  #ruleModal button { color: #f5f5f5; }
  #ruleModal > div { border-bottom-color: #444 !important; } /* overrides its inline #ddd */
}
h1, h2, h3, th { font-family: sans-serif; }
h3 { overflow-wrap: anywhere; } /* some sender names have no spaces; on a phone they must still wrap */
.leaderboard { margin-left: 30px; }
.leaderboard table { border-collapse: collapse; }
/* Two tables stacked as one list, the second's header hidden, until the page
   is wide enough for both side by side. 1180px = 2 x ~543px table (Sender at
   350px) + 30px gap + 30px indent + margins, with a little slack; revisit it
   if the column widths change. */
.leaderboard table + table tr:first-child { display: none; }
@media (min-width: 1180px) {
  .leaderboard .columns { display: flex; align-items: flex-start; column-gap: 30px; }
  .leaderboard table + table tr:first-child { display: table-row; }
}
.leaderboard tr:nth-child(even) { background: #eee; }
@media (prefers-color-scheme: dark) {
  .leaderboard tr:nth-child(even) { background: #333333; }
}
/* Widths on every cell, not just the header, so the second table matches the
   first even with its header row hidden. */
.leaderboard :is(th, td):nth-child(1) { width: 40px; }
.leaderboard :is(th, td):nth-child(2) { width: 350px; }
.leaderboard :is(th, td):nth-child(3) { width: 46px; }
.leaderboard :is(th, td):nth-child(4) { width: 63px; }
.leaderboard td:nth-child(2) { overflow-wrap: anywhere; } /* some sender names have no spaces */
.leaderboard th, .leaderboard td { padding-right: 10px; }
.leaderboard td:is(:nth-child(1), :nth-child(3), :nth-child(4)) { text-align: center; }