/* WSC / WPC results viewer (results.js). Uses the palette in css/styles.css.
   Loaded only on the results pages, so the .page-hero tweaks below stay local. */

/* body { overflow-x: hidden } in styles.css turns <body> into a scroll container that
   never scrolls, which breaks every position:sticky on the site (the header included).
   `clip` contains overflow the same way without that side effect. Scoped to the results
   pages until styles.css itself is fixed. */
body { overflow-x: clip; }

/* ---------- Compact hero on phones: results start above the fold ---------- */
.results-section { padding-top: clamp(1.2rem, .8rem + 2vw, 2.4rem); }
@media (max-width: 900px) {
    .page-hero { padding: 1rem 0 .9rem; }
    .page-hero .breadcrumb { margin-bottom: .3rem; font-size: .8rem; }
    .page-hero__title { font-size: 1.6rem; margin: 0; }
    .page-hero__sub { display: none; }
}

.results { max-width: var(--maxw); margin: 0 auto; }
.results [hidden] { display: none !important; }

/* ---------- Round strip, pinned under the site header ---------- */
.results-bar {
    position: sticky; top: var(--header-h); z-index: 20;
    margin: 0 -1rem 1.2rem; padding: .55rem 1rem;
    background: rgba(251, 246, 236, .96); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.results-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
@media (max-width: 900px) {
    .results-strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
                     scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
    .results-strip::-webkit-scrollbar { display: none; }
}

.results-chip {
    flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; padding: .3rem .7rem;
    font: inherit; font-size: .95rem; line-height: 1.1; color: var(--green-dark); cursor: pointer;
    background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid var(--green);
    border-radius: var(--radius-sm);
}
.results-chip small { font-size: .7rem; font-weight: 700; color: var(--ink-soft); margin-right: 1px; }
.results-chip strong { font-family: var(--font-display); font-size: 1.05rem; }
.results-chip--overall { font-weight: 700; font-size: .88rem; }
.results-chip--team { border-bottom-color: var(--saffron-deep); }
.results-chip--playoff { border-bottom-color: var(--navy); }
.results-chip:hover, .results-chip:focus-visible { border-color: var(--green); }
.results-chip.is-active { color: var(--white); background: var(--green); border-color: var(--green-dark); }
.results-chip.is-active small { color: rgba(255, 255, 255, .8); }
.results-chip--team.is-active { background: var(--saffron-deep); border-color: var(--saffron-deep); }
.results-chip--playoff.is-active { background: var(--navy); border-color: var(--navy); }

/* ---------- Heading of the open round ---------- */
.results-head { margin-bottom: .9rem; text-align: center; }
.results-title { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem); color: var(--green-dark); }
.results-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .7rem; margin: 0; color: var(--ink-soft); font-size: .9rem; }
.results-badge { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: .22rem .55rem; border-radius: 999px; color: var(--ink); background: var(--orange); }
.results-share { font: inherit; font-size: .88rem; color: var(--green-dark); background: none; cursor: pointer;
                 border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; min-height: 2.2rem; }
.results-share:hover { border-color: var(--green); }
.results-status { text-align: center; color: var(--ink-soft); padding: 2rem 0; }

