/* ── The sport front doors: the board and the track record ──────────────────
   2026-10-20. Every sport homepage now opens the way tennis does: the title,
   one plain paragraph, two buttons, and a board of two top-five lists, each name
   a door into its page. Further down, the sport's own record of calls, and a
   button that opens every other sport's.

   The board rules were tennis.html's inline styles, moved here unchanged so all
   twelve homes share one copy. home.js fills both from /api/<sport>/home and
   /api/<sport>/record. Linked from the homepages only.

   2026-10-31: the small labels and figures read in Avenir Next now that the
   typewriter face is retired site-wide (styles.css --font-meta), at 11px at the
   least, figures tabular. */

.t-board { max-width: 880px; margin: 40px auto 0; text-align: left; }
.t-board-head {
  margin: 0 0 14px; text-align: center; color: var(--text-tertiary); font-size: 13.5px;
}
.t-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.t-col {
  min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
  padding: 6px 18px 8px;
}
/* The column head shares the rows' grid, so the two small heads sit over the
   figures they name. */
.t-colhead {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 84px; align-items: baseline; gap: 12px;
  margin: 10px 0 2px;
  font-family: var(--font-meta); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: lowercase; color: var(--text-faint);
}
.t-colhead h2 {
  grid-column: 1 / 3; margin: 0; font: inherit; font-size: 10.5px; letter-spacing: .17em;
  color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-colhead span:last-child { text-align: right; }
.t-list { list-style: none; margin: 0; padding: 0; }
.t-list a, .t-list .t-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 84px; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border-dashed);
  color: inherit; text-decoration: none; transition: color .13s ease;
}
.t-list li:first-child a, .t-list li:first-child .t-row { border-top: 0; }
.t-list a:hover .t-name { color: var(--gold); }
.t-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.t-n { color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.t-name {
  font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--text-primary); transition: color .13s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-rating {
  font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); text-align: right;
}
.t-res {
  text-align: right; font-family: var(--font-meta); font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  text-transform: lowercase; color: var(--text-tertiary); white-space: nowrap;
}
.t-res.won { color: var(--gold); }
.t-more { margin: 2px 0 4px; text-align: right; }
.t-more a, .t-foot a {
  font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: .13em;
  text-transform: lowercase; color: var(--text-faint); text-decoration: none; transition: color .15s ease;
}
.t-more a:hover, .t-foot a:hover { color: var(--gold); }
.t-more a::after, .t-foot a::after { content: " \2192"; }
.t-foot { margin: 14px 0 0; text-align: center; }

/* Before the feed answers, the board holds its height so the page does not
   jump; if the feed fails, home.js hides it and the opening closes up. */
.t-board[aria-busy="true"] { min-height: 372px; }
.t-board[aria-busy="true"] .t-cols { opacity: .55; }
.t-skel { display: block; height: 12px; margin: 14px 0; border-radius: 6px; background: var(--border); opacity: .5; }

/* The opening fits a laptop screen with the board in it; the tag and the
   buttons give up a little air to make that true. */
.hub-top.has-board .hub-tag { margin-top: 14px; }
.hub-top.has-board .hub-acts { margin-top: 22px; }
/* styles.css makes every span in a stat a block, which also broke the small
   print under each figure into a column of orphans. */
