/* Results Table (under Public Data). Uses the colour/spacing variables from index.css, and
   duplicates a few small shared bits from styles/headtohead.css (page head, credit line) per
   this codebase's existing per-page-CSS convention - every page duplicates .fld/.page-head/etc.
   rather than sharing a file, so this one does too. */

.results-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px var(--pad) 96px;
}

.page-head {
    margin-bottom: 28px;
    text-align: center;
}

.eyebrow {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
}

.page-lead {
    margin: 10px auto 0;
    max-width: 560px;
    text-align: center;
    color: var(--text-dim);
}

.notice--error {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(255, 122, 122, 0.08);
    border: 1px solid rgba(255, 122, 122, 0.35);
    border-radius: var(--radius-sm);
    color: #ff7a7a;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- filter bar ---------- */

.results-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
}

.results-filters .fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.results-filters .fld span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.results-filters .results-share {
    justify-content: flex-end;
}

.results-filters select,
.results-filters input {
    padding: 7px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color-scheme: dark;
    font-size: 13px;
}

.results-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
}

/* ---------- the matrix ---------- */

/* A framed, scrolling panel. The table inside is centred with auto margins (not flexbox: a flex-centred
   table wider than the panel is pushed out on the left, where it can't be scrolled to), so a small
   table sits in the middle and a big one scrolls from its first column. */
.results-table-wrap {
    position: relative;
    /* as wide as the table (centred), but never wider than the page - then it scrolls */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    overflow: auto;
    max-height: min(78vh, 920px);
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.results-table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.results-table th,
.results-table td {
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    white-space: nowrap;
}

/* Header row stays visible while scrolling down; the first two columns stay visible while
   scrolling sideways - both axes of a row/column match-up stay readable in a wide, tall table. */
.results-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 4px;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border-strong);
    text-align: center;
}

.results-th-agg,
.results-td-agg {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 150px;
    min-width: 150px;
}

.results-th-name,
.results-td-name {
    position: sticky;
    left: 150px;
    z-index: 2;
    width: 230px;
    min-width: 230px;
}

.results-table thead th.results-th-agg,
.results-table thead th.results-th-name {
    z-index: 4;
}

.results-table thead th.results-th-agg {
    padding-left: 24px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: normal;
    line-height: 1.3;
}

.results-table thead th.results-th-name {
    padding-left: 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    /* the shadow on the pinned edge shows there is more to scroll to */
    box-shadow: 10px 0 14px -10px rgba(0, 0, 0, 0.7);
}

.results-th-logo {
    width: 76px;
    min-width: 76px;
}

.results-team-logo {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    object-fit: contain;
}

.results-team-logo--text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

/* the team names down the left: a quiet band with its own separator line */
.results-td-agg,
.results-td-name {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border);
}

/* (written with .results-table in front so they beat the table's own "padding: 0" rule - otherwise the
   text sits right on the frame's edge) */
.results-table .results-td-agg {
    padding: 0 18px 0 24px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
}

