/* Leaderboard.
 *
 * Almost everything here is already in dashboard.css — .panel, .metric, .chip,
 * .btn, .pair, .table-scroll and the type scale. This file adds only what a
 * ranked table needs and nothing else, because a page that brings its own
 * palette stops being part of the product and starts being a page that happens
 * to sit inside it.
 *
 * No radius, no shadows, no gradients: the rest of the dashboard is built from
 * one-pixel borders and space, and a leaderboard is not a more important screen
 * than the one showing what an owner holds.
 */

/* The four figures above the table. Same shape as the holdings column's
   .metric, repeated across a row rather than stacked. */
.lb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #bac3ac;
}

.lb-stats > div {
  padding: 22px;
  border-right: 1px solid #bac3ac;
}

.lb-stats > div:last-child {
  border-right: 0;
}

.lb-stats .metric {
  padding: 0;
}

/* Ranks line up as numbers, so they are read as a column rather than as
   eight separate labels. */
.lb-rank {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  color: #6c7663;
  width: 1%;
  white-space: nowrap;
}

/* The top three are marked by weight, not by colour. Three different colours
   for three adjacent rows would be the only place on the site where colour is
   decoration rather than meaning. */
.lb-rank.lead {
  color: #4c622f;
  font-weight: 600;
}

/* The owner's own row, when they are on the board. The one thing a reader is
   looking for should not have to be found by reading every name. */
tr.lb-you td {
  background: #e8ebdf;
}

tr.lb-you td:first-child {
  box-shadow: inset 2px 0 0 #768143;
}

.lb-tag {
  font-weight: 550;
}

.lb-address {
  display: block;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  color: #717c65;
  margin-top: 5px;
}

@media (max-width: 1150px) {
  .lb-stats {
    grid-template-columns: 1fr 1fr;
  }
  .lb-stats > div:nth-child(2n) {
    border-right: 0;
  }
  .lb-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid #bac3ac;
  }
}

@media (max-width: 750px) {
  .lb-stats {
    grid-template-columns: 1fr;
  }
  .lb-stats > div {
    border-right: 0;
    border-bottom: 1px solid #bac3ac;
    padding: 18px;
  }
  .lb-stats > div:last-child {
    border-bottom: 0;
  }
}