/* ---------- Controls ---------- */
.results-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .7rem; }
.results-search { flex: 1 1 260px; max-width: none; }
.results-search input { min-height: 2.75rem; font-size: 1rem; }      /* 16px stops iOS zooming in */
.results-select, .results-toggle, .results-view button {
    min-height: 2.75rem; font: inherit; font-size: .95rem; color: var(--ink);
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .8rem;
}
.results-select { flex: 0 1 auto; max-width: 13rem; }
.results-toggle { cursor: pointer; }
.results-toggle.is-on { color: var(--ink); background: #fff3cf; border-color: var(--orange); }
.results-view { display: inline-flex; }
.results-view button { cursor: pointer; border-radius: 0; }
.results-view button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.results-view button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.results-view button[aria-pressed="true"] { color: var(--white); background: var(--green); border-color: var(--green); }
.results-countline { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.results-count { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.results-countline .results-view button { min-height: 2.4rem; font-size: .88rem; }
.results-toggle__icon { color: #e2a400; }
@media (max-width: 640px) {
    .results-search { flex-basis: 100%; }
    .results-select { flex: 1 1 0; min-width: 0; max-width: none; }
    .results-toggle { flex: 0 0 auto; }
    .results-toggle__text { display: none; }
}

/* ---------- Favourites ---------- */
.results-favbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .7rem;
                  padding: .5rem .7rem; background: #fff8e1; border: 1px solid #f3dca0; border-radius: var(--radius-sm); }
.results-favbar__label { font-weight: 700; color: #8a5a00; font-size: .9rem; white-space: nowrap; }
.results-favbar__none { color: var(--ink-soft); font-size: .9rem; }
.results-favbar__list { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.results-favchip { display: inline-flex; gap: .4rem; align-items: baseline; min-height: 2.4rem; padding: .3rem .7rem;
                   font: inherit; font-size: .9rem; color: var(--ink); background: var(--white); cursor: pointer;
                   border: 1px solid #f3dca0; border-radius: 999px; }
.results-favchip__rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.results-favchip strong { color: var(--green-dark); }

.results-star { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; font-size: 1.35rem; line-height: 1; color: #b9ad97;
                background: none; border: 0; cursor: pointer; border-radius: 50%; }
.results-star.is-on { color: #e2a400; }
@media (max-width: 640px) {      /* one swipeable line on phones */
    .results-favbar { flex-wrap: nowrap; }
    .results-favbar__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
    .results-favbar__list::-webkit-scrollbar { display: none; }
    .results-favchip { white-space: nowrap; }
}
.results-star:hover, .results-star:focus-visible { background: rgba(255, 182, 47, .18); }

/* ---------- Compact list (phones) ---------- */
.rlist { margin: 0; padding: 0; list-style: none; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.rrow { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.rrow:nth-child(even) { background: var(--cream); }
.rrow.is-fav { background: #fff8e1; }
.rrow__main { display: grid; grid-template-columns: 2.4rem 1fr auto 1rem; align-items: center; gap: .5rem;
              min-height: 3.2rem; padding: .45rem 0 .45rem .7rem; width: 100%; text-align: left;
              font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; }
.rrow__rank { font-weight: 700; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rrow__who { min-width: 0; }
.rrow__name { display: block; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.rrow__sub { display: block; font-size: .82rem; color: var(--ink-soft); }
.rrow__total { font-weight: 700; font-size: 1.05rem; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.rrow__caret { color: var(--ink-soft); transition: transform .15s ease; }
.rrow.is-open .rrow__caret { transform: rotate(180deg); }
.rrow__detail { grid-column: 1 / -1; padding: .2rem .8rem .8rem 3rem; }

.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .1rem 1rem; margin: 0; }
.rgrid__item { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.rgrid dt { color: var(--ink-soft); }
.rgrid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.rgrid dd.is-solved { color: var(--green-dark); }
.rgrid dd.is-wrong { color: #c0262d; font-weight: 700; }
.rgrid dd.is-blank { color: #b9ad97; font-weight: 400; }
.rgrid__item--total { border-bottom: 0; }
.rgrid__item--total dt, .rgrid__item--total dd { font-weight: 700; color: var(--ink); }

/* ---------- Full table ---------- */
.results-wrap table.data.results-table { min-width: 0; }
table.data.results-table th, table.data.results-table td { padding: .5rem .55rem; font-size: .93rem; white-space: nowrap; }
table.data.results-table thead th { font-size: .82rem; line-height: 1.2; white-space: normal; vertical-align: bottom; min-width: 3.4rem; }
.results-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.results-table .is-puzzle { text-align: center; font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.results-table thead th.is-puzzle { text-align: center; }
.results-table td.is-solved { color: var(--green-dark); font-weight: 600; }
.results-table td.is-wrong { color: #c0262d; font-weight: 700; }
.results-table td.is-total { font-weight: 700; }
.results-table td.has-star { padding-left: 0; }
.results-table .results-star { width: 2.2rem; height: 2.2rem; font-size: 1.15rem; vertical-align: middle; }
table.data.results-table tbody tr { background: var(--white); }
table.data.results-table tbody tr:nth-child(even) { background: var(--cream); }
table.data.results-table tbody tr.is-fav { background: #fff8e1; }
table.data.results-table tbody tr:hover { background: var(--cream-2); }

/* Pinned columns (Rank, Name/Team left; Total right) - see pin() in results.js. */
.results-table .is-pin { position: sticky; z-index: 1; background: inherit; }
.results-table thead th.is-pin { background: var(--green); }
.results-table .is-pin-edge-l { box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .35); }
.results-table .is-pin-edge-r { box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .35); }

@media (max-width: 640px) {
    table.data.results-table th, table.data.results-table td { padding: .45rem .4rem; font-size: .88rem; }
}

/* Jump-to highlight from the favourites bar */
@keyframes results-flash { from { box-shadow: inset 0 0 0 3px var(--orange); } to { box-shadow: inset 0 0 0 3px transparent; } }
.is-flash { animation: results-flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; } .rrow__caret { transition: none; } }

/* Official / All players switch (only on tabs with an _Official column) */
.results-who { flex: 0 0 auto; }
.results-who button { white-space: nowrap; }
@media (max-width: 640px) {
    .results-who { flex: 1 1 100%; display: flex; }
    .results-who button { flex: 1 1 50%; }
}

/* Rounds > Remarks for the open round (plain text; line breaks kept) */
.results-remarks {
    max-width: 760px; margin: .8rem auto 0; padding: .7rem 1rem; text-align: left; white-space: pre-line;
    color: var(--ink); font-size: .95rem; background: rgba(255, 182, 47, .14);
    border-left: 4px solid var(--saffron); border-radius: var(--radius-sm);
}

/* ---------- Printing (see buildPrint() in results.js) ----------
   On screen the print copy is hidden; when printing, only it is shown. */
.results-print { display: none; }
@media print {
    body > *:not(.results-print) { display: none !important; }
    body { background: #fff !important; overflow: visible !important; }
    .results-print { display: block !important; color: #000; font: 8.5pt/1.15 Arial, Helvetica, sans-serif; }
    .rp-head { margin-bottom: 3mm; }
    .rp-event { font-size: 8pt; color: #444; }
    .rp-title { margin: .5mm 0 1mm; font: bold 15pt/1.15 Arial, Helvetica, sans-serif; color: #000; }
    .rp-remarks { margin-top: 1.5mm; padding: 1mm 2mm; border-left: 2pt solid #888; background: #f2f2f2;
                  white-space: pre-line; font-size: 9pt; }
    .rp-key { margin-top: 1mm; font-size: 7.5pt; color: #444; }
    .rp-table { width: 100%; border-collapse: collapse; }
    .rp-table thead { display: table-header-group; }          /* headings repeat on every page */
    .rp-table tr { break-inside: avoid; page-break-inside: avoid; }
    .rp-table th { font-weight: bold; font-size: 7.5pt; line-height: 1.1; text-align: left; vertical-align: bottom;
                   padding: 1mm 1mm; border-bottom: 1pt solid #000; background: #e6e6e6 !important; }
    .rp-table td { padding: 1.5mm 1mm; border-bottom: .4pt solid #bbb; white-space: nowrap; }   /* ~1.5x row height */
    .rp-table tbody tr:nth-child(even) td { background: #f4f4f4 !important; }
    .rp-table .is-num { text-align: right; }
    .rp-table .is-puzzle { text-align: center; }
    .rp-table .is-total { font-weight: bold; }
    .rp-table tr.is-unofficial td { color: #444; font-style: italic; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}