/* A board (ranked, or practice: everyone's best run): a parts list in a framed panel, headed by a label. The
   record's place is red and the viewer's own row is washed in red; the
   delta to the record is orange ("behind"). On the run page it sits over the
   drawing, above the title block; on its own page it is centred on the sheet
   under the challenge's title block and the CAD filter. */
@layer components {
  .board {
    container-type: inline-size;
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-panel);
    font-variant-numeric: tabular-nums;
  }

  .board__head {
    padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 1.5);
    border-block-end: var(--rule-width) solid var(--color-hairline);
    color: var(--color-ink-dim);
    font-stretch: var(--stretch-normal);
    line-height: var(--leading);
  }

  /* The panel's head names the board, so the column heads stay quiet, and
     the hairline under the last row would double the panel's edge. */
  .board__list {
    th {
      color: var(--color-ink-dim);
    }

    tbody tr:last-child td {
      border-block-end: 0;
    }

    .board__behind,
    .board__time {
      text-align: end;
    }

    th:first-child,
    td:first-child {
      inline-size: 4ch;
      padding-inline-end: 0;
    }
  }

  .board__behind,
  .board__time {
    white-space: nowrap;
  }

  .board__behind {
    color: var(--color-behind);
  }

  .board__time {
    font-weight: var(--weight-bold);
  }

  .board__place--record {
    color: var(--color-accent);
    font-weight: var(--weight-bold);
  }

  /* A handle is a name, linked to the runner's profile: it stays whole (20
     characters at most), and the CAD program goes on its own line under it. On a phone the cells pad less,
     so the longest handle fits beside the gap and the time. */
  .board__runner {
    white-space: nowrap;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .board__cad {
    display: block;
    color: var(--color-ink-dim);
    font-size: var(--text-xs);
  }

  @container (width < 30rem) {
    .board__list {
      th,
      td {
        padding-inline: calc(var(--inline-space) * 0.75);
      }
    }
  }

  .board__run--own {
    background-color: var(--color-accent-wash);

    .board__runner {
      font-weight: var(--weight-bold);
    }
  }

  /* Proof, on a ranked run: a link to its video, or, in the top three
     without one, UNVERIFIED in the "not it" orange, its word saying it. */
  .board__unverified {
    color: var(--color-behind);
  }

  .board__video {
    font-size: var(--text-xs);
  }

  .board__you {
    margin-inline-start: calc(var(--inline-space) * 0.5);
  }

  /* The run page, cleared in the top three: the ask for a video, over the
     list. */
  .board__proof {
    display: grid;
    gap: calc(var(--block-space) * 0.5);
    padding: calc(var(--block-space) * 0.625) calc(var(--inline-space) * 1.5);
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  .board__proof-ask {
    font-size: var(--text-sm);
  }

  .board__empty,
  .board__more {
    padding: calc(var(--block-space) * 0.625) calc(var(--inline-space) * 1.5);
    font-size: var(--text-sm);
  }

  .board__empty {
    color: var(--color-ink-dim);
  }

  .board__more {
    border-block-start: var(--rule-width) solid var(--color-hairline);
    text-align: end;
  }

  /* The board's own page. */
  .board-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--block-space) * 1.5);
    padding: calc(var(--block-space) * 2) calc(var(--inline-space) * 2);

    > * {
      inline-size: min(100%, 48rem);
    }
  }

  .board-page__challenge {
    margin-block-start: calc(var(--block-space) * 0.5);
    font-size: var(--text-sm);
  }

  /* The tabs (ranked, practice) over the CAD filter, split by a hairline. */
  .board-page__controls {
    display: grid;
    gap: calc(var(--block-space) * 0.5);
  }

  /* The tabs and the CAD filter: plain links that wrap. The current one is
     boxed in ink (as the pressed theme is), not red: red on a board is the
     record. */
  .board-page__filter {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--block-space) * 0.25) calc(var(--inline-space) * 0.5);
    font-size: var(--text-xs);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-medium);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
  }

  /* After the filter's rule, so the tabs' larger size wins. */
  .board-page__tabs {
    padding-block-end: calc(var(--block-space) * 0.5);
    border-block-end: var(--rule-width) solid var(--color-hairline);
    font-size: var(--text-sm);
  }

  .board-page__cad {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--inline-space);
    border: var(--rule-width) solid transparent;
    color: var(--color-ink-dim);
    text-decoration: none;

    &[aria-current] {
      border-color: var(--color-rule);
      color: var(--color-ink);
    }
  }

  /* The global board (/leaderboards): the same panel, with the scoring rule
     under its title. */
  .leaderboard__rule {
    max-inline-size: 60ch;
    margin-block-start: calc(var(--block-space) * 0.5);
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }
}