/* ETR top-150 player×source board. Tokens come from style.css. Prefix: mg- */

.mg-top {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
  margin: 0 0 16px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
}

.mg-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mg-heading {
  min-width: 0;
}

.mg-heading .mg-posted {
  margin-top: 2px;
}

.mg-top h1 {
  margin: 0;
  font-size: 1.75rem;
  letter-spacing: var(--tracking-tight);
}

.mg-help-btn,
.mg-help-close {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1;
}

.mg-help-btn[aria-expanded=true] {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}

.mg-help {
  position: relative;
  margin-top: 10px;
  padding: 12px 48px 12px 14px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.mg-help p {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}

.mg-help p:last-child { margin-bottom: 0; }

.mg-help-close {
  position: absolute;
  top: 4px;
  right: 4px;
}

.mg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
}

.mg-chips,
.mg-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mg-chips button,
.mg-sort button {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.mg-chips button[aria-pressed=true],
.mg-sort button[aria-pressed=true] {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}

.mg {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.mg-posted {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.mg-table {
  min-width: 720px;
}

.mg-table th {
  background: var(--card);
  color: var(--muted);
}

.mg-table th:first-child,
.mg-table td:first-child,
.mg-table th[scope=row] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  min-width: 168px;
  text-align: left;
}

.mg-table thead th:first-child {
  background: var(--card);
  z-index: 2;
}

.mg-table .number {
  white-space: nowrap;
}

.mg-pts {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  gap: 1px;
}

.mg-pts small {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--faint);
}

.mg-empty {
  color: var(--faint);
  font-weight: 600;
}

.mg-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.mg-fill {
  background: color-mix(in srgb, var(--mg-tone) var(--mg-pct), var(--card));
}

.mg-fill .mg-pts,
.mg-fill .mg-delta {
  color: color-mix(in srgb, var(--mg-tone) calc(var(--mg-pct) + 30%), var(--ink));
}

.mg-fill .mg-pts small {
  color: var(--faint);
}

.mg-table-wrap {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .mg-top h1 {
    font-size: 1.35rem;
  }

  .mg-table-wrap {
    background: transparent;
    border: 0;
    overflow: visible;
  }

  .mg-table,
  .mg-table tbody {
    display: block;
    min-width: 0;
  }

  .mg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .mg-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 8px;
  }

  .mg-table th[scope=row],
  .mg-table .mg-spread {
    grid-column: 1 / -1;
    position: static;
    background: transparent;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .mg-table .mg-spread .mg-delta::before,
  .mg-table .mg-spread .mg-empty::before {
    content: "Δ ";
    font-weight: 500;
    color: var(--muted);
  }

  .mg-table td.mg-src-cell {
    padding: 6px 0 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .mg-table td.mg-src-cell::before {
    content: attr(data-src);
    display: block;
    font-size: 0.65rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 650;
    margin-bottom: 2px;
  }

  .mg-pts,
  .mg-empty {
    align-items: flex-start;
  }
}