/*
 * RotoBaller — Fantasy Football Draft Grader.
 *
 * Same visual system as the CFB rankings board and the premium dashboard: Outfit for everything,
 * Anton for display headings, RotoBaller blue on white. Built mobile-first — every rule here is the
 * phone layout, and the two min-width blocks at the bottom add desktop roominess. Cards are always
 * full-bleed inside their container (never the 60–70% width that keeps biting these tools), and the
 * wrapper is in the border-box reset itself, not just its descendants, so width:100% + padding
 * doesn't overflow the content column.
 */

/* Hidden until the JS mounts, so the bare div never flashes. */
#rb-dg:empty { display: none; }

.rb-dg-wrap {
	--dg-blue: #006DC8;
	--dg-blue-dk: #005099;
	--dg-navy: #1b2a4a;
	--dg-ink: #0b1220;
	--dg-mute: #6b7280;
	--dg-line: #e5e7eb;
	--dg-bg: #f7f8fa;
	--dg-a: #16a34a;
	--dg-b: #0d8ae0;
	--dg-c: #d99400;
	--dg-d: #e2670f;
	--dg-f: #dc2626;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 28px;
	font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dg-ink);
	-webkit-text-size-adjust: 100%;
}
.rb-dg-wrap * { box-sizing: border-box; }

/* The theme puts a serif on heading-like elements on some templates, and its `.entry-content h2 {…
 * !important }` beats a plain class selector. ID-scoped + !important is what actually holds. */
#rb-dg .rb-dg-title,
#rb-dg .rb-dg-grade,
#rb-dg .rb-dg-head,
#rb-dg .rb-dg-subgrade {
	font-family: 'Anton', 'Outfit', sans-serif !important;
	font-weight: 400 !important;
}
#rb-dg .rb-dg-wrap, #rb-dg input, #rb-dg select, #rb-dg button, #rb-dg textarea,
#rb-dg .rb-dg-card, #rb-dg .rb-dg-card * {
	font-family: 'Outfit', -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- header ---------- */

.rb-dg-hd { padding: 0 0 24px; }
#rb-dg .rb-dg-title {
	margin: 0 0 10px;
	font-size: 30px !important;
	line-height: 1.05 !important;
	letter-spacing: .4px;
	color: var(--dg-navy) !important;
	text-transform: uppercase;
}
/* The intro paragraph. Named `lede`, not `sub`, because `.rb-dg-sub` is ALSO the sub-grade card in
 * the results — the two collided and the card's white background, border and padding were painting a
 * box around this paragraph. */
.rb-dg-lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dg-mute); }

/* ---------- cards ---------- */

.rb-dg-card {
	display: block;
	width: 100%;
	margin: 0 0 22px;
	padding: 22px 18px;
	background: #fff;
	border: 1px solid var(--dg-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* The theme ships `.entry h3 { color: black !important }`, which beats a plain ID rule — every
 * heading in this tool is an h3 and every one of them rendered black, including the white-on-navy
 * headline in the results hero. Colour has to be !important here for the same reason font-family
 * already was. */
#rb-dg .rb-dg-cardtitle {
	margin: 0 0 6px;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--dg-navy) !important;
}
.rb-dg-cardsub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--dg-mute); }

.rb-dg-step { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.rb-dg-stepn {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; color: #fff;
	background: var(--dg-blue); border-radius: 50%;
}
#rb-dg .rb-dg-step h3 {
	margin: 0;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--dg-navy) !important;
}

/* ---------- tabs ---------- */

