/* ============================================================================
   EPINOIA FULL TABLE — the dense statistics table.

   Structure follows index_9's full table; the look is the Backlit kit's.

   Two things do most of the work here, and both were missing before.

   FIXED LAYOUT. Without table-layout:fixed the browser sizes every column to
   its widest cell, so one long value ("192-440", "OPP OREB%") stretched its
   column and squeezed the rest — which is how PPG and DIFF ended up several
   times wider than the numbers in them. Widths are now declared, not inferred.

   TABULAR FIGURES AND RIGHT ALIGNMENT. A statistics table is read down a
   column, not across a row. Digits must occupy the same width so the decimal
   points line up; otherwise the eye has to re-find the place on every line.

   Depends on epinoia-kit.css for tokens, with literal fallbacks so it also
   works on the box score page, which loads a different stylesheet.
   ============================================================================ */

/* ---------- controls ---------- */
.ft-bar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 16px;
  background:color-mix(in oklch, var(--panel,#0a1a13) 55%, transparent);
  border-bottom:1px solid var(--rule,rgba(147,242,191,.2));
}
.ft-bar .grow{ flex:1 1 200px; min-width:0 }
.ft-count{
  font-family:var(--f-micro,ui-monospace,monospace); font-size:9px;
  color:var(--ink-3,rgba(230,255,241,.5)); letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap;
}

/* preset pills — one row, quiet until chosen */
.ft-pills{
  display:flex; flex-wrap:wrap; gap:5px; padding:10px 16px;
  border-bottom:1px solid var(--rule,rgba(147,242,191,.2));
}
.ft-pill{
  font-family:var(--f-micro,ui-monospace,monospace); font-size:8.5px;
  letter-spacing:.13em; text-transform:uppercase;
  padding:7px 13px; border-radius:3px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--rule,rgba(147,242,191,.2));
  background:transparent; color:var(--ink-3,rgba(230,255,241,.52));
  transition:color .12s, background .12s, border-color .12s;
}
.ft-pill:hover{ color:var(--ink,#e6fff1); border-color:var(--rule-2,rgba(147,242,191,.44)) }
.ft-pill.on{
  color:#04100b; font-weight:700; border-color:transparent;
  background:linear-gradient(180deg,#a9f7cd,#7fe6b0);
}

/* the column drawer */
.ft-cols{
  padding:10px 16px 12px;
  background:color-mix(in oklch, var(--panel,#0a1a13) 40%, transparent);
  border-bottom:1px solid var(--rule,rgba(147,242,191,.2));
}
.ft-cols[hidden]{ display:none }
.ft-colgrid{ display:flex; flex-wrap:wrap; gap:4px }
.ft-col{
  font-family:var(--f-micro,ui-monospace,monospace); font-size:8px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 8px; border-radius:2px; cursor:pointer;
  border:1px solid var(--rule,rgba(147,242,191,.18));
  background:transparent; color:var(--ink-3,rgba(230,255,241,.45));
}
.ft-col:hover{ color:var(--ink,#e6fff1) }
.ft-col.on{ color:#04100b; background:var(--lume,#93f2bf); border-color:var(--lume,#93f2bf) }

/* ---------- the table ---------- */
.ft-wrap{
  overflow:auto; max-height:min(74vh,820px);
  overscroll-behavior:contain;
  background:var(--ground,#04100b);
}
table.ft{
  border-collapse:separate; border-spacing:0;
  table-layout:fixed;                 /* declared widths, not inferred ones */
  /* width is set per render from the sum of the columns; see fulltable.js */
  font-family:var(--f-data,ui-monospace,monospace);
  font-size:11.5px; font-variant-numeric:tabular-nums lining-nums;
}

table.ft thead th{
  position:sticky; top:0; z-index:3;
  background:#0c1f16;
  font-family:var(--f-micro,ui-monospace,monospace);
  font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3,rgba(230,255,241,.55)); font-weight:400;
  padding:10px 8px; text-align:right; white-space:nowrap;
  cursor:pointer; user-select:none; position:relative;
  box-shadow:inset 0 -1px 0 var(--rule-2,rgba(147,242,191,.44));
}
table.ft thead th{ position:sticky; top:0 }
table.ft thead th:hover{ color:var(--ink,#e6fff1) }

/* the resize grip: a hit area on the header's trailing edge. Wider than it
   looks, because a 1px target is a target nobody hits. */
.ft-grip{
  position:absolute; top:0; right:-4px; bottom:0; width:9px;
  cursor:col-resize; z-index:5; touch-action:none;
}
.ft-grip::after{
  content:''; position:absolute; top:22%; bottom:22%; left:4px; width:1px;
  background:var(--rule-2,rgba(147,242,191,.44)); opacity:0; transition:opacity .12s;
}
.ft-grip:hover::after, .ft-grip.on::after{ opacity:1; background:var(--lume,#93f2bf) }
.ft-grip.on{ background:color-mix(in oklch, var(--lume,#93f2bf) 12%, transparent) }
table.ft thead th{ position:sticky; overflow:visible }
table.ft thead th.sorted{ color:#04100b; background:var(--lume,#93f2bf) }

/* identity columns stay put while the stats scroll sideways — a row whose
   name has scrolled away is unreadable */
table.ft th.stick, table.ft td.stick{ position:sticky; z-index:2 }
table.ft td.stick{ background:var(--ground,#04100b) }
table.ft thead th.stick{ z-index:4 }
table.ft th.c0, table.ft td.c0{ left:0;    width:36px;  text-align:right }
table.ft th.c1, table.ft td.c1{ left:36px; width:170px; text-align:left }

/* THE NAME COLUMN CAN BE FOLDED AWAY.

   Five surnames is the widest thing in the table by a distance, and on a phone
   it takes most of the screen to say something the reader has usually just
   read — they are comparing units, and after the first glance the numbers are
   the point. Folding it to a stub gives the numbers the width instead, without
   losing the row: the stub keeps the rank, and the full names come back on the
   next tap.

   The header is the control, because that is the thing whose width you want to
   change, and it carries the arrows so it does not look like a sort. */
table.ft th.c1{ cursor:pointer; user-select:none; white-space:nowrap }
table.ft th.c1 .fold{ opacity:.55; margin-left:5px; font-size:9px }
table.ft th.c1:hover .fold{ opacity:1 }
table.ft.lu-fold th.c1, table.ft.lu-fold td.c1{ width:44px; max-width:44px }
table.ft.lu-fold td.c1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-3) }
table.ft th.c1, table.ft td.c1{ box-shadow:inset -1px 0 0 var(--rule-2,rgba(147,242,191,.35)) }
table.ft thead th.c0, table.ft thead th.c1{ background:#0c1f16 }

table.ft tbody td{
  padding:0 8px; height:31px; text-align:right; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--rule,rgba(147,242,191,.12));
  color:var(--ink-2,rgba(230,255,241,.78));
}
/* banded rows: a wide table is read across, and a stripe keeps the eye on line */
table.ft tbody tr:nth-child(even) td{ background:rgba(147,242,191,.028) }
table.ft tbody tr:nth-child(even) td.stick{
  background:color-mix(in oklch, var(--lume,#93f2bf) 3%, var(--ground,#04100b));
}
table.ft tbody tr:hover td{ background:rgba(147,242,191,.09) }
table.ft tbody tr:hover td.stick{
  background:color-mix(in oklch, var(--lume,#93f2bf) 9%, var(--ground,#04100b));
}

/* the player cell */
.ft-name{ display:flex; align-items:center; gap:8px; min-width:0 }
.ft-name a, .ft-name span{
  color:var(--ink,#e6fff1); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--f-ui,system-ui,sans-serif); font-weight:600; font-size:12.5px;
  letter-spacing:.005em; text-transform:capitalize;
}
.ft-name a:hover{ color:var(--lume,#93f2bf) }
.ft-crest{
  display:inline-grid; place-items:center; width:19px; height:19px;
  border-radius:2px; flex:none; color:#04100b;
  font-family:var(--f-score,ui-monospace,monospace); font-size:9px;
}

table.ft td.lead{ color:var(--ink,#e6fff1); font-weight:600 }
table.ft td.pos{ color:var(--good,#63ffa0) }
table.ft td.neg{ color:var(--bad,#ff5f6b) }

.ft-empty{
  padding:44px 20px; text-align:center;
  color:var(--ink-3,rgba(230,255,241,.5));
  font-family:var(--f-micro,ui-monospace,monospace); font-size:10px; line-height:2;
}

@media (max-width:640px){
  table.ft{ font-size:11px }
  table.ft th.c1, table.ft td.c1{ width:132px }
  /* max-height:none turns off .ft-wrap's OWN vertical scroll, but overflow:auto
     (set above, for desktop) still sets overflow-y as well as overflow-x — a
     box that can scroll both ways at once is exactly what trapped a touch
     that started mid-table: the browser had to decide which axis the gesture
     belonged to, and it decided in the table's favour, so a vertical swipe
     over the middle of a wide table never reached the page underneath.

     overflow-y:hidden plus touch-action:pan-x was the textbook fix for that
     — and reported back broken twice, on a real phone, after CSS alone
     said it should work. Rather than tune touch-action a third time, this
     removes the thing being tuned: overflow-x is hidden here too, so the
     browser's native touch-scroll machinery has NO scrollable surface on
     this box at all, in either direction — nothing left for it to
     ambiguously claim. Horizontal panning is reimplemented by hand in
     fulltable.js's wireHorizontalDrag(), the same "do not capture the
     pointer until a drag has clearly gone sideways" rule the fixture strip
     already uses, so a vertical touch is released untouched at the first
     sign it is vertical and the page's own scroll takes it from there. */
  .ft-wrap{
    max-height:none;          /* the page scroll is enough on a phone */
    /* overflow:hidden with touch-action:pan-y was the old compromise: it let a
       vertical touch reach the page, at the price of the table not scrolling
       sideways AT ALL. On a lineup table fourteen columns wide that means
       everything past NET is unreachable on a phone — the columns are not
       clipped with a hint, they are gone.

       Naming both axes is what that compromise was reaching for. The element
       takes horizontal drags, the page keeps vertical ones, and the browser
       decides by direction on the first few pixels — so the table scrolls and
       the page still scrolls through it. */
    /* NOT overflow-x:auto. That is the version this comment block spent
       twenty lines arguing against and it is the version that shipped: the
       hand-written drag landed in fulltable.js while the CSS kept its native
       scroller, so the box went on winning the arbitration for a vertical
       touch on every table that was not the full statistics table — which is
       every table the bug was re-reported against.

       Hidden on both axes. The browser has no scrollable surface here to
       claim, pan-y says vertical belongs to the page, and scrollLeft still
       moves under script, which is all xscroll.js's drag needs. */
    overflow:hidden;
    touch-action:pan-y;
    overscroll-behavior-x:contain;
  }
  table.ft thead th{ position:static } /* and a sticky header eats too much of it */
}