/* The dense style, on every page (views/layout/main.jte): the page frame, headings, and the compact tables
   every page is built from. Colors are the tokens in main.css. Page stylesheets add column widths and layout.

   Tables: .dense-table is a wide table that scrolls sideways inside .dense-scroll (the standings);
   .dense-mini fits its container with fixed column widths from a <colgroup>. Both share the cell rules here. */

.dense-page {
    max-width: 1400px;   /* the site header's width, so the two line up */
    margin: -20px auto 0;
    padding: 12px 20px 48px;
    font-size: 13px;
    line-height: 1.4;
}
.dense-page a { color: var(--link); text-decoration: none; }
.dense-page a:hover { text-decoration: underline; }

.dense-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dense-page h1 { font-size: 18px; margin: 0; color: var(--fg-strong); line-height: 1.3; }
.dense-page h2 { font-size: 14px; margin: 18px 0 4px; color: var(--fg-strong); }
.dense-page h3 { font-size: 12px; margin: 12px 0 4px; color: var(--fg-strong); }
.dense-meta { color: var(--muted); margin: 4px 0 0; max-width: 64rem; }
.dense-note, .dense-none, .dense-foot { color: var(--muted); margin: 0 0 6px; max-width: 64rem; }
.dense-none { font-size: 12px; }
.dense-foot { margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 12px; max-width: none; }
.dense-page p.dense-text { max-width: 44rem; margin: 0 0 8px; line-height: 1.55; }

/* Side by side on wide screens, stacked below 1000px. */
.dense-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.dense-cols > * > h2:first-child, .dense-cols > h2:first-child { margin-top: 18px; }

/* ── Tables ── */
.dense-wide { overflow-x: auto; }
.dense-scroll { overflow-x: auto; border-top: 2px solid var(--fg); }
.dense-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.dense-mini { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 12px;
    font-variant-numeric: tabular-nums; border-top: 2px solid var(--fg); }
:is(.dense-table, .dense-mini) :is(th, td) { padding: 2px 5px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
:is(.dense-table, .dense-mini) thead th { font-weight: 600; font-size: 11px; color: var(--muted); vertical-align: bottom; background: var(--bg); }
:is(.dense-table, .dense-mini) thead th[title], :is(.dense-table, .dense-mini) [title].help { cursor: help; }
:is(.dense-table, .dense-mini) thead tr:last-child th { border-bottom: 1px solid var(--rule-strong); }
:is(.dense-table, .dense-mini) thead tr.grp th { border-bottom: 0; padding-top: 4px; text-align: left; color: var(--fg); }
:is(.dense-table, .dense-mini) tbody tr:hover > * { background-color: var(--band); }
:is(.dense-table, .dense-mini) tfoot td { border-bottom: 0; border-top: 1px solid var(--rule-strong); color: var(--muted); }

/* Cells */
:is(.dense-table, .dense-mini) .g { border-left: 1px solid var(--rule-strong); }
:is(.dense-table, .dense-mini) .l { text-align: left; }
:is(.dense-table, .dense-mini) .c { text-align: center; }
:is(.dense-table, .dense-mini) .wrap { white-space: normal; }
:is(.dense-table, .dense-mini) .tm { text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
:is(.dense-table, .dense-mini) .tm a { color: var(--fg); }
:is(.dense-table, .dense-mini) .ellip { overflow: hidden; text-overflow: ellipsis; }
:is(.dense-table, .dense-mini) tr.sect th { text-align: left; background: var(--band); color: var(--fg); font-size: 11px; font-weight: 700; padding-top: 3px; padding-bottom: 3px; }
:is(.dense-table, .dense-mini) tr.cut td { padding: 0; height: 0; border-bottom: 2px solid var(--neg); font-size: 0; line-height: 0; }
:is(.dense-table, .dense-mini) tr.me > * { background: var(--accent-bg); }
:is(.dense-table, .dense-mini) tr.me .tm { font-weight: 700; }
.dense-page .lg { width: 27px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }
.dense-page .ab { display: none; }
.dense-page .mk { margin-left: 4px; font-size: 10px; font-weight: 700; color: var(--muted); cursor: help; }
.dense-page .b { font-weight: 700; }
.dense-page a.pn { color: inherit; }   /* a player's name linked to their page (partials/_playerLink.jte) */
.dense-page .pos, .dense-page .up { color: var(--pos); }
.dense-page .neg, .dense-page .dn { color: var(--neg); }
.dense-page .out, .dense-page .mu { color: var(--muted); }
.dense-page .tag { font-size: 10px; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0 3px; margin-left: 4px; }

/* Last 10: one bar per game, oldest first; a short tick for each game not played yet. */
.dense-page .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: -2px; }
.dense-page .bars i { display: block; width: 6px; height: 14px; border-radius: 1px; }
.dense-page .bars .win { background: var(--win); }
.dense-page .bars .loss { background: var(--loss); }
.dense-page .bars .ot-loss { background: var(--otl); }
.dense-page .bars .none { height: 2px; background: var(--rule-strong); }

/* W / L / OTL letters in game lists */
.dense-page .res { font-weight: 700; }
.dense-page .res.win { color: var(--pos); }
.dense-page .res.loss { color: var(--neg); }
.dense-page .res.ot-loss { color: var(--warn-ink); }

/* Odds heat, in every table: one hue, eight steps (app.web.OddsTable.heat). */
.dense-page .hc.h0 { color: var(--muted); }
.dense-page .hc.h1 { background: color-mix(in srgb, var(--heat) 5%, var(--bg)); }
.dense-page .hc.h2 { background: color-mix(in srgb, var(--heat) 11%, var(--bg)); }
.dense-page .hc.h3 { background: color-mix(in srgb, var(--heat) 19%, var(--bg)); }
.dense-page .hc.h4 { background: color-mix(in srgb, var(--heat) 29%, var(--bg)); }
.dense-page .hc.h5 { background: color-mix(in srgb, var(--heat) 42%, var(--bg)); }
.dense-page .hc.h6 { background: color-mix(in srgb, var(--heat) 56%, var(--bg)); }
.dense-page .hc.h7 { background: color-mix(in srgb, var(--heat) 74%, var(--bg)); color: var(--heat-ink); }
.dense-page .hc.h8 { background: var(--heat); color: var(--heat-ink); }
.dense-page tbody tr:hover td.hc { filter: brightness(0.96); }

/* ── Games: one small table per game, as many across as fit (views/pages/_denseGames.jte) ── */
.dense-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; align-items: start; }
.dense-game col.c-tm { width: 76px; }
.dense-game col.c-now { width: 48px; }
.dense-game tr.gh th { text-align: left; color: var(--fg); font-size: 12px; font-weight: 400; background: var(--band); padding: 4px 6px 6px; }
/* The game's header: its status and swing on a small line, then the two teams with logos and the score */
.dense-game .gtop { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.dense-game .when { color: var(--muted); }
.dense-game .sw { color: var(--muted); cursor: help; }
/* A game in progress: a blue header, the period and clock in blue (neutral, unlike the win/loss green and red) */
.dense-game.live tr.gh th { background: var(--accent-bg); }
.dense-game .live { color: var(--link); font-weight: 700; }
/* The dot before a game in progress, here and on the playoffs page's series cards */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--link-soft); margin-right: 4px; vertical-align: 1px; }
/* Away at the left edge, "@" in the middle, home at the right edge */
.dense-game .gm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
    margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--fg-strong); }
