/*
 * RosterSlots — editorial layout and content modules.
 *
 * The homepage prose was a 680px column pinned to the left of a 1200px
 * container. This replaces it with a two-column band: a sticky contents rail
 * and a content column, which uses the full width instead of leaving 500px of
 * dead space beside the text.
 *
 * Everything here is flat-filled and monochrome. The accent (#ffb224) appears
 * only where it already does elsewhere: ratings and things to click. Where a
 * state is signalled with the accent, it is also signalled with a glyph or a
 * weight change, so it survives forced-colours mode.
 */

/* ---------------------------------------------------------------
   Two-column editorial band
   --------------------------------------------------------------- */

.rs-editorial {
	display: grid;
	/* Rail is 240px, not 264px: at 264 the sum of rail + gap + table min-width
	   + wrap padding landed exactly on the 1000px breakpoint, so the table
	   scrolled horizontally at 1001px with no hint shown. 240 buys headroom. */
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--s5);
	align-items: start;
	padding-block: var(--s5);
}

/* The rail sits on the LEFT: it is a navigational index of the article, and a
   reader scanning for a section looks left before they look right. It also
   means the content column starts at a consistent x-position with the sections
   above it. */
.rs-editorial__toc {
	position: sticky;
	/* Masthead is 60px min-height + 1px border. 84px clears it with air. */
	top: 84px;
	max-height: calc(100dvh - 84px - var(--s3));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s3);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	box-shadow: var(--hairline);
	/* 3.55:1 against --bg-surface. --border would be 1.59:1 and fails the
	   3:1 that WCAG 1.4.11 requires of an interactive component part. */
	scrollbar-color: var(--border-interactive) transparent;
	scrollbar-width: thin;
}

.rs-editorial__body {
	min-width: 0;
}

.rs-toc__title {
	display: block;
	font: 600 11px/1 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--s2);
}

.rs-toc,
.rs-toc__nested {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rs-toc;
}

.rs-toc > li {
	counter-increment: rs-toc;
}

/* The wrapper <li> that carries a nested h3 group must not consume a number,
   or the visible sequence skips (01, 02, 04, 05 …). */
.rs-toc > li.rs-toc__sub {
	counter-increment: none;
}

.rs-toc > li > a::before {
	content: counter(rs-toc, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-muted);
	flex: none;
}

.rs-toc a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding-block: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--border-subtle);
}

.rs-toc > li:last-child > a {
	border-bottom: 0;
}

.rs-toc a:hover {
	color: var(--accent);
}

/* :target styling gives the current section emphasis with weight as well as
   colour, so it is not colour-alone. */
.rs-toc a:hover,
.rs-toc a:focus-visible {
	font-weight: 600;
}

/* Selector is ol.rs-toc__nested, not .rs-toc__nested: the reset in style.css
   uses ol[class] { margin: 0; padding: 0 }, which at specificity (0,1,1) beats
   a bare class (0,1,0) whatever the source order. Matching the element raises
   this to (0,1,1) and the later source order then wins. */
ol.rs-toc__nested {
	/* The parent's text begins ~28px in (numeral column + gap), so a smaller
	   offset left children sitting level with their parent, reading as a flat
	   list rather than a nested one. */
	margin-left: 28px;
	padding-left: 14px;
	border-left: 1px solid var(--border-subtle);
}

.rs-toc__nested a {
	font-size: 13px;
	min-height: 36px;
	line-height: 1.35;
	color: var(--text-muted);
	border-bottom: 0;
}

.rs-toc__nested a:hover {
	color: var(--accent);
}

/* The group wrapper is structural; it must not draw its own separator. */
.rs-toc > li.rs-toc__sub {
	padding-block: 4px;
}

/* Below the breakpoint the rail becomes a collapsible box above the content.
   The summary is NEVER display:none — hiding the only control leaves a reader
   who collapses it and then widens the window with an unopenable empty box. */
.rs-editorial__toc > summary {
	cursor: pointer;
	list-style: none;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	font: 600 11px/1 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rs-editorial__toc > summary::-webkit-details-marker {
	display: none;
}

.rs-editorial__toc > summary::after {
	content: '+';
	font: 400 18px/1 var(--font-mono);
	color: var(--text-muted);
}

.rs-editorial__toc[open] > summary::after {
	content: '\2212';
}

.rs-editorial__toc[open] > summary {
	margin-bottom: var(--s2);
}

@media (max-width: 1080px) {
	.rs-editorial {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s3);
	}

	.rs-editorial__toc {
		position: static;
		max-height: none;
	}
}

