/* =========================================================
   tables.css — Desktop unchanged, Mobile compact & tight
   ========================================================= */

/* ---- small utility + chips (unchanged) ---- */
:root[data-view="compact"] .site-header .nav::-webkit-scrollbar{ display:none; }

.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex-wrap:wrap}
.seg button{padding:.35rem .75rem;font-size:.9rem;border:none;background:var(--card);cursor:pointer}
.seg button[aria-pressed="true"]{background:color-mix(in oklab,var(--accent) 16%, transparent);font-weight:800}
.token{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border:1px solid var(--line);border-radius:999px;font-size:.78rem;line-height:1;background:var(--card)}
.tiny{font-size:.8rem}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.link-quiet{color:inherit;text-decoration:none}

/* ---- clubs / icons ---- */
.club-dot{width:22px;height:22px;border-radius:999px;object-fit:contain;background:transparent}

/* =========================================================
   TABLE — Desktop / Tablet (unchanged)
   ========================================================= */
.tbl{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
  position:relative;
}
.tbl-head,.tbl-row{
  display:grid;
  grid-template-columns:40px 1fr repeat(8,64px) 64px; /* # | Club | P W D L GF GA GD PTS */
  gap:0;
  align-items:center;
}
.tbl-head{
  font-weight:800;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.tbl-head > div, .tbl-row > div{padding:.5rem .6rem}
.tbl-row{border-bottom:1px solid var(--line)}
.tbl-row:last-child{border-bottom:none}

.num{text-align:center;font-variant-numeric:tabular-nums}
.pos{font-weight:800;text-align:right;padding-right:.4rem}
.clubcell{display:flex;align-items:center;gap:8px;min-width:0}
.clubcell .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.sortable{cursor:pointer}
.sortable .carat{opacity:.5;font-variant-numeric:tabular-nums;margin-left:6px}

.band-promo{background:color-mix(in oklab, #16a34a 8%, transparent)}
.band-playoff{background:color-mix(in oklab, #ca8a04 10%, transparent)}
.band-releg{background:color-mix(in oklab, #dc2626 8%, transparent)}

.fav-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.fav-btn.active{background:var(--accent);border-color:var(--accent-ink)}

.expander{border-top:1px dashed var(--line);grid-column:1 / -1;padding:.55rem .6rem;background:color-mix(in oklab,var(--ink) 2%, transparent)}

.beads{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bead{width:14px;height:14px;border-radius:999px;border:1px solid var(--line)}
.bead.w{background:#16a34a}.bead.d{background:color-mix(in oklab,var(--ink) 15%, transparent)}.bead.l{background:#dc2626}

.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spacer{flex:1 1 auto}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem;font-size:.82rem}

/* ---- bracket cards + match cards (unchanged) ---- */
.br-wrap{display:grid;gap:16px}
.br-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:.9rem .9rem;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.br-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.br-head strong{font-size:1rem}
.br-head .spacer{flex:1}
.br-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow:auto;padding:8px;scroll-snap-type:x proximity;mask-image: linear-gradient(to right, transparent 0, black 22px, black calc(100% - 22px), transparent 100%)}
.stage{scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.6rem}
.stage-head{display:flex;align-items:center;gap:8px;margin-bottom:.4rem}
.stage-head .title{font-weight:800;font-size:.9rem}
.stage-list{display:grid;gap:10px}

.m-card{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:.55rem .6rem;display:grid;gap:6px;text-decoration:none;color:inherit;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.m-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:color-mix(in oklab,var(--accent) 35%, var(--line))}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;line-height:1.1}
.row .nm{display:flex;align-items:center;gap:8px;min-width:0}
.row .logo{width:18px;height:18px;border-radius:999px;object-fit:cover;background:transparent;flex:0 0 18px}
.row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:.92rem}
.row .sc{font-weight:900;font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right}
.row.w .name{font-weight:900}.row.l .name{opacity:.6}.row.d .name{opacity:.85}
.m-foot{display:flex;align-items:center;gap:6px;justify-content:center;color:var(--muted);font-size:.73rem}
.m-foot .badge{border:1px solid var(--line);border-radius:999px;padding:.15rem .45rem;background:var(--surface)}
.m-card.final-win{background:color-mix(in oklab, #16a34a 6%, var(--card));border-color:color-mix(in oklab,#16a34a 36%, var(--line))}

.seed-rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.seed-cap{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.seed-arrow{opacity:.6;font-size:.9rem}
.seed{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:.18rem .5rem;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.seed:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06);border-color:color-mix(in oklab,var(--accent) 30%, var(--line))}
.seed .logo{width:14px;height:14px;border-radius:999px;object-fit:cover}
.seed .n{font-size:.82rem;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seed .score{font-weight:800;font-variant-numeric:tabular-nums}
.seed .sep{opacity:.6}

/* ---- skeleton ---- */
.sk-row{height:40px;border-bottom:1px solid var(--line);background:linear-gradient(90deg, transparent, color-mix(in oklab,var(--ink) 6%, transparent), transparent);animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}

/* ---- desktop responsive tweaks (unchanged) ---- */
@media (max-width:1024px){ .tbl-head,.tbl-row{grid-template-columns:36px 1fr repeat(6,56px) 56px} }
@media (max-width:860px){ .nm .name{font-size:.9rem} }
@media (max-width:560px){ .sticky-tools{position:sticky;top:8px;background:var(--card);z-index:4;padding-top:4px} }

/* =========================================================
   MOBILE (data-view="compact") — Fit 1080×1920,
   show only Club | P | GD | PTS, no horizontal scroll
   ========================================================= */
:root[data-view="compact"] body,
:root[data-view="compact"] .site,
:root[data-view="compact"] main{
  max-width:100vw !important;
  overflow-x:hidden !important;
  box-sizing:border-box;
}

:root[data-view="compact"]{
  --tbl-pad-y:.36rem;
  --tbl-pad-x:.44rem;
  --tbl-font:.95rem;
  --tbl-num:.90rem;
}

/* container */
:root[data-view="compact"] .tbl{
  width:100%;
  margin-inline:12px;
  border-radius:12px;
  overflow:hidden; /* never sideways scroll */
}

/* 4 columns: Club flexes; numbers get ch/vw mins so they never wrap */
:root[data-view="compact"] .tbl-head,
:root[data-view="compact"] .tbl-row{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)          /* Club */
    minmax(3.0ch,12vw)     /* P   */
    minmax(3.6ch,14vw)     /* GD  */
    minmax(3.6ch,18vw);    /* PTS */
  align-items:center;
  gap:0;
}

/* hide everything by default on phones */
:root[data-view="compact"] .tbl-head > div,
:root[data-view="compact"] .tbl-row  > div{
  display:none;
  padding:var(--tbl-pad-y) var(--tbl-pad-x);
  line-height:1.05;
  font-size:var(--tbl-font);
  white-space:nowrap;
}

/* show only these columns (uses semantic column classes) */
:root[data-view="compact"] .tbl-head .col-club,
:root[data-view="compact"] .tbl-row  .col-club{ display:block; grid-column:1; }
:root[data-view="compact"] .tbl-head .col-p,
:root[data-view="compact"] .tbl-row  .col-p{ display:block; grid-column:2; text-align:center; font-size:var(--tbl-num); font-variant-numeric:tabular-nums; }
:root[data-view="compact"] .tbl-head .col-gd,
:root[data-view="compact"] .tbl-row  .col-gd{ display:block; grid-column:3; text-align:center; font-size:var(--tbl-num); font-variant-numeric:tabular-nums; }
:root[data-view="compact"] .tbl-head .col-pts,
:root[data-view="compact"] .tbl-row  .col-pts{ display:block; grid-column:4; text-align:center; font-weight:800; font-size:var(--tbl-num); font-variant-numeric:tabular-nums; }

/* sticky head + neat rows */
:root[data-view="compact"] .tbl-head{
  position:sticky; top:0; z-index:4;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
:root[data-view="compact"] .tbl-row{
  border-bottom:1px solid color-mix(in oklab, var(--line) 80%, transparent);
}

/* club cell polish */
:root[data-view="compact"] .clubcell{ gap:6px; min-width:0; }
:root[data-view="compact"] .clubcell .name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;
}
:root[data-view="compact"] .club-dot{ width:18px; height:18px; }

/* remove extras that eat space on phones */
:root[data-view="compact"] .fav-btn,
:root[data-view="compact"] .expander{ display:none !important; }

/* narrow phones (e.g., 390px width) */
@media (max-width:390px){
  :root[data-view="compact"] .tbl-head,
  :root[data-view="compact"] .tbl-row{
    grid-template-columns:
      minmax(0,1fr)
      minmax(3.0ch,12.5vw)
      minmax(3.6ch,15vw)
      minmax(3.6ch,19vw);
  }
  :root[data-view="compact"]{
    --tbl-pad-y:.32rem;
    --tbl-font:.92rem;
    --tbl-num:.86rem;
  }
}