.dense-game .gm > span:last-child { justify-self: end; }
.dense-game .gm:hover { text-decoration: none; }
.dense-game .gm > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dense-game .gm b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.dense-game .gm .lose { color: var(--muted); }
.dense-game .gm .won b { color: var(--pos); }
.dense-game .gm .at { color: var(--muted); font-weight: 400; font-size: 13px; }
.dense-game .glg { width: 30px; height: 22px; object-fit: contain; display: block; }
.dense-game tbody th.tm { font-weight: 400; }
.dense-game tbody tr.in th.tm { font-weight: 700; }

@media (max-width: 1000px) {
    .dense-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .dense-page { margin-top: -12px; padding-left: 12px; padding-right: 12px; }
    .dense-page .full { display: none; }
    .dense-page .ab { display: inline; }
}

/* ── Phones: compact tables ──
   Cells marked .x are left out on phones so a table fits the screen without scrolling sideways; a
   .cols-toggle button (columns-toggle.js) adds .all-cols to the page to bring them back. */
.cols-toggle { display: none; }
@media (max-width: 640px) {
    .cols-toggle { display: inline-block; margin: 8px 0 0; padding: 3px 10px; font: inherit; font-size: 12px;
        color: var(--link); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 3px; cursor: pointer; }
    .dense-page:not(.all-cols) :is(.dense-table, .dense-mini) .x { display: none; }
    /* A compact table with columns left out sizes to its content, since the colgroup's widths no longer
       line up; with every column shown it keeps its content width and scrolls inside .dense-wide. */
    .dense-mini:has(.x) { table-layout: auto; width: auto; min-width: 100%; }
    .dense-mini:has(.x) col { width: auto !important; }
}

/* Off-season page (views/pages/offseason.jte) */
.offseason-page .champion { font-size: 14px; color: var(--fg); margin-top: 8px; }
.offseason-page .review { max-width: 560px; }
.offseason-page col.c-k { width: 120px; }
.offseason-page col.c-n { width: 48px; }
.offseason-page col.c-r { width: 80px; }
.offseason-page .review th.l { font-weight: 400; color: var(--muted); }

/* Text pages (About) */
.dense-list { max-width: 44rem; margin: 0 0 8px 20px; line-height: 1.55; }
.dense-list ul { margin: 2px 0 4px 18px; }
.dense-list li { margin: 1px 0; }
.about-page .glossary { max-width: 720px; }
.about-page .glossary th { font-weight: 700; color: var(--fg); vertical-align: top; }
.about-page .glossary td { color: var(--fg); }
.about-page col.c-k { width: 150px; }
.about-page .formula { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--band); padding: 6px 10px; margin: 0 0 8px; max-width: 44rem; }

/* Bandwagon Guide (views/pages/bandwagon.jte) */
.bandwagon-page .bw { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--rule-strong); }
.bandwagon-page .bw h2 { margin-top: 4px; font-size: 16px; }
.bandwagon-page .bw h2 .lg { width: 36px; height: 26px; vertical-align: -7px; }
.bandwagon-page .bw h2 .mu { font-size: 12px; font-weight: 400; }
.bandwagon-page .bw-odds { max-width: 560px; margin-bottom: 8px; }
.bandwagon-page col.c-n { width: 56px; }
.bandwagon-page col.c-r { width: 70px; }
.bandwagon-page .bw-text h3 { margin-top: 10px; }