.hub-stat i span { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* ── the record ── */
.hub-record .hub-stats { margin: 0; }
a.hub-stat { color: inherit; text-decoration: none; position: relative; transition: background .13s ease; }
a.hub-stat:hover { background: var(--bg-raised); }
a.hub-stat:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
a.hub-stat::after {
  content: "\2192"; position: absolute; top: 12px; right: 14px;
  font-size: 13px; color: var(--text-faint); transition: color .13s ease, transform .13s ease;
}
a.hub-stat:hover::after { color: var(--gold); transform: translateX(2px); }
.hub-record-empty {
  margin: 0; padding: 22px 18px; text-align: center; color: var(--text-secondary); font-size: 14.5px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
}

/* The way to the rest: a real button, centred, with a caret that turns. */
.rec-all { margin-top: 18px; text-align: center; }
.rec-all-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.rec-all-btn:hover { color: var(--text-primary); border-color: var(--gold); }
.rec-all-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rec-caret { color: var(--gold); transition: transform .18s ease; }
.rec-all-btn[aria-expanded="true"] .rec-caret { transform: rotate(180deg); }
.rec-all-list {
  margin: 16px 0 0; text-align: left; border-top: 1px solid var(--border);
}
.rec-row {
  display: grid; grid-template-columns: 64px 76px minmax(0, 1fr) auto 18px; align-items: baseline; gap: 16px;
  padding: 15px 6px; border-bottom: 1px solid var(--border-dashed);
  color: inherit; text-decoration: none; transition: background .13s ease, padding .13s ease;
}
a.rec-row:hover { background: var(--bg-raised); padding-left: 14px; padding-right: 14px; }
a.rec-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rec-sport {
  font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: lowercase; color: var(--gold);
}
.rec-big {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rec-label { color: var(--text-secondary); font-size: 14px; min-width: 0; }
.rec-detail {
  font-family: var(--font-meta); font-size: 11px; letter-spacing: .09em; color: var(--text-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.rec-row .lg-go { color: var(--text-faint); }
a.rec-row:hover .lg-go { color: var(--gold); }
.rec-row.is-empty .rec-label { grid-column: 2 / 6; color: var(--text-tertiary); }
.rec-all-msg { margin: 14px 0 0; color: var(--text-tertiary); font-size: 13.5px; text-align: center; }

@media (max-width: 720px) {
  .t-cols { grid-template-columns: 1fr; }
  .t-board { margin-top: 32px; }
  .t-board[aria-busy="true"] { min-height: 640px; }
  /* A phone keeps the whole name: smaller face, tighter columns, and a long
     name may take a second line rather than lose its end. */
  .t-col { padding: 4px 14px 6px; }
  .t-list a, .t-list .t-row, .t-colhead { grid-template-columns: 14px minmax(0, 1fr) auto 70px; gap: 8px; }
  .t-name { font-size: 17px; white-space: normal; overflow: visible; }
  .t-rating { font-size: 13.5px; }
  .t-res { font-size: 9.5px; letter-spacing: .04em; }
  .rec-row { grid-template-columns: 56px 64px minmax(0, 1fr) 14px; gap: 10px; }
  .rec-detail { grid-column: 3 / 4; text-align: left; white-space: normal; }
  .rec-row .lg-go { grid-row: 1; grid-column: 4; }
  .rec-big { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-caret, a.hub-stat::after, .rec-row { transition: none; }
}

/* ── the race (2026-11-02) ──────────────────────────────────────────────────
   Billy said yes to the app's league-home race on the sport front doors: one
   wide strip under the boards, a pearl per team along a 0 to 100% line of its
   chance, the playoff cut marked, the name on the pearl on hover. Same strip at
   both widths; a phone narrows the line and drops the pearls to a smaller bead,
   and a tap holds the name open because a phone has no hover.

   Every colour is a variable, so the light theme follows without a second copy
   (html[data-theme="light"] redefines them in styles.css). */

.t-race {
  margin: 34px auto 0; padding: 18px 20px 14px; max-width: 880px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
}
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rc-head h2 {
  margin: 0; font-family: var(--font-meta); font-size: 10.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: lowercase; color: var(--gold);
}
.rc-head p {
  margin: 0; font-family: var(--font-meta); font-size: 11px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--text-faint);
}
.rc-groups { margin-top: 10px; }
.rc-group + .rc-group { margin-top: 4px; }
.rc-name {
  margin: 14px 0 0; font-family: var(--font-meta); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: lowercase; color: var(--text-tertiary);
}

/* The line itself. The pearls are placed on it by percent, so one team's dot is
   literally where its chance is. 26px of height keeps two pearls that land on
   the same chance from covering each other entirely. */
.rc-line {
  position: relative; height: 26px; margin: 8px 0 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--border) 55%, transparent),
    color-mix(in srgb, var(--gold) 26%, transparent));
}
.rc-mid {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px;
  background: var(--border-dashed);
}
.rc-cut {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--gold); border-radius: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

/* The team in the last playoff place sits exactly on the cut, which is the
   point of the line; the pearls ride above it so that team is not hidden by the
   mark it defines. */
.rc-pearl {
  position: absolute; top: 0; bottom: 0; width: 26px; margin-left: -13px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit;
}
.rc-dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--text-faint); border: 1px solid var(--bg-card);
  transition: transform .13s ease;
}
/* Lit: the teams we have in the field. */
.rc-pearl.is-in .rc-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.rc-pearl:hover, .rc-pearl:focus, .rc-pearl:focus-visible { z-index: 2; }
.rc-pearl:hover .rc-dot, .rc-pearl:focus-visible .rc-dot { transform: scale(1.35); }
.rc-pearl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 999px; }

/* The name, held above the pearl. Hidden until the pearl is hovered, focused or
   tapped, because thirty names at once is a smudge. */
.rc-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px);
  padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-raised);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.2; white-space: nowrap;
  color: var(--text-primary); opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.rc-tip b { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; }
.rc-pearl:hover .rc-tip, .rc-pearl:focus .rc-tip, .rc-pearl:focus-visible .rc-tip { opacity: 1; }
/* A pearl at either end would push its name off the strip; home.js marks those
   two and the chip is anchored inward instead of centred. */
.rc-pearl.at-start .rc-tip { left: 0; transform: translate(0, -4px); }
.rc-pearl.at-end .rc-tip { left: auto; right: 0; transform: translate(0, -4px); }

.rc-ticks {
  display: flex; justify-content: space-between; margin: 5px 0 0;
  font-family: var(--font-meta); font-size: 11px; letter-spacing: .08em;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.rc-cut-note {
  margin: 2px 0 0; font-family: var(--font-meta); font-size: 11px; letter-spacing: .06em;
  text-transform: lowercase; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.rc-scale {
  margin: 14px 0 0; text-align: center; color: var(--text-tertiary); font-size: 13.5px;
}

@media (max-width: 720px) {
  .t-race { margin-top: 26px; padding: 14px 14px 12px; }
  .rc-head { gap: 4px; }
  .rc-line { height: 22px; }
  .rc-pearl { width: 22px; margin-left: -11px; }
  .rc-dot { width: 9px; height: 9px; }
  .rc-tip { font-size: 11.5px; padding: 3px 8px; }
  .rc-scale { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-dot, .rc-tip { transition: none; }
}