.rb-dg-tabs {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 20px;
}
.rb-dg-tab {
	flex: 1 1 auto;
	min-height: 40px;
	padding: 0 14px;
	font-size: 14px; font-weight: 600;
	color: var(--dg-blue); background: #fff;
	border: 1px solid var(--dg-blue); border-radius: 22px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.rb-dg-tab:hover { background: #eef4fb; }
.rb-dg-tab.on { color: #fff; background: var(--dg-blue); }

.rb-dg-pane { display: none; }
.rb-dg-pane.on { display: block; }

/* ---------- upload ---------- */

.rb-dg-drop {
	display: block; width: 100%;
	padding: 26px 16px;
	text-align: center;
	background: var(--dg-bg);
	border: 2px dashed #c6d3e2; border-radius: 12px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.rb-dg-drop:hover, .rb-dg-drop.over { background: #eef4fb; border-color: var(--dg-blue); }
.rb-dg-dropicon { font-size: 24px; line-height: 1; color: var(--dg-blue); margin: 0 0 8px; }
.rb-dg-dropmain { font-size: 16px; font-weight: 700; color: var(--dg-navy); margin: 0 0 6px; }
.rb-dg-dropsub { font-size: 13px; line-height: 1.45; color: var(--dg-mute); max-width: 460px; margin: 0 auto; }
.rb-dg-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.rb-dg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rb-dg-thumb {
	width: 72px; height: 72px; overflow: hidden;
	border: 1px solid var(--dg-line); border-radius: 8px; background: var(--dg-bg);
}
.rb-dg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- inputs ---------- */

.rb-dg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; }
.rb-dg-input {
	flex: 1 1 220px; min-width: 0;
	height: 42px; padding: 0 14px;
	font: inherit; font-size: 15px; color: var(--dg-ink);
	background: #fff; border: 1px solid #cfd6e0; border-radius: 22px;
	-webkit-appearance: none; appearance: none;
}
.rb-dg-ta {
	display: block; width: 100%;
	padding: 12px 14px;
	font: inherit; font-size: 15px; line-height: 1.5; color: var(--dg-ink);
	background: #fff; border: 1px solid #cfd6e0; border-radius: 12px;
	resize: vertical;
}
.rb-dg-input:focus, .rb-dg-ta:focus, .rb-dg-sel:focus {
	outline: none; border-color: var(--dg-blue); box-shadow: 0 0 0 3px rgba(0, 109, 200, .18);
}

.rb-dg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 20px;
	font: inherit; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none;
	border-radius: 24px; border: 1px solid transparent; cursor: pointer;
	transition: background .12s ease, opacity .12s ease;
}
.rb-dg-btn-go { color: #fff; background: var(--dg-blue); }
.rb-dg-btn-go:hover { background: var(--dg-blue-dk); color: #fff; }
.rb-dg-btn-sec { color: var(--dg-blue); background: #fff; border-color: var(--dg-blue); }
.rb-dg-btn-sec:hover { background: #eef4fb; }
.rb-dg-btn:disabled { opacity: .45; cursor: not-allowed; }

.rb-dg-link {
	margin-left: auto; padding: 0;
	font: inherit; font-size: 13px; font-weight: 600; color: var(--dg-blue);
	background: none; border: none; cursor: pointer; text-decoration: underline;
}
.rb-dg-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--dg-mute); }
.rb-dg-msg { display: block; margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--dg-mute); }
.rb-dg-msg.ok { color: var(--dg-a); }
.rb-dg-msg.err { color: var(--dg-f); }
.rb-dg-msg.busy { color: var(--dg-blue); }
.rb-dg-warn {
	margin: 14px 0 0; padding: 12px 14px;
	font-size: 13.5px; line-height: 1.5; color: #7a4a06;
	background: #fff8e8; border: 1px solid #f2dfae; border-radius: 10px;
}

/* ---------- imported teams ---------- */

.rb-dg-teams { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.rb-dg-teambtn {
	padding: 8px 14px;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--dg-navy);
	background: #fff; border: 1px solid var(--dg-line); border-radius: 20px; cursor: pointer;
}
.rb-dg-teambtn span { color: var(--dg-mute); font-weight: 500; }
.rb-dg-teambtn:hover { border-color: var(--dg-blue); }
.rb-dg-teambtn.on { color: #fff; background: var(--dg-blue); border-color: var(--dg-blue); }
.rb-dg-teambtn.on span { color: rgba(255, 255, 255, .8); }

/* ---------- roster chips ---------- */

.rb-dg-roster { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--dg-line); }
.rb-dg-roster:empty { margin: 0; padding: 0; border-top: none; }
.rb-dg-rhead {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
	margin: 0 0 14px; font-size: 14px; line-height: 1.5;
}
.rb-dg-rhead strong { color: var(--dg-navy); }
.rb-dg-rhead span { font-size: 13px; color: var(--dg-mute); }

.rb-dg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-dg-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--dg-navy);
	background: var(--dg-bg); border: 1px solid var(--dg-line); border-radius: 18px;
	cursor: pointer;
}
.rb-dg-chip i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dg-blue); }
.rb-dg-chip b { font-weight: 400; color: #9aa3b0; }
.rb-dg-chip:hover { border-color: var(--dg-f); }
.rb-dg-chip:hover b { color: var(--dg-f); }
.rb-dg-chip.bad { background: #fdeeee; border-color: #f3c9c9; }

/* ---------- format controls ---------- */

.rb-dg-fmt { display: grid; grid-template-columns: 1fr; gap: 20px; }
.rb-dg-field { display: block; }
.rb-dg-flabel {
	display: block; margin: 0 0 6px;
	font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	color: var(--dg-mute);
}
.rb-dg-sel {
	display: block; width: 100%; height: 42px;
	padding: 0 38px 0 14px;
	font: inherit; font-size: 15px; font-weight: 600; color: #fff;
	background-color: var(--dg-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.7' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
	border: none; border-radius: 22px; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
}

.rb-dg-adv { grid-column: 1 / -1; }
.rb-dg-adv > summary {
	font-size: 14px; font-weight: 600; color: var(--dg-blue); cursor: pointer;
	padding: 6px 0; list-style: none;
}
.rb-dg-adv > summary::-webkit-details-marker { display: none; }
.rb-dg-adv > summary::before { content: '▸ '; }
.rb-dg-adv[open] > summary::before { content: '▾ '; }
.rb-dg-slots {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
	margin: 16px 0 0;
}
.rb-dg-slot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 8px 12px;
	font-size: 14px; font-weight: 600; color: var(--dg-navy);
	background: var(--dg-bg); border: 1px solid var(--dg-line); border-radius: 10px;
}
.rb-dg-slot input {
	width: 56px; height: 34px; padding: 0 8px;
	font: inherit; font-size: 15px; text-align: center; color: var(--dg-ink);
	background: #fff; border: 1px solid #cfd6e0; border-radius: 8px;
}

/* ---------- action bar ---------- */

.rb-dg-actions { margin: 0 0 28px; text-align: center; }
.rb-dg-actions .rb-dg-btn-go { width: 100%; min-height: 52px; font-size: 17px; letter-spacing: .3px; }
.rb-dg-actions .rb-dg-msg { text-align: center; }

/* ---------- results hero ---------- */

.rb-dg-results:empty { display: none; }

.rb-dg-hero {
	display: block; width: 100%;
	margin: 0 0 22px; padding: 26px 20px;
	color: #fff; border-radius: 16px;
	background: linear-gradient(135deg, var(--dg-navy) 0%, #0e1a30 100%);
	position: relative; overflow: hidden;
}
/* The grade band's colour is the only chrome that changes — a thick top rule reads instantly on a
 * phone without recolouring the whole card and wrecking text contrast. */
.rb-dg-hero::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--dg-b);
}
.rb-dg-hero.a::before { background: var(--dg-a); }
.rb-dg-hero.b::before { background: var(--dg-b); }
.rb-dg-hero.c::before { background: var(--dg-c); }
.rb-dg-hero.d::before { background: var(--dg-d); }
.rb-dg-hero.f::before { background: var(--dg-f); }

.rb-dg-gradewrap { text-align: center; margin: 0 0 22px; }
#rb-dg .rb-dg-grade {
	display: block;
	margin: 0; font-size: 88px !important; line-height: .95 !important; letter-spacing: 1px;
	color: var(--dg-b);
}
/* ID-scoped to match the `#rb-dg .rb-dg-grade` base rule above — a plain `.rb-dg-hero.a
 * .rb-dg-grade` loses to it on specificity (one id beats three classes), which silently painted
 * every grade the same blue no matter what the band was. */
