/* Surface-specific layout. Tokens live in tokens.css; nothing here invents a
   colour or a spacing value that is not a multiple of --u. */
main > h1 { font-family: var(--face-display); font-size: var(--s-h1); font-weight: 600;
            letter-spacing: -0.01em; margin: 0 0 4px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin-top: 12px; }
.controls label { display: flex; flex-direction: column; gap: 4px;
                  font-size: var(--s-cap); color: var(--t3); }

/* ---- Projections: the decision board ---- */
#slate { max-width: 880px; }   /* a ranked list does not want 1240px of gutter */
#board { list-style: none; margin: 12px 0 0; padding: 0; }
#board li + li { margin-top: 2px; }
/* a counting mark for long lists: space does the separating, the
   number just says where you are. */
.ranktick { display: flex; align-items: center; gap: 8px; margin-top: 14px !important;
            padding: 0 10px 4px; }
.ranktick span { font-family: var(--face-data); font-size: var(--s-cap); color: var(--t4); }
.ranktick::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule-soft); }
.pick { display: grid; grid-template-columns: 24px minmax(140px, 260px) 56px minmax(160px, 1fr);
        gap: 0 12px; align-items: center; width: 100%; text-align: left; background: none;
        border: 0; color: inherit; font: inherit; padding: 6px 10px; cursor: pointer;
        border-radius: var(--r-ctl); min-height: 44px; }
.pick:hover { background: var(--wash); }
.pick .rank { font-family: var(--face-data); font-size: var(--s-cap); color: var(--t4); text-align: right; }
.pick .who { font-weight: 500; }
.pick .meta { font-family: var(--face-data); font-size: var(--s-cap); color: var(--t3); }
.pick .pts { font-family: var(--face-data); font-variant-numeric: tabular-nums;
             font-size: var(--s-h3); font-weight: 600; }
.pick .bar { grid-column: 4; }
@media (max-width: 720px) {
  .pick { grid-template-columns: 24px minmax(0,1fr) 56px; }
  .pick .bar { grid-column: 2 / -1; margin-top: 4px; }
}
table.noscore th.sc, table.noscore td.sc { display: none; }
/* Explore's columns are given their widths so the band -- the only column whose
   width means anything -- absorbs the slack, and the name does not drift away
   from the position beside it. */
#tbl th:nth-child(1), #tbl td:nth-child(1) { width: 220px; }
#tbl th:nth-child(2), #tbl td:nth-child(2) { width: 64px; }
#tbl th:nth-child(3), #tbl td:nth-child(3) { width: 56px; }
#tbl th:nth-child(4), #tbl td:nth-child(4) { width: 72px; padding-right: 16px; }
#tbl th:nth-child(6), #tbl td:nth-child(6),
#tbl th:nth-child(7), #tbl td:nth-child(7) { width: 84px; }
#tbl th:nth-child(5), #tbl td:nth-child(5) { width: 300px; }
#tbl th:nth-child(8), #tbl td:nth-child(8) { width: 96px; }
/* the table sizes to its columns rather than stretching to the panel: a
   650px gauge in a scanning table is weight the column has not earned. */
#tbl { width: auto; max-width: 100%; }
.flagline { font-family: var(--face-data); font-size: var(--s-cap); color: var(--exception); }


@media (max-width: 720px) {
  main { padding: 12px 12px 48px; }
  /* scroll the table rather than crushing it: a two-line player name in a
     56px column is not a narrower table, it is an unreadable one. */
  table { display: block; overflow-x: auto; }
  #tbl { max-width: none; min-width: 660px; }
}