/* ==========================================================================
   mcprush — leaderboard.css  (leaderboard.html only)

   A ranked table and the rules beside it. The rules are a rail rather than a
   block under the table on purpose: a reader who wants to know why a listing
   is at number four should not have to scroll past forty-nine rows to find
   out, and a publisher reading the gates should be able to see the board they
   apply to at the same time.

   Under 1000px the rail goes below the table, because at that width the table
   is already the narrower of the two things and the rules read as a document.
   ========================================================================== */

.lb-head { padding: 2px 0 22px; }
.lb-head .lead { max-width: 74ch; margin-top: 12px; }
.lb-seg { margin-top: 20px; display: inline-flex; }

.lb-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px; align-items: start; padding-bottom: 64px;
}
.lb-card { overflow: hidden; }
.lb-card-head { flex-wrap: wrap; gap: 8px; }
/* the table is wide before it is long: six columns at 13px need about 680px,
   and the rail takes 320 of the 1280 */
.lb-scroll { overflow-x: auto; }
.lb-tbl { min-width: 640px; }
.lb-tbl th:first-child, .lb-tbl td:first-child { padding-left: 18px; }
.lb-tbl th:last-child, .lb-tbl td:last-child { padding-right: 18px; }

/* the rank column is the axis of the page: mono, tabular, and wide enough for
   two digits plus the arrow so rows one and fifty line up */
.lb-rank { width: 62px; white-space: nowrap; color: var(--ink-3); font-size: 13px; }
.lb-tbl tbody td { vertical-align: middle; }
.lb-name { font-weight: 600; letter-spacing: -.012em; }
.lb-name:hover { color: var(--accent); }
.lb-v { font-size: 14px; font-weight: 550; color: var(--ink); letter-spacing: -.02em; }

/* The first three are marked, not decorated. A podium in gold and silver would
   say the gap between one and two is the interesting thing; the tint says only
   that these three are the head of the list. */
.lb-top .lb-rank { color: var(--accent); font-weight: 600; }
.lb-top .lb-v { color: var(--accent); }

.lb-move { margin-left: 5px; font-size: 10px; }
.lb-move.up { color: var(--accent); }
.lb-move.up.dim { opacity: .55; }
.lb-move.down { color: var(--risk); }
.lb-move.flat { color: var(--line-2); }

.lb-side { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 16px); }
.lb-rule { padding: 11px 0; border-top: 1px solid var(--line); }
.lb-rule:first-child { border-top: 0; padding-top: 10px; }
.lb-rule b { display: block; font-size: 13.5px; font-weight: 550; }
.lb-rule p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-top: 4px; }

.lb-out-list { display: grid; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.lb-out-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--surface); font-size: 13px;
}
.lb-out-row a { font-weight: 550; }
.lb-out-row a:hover { color: var(--accent); }

@media (max-width: 1000px) {
  .lb-grid { grid-template-columns: 1fr; }
  .lb-side { position: static; }
}

@media (max-width: 720px) {
  /* The table becomes a list of rows. Rank, name and the one number the board
     is ranked on stay; grade, latency, context and price go, because they are
     on the listing's own page one tap away and a six-column table on a 390px
     screen is a horizontal scroll nobody discovers. */
  .lb-hide { display: none; }
  .lb-tbl { min-width: 0; }
  .lb-tbl th:first-child, .lb-tbl td:first-child { padding-left: 14px; }
  .lb-tbl th:last-child, .lb-tbl td:last-child { padding-right: 14px; }
  .lb-rank { width: 48px; }
  .lb-head .lead { font-size: 14.5px; }
  .lb-seg { display: flex; width: 100%; }
  .lb-seg button { flex: 1 1 0; justify-content: center; }
}

/* ---- the rule cards as folds -------------------------------------------
   Open on a desktop and closed on a phone, set from JS because a <details>
   cannot be opened by CSS. The summary is a real control at either width, so
   it carries the 44px touch height and the marker is ours rather than the
   platform triangle. */
.lb-det > summary { list-style: none; cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-det > summary::-webkit-details-marker { display: none; }
.lb-sum-c { display: none; width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s; }
.lb-det[open] .lb-sum-c { transform: rotate(90deg); }

@media (max-width: 1000px) {
  .lb-det > summary { cursor: pointer; min-height: 30px; }
  .lb-sum-c { display: block; }
  .lb-det[open] > summary { margin-bottom: 4px; }
}