#rb-dg .rb-dg-hero.a .rb-dg-grade { color: #4ade80; }
#rb-dg .rb-dg-hero.b .rb-dg-grade { color: #60c8ff; }
#rb-dg .rb-dg-hero.c .rb-dg-grade { color: #fbbf24; }
#rb-dg .rb-dg-hero.d .rb-dg-grade { color: #fb923c; }
#rb-dg .rb-dg-hero.f .rb-dg-grade { color: #f87171; }
.rb-dg-gradesub {
	margin: 10px 0 0; font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .3px;
	color: rgba(255, 255, 255, .68);
}

#rb-dg .rb-dg-head {
	margin: 0 0 16px;
	font-size: 24px !important; line-height: 1.2 !important; letter-spacing: .3px;
	color: #fff !important; text-align: center;
}
/* `list-style:none` on the UL isn't enough — the theme sets `.entry ul li { list-style: square }`
 * on the LI itself, so the theme's square marker rendered alongside this list's own dot and every
 * line showed two bullets. */
.rb-dg-notes { margin: 0; padding: 0; list-style: none; }
#rb-dg .rb-dg-notes li {
	position: relative;
	margin: 0 0 14px; padding: 0 0 0 20px;
	font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .92);
	list-style: none !important;
}
#rb-dg .rb-dg-notes li:last-child { margin-bottom: 0; }
#rb-dg .rb-dg-notes li::before {
	content: ''; position: absolute; left: 0; top: 10px;
	width: 6px; height: 6px; border-radius: 50%; background: #4da3f0;
}

