/* Rankings companion to research article 001. Inherits the article palette and
   table styling from research-article.css; this file adds the control
   bar, the sticky table head and the single-column page frame. */

.g2m-trr {
	background: var(--g2m-tra-page);
}

.g2m-trr__body {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

/* Full width, squaring up with the control bar and the table below it rather
   than sitting on an article measure. */
.g2m-trr__body > .g2m-tra__standfirst {
	max-width: none;
	margin: 0 0 1.75rem;
}

.g2m-trr__body a {
	color: var(--g2m-tra-teal);
}

/* ---------- Controls ---------- */

.g2m-trr__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: flex-end;
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.25rem;
	background: var(--g2m-tra-surface);
	border: 1px solid var(--g2m-tra-line);
	border-radius: 10px;
}

.g2m-trr__controls[hidden] {
	display: none;
}

.g2m-trr__control {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.g2m-trr__control-label {
	color: var(--g2m-tra-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.g2m-trr__toggle {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--g2m-tra-line);
	border-radius: 6px;
}

.g2m-trr__toggle-button {
	padding: 0.45rem 0.95rem;
	border: 0;
	background: var(--g2m-tra-surface);
	color: var(--g2m-tra-ink);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.g2m-trr__toggle-button + .g2m-trr__toggle-button {
	border-left: 1px solid var(--g2m-tra-line);
}

.g2m-trr__toggle-button:hover {
	background: var(--g2m-tra-teal-soft);
}

.g2m-trr__toggle-button[aria-pressed="true"] {
	background: var(--g2m-tra-navy);
	color: #ffffff;
}

.g2m-trr__search,
.g2m-trr__select {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--g2m-tra-line);
	border-radius: 6px;
	background: var(--g2m-tra-surface);
	color: var(--g2m-tra-ink);
	font: inherit;
	font-size: 0.88rem;
}

.g2m-trr__search {
	min-width: 14rem;
}

/* The row count and the full-screen control read as one cluster on the right,
   centred against each other rather than sitting on the control baseline. */
.g2m-trr__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
	padding-bottom: 0.35rem;
}

.g2m-trr__count {
	margin: 0;
	color: var(--g2m-tra-muted);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.g2m-trr__fullscreen {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0;
	border: 0;
	background: none;
	color: var(--g2m-tra-teal);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 140ms ease;
}

.g2m-trr__fullscreen[hidden] {
	display: none;
}

.g2m-trr__fullscreen:hover {
	color: var(--g2m-tra-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.g2m-trr__fullscreen:focus-visible {
	outline: 2px solid var(--g2m-tra-teal);
	outline-offset: 3px;
	border-radius: 3px;
}

.g2m-trr__fullscreen-icon {
	width: 15px;
	height: 15px;
	flex: none;
}

/* The panel becomes the whole viewport, so it supplies its own page frame. */
.g2m-trr__panel:fullscreen {
	display: flex;
	flex-direction: column;
	padding: 1.25rem clamp(1rem, 3vw, 2rem);
	background: var(--g2m-tra-page);
	overflow: auto;
}

/* In full screen the panel is the scroll container, so the header row sticks to
   the top of it rather than below a site header that is no longer on screen. */
.g2m-trr__panel:fullscreen .g2m-trr__table thead th {
	top: 0;
}

.g2m-trr__panel:fullscreen .g2m-tra__legend--table {
	margin-bottom: 0;
}

.g2m-trr__definition {
	margin: 0 0 0.75rem;
	color: var(--g2m-tra-navy);
	font-size: 0.9rem;
	font-weight: 600;
}

/* ---------- Table ---------- */

/* The table runs its full length down the page rather than scrolling inside a
   box, so the reader never has to fight a scroll container inside a scrolling
   page. The header row sticks below the site header instead.

   Overflow must stay fully visible here. CSS resolves `visible` to `auto` on one
   axis whenever the other axis scrolls, which would turn this wrapper back into
   a scroll container and make the sticky header stick to it rather than to the
   page, leaving it parked over the first row. Horizontal scrolling is restored
   only at the narrow breakpoint, where the header is not sticky. */
.g2m-trr__tablewrap {
	overflow: visible;
}

.g2m-trr__table thead th {
	position: sticky;
	top: 100px;
	z-index: 1;
	box-shadow: inset 0 -1px 0 var(--g2m-tra-line);
}

.g2m-trr__table tbody th {
	font-weight: 500;
}

.g2m-trr__states {
	color: var(--g2m-tra-muted);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.g2m-trr__sortable {
	cursor: pointer;
	user-select: none;
}

.g2m-trr__sortable:hover {
	color: var(--g2m-tra-navy);
}

.g2m-trr__sortable:focus-visible {
	outline: 2px solid var(--g2m-tra-teal);
	outline-offset: -2px;
}

.g2m-trr__sortable::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	margin-left: 0.3em;
	opacity: 0.85;
}

.g2m-trr__table thead th[aria-sort="ascending"]::after {
	content: "\2191";
}

.g2m-trr__table thead th[aria-sort="descending"]::after {
	content: "\2193";
}

/* ---------- Notes ---------- */

.g2m-trr__notes {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--g2m-tra-line);
}

.g2m-trr__notes h2 {
	margin: 0 0 1.25rem;
	color: var(--g2m-tra-navy);
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 700;
}

.g2m-trr__notes .g2m-tra__card {
	background: var(--g2m-tra-surface);
}

@media (max-width: 760px) {
	.g2m-trr__controls {
		gap: 1rem;
	}

	.g2m-trr__control {
		width: 100%;
	}

	.g2m-trr__search,
	.g2m-trr__select {
		width: 100%;
	}

	.g2m-trr__actions {
		width: 100%;
		margin-left: 0;
		padding-bottom: 0;
		justify-content: space-between;
	}

	/* Safe to scroll sideways here: the header row is no longer sticky, so the
	   wrapper becoming a scroll container costs nothing. */
	.g2m-trr__tablewrap {
		overflow-x: auto;
	}

	.g2m-trr__table thead th {
		position: static;
	}
}