/* Compare two leaderboard rosters (release 166). Baseball keeps the cream board paper; each sport maps the same
   roles to its own palette tokens. No pale blue fills on cream. */
.board-paper{--rc-ink:#142b43;--rc-muted:#496078;--rc-rule:#cbd7e4;--rc-head:#f1e9d6;--rc-hover:#f3ecda;--rc-box:#f6f0df;--rc-mark:#f8ecc6;--rc-link:#1b527e;--rc-accent:#ff601f;--rc-strong:#1d3552;--rc-on-strong:#f5f4e9;--rc-paper:#faf7ee}
html[data-sport="nhl"] .board-paper{--rc-ink:var(--hk-ink);--rc-muted:var(--hk-muted-ink);--rc-rule:var(--hk-rule-paper);--rc-head:var(--hk-paper-hover);--rc-hover:var(--hk-paper-hover);--rc-box:var(--hk-paper);--rc-mark:var(--hk-paper-hover);--rc-link:var(--hk-ink);--rc-accent:var(--hk-rule);--rc-strong:var(--hk-accent);--rc-on-strong:var(--hk-ink);--rc-paper:var(--hk-paper)}
html[data-sport="nba"] .board-paper{--rc-ink:var(--bb-ink);--rc-muted:var(--bb-muted-ink);--rc-rule:var(--bb-rule-paper);--rc-head:var(--bb-paper-hover);--rc-hover:var(--bb-paper-hover);--rc-box:var(--bb-paper);--rc-mark:var(--bb-paper-hover);--rc-link:var(--bb-ink);--rc-accent:var(--bb-accent);--rc-strong:var(--bb-accent);--rc-on-strong:var(--bb-ink);--rc-paper:var(--bb-paper)}
html[data-sport="nfl"] .board-paper{--rc-ink:var(--fb-ink);--rc-muted:var(--fb-muted-ink);--rc-rule:var(--fb-rule-paper);--rc-head:var(--fb-paper-hover);--rc-hover:var(--fb-paper-hover);--rc-box:var(--fb-paper);--rc-mark:var(--fb-paper-hover);--rc-link:var(--fb-ink);--rc-accent:var(--fb-accent);--rc-strong:var(--fb-accent);--rc-on-strong:var(--fb-on-accent);--rc-paper:var(--fb-paper)}

/* The checkbox in each row appears once the script is ready; without scripts the board is unchanged. */
.board-paper:not(.rc-ready) .rc-toggle{display:none}
.rc-toggle{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:40px;margin-top:2px;color:var(--rc-link);font-size:14px;font-weight:650;line-height:1.2;cursor:pointer;white-space:nowrap}
.rc-toggle input{width:20px;height:20px;margin:0;accent-color:var(--rc-strong);cursor:pointer;flex-shrink:0}
.rc-toggle:hover{color:var(--rc-ink)}
.rc-toggle:has(input:checked){color:var(--rc-ink)}
.board-table tbody tr.rc-selected>*:first-child{box-shadow:inset 5px 0 0 var(--rc-accent)}
.board-table tbody tr.rc-selected{background:var(--rc-mark)}

/* Selection bar: a quiet hint under the table, then a bar that stays in view while two rows are chosen. */
.rc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--rc-rule);background:var(--rc-head);color:var(--rc-ink)}
.rc-bar[hidden]{display:none}
.rc-bar-text{margin:0;font-size:15px;line-height:1.45;color:var(--rc-muted);min-width:0;overflow-wrap:anywhere}
.rc-bar-text strong{color:var(--rc-ink)}
.rc-bar.rc-active{position:sticky;bottom:0;z-index:5;box-shadow:0 -8px 18px rgba(16,36,61,.16)}
/* Keyboard focus scrolls rows clear of the bar while it is pinned. */
html:has(.rc-bar.rc-active){scroll-padding-bottom:120px}
.rc-bar.rc-some .rc-bar-text{color:var(--rc-ink)}
.rc-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-bar .rc-go{min-height:48px}
.rc-clear,.rc-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--rc-rule);border-radius:3px;background:transparent;color:var(--rc-ink);font:650 15px/1.2 var(--body,inherit);cursor:pointer;transition:background .16s,border-color .16s}
.rc-clear:is(:hover,:focus-visible),.rc-close:is(:hover,:focus-visible){background:var(--rc-hover);border-color:var(--rc-muted)}
.rc-clear[hidden],.rc-bar .rc-go[hidden]{display:none}