/* ---------- sub-grades ---------- */

.rb-dg-subs { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 22px; }
.rb-dg-sub {
	display: flex; align-items: center; gap: 16px;
	padding: 18px 16px;
	background: #fff; border: 1px solid var(--dg-line); border-radius: 12px;
}
#rb-dg .rb-dg-subgrade {
	flex: 0 0 auto; width: 46px;
	font-size: 32px !important; line-height: 1 !important; text-align: center;
	color: var(--dg-b);
}
/* Same specificity trap as the hero grade above. */
#rb-dg .rb-dg-sub.a .rb-dg-subgrade { color: var(--dg-a); }
#rb-dg .rb-dg-sub.b .rb-dg-subgrade { color: var(--dg-b); }
#rb-dg .rb-dg-sub.c .rb-dg-subgrade { color: var(--dg-c); }
#rb-dg .rb-dg-sub.d .rb-dg-subgrade { color: var(--dg-d); }
#rb-dg .rb-dg-sub.f .rb-dg-subgrade { color: var(--dg-f); }
.rb-dg-subbody { flex: 1 1 auto; min-width: 0; }
.rb-dg-subbody strong { display: block; font-size: 15px; color: var(--dg-navy); }
.rb-dg-subbody span { display: block; margin: 4px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--dg-mute); }
.rb-dg-bar { height: 6px; background: var(--dg-bg); border-radius: 3px; overflow: hidden; }
.rb-dg-bar i { display: block; height: 100%; background: var(--dg-b); border-radius: 3px; }
.rb-dg-sub.a .rb-dg-bar i { background: var(--dg-a); }
.rb-dg-sub.c .rb-dg-bar i { background: var(--dg-c); }
.rb-dg-sub.d .rb-dg-bar i { background: var(--dg-d); }
.rb-dg-sub.f .rb-dg-bar i { background: var(--dg-f); }

/* ---------- lineup table ----------
 * Stacked rows on a phone: slot and value on one line, the player underneath on its own. The
 * four-column grid only appears from 601px, where there is room for it. */

.rb-dg-table { display: block; width: 100%; }
.rb-dg-tr {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	grid-template-areas: 'slot name val';
	align-items: center; gap: 6px 10px;
	padding: 15px 0;
	border-bottom: 1px solid var(--dg-line);
}
.rb-dg-tr:last-child { border-bottom: none; }
.rb-dg-th { display: none; }
.rb-dg-tr > span:nth-child(1) { grid-area: slot; }
.rb-dg-tr > span:nth-child(2) { grid-area: name; }
.rb-dg-tr > span:nth-child(3) { display: none; }
.rb-dg-tr > span:nth-child(4) { grid-area: val; }