/* ---------------------------------------------------------------
   Readability inside the content column
   --------------------------------------------------------------- */

.rs-editorial__body > * {
	max-width: 68ch;
}

/* Modules are allowed to use the full column; only running text is measured. */
.rs-editorial__body > .rs-note,
.rs-editorial__body > .rs-figures,
.rs-editorial__body > .rs-tablebox,
.rs-editorial__body > .rs-steps,
.rs-editorial__body > .rs-splitgrid {
	max-width: none;
}

.rs-editorial__body p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin-bottom: var(--s3);
}

.rs-editorial__body h2 {
	font-size: 26px;
	letter-spacing: -0.018em;
	margin-top: var(--s6);
	margin-bottom: var(--s2);
	padding-top: var(--s3);
	border-top: 1px solid var(--border-subtle);
}

.rs-editorial__body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rs-editorial__body h3 {
	font-size: 18px;
	margin-top: var(--s4);
	margin-bottom: var(--s1);
}

.rs-editorial__body strong {
	color: var(--text-primary);
	font-weight: 600;
}

.rs-editorial__body ul,
.rs-editorial__body ol {
	color: var(--text-secondary);
	padding-left: 1.3em;
	margin-bottom: var(--s3);
	line-height: 1.7;
}

.rs-editorial__body li + li {
	margin-top: 8px;
}

/* Module lists space themselves with grid/flex gap. Letting the generic
   li + li rule through as well pushed every item except the first down by 8px
   inside its own row — visible as the first stat tile sitting proud of the
   other three. */
.rs-editorial__body .rs-figures li + li,
.rs-editorial__body .rs-steps li + li,
.rs-editorial__body .rs-checklist li + li,
.rs-editorial__body .rs-warnlist li + li,
.rs-editorial__body .rs-team li + li {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Callout note
   Deliberately a modifier-shaped sibling of .rs-verdict: same 2px rule, same
   --s3 rhythm, so the two never appear on one page looking almost-but-not-quite
   identical.
   --------------------------------------------------------------- */

.rs-note {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	/* --border-interactive on --bg-surface is 3.55:1, clearing the 3:1 floor
	   for a non-text boundary. It drops to 3.27:1 on --bg-elevated. */
	border-left: 2px solid var(--border-interactive);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	box-shadow: var(--hairline);
	padding: var(--s3);
	margin-block: var(--s3);
}

.rs-note__label {
	display: block;
	font: 600 11px/1 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--s1);
}

.rs-note p {
	margin-block: 0;
	color: var(--text-secondary);
}

.rs-note p + p {
	margin-top: var(--s2);
}

/* The key variant differs by glyph AND weight AND rule width, not only colour,
   so it stays distinguishable in forced-colours where border-color is
   overridden by the system palette. */
.rs-note--key {
	border-left-width: 6px;
	border-left-color: var(--accent);
}

.rs-note--key .rs-note__label {
	color: var(--text-primary);
	font-weight: 700;
}

.rs-note--key .rs-note__label::before {
	content: '\25B8\00a0';
	color: var(--accent);
}

@media (forced-colors: active) {
	.rs-note--key {
		border-left-style: double;
	}
}

/* ---------------------------------------------------------------
   Numbered steps
   Explicit grid placement: without it, auto-placement drops the first <p> back
   into the 32px numeral column and the text wraps one character per line.
   --------------------------------------------------------------- */

.rs-steps {
	list-style: none;
	margin: 0 0 var(--s3);
	padding: 0;
	counter-reset: rs-step;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}

.rs-steps > li {
	counter-increment: rs-step;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: var(--s2);
	align-items: start;
	padding: var(--s3);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	box-shadow: var(--hairline);
}

.rs-steps > li::before {
	content: counter(rs-step);
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bg-muted);
	box-shadow: var(--hairline);
	font: 700 13px/1 var(--font-mono);
	color: var(--text-primary);
}

.rs-steps > li > * {
	grid-column: 2;
}

.rs-steps__title {
	font: 600 16px/1.35 var(--font-head);
	color: var(--text-primary);
	margin: 3px 0 4px;
}

.rs-steps p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.6;
}

.rs-steps p + p {
	margin-top: var(--s2);
}

/* ---------------------------------------------------------------
   Checklists
   Absolute positioning, not grid: a grid track blockifies every inline child,
   so <strong> inside an <li> would be placed into the 22px marker column.
   --------------------------------------------------------------- */

.rs-checklist,
.rs-warnlist {
	list-style: none;
	margin: 0 0 var(--s3);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}

