/* Race to the Major: the heatmap table of docs/design/heatmap-v3.html, its
   stage lines, sorting, scale and "Show all". Needs base.css. */
.tbl{width:100%;border-collapse:collapse;min-width:620px}
.tbl th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  font-weight:400;padding:.4rem .5rem .6rem;text-align:center;vertical-align:bottom;border-bottom:1px solid var(--line)}
.tbl th.l{text-align:left}.tbl th.r{text-align:right}
.tbl th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:inherit;
  background:none;border:0;padding:0 0 .2rem;cursor:pointer;border-bottom:1px solid transparent}
.tbl th button:hover{color:var(--text)}
.tbl th.on button{color:var(--text);border-bottom-color:var(--c)}
.tbl th small{display:block;color:var(--muted-2);font-size:.85em;letter-spacing:.08em}
.tbl td{padding:0;border-bottom:1px solid var(--line);height:42px}
.tbl td.rk{font-family:var(--disp);font-weight:700;font-size:1.08rem;text-align:right;color:var(--muted-2);
  font-variant-numeric:tabular-nums;padding-right:.5rem;width:2.6rem}
.tbl td.nm{font-family:var(--disp);font-weight:600;font-size:1.04rem;text-transform:uppercase;color:var(--text-2);
  padding-right:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:30%}
.tbl td.num{font-family:var(--disp);font-weight:700;font-size:.98rem;text-align:right;font-variant-numeric:tabular-nums;padding-right:.7rem;width:4.4rem}
.tbl td.p{font-family:var(--disp);font-weight:700;font-size:.98rem;text-align:center;font-variant-numeric:tabular-nums;width:4.8rem}
.tbl td.p span{display:block;height:42px;line-height:42px}
.tbl td.p.major{font-size:1.1rem;width:5.4rem}
.tbl td.p.major span{border-right:2px solid var(--bg)}
.tbl td.cut{font-family:var(--mono);font-size:.74rem;text-align:right;color:var(--muted-2);padding-left:1rem;white-space:nowrap;width:7.5rem}
.tbl td.cut b{display:inline-block;min-width:1.4rem;text-align:right;font-family:var(--disp);font-weight:700;font-size:.98rem;font-variant-numeric:tabular-nums;color:var(--text-2)}
.tbl td.cut i{font-style:normal;padding:0 .45rem}
.tbl td.cut span{display:inline-block;min-width:5ch;text-align:left}
.tbl tr.more{display:none}
.tbl.open tr.more{display:table-row}
.tbl tr.expand td{border-bottom:0;padding-top:.9rem;height:auto}
.expand button{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--panel-2);color:var(--muted-2);border:1px solid var(--line);padding:.55rem 1.1rem;cursor:pointer;width:100%}
.expand button:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.line td{border-bottom:0;height:auto}
.line .lbl{position:relative;padding:.9rem 0 .2rem}
.line .lbl::after{content:'';position:absolute;left:-2rem;right:-2rem;bottom:0;height:1px;background:var(--bc);transform-origin:left}
.line .lbl span{position:absolute;left:0;bottom:.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bc);white-space:nowrap}
.scale{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.ramp{display:flex;height:11px;width:170px}
.ramp i{flex:1}
.tools{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.lines-toggle{font:inherit;letter-spacing:inherit;text-transform:inherit;background:var(--panel-2);color:var(--muted-2);
  border:1px solid var(--line);padding:.35rem .8rem;cursor:pointer}
.lines-toggle:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.lines-toggle[aria-pressed="true"]{color:var(--text-2);border-color:var(--c)}
.line .lbl em{font-style:normal}
.nolines .tbl tr.line:not(.major){display:none}
.nolines .tbl tr.line.major em{display:none}
.tbl td.nm a{color:inherit;text-decoration:none}
.tbl td.nm a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* On a phone (Lars, 2026-09-30: the table had to be swiped to see a stage): #, the team, the Major and the
   place at the cut; the three stage columns fold into a bar under the name, as wide as each share of the
   Major, in the region's colour from full (stage 3) to faint (stage 1). The VRS points stay a tap away on
   the team's page. Wider screens keep the table as it is. */
.split{display:none}
.scale__split{display:none}
.split__said{display:none}
@media(max-width:640px){
  .tbl{min-width:0}
  .tbl th:nth-child(3),.tbl td.num,.tbl th:nth-child(5),.tbl th:nth-child(6),.tbl th:nth-child(7),.tbl td.p:not(.major){display:none}
  .tbl td{height:50px}
  .tbl td.rk{width:2rem;font-size:1rem;padding-right:.45rem}
  .tbl td.nm{width:100%;font-size:.98rem;padding-right:.6rem}
  .tbl td.p.major{width:3.6rem}
  .tbl td.p span{height:50px;line-height:50px}
  .tbl td.cut{width:5.6rem;padding-left:.5rem;font-size:.7rem}
  .tbl td.cut b{display:block;min-width:0}
  .tbl td.cut i{display:none}
  .tbl td.cut span{display:block;min-width:0;text-align:right}
  .tbl th:last-child small{display:none}
  .split{display:flex;gap:1px;height:5px;margin-top:.35rem;max-width:9rem;background:rgba(255,255,255,.035)}
  .split i{display:block;height:100%}
  .split--stage3{background:var(--c)}
  .split--stage2{background:color-mix(in srgb,var(--c) 72%,var(--panel))}
  .split--stage1{background:color-mix(in srgb,var(--c) 48%,var(--panel))}
  .scale__split{display:flex;align-items:center;gap:.6rem}
  /* The columns are hidden here, so a screen reader is told the split in words. */
  .split__said{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .scale__split .split{width:3.2rem;margin:0}
  .pane .lv2{padding:1.2rem .9rem 1.4rem}
  .line .lbl::after{left:-.9rem;right:-.9rem}
  .line .lbl{padding-top:1.9rem}
  .line .lbl span{right:0;white-space:normal;line-height:1.35}
}
/* motion: row hover. The 3px orange edge comes in and the name moves 4px, on a pointer that hovers. */
@media(hover:hover){
  .tbl tr.team td.rk{position:relative}
  .tbl tr.team td.rk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sys);transform:scaleY(0);transition:transform var(--d-fast) var(--ease-out)}
  .tbl tr.team td.nm{transition:transform var(--d-fast) var(--ease-out)}
  .tbl tr.team:hover td.rk::before{transform:none}
  .tbl tr.team:hover td.nm{transform:translateX(4px)}
}