.rb-dg-slotname {
	font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #fff; text-align: center;
	padding: 3px 0; background: var(--dg-navy); border-radius: 5px;
}
.rb-dg-pname {
	min-width: 0;
	font-size: 15px; font-weight: 600; color: var(--dg-ink);
	overflow: hidden; text-overflow: ellipsis;
}
.rb-dg-pname i {
	display: block; font-style: normal; font-size: 12px; font-weight: 500; color: var(--dg-mute);
}
.rb-dg-vor { font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.rb-dg-vor.pos { color: var(--dg-a); }
.rb-dg-vor.neg { color: var(--dg-f); }
.rb-dg-tr.empty .rb-dg-pname { color: var(--dg-f); font-style: italic; }

/* ---------- bench ---------- */

.rb-dg-benchlist { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-dg-bchip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px;
	font-size: 14px; font-weight: 600; color: var(--dg-navy);
	background: var(--dg-bg); border: 1px solid var(--dg-line); border-radius: 18px;
}
.rb-dg-bchip i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dg-mute); }
.rb-dg-bchip.good { background: #edf9f1; border-color: #b9e5c9; }
.rb-dg-bchip.good i { color: var(--dg-a); }

/* ---------- position grid ---------- */

.rb-dg-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rb-dg-poscell {
	padding: 12px 14px;
	background: var(--dg-bg); border: 1px solid var(--dg-line); border-radius: 10px;
	border-left: 4px solid var(--dg-mute);
}
.rb-dg-poscell.good { border-left-color: var(--dg-a); }
.rb-dg-poscell.mid { border-left-color: var(--dg-b); }
.rb-dg-poscell.bad { border-left-color: var(--dg-f); }
.rb-dg-poscell strong { display: block; font-size: 13px; letter-spacing: .5px; color: var(--dg-navy); }
.rb-dg-posv { display: block; margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--dg-ink); }
.rb-dg-poscell.good .rb-dg-posv { color: var(--dg-a); }
.rb-dg-poscell.bad .rb-dg-posv { color: var(--dg-f); }
.rb-dg-posn { display: block; font-size: 12px; color: var(--dg-mute); }

/* ---------- closing CTA ---------- */

