/*
 * WR/CB Matchup Chart ([wr_cb_chart], js/wr-cb-chart.js). Look = the approved mockup (Barlow, black header bar,
 * heat-colored scores). Rows are a div grid, not a <table>: the theme wraps every `div.entry table` in a
 * blue-logo .table-wrapper and restyles .entry td/th.
 *
 * Fixed row heights (36px; 44px on phones) so the server-drawn skeleton and the drawn chart are the same height.
 */
.rb-wrcb {
	--wc-ink: #141414;
	--wc-line: #e3e3e3;
	--wc-zebra: #f7f7f5;
	--wc-row: 36px;
	--wc-head: 35px;
	--wc-cols: 40px 52px minmax(0, 1fr) 80px 28px minmax(0, 1fr) 80px 52px 88px;   /* fits the 728px article column */
	--wc-fs: 16px;
	--wc-lh: 1.3;
	clear: both;
	color: var(--wc-ink);
	font-family: 'Barlow', sans-serif;
}
.rb-wrcb.rb-wrcb { margin: 20px 0; }
.rb-wrcb *, .rb-wrcb *::before, .rb-wrcb *::after { box-sizing: border-box; }

/* The theme's rules reach every div and p (#main-container div, p { font-size: 20px; line-height: 30px },
 * .entry div { margin: 0 auto 0 1px }). This (1,1,1) rule beats them and sets size from --wc-fs / --wc-lh, so a
 * component sets its size through those two variables (any specificity) instead of font-size / line-height. */
#main-container div.rb-wrcb, #main-container .rb-wrcb div, #main-container .rb-wrcb p,
.rb-wrcb.rb-wrcb, .rb-wrcb.rb-wrcb div, .rb-wrcb.rb-wrcb p {
	font-size: var(--wc-fs);
	line-height: var(--wc-lh);
}
.rb-wrcb.rb-wrcb div, .rb-wrcb.rb-wrcb p { margin: 0; }

.rb-wrcb .wc-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); overflow: hidden; }

