/* Sports league table - sticky position + team columns inside a labelled
   scroll region; zone rows carry a text badge, a coloured edge and a legend. */
.lt { display: grid; gap: 8px; min-width: 0; }
.lt > * { min-width: 0; }
.lt-scroll { overflow-x: auto; border: 1px solid var(--e-line); border-radius: calc(var(--e-radius-sm) + 2px); background: var(--e-bg); }
.lt-scroll:focus-visible { outline: 2px solid var(--e-focus); outline-offset: 2px; }
.lt-scroll.lt-overflow { background: linear-gradient(to left, color-mix(in srgb, var(--e-ink) 7%, transparent), transparent 18px) right / 18px 100% no-repeat, var(--e-bg); }
.lt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9em; font-variant-numeric: tabular-nums; }
.lt-cap { caption-side: top; text-align: left; padding: 11px 14px 9px; font-weight: 750; color: var(--e-ink); border-bottom: 1px solid var(--e-line); overflow-wrap: anywhere; }
.lt-upd { display: block; margin-top: 1px; font-size: .8em; font-weight: 500; color: var(--e-ink-3); }
.lt-table th, .lt-table td { padding: 8px 8px; border-bottom: 1px solid var(--e-line); white-space: nowrap; }
.lt-table tbody tr:last-child > * { border-bottom: 0; }
.lt-table thead th { background: var(--e-surface); color: var(--e-ink-3); font-size: .78em; font-weight: 750; letter-spacing: .04em; }
.lt-table abbr { text-decoration: none; cursor: help; }
.lt-n { text-align: right; min-width: 30px; }
td.lt-pts { font-weight: 800; color: var(--e-ink); }
thead .lt-pts { color: var(--e-ink); }
td.lt-gd, td.lt-p, td.lt-w, td.lt-d, td.lt-l, td.lt-gf, td.lt-ga { color: var(--e-ink-2); }
.lt-pos { position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 38px; min-width: 38px; max-width: 38px; text-align: left; background: var(--e-bg); }
.lt-table .lt-pos { padding-left: 8px; padding-right: 2px; }
.lt-team { position: sticky; left: 38px; z-index: 1; text-align: left; background: var(--e-bg); min-width: 150px; max-width: 220px; box-shadow: 1px 0 0 var(--e-line); }
thead .lt-pos, thead .lt-team { background: var(--e-surface); z-index: 2; }
th.lt-team[scope="row"] { font-weight: 650; color: var(--e-ink); white-space: normal; overflow-wrap: anywhere; }
.lt-num { display: inline-block; min-width: 1.4em; font-weight: 700; color: var(--e-ink-2); }
.lt-mark {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; margin-left: 6px; border-radius: 5px;
    font-size: .66em; font-weight: 800; letter-spacing: 0; vertical-align: 1px; background: var(--e-surface-2); color: var(--e-ink-2);
}
.lt-mark.lt-up { background: color-mix(in srgb, var(--e-ok) 16%, var(--e-bg)); color: var(--e-ok); }
.lt-mark.lt-mid { background: color-mix(in srgb, var(--e-accent) 14%, var(--e-bg)); color: var(--e-accent-fg); }
.lt-mark.lt-down { background: var(--e-bad-soft); color: var(--e-bad); }
.lt-z-up .lt-pos { box-shadow: inset 3px 0 0 var(--e-ok); }
.lt-z-mid .lt-pos { box-shadow: inset 3px 0 0 var(--e-accent); }
.lt-z-down .lt-pos { box-shadow: inset 3px 0 0 var(--e-bad); }
.lt-z-other .lt-pos { box-shadow: inset 3px 0 0 var(--e-line-strong); }
.lt-edge > * { border-bottom: 1px dashed var(--e-line-strong); }
.lt-mine > * { background: color-mix(in srgb, var(--e-accent) 8%, var(--e-bg)); }
.lt-mine .lt-name { font-weight: 800; }
.lt-you { margin-left: 6px; font-size: .7em; padding: 1px 7px; }
.lt-flag { margin-left: 2px; color: var(--e-warn); font-weight: 800; }
.lt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8em; color: var(--e-ink-2); }
.lt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lt-legend .lt-mark { margin: 0; }
.lt-foot { margin: 0; font-size: .78em; color: var(--e-ink-3); }
.lt .e-warn, .lt .e-note { margin: 0; }
@media (max-width: 360px) {
    .lt-table th, .lt-table td { padding: 7px 6px; }
    .lt-pos { width: 34px; min-width: 34px; max-width: 34px; }
    .lt-table .lt-pos { padding-left: 6px; }
    .lt-team { left: 34px; min-width: 104px; }
}