.rb-dg-cta {
	display: flex; flex-direction: column; gap: 18px;
	width: 100%; margin: 0 0 22px; padding: 24px 20px;
	background: linear-gradient(135deg, var(--dg-blue) 0%, var(--dg-blue-dk) 100%);
	border-radius: 14px; color: #fff;
}
.rb-dg-cta strong { display: block; font-size: 19px; line-height: 1.2; }
.rb-dg-cta span { display: block; margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.rb-dg-cta .rb-dg-btn-go { background: #fff; color: var(--dg-blue-dk); }
.rb-dg-cta .rb-dg-btn-go:hover { background: #eef4fb; color: var(--dg-blue-dk); }

/* ---------- tablet and up ---------- */

@media (min-width: 601px) {
	.rb-dg-wrap { font-size: 16px; }
	#rb-dg .rb-dg-title { font-size: 40px !important; }
	.rb-dg-card { padding: 24px 24px; }
	.rb-dg-fmt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.rb-dg-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rb-dg-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-dg-pos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rb-dg-actions .rb-dg-btn-go { width: auto; min-width: 280px; }

	.rb-dg-hero { display: flex; align-items: center; gap: 28px; padding: 30px 30px; }
	.rb-dg-gradewrap { flex: 0 0 auto; width: 190px; margin: 0; }
	#rb-dg .rb-dg-grade { font-size: 118px !important; }
	.rb-dg-says { flex: 1 1 auto; min-width: 0; }
	#rb-dg .rb-dg-head { text-align: left; font-size: 28px !important; }

	.rb-dg-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 24px 28px; }
	.rb-dg-cta .rb-dg-btn-go { flex: 0 0 auto; }

	/* Real four-column table once there's width for it. */
	.rb-dg-th { display: grid; }
	.rb-dg-tr {
		grid-template-columns: 74px minmax(0, 1fr) 74px 104px;
		grid-template-areas: 'slot name proj val';
		gap: 12px;
	}
	.rb-dg-tr > span:nth-child(3) { display: block; grid-area: proj; text-align: right; font-variant-numeric: tabular-nums; }
	.rb-dg-th > span {
		font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--dg-mute);
	}
	.rb-dg-th > span:nth-child(3), .rb-dg-th > span:nth-child(4) { text-align: right; }
	.rb-dg-th { padding-bottom: 8px; border-bottom: 2px solid var(--dg-line); }
	.rb-dg-pname i { display: inline; margin-left: 8px; }
}

@media (min-width: 981px) {
	.rb-dg-subs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rb-dg-sub { flex-direction: column; align-items: flex-start; gap: 8px; }
	#rb-dg .rb-dg-subgrade { width: auto; text-align: left; font-size: 38px !important; }
	.rb-dg-subbody { width: 100%; }
	.rb-dg-pos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Team finder on the import pane — a 12-team league is a lot of buttons on a phone. */
.rb-dg-teamfind { flex: 1 1 100%; margin: 0 0 4px; }

/* ─────────────────────────────────────────────────────────────────────────────
 * SPACING, RE-ASSERTED AT ID SPECIFICITY
 *
 * The theme ships `.entry div { margin: 0 auto 0 1px }`. That is specificity (0,1,1) and beats every
 * plain `.rb-dg-*` class rule (0,1,0), so on a real page the theme silently zeroed the margin of
 * every block-level DIV in this tool — the hero, the sub-grade row, the CTA, the roster block, the
 * control rows. It also nudged them 1px right. The cards escaped only because they're <section>.
 *
 * The result was a layout that looked correctly spaced in the offline harness (no theme) and cramped
 * on the live page, which is exactly the "everything is bunched together" failure these tools keep
 * hitting. Every layout margin is therefore declared ONCE more here, ID-scoped, so it wins outright.
 * Keep new spacing rules in this block rather than adding class-only margins above.
 * ───────────────────────────────────────────────────────────────────────────── */

#rb-dg .rb-dg-wrap      { margin: 0 0 28px; }
#rb-dg .rb-dg-card      { margin: 0 0 22px; }
#rb-dg .rb-dg-step      { margin: 0 0 20px; }
#rb-dg .rb-dg-tabs      { margin: 0 0 20px; }
#rb-dg .rb-dg-cardsub   { margin: 0 0 18px; }
#rb-dg .rb-dg-lede      { margin: 0; }
#rb-dg .rb-dg-row       { margin: 16px 0 0; }
#rb-dg .rb-dg-msg       { margin: 12px 0 0; }
#rb-dg .rb-dg-note      { margin: 14px 0 0; }
#rb-dg .rb-dg-warn      { margin: 14px 0 0; }
#rb-dg .rb-dg-thumbs    { margin: 12px 0 0; }
#rb-dg .rb-dg-teams     { margin: 16px 0 0; }
#rb-dg .rb-dg-slots     { margin: 16px 0 0; }
#rb-dg .rb-dg-roster    { margin: 24px 0 0; }
#rb-dg .rb-dg-roster:empty { margin: 0; padding: 0; border-top: none; }
#rb-dg .rb-dg-rhead     { margin: 0 0 14px; }
#rb-dg .rb-dg-actions   { margin: 0 0 28px; }
#rb-dg .rb-dg-hero      { margin: 0 0 22px; }
#rb-dg .rb-dg-gradewrap { margin: 0 0 22px; }
#rb-dg .rb-dg-gradesub  { margin: 10px 0 0; }
#rb-dg .rb-dg-subs      { margin: 0 0 22px; }
#rb-dg .rb-dg-cta       { margin: 0 0 22px; }

@media (min-width: 601px) {
	/* The desktop overrides have to be re-asserted at the same specificity, or the mobile block above
	 * would now win over them. */
	#rb-dg .rb-dg-gradewrap { margin: 0; }
}