/* Standings table - shared by the standings page and the front door of a
   finished event, which render the same table from the same module. */
.pl-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  min-height: 46px; border-bottom: 1px solid var(--line);
}
/* a fixed line box so the larger 1st/2nd type cannot make those rows taller
   than the rest of the block they now level with */
.pl-row .place {
  font-weight: 800; width: 58px; flex: 0 0 auto; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 26px;
}
.pl-row .place.tier { font-size: 10px; letter-spacing: .06em; }
.pl-row.p1 .place { color: var(--alpha); font-size: 20px; }
.pl-row.p2 .place { color: #cfd8e3; font-size: 18px; }
.pl-row.p3 .place { color: #d9a05b; }
/* A row never decides its own shape - that is what made the table ragged, with
   heights jumping row to row and no two strips sharing a left edge. levelRows()
   measures once and stacks a whole place group together, so a group is either
   all one line or all two. The name column is one measured width for the table
   (--nmw), which puts every strip at the same x. */
.pl-row .who { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.pl-row .nm { font-weight: 700; min-width: var(--nmw, auto); flex: 0 0 auto; }
.pl-row.stack .who { flex-direction: column; align-items: flex-start; gap: 5px; }
.pl-row.stack .nm { min-width: 0; }
.pl-row .chev { color: var(--muted); flex: 0 0 auto; margin-left: auto; }
.pl-row { width: 100%; text-align: left; background: none; cursor: pointer; font: inherit; color: inherit; }
.pl-row:active { background: var(--panel2); }

/* Match history: one chip per match, in the order played, splitting the two
   jobs one channel each. Colour says WHERE - the letter is tinted by its tier
   on every chip, win, loss and bye alike. The box says WHAT - a win is boxed
   in its own tier colour, a loss sits in a plain one, a bye is dashed. Nothing
   is filled, so the heaviest mark on a row is a thin outline. */
.mh-strip {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px;
  /* levelRows() sets --striplines to the tallest strip in the place group, so
     a long run that wraps to a second line of chips does not outgrow its
     neighbours: N lines is N*18px of chip plus (N-1)*3px of gap */
  min-height: calc(var(--striplines, 1) * 21px - 3px);
}
.mh {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; line-height: 1; font-size: 10px; font-weight: 800;
  border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: transparent;
}
.mh.alpha, .mh.final { color: var(--alpha); }
.mh.omega { color: var(--omega); }
.mh.trinity { color: var(--trinity); }
.mh.win { border-color: currentColor; }
.mh.loss { border-color: var(--line); }
.mh.bye { border-style: dashed; border-color: var(--line); }
.mh-key { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; font-size: 11px; }
.mh-key .tiers { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; }
.tk { font-weight: 800; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.tk.alpha { color: var(--alpha); }
.tk.omega { color: var(--omega); }
.tk.trinity { color: var(--trinity); }

/* One line declares its tier once, and two things read it: the round code says
   where the match happened, and that same colour reaching the opponent's name
   says they won it - the sheet's version of the strip's tier-coloured box.
   A loss is the one thing the tier colour does not reach. */
.runline { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); --tier: var(--muted); }
.runline.alpha, .runline.final { --tier: var(--alpha); }
.runline.omega { --tier: var(--omega); }
.runline.trinity { --tier: var(--trinity); }
.runline .code { color: var(--tier); font-size: 11px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; min-width: 78px; }
.runline .what { flex: 1; font-size: 14px; }
.runline.won .what b { color: var(--tier); }
.runline.lost .what b { color: var(--muted); }
.runline .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.runline .note { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* The run sheet's header is a pager, not a title: the placement above sits to
   the left and the one below to the right, so the field reads straight through
   without closing. The empty slot at either end keeps the centre name still. */
.run-pager { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.run-now { flex: 1; text-align: center; font-size: 18px; min-width: 0; }
.run-step {
  flex: 0 1 30%; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  background: none; border: 0; padding: 2px 0; font: inherit; color: var(--muted);
  cursor: pointer; text-align: left;
}
.run-step.next { text-align: right; }
.run-step:empty { cursor: default; }
.run-step .sn { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-step .sp { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.run-step:active .sn { color: var(--text); }
.run-record { text-align: center; margin-bottom: 10px; }

/* The run sheet is a reading panel you page through, so it is pinned top AND
   bottom rather than growing upward from the bottom edge like an action sheet.
   One rectangle for every player, whatever the length of their run, which is
   what keeps the pager and the Close button under the cursor as you step. */
.sheet.runsheet.on { display: flex; flex-direction: column; }
.sheet.runsheet { top: 10vh; bottom: 10vh; max-height: none; overflow: hidden; }
.sheet.runsheet .run-head { flex: 0 0 auto; }
.sheet.runsheet .run-body { flex: 1; min-height: 0; overflow-y: auto; }
.sheet.runsheet #run-close { flex: 0 0 auto; margin-top: 12px; justify-content: center; }