/* Phone tables (release 59). Everything here is inside the 700px query, so tablets and desktops look exactly as before.
 *
 * - Standings, scoring leaders and recent results are drawn as slim flat rows instead of tall cards, and fold after three rows
 *   behind one "Show N more" button of the same look as the injury report's. Reaching the simulator no longer means scrolling
 *   past three tall tables.
 * - The standings keep working with both versions of the row: the one the landing script draws (rank, team, two numbers) and
 *   the one sports_page_extras.js rewrites it into (rank, team, GP, Pts and, for the Premier League, GD). The old card layout
 *   had four columns and wrapped the fifth cell onto a second line (the goal difference, 114 px per team).
 * - The fold itself is table_fold.js (leaders, results; it adds .tf-extra and data-tf) and the landing script (standings). */

.scoutics-page .tf-more { display: none; }

@media (max-width: 700px) {

  /* ── the shared "Show N more" button ── */
  .scoutics-page [data-tf="folded"] > .tf-extra { display: none !important; }
  .scoutics-page .tf-more,
  .scoutics-page .standings-toggle {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid var(--line-strong, rgba(242, 242, 242, .18));
    border-radius: 8px;
    background: transparent;
    color: var(--paper, #f2f2f2);
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
  }
  .scoutics-page .standings-toggle[hidden] { display: none !important; }
  .scoutics-page .tf-more:hover,
  .scoutics-page .standings-toggle:hover { background: var(--panel-2, #181c24); }
  .scoutics-page .tf-more:focus-visible,
  .scoutics-page .standings-toggle:focus-visible { outline: 2px solid var(--brand-bright, #2e7cff); outline-offset: 2px; }

  /* ── standings: one slim line per team ── */
  .scoutics-page table.standings.canonical-standings-table thead { display: block; }
  .scoutics-page table.standings.canonical-standings-table thead tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 34px;
    gap: 6px;
    padding: 0 2px 4px;
  }
  .scoutics-page table.standings.canonical-standings-table thead th {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--slate-dim);
    font: 600 9px/1 'IBM Plex Mono', monospace;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .scoutics-page table.standings.canonical-standings-table thead th:nth-child(2) { text-align: left; }
  .scoutics-page table.standings.canonical-standings-table tbody { gap: 0; }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: none;
    grid-auto-flow: column;
    grid-auto-columns: 34px;
    gap: 6px;
    padding: 5px 2px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row:first-child { border-top: 0; }
  /* The base table rules give every cell 7px 4px of padding, a rule under it and a fixed width; a slim row needs none of that.
     The left border is left alone on purpose: it is the blue / red band mark of the top four and the bottom three. */
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td {
    grid-area: auto;
    width: auto;
    padding: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0 !important;                  /* the site theme draws a rule under every table cell, with !important */
  }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.rank {
    justify-self: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 10px;
  }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.num {
    display: block;
    min-height: 0;
    color: var(--slate);
    font: 500 12px/1.2 'IBM Plex Mono', monospace;
    text-align: center;
  }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.num::before { content: none; }
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.standings-points,
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.num[data-label="Pts"],
  .scoutics-page table.standings.canonical-standings-table tr.standings-row > td.num[data-label="Wins"] { color: var(--paper); font-weight: 700; }
  .scoutics-page table.standings.canonical-standings-table .standings-team-main { gap: 7px; }
  .scoutics-page table.standings.canonical-standings-table .standings-jersey { flex: 0 0 22px; width: 22px; height: 25px; }
  .scoutics-page table.standings.canonical-standings-table .standings-jersey svg { width: 100%; height: 100%; }
  .scoutics-page table.standings.canonical-standings-table .standings-team-copy {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
    align-items: center;
    column-gap: 5px;
  }
  .scoutics-page table.standings.canonical-standings-table .standings-team-name {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .scoutics-page table.standings.canonical-standings-table .promoted-badge { margin: 0; padding: 0 5px; font-size: 8px; }
  .scoutics-page table.standings.canonical-standings-table .standings-record {
    grid-column: 1 / -1;
    margin-top: 1px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The note about the coloured bands explains the whole table; it appears with it. */
  .scoutics-page table.standings.canonical-standings-table:not(.standings-expanded) ~ #tableZoneLegend { display: none; }

  /* ── scoring leaders ── */
  .scoutics-page #leaderboard .panel { padding: 14px; }          /* the same panel as the standings and the results, not rows running edge to edge */
  .scoutics-page #leaderboard .lb-row {
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .scoutics-page #leaderboard .lb-row:first-child { border-top: 0; }
  .scoutics-page #leaderboard .lb-rank { width: 14px; font-size: 11px; }
  .scoutics-page #leaderboard .lb-row .standings-jersey { flex: 0 0 22px; width: 22px; height: 25px; }
  .scoutics-page #leaderboard .lb-row .standings-jersey svg { width: 22px; height: 25px; }
  .scoutics-page #leaderboard .lb-name { min-width: 0; font-size: 12px; line-height: 1.25; }
  .scoutics-page #leaderboard .lb-name .team { font-size: 10px; }
  .scoutics-page #leaderboard .lb-odds { font-size: 13px; line-height: 1.2; text-align: right; white-space: nowrap; }
  .scoutics-page #leaderboard .lb-odds small { font-size: 10px; color: var(--slate-dim); }

  /* ── recent results ── */
  .scoutics-page .rr-list > .rr-row { padding: 6px 0; column-gap: 8px; font-size: 12px; }
  .scoutics-page .rr-list > .rr-row:first-child { padding-top: 0; border-top: 0; }
  .scoutics-page .rr-list > .rr-row:last-child { padding-bottom: 0; }
  .scoutics-page .rr-list > .rr-row .rr-score { min-width: 48px; padding: 2px 8px; font-size: 12px; }
  .scoutics-page .rr-list > .rr-row .rr-meta { margin-top: 1px; font-size: 10px; }
}