/* EG Matches 4.5.1: the sidebar rankings ([eg_matches_rankings]), one compact block with the tabs
   Today, Week, Month and Year. Scoped to the block, with the site's colors where the theme has
   them. Rows are one line high. The open tab's panel is as tall as what it shows (its rows, or the
   one line of the empty text), so the link follows right after; tabs with the same number of rows
   (count each, once enough members play) keep the block's height. */
.eg-matches-side {
  --egm-side-accent: var(--eg-moss, #446931);
  --egm-side-accent-strong: var(--eg-moss-dark, #355d20);
  --egm-side-accent-soft: var(--eg-moss-soft, #edf3e7);
  --egm-side-surface: var(--eg-tint, #f2f7ec);
  --egm-side-paper: var(--eg-paper, #f6f3ea);
  --egm-side-border: var(--eg-rule-strong, #cfcbbf);
  --egm-side-ink: var(--eg-ink, #1f2c1e);
  --egm-side-muted: var(--eg-text, #313b2f);
  --egm-side-row: 32px;
  --egm-side-gap: 4px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}
.eg-matches-side[hidden],
.eg-matches-side [hidden] {
  display: none !important;
}

/* The tabs: a small segmented control, as in the Matches page's Rankings panel; the theme's
   button look (its size, hover, focus and transitions) doesn't reach them. */
.eg-matches-side .egm-side-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 10px;
  padding: 2px;
  border: 1px solid var(--egm-side-border);
  border-radius: 8px;
  background: var(--egm-side-paper);
}
.eg-matches-side .egm-side-tab,
.eg-matches-side .egm-side-tab:focus-visible {
  flex: 1 1 0;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--egm-side-muted);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  transition: none;
}
.eg-matches-side .egm-side-tab:hover {
  background: var(--egm-side-accent-soft);
  color: var(--egm-side-accent-strong);
}
.eg-matches-side .egm-side-tab.is-active,
.eg-matches-side .egm-side-tab.is-active:hover,
.eg-matches-side .egm-side-tab.is-active:focus-visible {
  background: var(--egm-side-accent);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(35, 59, 23, 0.15);
}
.eg-matches-side .egm-side-tab:focus-visible,
.eg-matches-side .egm-side-panel:focus-visible {
  outline: 2px solid var(--egm-side-accent-strong);
  outline-offset: 2px;
}

.eg-matches-side .egm-side-panels {
  margin: 0 0 10px;
}
.eg-matches-side .egm-side-panel {
  border-radius: 8px;
}
.eg-matches-side .egm-side-list {
  display: grid;
  gap: var(--egm-side-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eg-matches-side .egm-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--egm-side-row);
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--egm-side-surface);
  color: var(--egm-side-ink);
  list-style: none;
}
.eg-matches-side .egm-side-pos {
  flex: 0 0 auto;
  min-width: 1.6em;
  color: var(--egm-side-accent-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.eg-matches-side .egm-side-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eg-matches-side .egm-side-figures {
  flex: 0 0 auto;
  color: var(--egm-side-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eg-matches-side .egm-side-empty {
  margin: 0;
  color: var(--egm-side-muted);
}
.eg-matches-side .egm-side-play {
  margin: 0;
}
.eg-matches-side .egm-side-play a {
  color: var(--egm-side-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eg-matches-side .egm-side-play a:hover,
.eg-matches-side .egm-side-play a:focus-visible {
  text-decoration-thickness: 2px;
}