/* ── header ── */
.rb-wrcb .wc-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 4px solid var(--wc-ink); }
.rb-wrcb.rb-wrcb .wc-hdr { padding: 20px 16px 14px; }
.rb-wrcb .wc-hdr > div:first-child { flex: 1 1 auto; min-width: 0; }
.rb-wrcb .wc-h1 { --wc-fs: 34px; --wc-lh: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; color: var(--wc-ink); }
.rb-wrcb .wc-sub { --wc-fs: 15px; --wc-lh: 1.35; color: #4a4a4a; }
.rb-wrcb.rb-wrcb .wc-sub { margin-top: 4px; }
.rb-wrcb .wc-brand { --wc-fs: 20px; --wc-lh: 1; flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: #006DC8; }   /* site blue */

/* ── buttons ── */
.rb-wrcb .wc-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-wrcb.rb-wrcb .wc-tools { padding: 12px 16px 0; }
.rb-wrcb .wc-tools button { font: 600 14px 'Barlow', sans-serif; padding: 8px 14px; min-height: 40px; border: 1px solid #bbb; background: #fff; border-radius: 4px; cursor: pointer; color: var(--wc-ink); text-transform: none; letter-spacing: 0; }
.rb-wrcb .wc-tools button:hover { background: #f2f2f0; }
.rb-wrcb .wc-tools button:disabled { cursor: default; color: #999; }

/* ── grid ── */
.rb-wrcb .wc-scroll { overflow-x: auto; }
.rb-wrcb.rb-wrcb .wc-scroll { padding: 12px 16px 0; }
.rb-wrcb .wc-table { min-width: 640px; }
.rb-wrcb .wc-tr { display: grid; grid-template-columns: var(--wc-cols); align-items: stretch; }

.rb-wrcb .wc-head { background: var(--wc-ink); height: var(--wc-head); }
/* .wc-head .wc-th: (0,3,0) so the header's size beats the cell classes it shares (.wc-c-score is 20px). */
.rb-wrcb .wc-head .wc-th { --wc-fs: 14px; --wc-lh: 1; display: flex; align-items: center; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rb-wrcb .wc-th button { all: unset; box-sizing: border-box; display: flex; white-space: nowrap; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 8px; cursor: pointer; }
.rb-wrcb .wc-th button:hover { background: #333; }
.rb-wrcb .wc-th button:focus-visible { outline: 2px solid #ffcc00; outline-offset: -2px; }
.rb-wrcb .wc-sr { position: absolute; left: -9999px; }

.rb-wrcb .wc-td { --wc-lh: 1.2; display: flex; align-items: center; min-width: 0; height: var(--wc-row); border-bottom: 1px solid var(--wc-line); }
.rb-wrcb.rb-wrcb .wc-td { padding: 0 8px; }
.rb-wrcb .wc-even .wc-td { background-color: var(--wc-zebra); }
.rb-wrcb .wc-c-tog, .rb-wrcb .wc-c-num, .rb-wrcb .wc-c-vs, .rb-wrcb .wc-c-score { justify-content: center; }
.rb-wrcb .wc-c-num { font-weight: 600; }
.rb-wrcb .wc-c-vs { --wc-fs: 13px; color: #666; }
.rb-wrcb .wc-c-score { --wc-fs: 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }

.rb-wrcb .wc-c-name { flex-direction: column; align-items: flex-start; justify-content: center; }
.rb-wrcb .wc-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-wrcb .wc-row .wc-c-name:nth-child(3) .wc-nm { font-weight: 600; }
.rb-wrcb .wc-tm { display: none; }

.rb-wrcb .wc-chip { display: inline-block; width: 40px; text-align: center; padding: 3px 0; border-radius: 3px; font: 700 14px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .04em; }

/* Sheet markings: bold = slot coverage, red = injured, magenta = safety in the slot, yellow = rookie, red shading = new. */
.rb-wrcb .wc-row .wc-td .wc-nm.wc-f-slot { font-weight: 800; }
.rb-wrcb .wc-f-inj { color: #d0021b; }
.rb-wrcb .wc-f-safety { color: #d61ad6; }
.rb-wrcb.rb-wrcb .wc-bg-rookie { background-color: #fdefc4; }
.rb-wrcb.rb-wrcb .wc-bg-new { background-color: #f6c9c4; }

.rb-wrcb .wc-tog { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; cursor: pointer; color: var(--wc-ink); }
.rb-wrcb .wc-tog:hover { background: #e6e6e3; }
.rb-wrcb .wc-tog:focus-visible { outline: 2px solid #1a5fb4; }
.rb-wrcb .wc-tog svg { transition: transform .15s; }
.rb-wrcb .wc-tog[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── expanded stats ── */
.rb-wrcb .wc-dcell { background: #fafaf8; border-bottom: 1px solid var(--wc-line); }
.rb-wrcb.rb-wrcb .wc-dcell { padding: 10px 8px 14px 40px; }
/* WR and CB boxes share one heading row + one tile row (subgrid), so all 8 tiles match the tallest
   label: "Adj. Def. Score" can wrap to 3 lines where "Adj. Off. Score" takes 2. */
.rb-wrcb .wc-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 16px; }
.rb-wrcb .wc-dbox { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.rb-wrcb .wc-h3 { --wc-fs: 13px; --wc-lh: 1.2; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #444; }
.rb-wrcb .wc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rb-wrcb .wc-stat { display: flex; flex-direction: column; border-radius: 4px; background: #fff; }
.rb-wrcb .wc-stat > .wc-v { margin-top: auto; }   /* value on the tile's floor: values line up when a label wraps */
.rb-wrcb.rb-wrcb .wc-stat { padding: 6px 8px; }
.rb-wrcb.rb-wrcb .wc-h3 { margin-bottom: 6px; }
.rb-wrcb .wc-l { --wc-fs: 12px; --wc-lh: 1.2; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.rb-wrcb .wc-v { --wc-fs: 20px; --wc-lh: 1.2; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }

.rb-wrcb .wc-foot { --wc-fs: 13px; --wc-lh: 1.45; color: #555; }
.rb-wrcb.rb-wrcb .wc-foot { padding: 12px 16px 18px; }

/* ── skeleton (rb-skeleton.css tokens) ── */
.rb-wrcb .wc-head .wc-th:only-child { grid-column: 1 / -1; }
.rb-wrcb .wc-td > .rb-skel { display: block; width: 70%; height: 12px; }
.rb-wrcb .wc-c-tog > .rb-skel { width: 18px; height: 18px; }
.rb-wrcb .wc-c-chip > .rb-skel { width: 40px; height: 20px; }
.rb-wrcb .wc-c-vs > .rb-skel { width: 16px; }
.rb-wrcb .wc-c-num > .rb-skel, .rb-wrcb .wc-c-score > .rb-skel { width: 48px; }

/* ── phones: receiver · corner · matchup; scores and teams move under the names / into the expanded row ── */
@media (max-width: 640px) {
	.rb-wrcb { --wc-row: 44px; --wc-cols: 36px minmax(0, 1fr) minmax(0, 1fr) 76px; }
	.rb-wrcb .wc-head .wc-th { --wc-fs: 13px; letter-spacing: .02em; overflow: hidden; }
	.rb-wrcb .wc-hdr { flex-wrap: wrap; }   /* brand drops under the title instead of squeezing the subtitle */
	.rb-wrcb .wc-th button { padding: 0 5px; }
	.rb-wrcb.rb-wrcb { margin: 16px 0; }
	.rb-wrcb.rb-wrcb .wc-hdr { padding: 16px 12px 10px; }
	.rb-wrcb .wc-h1 { --wc-fs: 24px; }
	.rb-wrcb.rb-wrcb .wc-tools { padding: 10px 12px 0; }
	.rb-wrcb.rb-wrcb .wc-scroll { padding: 10px 0 0; }
	.rb-wrcb .wc-table { min-width: 0; }
	.rb-wrcb .wc-tr > .wc-c-chip, .rb-wrcb .wc-tr > .wc-c-num, .rb-wrcb .wc-tr > .wc-c-vs { display: none; }   /* (0,3,0): header cells too */
	.rb-wrcb .wc-td { --wc-fs: 15px; }
	.rb-wrcb.rb-wrcb .wc-td { padding: 0 6px; }
	.rb-wrcb .wc-tm { display: block; font-size: 12px; line-height: 1.2; color: #666; font-weight: 500; }
	.rb-wrcb .wc-c-score { --wc-fs: 19px; }
	.rb-wrcb.rb-wrcb .wc-dcell { padding: 10px 12px 14px; }
	.rb-wrcb .wc-dgrid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto 1fr; gap: 0; }   /* stacked: 1fr tile rows = equal height */
	.rb-wrcb.rb-wrcb .wc-dbox + .wc-dbox .wc-h3 { margin-top: 12px; }
	.rb-wrcb.rb-wrcb .wc-stat { padding: 5px 6px; }
	.rb-wrcb .wc-l { --wc-fs: 11px; }
	.rb-wrcb.rb-wrcb .wc-foot { padding: 12px 12px 16px; }
	.rb-wrcb .wc-c-name > .rb-skel { width: 80%; }
}