.erl{
  font-family: var(--tsa-font-mono);
  font-size:16px;
  color:var(--tsa-body);
  max-width:750px;
}

.erl-table{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Header */
.erl-header{
  display:grid;
  grid-template-columns:48px 1fr 80px 80px 72px;
  align-items:center;
  padding:12px 16px;
  background:color-mix(in srgb, var(--tsa-ink) 3%, transparent);
  border-bottom:1px solid var(--tsa-border);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--tsa-muted);
}

/* Row */
.erl-row{
  display:grid;
  grid-template-columns:48px 1fr 80px 80px 72px;
  align-items:center;
  padding:10px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--tsa-ink) 4%, transparent);
  transition:background .12s ease, transform .12s ease;
}

.erl-row:last-child{
  border-bottom:none;
}

.erl-row:hover,
.erl-row:active{
  background:color-mix(in srgb, var(--tsa-accent) 4%, transparent);
}

/* Position */
.erl-col-pos{
  text-align:center;
}

.erl-pos-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:16px;
  font-weight:700;
  color:var(--tsa-muted);
  background:color-mix(in srgb, var(--tsa-ink) 4%, transparent);
  border:1px solid var(--tsa-border);
  font-variant-numeric:tabular-nums;
}

.erl-gold .erl-pos-num{
  color:var(--tsa-gold);
  background:color-mix(in srgb, var(--tsa-gold) 10%, transparent);
  border-color:color-mix(in srgb, var(--tsa-gold) 30%, transparent);
}

.erl-silver .erl-pos-num{
  color:var(--tsa-silver);
  background:color-mix(in srgb, var(--tsa-silver) 10%, transparent);
  border-color:color-mix(in srgb, var(--tsa-silver) 30%, transparent);
}

.erl-bronze .erl-pos-num{
  color:var(--tsa-bronze);
  background:color-mix(in srgb, var(--tsa-bronze) 10%, transparent);
  border-color:color-mix(in srgb, var(--tsa-bronze) 30%, transparent);
}

/* Team column */
.erl-col-team{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.erl-team-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.erl-logo{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}

.erl-logo img{
  width:auto;
  height:auto;
  max-width:34px;
  max-height:34px;
  object-fit:contain;
  display:block;
}

.erl-team-name{
  font-family: var(--tsa-font-mono);
  font-size:16px;
  font-weight:600;
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.35;
}

/* Stat columns */
.erl-col-deelnames,
.erl-col-punten,
.erl-col-gem{
  text-align:right;
  font-size:16px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.erl-col-punten{
  color:var(--tsa-ink);
  font-weight:700;
}

.erl-col-gem{
  color:var(--tsa-muted);
  font-size:14px;
}

.erl-header .erl-col-deelnames,
.erl-header .erl-col-punten,
.erl-header .erl-col-gem{
  font-size:11px;
  font-weight:600;
  color:var(--tsa-muted);
}

/* Sortable headers */
.erl-sortable{
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  transition:color .15s ease;
}

.erl-sortable:hover{
  color:var(--tsa-accent);
}

.erl-sortable:focus{
  outline:none;
}

.erl-sortable:focus-visible{
  outline:2px solid var(--tsa-accent);
  outline-offset:2px;
  border-radius:4px;
  color:var(--tsa-accent);
}

.erl-sort-arrow{
  font-size:9px;
  line-height:1;
  opacity:0.4;
  transition:opacity .15s ease;
  width:10px;
  text-align:center;
}

.erl-sort-active .erl-sort-arrow{
  opacity:1;
  color:var(--tsa-accent);
}

.erl-sort-active{
  color:var(--tsa-accent);
}

/* Header label toggle (full/short) */
.erl-label-short{
  display:none;
}

/* Top 3 accent bar */
.erl-gold{
  background:linear-gradient(90deg, color-mix(in srgb, var(--tsa-gold) 6%, transparent) 0%, transparent 60%);
}

.erl-silver{
  background:linear-gradient(90deg, color-mix(in srgb, var(--tsa-silver) 4%, transparent) 0%, transparent 60%);
}

.erl-bronze{
  background:linear-gradient(90deg, color-mix(in srgb, var(--tsa-bronze) 4%, transparent) 0%, transparent 60%);
}

/* Tablet / small desktop */
@media(max-width:680px){
  .erl{
    font-size:15px;
  }

  .erl-team-name{
    font-size:15px;
  }

  .erl-col-deelnames,
  .erl-col-punten,
  .erl-col-gem{
    font-size:15px;
  }

  .erl-col-gem{
    font-size:13px;
  }

  .erl-header,
  .erl-row{
    grid-template-columns:40px 1fr 68px 68px 60px;
    padding:10px 12px;
  }

  .erl-header .erl-col-deelnames,
  .erl-header .erl-col-punten,
  .erl-header .erl-col-gem{
    font-size:10px;
  }
}

/* Mobile */
@media(max-width:520px){
  .erl{
    font-size:14px;
  }

  .erl-header,
  .erl-row{
    grid-template-columns:36px 1fr 48px 56px;
    padding:8px 8px;
    gap:6px;
  }

  .erl-logo{
    display:none;
  }

  .erl-col-gem{
    display:none;
  }

  .erl-team-name{
    font-size:14px;
  }

  .erl-col-deelnames,
  .erl-col-punten{
    font-size:14px;
  }

  .erl-pos-num{
    width:22px;
    height:22px;
    font-size:11px;
    border-radius:6px;
  }

  .erl-header{
    font-size:9px;
  }

  .erl-header .erl-col-deelnames,
  .erl-header .erl-col-punten{
    font-size:9px;
  }

  .erl-label-full{
    display:none;
  }

  .erl-label-short{
    display:inline;
  }
}