/* Records and Regions (Public Data). Shared pieces are in publicstats.css. */

/* ---------- records ---------- */

.rc-section { margin-top: 30px; }
.rc-section:first-child { margin-top: 0; }
.rc-title { margin-bottom: 12px; font-family: var(--font-display); font-size: 26px; font-weight: 400; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.rc-list { margin-top: 0; }
.rc-rows { list-style: none; margin: 0; padding: 0; }
.rc-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.rc-row:last-child { border-bottom: 0; }
.rc-rank { font-size: 12px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rc-row.is-first .rc-rank { color: #ffd166; font-weight: 800; }
.rc-row.is-first .rc-value b { color: var(--primary); font-size: 18px; }
.rc-who { font-size: 14px; }
.rc-value { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.rc-value b { font-size: 15px; }
.rc-live { padding: 1px 6px; border-radius: 999px; background: rgba(126, 224, 122, 0.16); color: #7ee07a; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; }
.rc-duo { display: inline-flex; flex: none; }
.rc-duo .ps-logo + .ps-logo { margin-left: -8px; box-shadow: -2px 0 0 var(--bg-2); }
.rc-cal { width: 34px; text-align: center; font-size: 20px; }
.rc-generated { margin-top: 26px; font-size: 12px; text-align: center; }

/* "View all 31 teams" / "View top 50 players": at the foot of a card, to the list's own page */
.rc-more { display: flex; justify-content: center; width: 100%; margin-top: 12px; }

/* a list on its own page (records.html?list=...): the way back and the list menu above, then one table of every row */
.rc-detail-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rc-pick { display: flex; flex-direction: column; gap: 4px; }
.rc-pick > span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rc-pick select { max-width: min(320px, 100%); padding: 7px 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color-scheme: dark; font-size: 13px; }
.rc-detail { margin-top: 0; }
.rc-table th.num, .rc-table td.num { white-space: nowrap; }
.rc-table .rc-rank { width: 40px; text-align: center; font-size: 12px; color: var(--text-muted); }
.rc-table .rc-name { min-width: 180px; }
.rc-table .rc-who { font-size: 14px; }
.rc-table td.rc-value { display: table-cell; font-size: 14px; }
.rc-table td.rc-value .rc-live { margin-right: 6px; }
.rc-table .rc-when { white-space: nowrap; font-size: 12px; }
.rc-trow.is-first .rc-rank { color: #ffd166; font-weight: 800; }
.rc-trow.is-first .rc-value b { color: var(--primary); }
.rc-trow.has-sets { cursor: help; }
.rc-trow.has-sets:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }

/* the sets of a streak, on hover */
.rc-row.has-sets { cursor: help; border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; transition: background var(--fast); }
.rc-row.has-sets:hover, .rc-row.has-sets:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }
.rc-pop { position: fixed; z-index: 60; max-height: min(70vh, 560px); overflow-y: auto; padding: 12px 14px; background: var(--surface-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--fast), transform var(--fast), visibility var(--fast); }
.rc-pop.is-on { opacity: 1; visibility: visible; transform: none; }
.rc-pop-head { margin-bottom: 8px; font-size: 14px; }
.rc-pop-note { margin: 0; font-size: 13px; }
.rc-pop-sets { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rc-pop-sets li { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.rc-pop-sets li:last-child { border-bottom: 0; }
.rc-pop-sets li.is-lost { background: rgba(255, 138, 128, 0.08); }
.rc-pop-n { font-size: 11px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rc-pop-when { font-size: 11.5px; white-space: nowrap; }
.rc-pop-opp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.rc-pop-opp .ps-logo { width: 20px; height: 20px; border-radius: 5px; }
.rc-pop-opp > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pop-map { grid-column: 3 / -1; margin-top: -3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pop-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-pop-type { padding: 1px 7px; font-size: 10.5px; }
.rc-pop-type.is-tour { color: #ffd166; border-color: rgba(255, 209, 102, 0.4); }
.rc-pop-players { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pop-sec { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.rc-pop-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-pop-split > div { display: flex; flex-direction: column; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rc-pop-split b { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.rc-pop-split span { font-size: 11px; color: var(--text-muted); }
.rc-pop-form { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-pop-list { list-style: none; margin: 0; padding: 0; }
.rc-pop-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.rc-pop-list li:last-child { border-bottom: 0; }
.rc-pop-list b { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.rc-pop-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; font-size: 12.5px; }
.rc-pop-duel b { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--text-dim); }
.rc-pop-duel b.is-lead { color: var(--primary); }
.rc-pop-duel > .rc-pop-opp:last-child { justify-content: flex-end; }
.rc-pop-sets--duel li { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
.rc-pop-sets--duel .rc-pop-map { grid-column: 2 / -1; }

/* ---------- regions ---------- */

.rg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.rg-card { margin-top: 0; }
.rg-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rg-rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--surface-3); font-weight: 800; font-size: 13px; color: var(--text-dim); }
.rg-card:first-child .rg-rank { background: #ffd166; color: #101507; }
.rg-card-head h3 { display: flex; align-items: center; gap: 8px; flex: 1; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.rg-dot { display: inline-block; width: 10px; height: 10px; flex: none; margin-right: 6px; border-radius: 50%; background: var(--text-muted); }
.rg-card-head .rg-dot { margin-right: 0; }
.rg-strength { font-size: 12px; color: var(--text-muted); }
.rg-strength b { font-size: 16px; color: var(--text); }
.rg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.rg-nums > div { display: flex; flex-direction: column; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rg-nums b { font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.rg-nums span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.rg-nums small { font-size: 11px; }
.rg-leaders { list-style: none; margin: 0; padding: 0; }
.rg-leaders li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rg-leaders li:last-child { border-bottom: 0; }
.rg-lrank { font-size: 12px; text-align: center; color: var(--text-muted); }
.rg-lrating { font-variant-numeric: tabular-nums; }

.rg-matrix-wrap { overflow-x: auto; }
.rg-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.rg-matrix th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.rg-corner { font-size: 11px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted) !important; }
.rg-col { text-align: center !important; }
.rg-cell { min-width: 96px; padding: 10px 8px; border-radius: var(--radius-sm); text-align: center; color: #fff; }
.rg-cell b { display: block; font-size: 17px; }
.rg-cell small { display: block; font-size: 11px; opacity: 0.85; }
.rg-cell--self { background: var(--surface-2); color: var(--text-muted); }
.rg-cell--none { background: var(--surface-2); color: var(--text-muted); }

.rg-note { margin: 0 0 16px; font-size: 12px; text-align: center; }

@media (max-width: 560px) {
    .rc-grid, .rg-cards { grid-template-columns: minmax(0, 1fr); }
    .rc-pick { flex: 1 1 100%; }
    .rc-pick select { width: 100%; max-width: none; min-height: 42px; }
    .rg-nums b { font-size: 18px; }
}
/* the smallest phones: a record's number goes under the name instead of leaving the name a sliver beside it */
@media (max-width: 340px) {
    .rc-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
    .rc-row .rc-value { grid-column: 2; justify-self: start; }
}