.rs-checklist > li,
.rs-warnlist > li {
	display: block;
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.rs-checklist > li::before,
.rs-warnlist > li::before {
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--font-mono);
	font-weight: 700;
}

.rs-checklist > li::before {
	content: '\2713';
	color: var(--text-primary);
}

.rs-warnlist > li::before {
	content: '\0021';
	color: var(--text-primary);
}

.rs-checklist > li strong,
.rs-warnlist > li strong {
	color: var(--text-primary);
}

/* ---------------------------------------------------------------
   Stat figures
   Matched to .rs-method so the two bands genuinely read as one system:
   same minmax, same numeral size, same fill token.
   --------------------------------------------------------------- */

.rs-figures {
	list-style: none;
	margin: 0 0 var(--s3);
	padding: 0;
	display: grid;
	/* Fixed track counts, not auto-fit: with four tiles auto-fit resolved to
	   three columns and left the fourth alone on its own row beside a large
	   empty cell. These counts always divide the set evenly. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--border-subtle);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	overflow: hidden;
}

@media (max-width: 900px) {
	.rs-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 430px) {
	.rs-figures {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rs-figure {
	background: var(--surface-grad);
	padding: var(--s3);
	box-shadow: var(--hairline);
}

.rs-figure b {
	display: block;
	font: 700 26px/1 var(--font-head);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	margin-bottom: 6px;
}

.rs-figure span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   Table box
   The wrapper scrolls, never the page.
   --------------------------------------------------------------- */

.rs-tablebox {
	margin: 0 0 var(--s3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	background: var(--bg-surface);
	box-shadow: var(--hairline);
	overflow-x: auto;
	scrollbar-color: var(--border-interactive) transparent;
	scrollbar-width: thin;
}

.rs-tablebox table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.rs-tablebox th,
.rs-tablebox td {
	text-align: left;
	padding: 12px var(--s2);
	border-bottom: 1px solid var(--border-subtle);
	font-size: 14px;
}

.rs-tablebox thead th {
	background: var(--bg-elevated);
	font: 600 10px/1.3 var(--font-mono);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.rs-tablebox td {
	color: var(--text-secondary);
}

.rs-tablebox tbody tr:last-child th,
.rs-tablebox tbody tr:last-child td {
	border-bottom: 0;
}

/* Matches the hover language already used by .rs-table. */
.rs-tablebox tbody tr:hover {
	background: rgba(255, 255, 255, 0.022);
}

/* ---------------------------------------------------------------
   Pull quote
   --------------------------------------------------------------- */

.rs-pullquote {
	margin: var(--s4) 0;
	padding-left: var(--s3);
	border-left: 2px solid var(--accent);
	font: 600 20px/1.5 var(--font-head);
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   Two-up split for side-by-side lists
   --------------------------------------------------------------- */

.rs-splitgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s3);
	margin-bottom: var(--s3);
}

.rs-splitgrid > div {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	box-shadow: var(--hairline);
	padding: var(--s3);
}

.rs-splitgrid h3 {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Team
   Shares the type ramp with .rs-authorbox rather than restating it with
   slightly different numbers.
   --------------------------------------------------------------- */

.rs-team {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s3);
}

.rs-teamcard {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	box-shadow: var(--hairline);
	padding: var(--s3);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rs-teamcard:hover {
	border-color: var(--border);
	transform: translateY(-2px);
}

.rs-teamcard__photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg-muted);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--s2);
}

.rs-teamcard__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-teamcard__initial {
	font: 700 24px/1 var(--font-head);
	color: var(--text-muted);
}

.rs-teamcard__name {
	font: 600 19px/1.25 var(--font-head);
	margin: 0 0 4px;
}

.rs-teamcard__name a {
	/* 44px target: the primary link on the card. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--text-primary);
	text-decoration: none;
}

.rs-teamcard__role {
	font: 400 12px/1.4 var(--font-mono);
	color: var(--text-muted);
	margin: 0 0 var(--s2);
}

.rs-teamcard__bio {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
	max-width: 62ch;
	margin: 0;
}

.rs-teamcard__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--s2) 0 0;
	padding: 0;
}

.rs-teamcard__tags li {
	font: 500 11px/1 var(--font-mono);
	letter-spacing: 0.03em;
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-pill);
	padding: 6px 10px;
}

@media (max-width: 640px) {
	.rs-editorial__body p {
		font-size: 16px;
	}

	.rs-editorial__body h2 {
		font-size: 22px;
	}
}