/* The comparison. */
.rc-panel{padding:24px 32px 30px;border-top:1px solid var(--rc-rule);background:var(--rc-paper);color:var(--rc-ink)}
.rc-panel[hidden]{display:none}
.rc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.rc-panel-head h3{margin:0;font:700 26px/1.25 var(--body,inherit)}
.rc-panel-head h3:focus{outline:none}
.rc-panel-head h3:focus-visible{outline:3px solid var(--rc-link);outline-offset:3px}
.rc-verdict{margin:0 0 20px;padding:14px 18px;border-left:5px solid var(--rc-accent);border-radius:3px;background:var(--rc-mark);font-size:18px;font-weight:650;line-height:1.5;max-width:75ch}
.rc-loading,.rc-error{margin:0;font-size:16px;line-height:1.55}
.rc-error{padding:12px 16px;border-left:4px solid #9b2c17;background:var(--rc-box)}
.rc-managers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:22px}
.rc-manager{min-width:0;padding:18px 20px;border:1px solid var(--rc-rule);border-radius:4px;background:var(--rc-box)}
.rc-rank{margin:0 0 4px;color:var(--rc-muted);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rc-name{margin:0;font:700 21px/1.3 var(--body,inherit);overflow-wrap:anywhere}
.rc-detail{margin:4px 0 0;color:var(--rc-muted);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.rc-record{margin:8px 0 12px;font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.rc-facts{display:grid;gap:2px;margin:0 0 10px}
.rc-facts>div{display:flex;justify-content:space-between;gap:12px;padding:5px 8px;border-radius:3px}
.rc-facts dt{color:var(--rc-muted);font-size:14px}
.rc-facts dd{margin:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.rc-facts .rc-decider{background:var(--rc-mark);box-shadow:inset 3px 0 0 var(--rc-accent)}
.rc-facts .rc-decider dt{color:var(--rc-ink);font-weight:700}
.rc-full{display:inline-flex;align-items:center;min-height:44px;color:var(--rc-link);font-size:15px;font-weight:650;text-decoration:underline;text-underline-offset:4px}
.rc-full:hover{color:var(--rc-ink)}
.rc-table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.rc-table thead{background:var(--rc-strong);color:var(--rc-on-strong)}
.rc-table th,.rc-table td{padding:12px 14px;border-bottom:1px solid var(--rc-rule);text-align:left;vertical-align:top}
.rc-table thead th{font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.rc-table .rc-slot-head{width:132px}
.rc-slot strong{display:block;font-size:16px}
.rc-slot span{display:block;margin-top:2px;color:var(--rc-muted);font-size:13px;font-weight:400;line-height:1.35}
.rc-table tbody tr:nth-child(even){background:var(--rc-box)}
.rc-player{min-width:0}
.rc-player strong{display:block;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.rc-meta{display:block;margin-top:2px;color:var(--rc-muted);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.rc-empty{color:var(--rc-muted);font-style:italic}
.rc-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0}
.rc-stats>div{display:flex;align-items:baseline;gap:5px}
.rc-stats dt{color:var(--rc-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.rc-stats dd{margin:0;font-size:14px;font-weight:700}

/* Wider boards keep View roster and Compare on one line, so rows stay their usual height. */
@media(min-width:601px){
  .rc-ready td:has(>.rc-toggle)>.board-record{display:flex;justify-content:flex-end}
  .rc-ready td:has(>.rc-toggle)>.board-roster-link{display:inline-flex;vertical-align:middle}
  .rc-ready .rc-toggle{display:inline-flex;vertical-align:middle;min-height:44px;margin:0 0 0 18px}
}
@media(max-width:600px){
  .rc-toggle{font-size:13px;gap:6px}
  .rc-bar{padding:12px 16px}
  .rc-bar-text{font-size:14px}
  .rc-bar-actions{width:100%}
  .rc-bar .rc-go{flex:1 1 auto;justify-content:center}
  .rc-panel{padding:18px 12px 22px}
  .rc-panel-head h3{font-size:21px}
  .rc-verdict{font-size:16px;padding:12px 14px}
  .rc-managers{gap:8px}
  .rc-manager{padding:12px}
  .rc-name{font-size:16px}
  .rc-record{font-size:23px;margin:6px 0 8px}
  .rc-facts>div{flex-direction:column;gap:0;padding:4px 6px}
  .rc-facts dt{font-size:12px}
  .rc-facts dd{text-align:left;font-size:14px}
  /* Each slot becomes a label row over the two picks. */
  .rc-table{table-layout:auto}
  .rc-table thead tr,.rc-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rc-table .rc-slot-head{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .rc-table th,.rc-table td{padding:9px 8px}
  .rc-table .rc-slot{grid-column:1 / -1;display:flex;align-items:baseline;gap:8px;padding:8px;background:var(--rc-head);border-bottom:0}
  .rc-table tbody tr:nth-child(even){background:transparent}
  .rc-slot strong{font-size:14px}
  .rc-slot span{margin:0;font-size:12px}
  .rc-player strong{font-size:14px}
  .rc-meta{font-size:12px}
  .rc-stats{gap:2px 10px;margin-top:6px}
  .rc-stats dd{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.rc-clear,.rc-close{transition:none}}

/* Better and weaker picks: each slot marks the higher-rated pick green and the lower one red, in every sport. The
   arrow and the screen-reader words carry the same meaning without color. */
.board-paper{--rc-good:#1d6b36;--rc-good-fill:#e2efda;--rc-bad:#a3291d;--rc-bad-fill:#f6dfd8}
.rc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;color:var(--rc-muted);font-size:14px;line-height:1.45}
.rc-key{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;color:#fff;font-weight:700}
.rc-key-better{background:var(--rc-good)}
.rc-key-worse{background:var(--rc-bad)}
.rc-legend-note{flex:1 1 280px;min-width:0}
.rc-pick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.rc-pick-head strong{flex:1 1 9em;min-width:0}
.rc-rating{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:1px 9px;border:1px solid var(--rc-rule);border-radius:999px;background:var(--rc-paper);color:var(--rc-ink);font-size:14px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums}
.rc-chevron{flex:0 0 auto}
.rc-table td.rc-better{background:var(--rc-good-fill)}
.rc-table td.rc-worse{background:var(--rc-bad-fill)}
.rc-better .rc-rating{padding-left:6px;border-color:var(--rc-good);background:var(--rc-good);color:#fff}
.rc-worse .rc-rating{padding-left:6px;border-color:var(--rc-bad);background:var(--rc-bad);color:#fff}
.rc-better :is(.rc-meta,.rc-stats dt),.rc-worse :is(.rc-meta,.rc-stats dt){color:var(--rc-ink)}
@media(max-width:600px){
  .rc-legend{font-size:13px}
  .rc-rating{font-size:13px;padding:0 7px}
  .rc-better .rc-rating,.rc-worse .rc-rating{padding-left:5px}
}