/* /games/ index — the rocheport/games-index block (RTG_Pages::render_games_index).
 *
 * The paper's house language and nothing else: white ground, black Times,
 * a 1px black rule under each section head, #bbb hairlines between entries,
 * no boxes, radii, shadows or fills. Every colour is a theme token, and the
 * drawn icons (RTG_Icons) are currentColor, so Terminal and Rainbow repaint
 * the whole page with no override here.
 *
 * Each entry is ONE link: the headline's anchor is stretched over the entry
 * with ::after, so the icon, blurb and state line are all part of the tap
 * target without nesting block content inside an <a>.
 */

/* =========================================================================
   ONE TITLE (owner, 2026-09-21 "unify the game titles"): every other game
   page hides its small-caps flag and shows a bold in-page heading instead
   (games.css). The /games/ index has no second heading to fall back on, so
   its flag becomes the one bold title here, same scale as the rest (32px
   phone up to 48px desktop). "Games" is also a nav word, so the theme's
   nav-match filter (functions.php rt_nav_current) already adds .rt-sr to
   this h1 and style.css's `:is(h1,h2,p).rt-flag.rt-sr` clips it off-screen
   — every one of those properties (not just display) has to be restated
   here to win it back. */
body:has(.rtg-ix) h1.rt-flag.wp-block-post-title {
	display: block;
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 .35rem;
	padding: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border: 0;
	text-align: left;
	text-transform: none;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-weight: 700;
	letter-spacing: -.01em;
	font-size: clamp(2rem, 1.5rem + 3vw, 3rem);
	line-height: 1.05;
}
body:has(.rtg-ix) h1.rt-flag.wp-block-post-title::before,
body:has(.rtg-ix) h1.rt-flag.wp-block-post-title::after {
	content: none;
}

/* Column width (owner, 2026-09-21 "rethink"): the index renders in
   page.html's 760px prose column, 420px narrower than the 1180px masthead
   measure. Widen it, still centred on the header's own axis. */
.rt-reading:has(.rtg-ix) .wp-block-post-content {
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.rtg-ix {
	margin: 1.75rem 0 0;
}
.rtg-ix__sec + .rtg-ix__sec {
	margin-top: 2.6rem;
}

/* Section head: the paper's 11px letterspaced label on a black rule, with a
 * plain italic note set to the right. */
.rtg-ix__h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.15rem 1rem;
	margin: 0;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.rtg-ix__hn {
	font-size: 15px;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}
@media (min-width: 768px) {
	.rtg-ix__h { font-size: 14px; }
}

/* -- an entry ------------------------------------------------------------ */
.rtg-ix__e {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 1.1rem;
	align-items: start;
	padding: 1.15rem 0 1.2rem;
}
.rtg-ix__icon {
	display: block;
	color: var(--wp--preset--color--contrast);
	padding-top: 0.2rem;
}
.rtg-ix__icon svg {
	display: block;
	width: 100%;
	height: auto;
}
.rtg-ix__body {
	min-width: 0;
}
.rtg-ix__t {
	margin: 0 0 0.3rem;
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}
.rtg-ix__t a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rtg-ix__t a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.rtg-ix__e:hover .rtg-ix__t a,
.rtg-ix__t a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.rtg-ix__t a:focus-visible {
	outline: none;
}
.rtg-ix__t a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}
.rtg-ix__b {
	margin: 0 0 0.45rem;
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	max-width: 34em;
}
@media (min-width: 768px) {
	.rtg-ix__b { font-size: 18px; }
}

/* The reader's own state, from this browser (assets/games-index.js). The
 * square is a ballot box: empty, half-marked, marked. */
.rtg-ix__st {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
@media (min-width: 768px) {
	.rtg-ix__st { font-size: 14px; }
}
.rtg-ix__st::before {
	content: "";
	flex: none;
	width: 0.72em;
	height: 0.72em;
	border: 1px solid currentColor;
}
.rtg-ix__st[data-rtg-state="part"]::before {
	background: linear-gradient(135deg, currentColor 50%, transparent 50%);
}
.rtg-ix__st[data-rtg-state="done"] {
	color: var(--wp--preset--color--contrast);
}
.rtg-ix__st[data-rtg-state="done"]::before {
	background: currentColor;
}

/* -- the lead (The Mini; The Road in its own section) --------------------- */
.rtg-ix__e--lead {
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 1.4rem;
	padding: 1.4rem 0 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rtg-ix__e--lead .rtg-ix__t {
	font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.125rem);
	line-height: 1.04;
	margin-bottom: 0.4rem;
}
.rtg-ix__e--lead .rtg-ix__b {
	font-size: 1.125rem;
	line-height: 1.42;
	max-width: 32em;
}
.rtg-ix__sec:last-of-type .rtg-ix__e--lead:last-child {
	border-bottom: 0;
}

/* -- the other weeklies: one column, two on a wide column ----------------- */
.rtg-ix__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.rtg-ix__grid > li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
@media (min-width: 700px) {
	.rtg-ix__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.rtg-ix__grid > li:nth-child(odd) {
		padding-right: 1.4rem;
	}
	.rtg-ix__grid > li:nth-child(even) {
		padding-left: 1.4rem;
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* -- the standings (T6): leader this week, winner last week ---------------
   Filled by games-index.js from the live leaderboard call; hidden until
   someone has scored. Two columns on a wide screen, stacked on a phone.
   Same house language as the rest: a labelled rule, Times, no boxes. */
.rtg-ix__win[hidden] {
	display: none;
}
.rtg-ix__win {
	margin-bottom: 2.6rem;
}
.rtg-ix__win-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.rtg-ix__win-col {
	padding: 1.1rem 0 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rtg-ix__win-col[hidden] {
	display: none;
}
@media (min-width: 700px) {
	.rtg-ix__win-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.rtg-ix__win-col:nth-child(odd) {
		padding-right: 1.4rem;
	}
	.rtg-ix__win-col:nth-child(even) {
		padding-left: 1.4rem;
		border-left: 1px solid var(--wp--preset--color--border);
	}
	/* One column showing on a wide screen: let it take the row. */
	.rtg-ix__win-col:not([hidden]):only-of-type,
	.rtg-ix__win-col[hidden] + .rtg-ix__win-col:not([hidden]),
	.rtg-ix__win-col:not([hidden]):has(+ .rtg-ix__win-col[hidden]) {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
	}
}
.rtg-ix__win-lab {
	margin: 0 0 .3rem;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rtg-ix__win-name {
	margin: 0 0 .25rem;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
.rtg-ix__win-pts {
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}
.rtg-ix__win-note {
	margin: .8rem 0 0;
	font-size: 15px;
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	max-width: 48em;
}

.rtg-ix__foot {
	margin: 1.6rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
	font-size: 15px;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

/* -- phone ----------------------------------------------------------------- */
@media (max-width: 600px) {
	.rtg-ix__e {
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 0.95rem;
		padding: 1rem 0 1.05rem;
	}
	.rtg-ix__e--lead {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 1.05rem;
		padding: 1.2rem 0 1.3rem;
	}
	.rtg-ix__t {
		font-size: 1.25rem;
	}
	.rtg-ix__e--lead .rtg-ix__b {
		font-size: 1.0625rem;
	}
	.rtg-ix__icon {
		padding-top: 0.1rem;
	}
}

/* An entry without an icon (a serial whose drawing hasn't been made yet)
   keeps its text at full width instead of falling into the icon column. */
.rtg-ix__e:not(:has(.rtg-ix__icon)) .rtg-ix__body {
	grid-column: 1 / -1;
}