.results-agg-sets { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.results-agg-wr { font-size: 16px; font-weight: 800; }

.results-table .results-td-name {
    padding: 0 16px 0 8px;
    font-weight: 400;
    font-size: 17px;
    text-transform: uppercase;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    box-shadow: 10px 0 14px -10px rgba(0, 0, 0, 0.7);
}

.results-td-name .results-team-logo,
.results-td-name .results-team-logo--text {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.results-td-name .results-team-logo--text { display: inline-flex; }

.results-td {
    min-width: 76px;
    text-align: center;
}

/* one head-to-head: a rounded tile coloured by win rate (red -> yellow -> green) */
.results-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 44px;
    margin: 3px;
    border-radius: 9px;
    color: #fff;
    line-height: 1.25;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: filter var(--fast) var(--ease);
}

/* (a translucent colour, not `opacity`: the image download draws an opacity layer as a box behind the text) */
.results-cell-sets { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.results-cell-wr { font-size: 13px; font-weight: 800; }

/* never played each other: a quiet blank tile */
.results-cell--empty {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

/* A team vs itself - never a real match-up, so it's hatched instead of flat grey like a
   never-played pair, making the two "blank" reasons tellable apart at a glance. */
.results-cell--self {
    background:
        repeating-linear-gradient(135deg, var(--border-strong) 0, var(--border-strong) 1px, transparent 1px, transparent 8px),
        rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* ---------- hover crosshair: which row, which column ---------- */
/* An inset green outline traces the hovered row and column (instead of a filled highlight, which
   on the header row meant the team logos sat on a solid green tile). */

tr.results-row-hover td .results-cell {
    filter: brightness(1.15);
    box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}

td.results-col-hover-cell .results-cell {
    filter: brightness(1.15);
    box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary);
}

tr.results-row-hover td.results-col-hover-cell .results-cell {
    box-shadow:
        inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary),
        inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary);
}

tr.results-row-hover .results-td-agg,
tr.results-row-hover .results-td-name {
    background: var(--surface-3) !important;
}

th.results-col-hover {
    box-shadow: inset 0 -3px 0 var(--primary);
    background: var(--surface-2);
}

/* the most recent matches between the two teams of a tile (hover, or a tap on a phone) - resultstable.js */
.results-td--has { cursor: pointer; }
.results-pop {
    position: fixed;
    z-index: 70;
    width: min(330px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 12px 14px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-lg, 0 14px 40px rgba(0, 0, 0, 0.55));
    color: var(--text);
    pointer-events: none; /* (it must not take the hover away from the tile) */
}
.results-pop[hidden] { display: none; }
.results-pop-head { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.results-pop-head strong { font-weight: 400; color: var(--primary); }
.results-pop-sub { margin: 2px 0 8px; font-size: 12px; color: var(--text-muted); }
.results-pop-title { margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.results-pop-note { font-size: 13px; color: var(--text-dim); padding: 4px 0; }
.results-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.results-pop-list li {
    display: grid;
    grid-template-columns: 62px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-left: 3px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-3);
    font-size: 12.5px;
}
.results-pop-list li.is-win { border-left-color: #4fd36a; }
.results-pop-list li.is-loss { border-left-color: #ff7a7a; }
.results-pop-date { font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.results-pop-kind { padding: 1px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(174, 232, 117, 0.14); color: var(--primary); }
.results-pop-kind--tournament, .results-pop-kind--official { background: rgba(224, 197, 63, 0.16); color: #e8d36a; }
.results-pop-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; }
.results-pop-score { font-family: var(--font-display); font-size: 15px; font-weight: 400; letter-spacing: 0.02em; text-align: right; }
.results-pop-list li.is-win .results-pop-score { color: #4fd36a; }
.results-pop-list li.is-loss .results-pop-score { color: #ff7a7a; }

/* how to read the colours */
.results-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.results-legend i {
    width: 120px;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, hsl(0, 55%, 34%), hsl(50, 55%, 34%), hsl(130, 55%, 34%));
}

.h2h-credit {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .results-page {
        padding-top: 36px;
    }

    .results-table-wrap {
        max-height: 74vh;
        border-radius: var(--radius-sm);
    }

    /* the filters sit two to a row, each as wide as its half (they were centred at their own widths, one under the other) */
    .results-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .results-filters .fld { min-width: 0; }
    .results-filters select, .results-filters input { width: 100%; min-width: 0; box-sizing: border-box; }
    .results-filters .fld:has(#matchType), .results-filters .fld:has(#filterTournament), .results-filters .results-share { grid-column: 1 / -1; }

    /* on a phone the pinned columns would leave no room for the grid: only the totals stay pinned */
    .results-th-agg,
    .results-td-agg { width: 112px; min-width: 112px; }
    .results-table .results-td-agg { padding: 0 8px 0 14px; }
    .results-table thead th.results-th-agg { padding-left: 14px; }
    .results-th-name,
    .results-td-name { position: static; width: 170px; min-width: 170px; box-shadow: none; }
    .results-table .results-td-name { font-size: 14px; }
    .results-table thead th.results-th-name { position: static; }
}

.results-share .export-actions { margin: 0; }