/**
 * Coach World Ranking - public pages (referee profile, referees hub, league tables,
 * manager ranking, managers hub, home, methodology).
 *
 * Tokens = the FL Sport Blocks design system (cool navy / slate), renamed --acr-*.
 * Design frozen 2026-09-22 (.docs/plans/2026-09-coach-ranking-mvp/mockups/); Phase 5 pages
 * 2026-10-27/28 (Design canvas, section at the end of this file).
 * Layout via container queries on .acr-main, so the pages adapt to the column they get.
 * Font family is inherited from the theme.
 */

.acr-main {
	--acr-text: #1a1a2e;
	--acr-heading-strong: #1f2430;
	--acr-heading-alt: #2b303c;
	--acr-label-strong: #475067;
	--acr-label: #5b6072;
	--acr-label-muted: #6c7086;
	--acr-surface: #fff;
	--acr-surface-tint: #f8f9fa;
	--acr-surface-tint-2: #eef0f6;
	--acr-border: #e6e8ee;
	--acr-divider: #f0f1f4;
	--acr-border-dashed: #d7dae3;
	--acr-gray: #c0c4cc;
	--acr-win-accent: #1a9e57;
	--acr-loss: #a52f26;
	--acr-draw: #92400e;
	--acr-draw-tint: #fef3c7;
	--acr-info: #2f6fed;
	--acr-info-tint: #e6edff;
	--acr-accent: var(--global-palette1, #2563eb);
	--acr-accent-dark: #1d4ed8;
	--acr-header-gradient: linear-gradient(135deg, #2b3553, #4a5578);

	container-type: inline-size;
	box-sizing: border-box;
	max-width: var(--global-content-width, 1120px);
	margin: 0 auto;
	padding: 24px var(--global-content-edge-padding, 16px) 48px;
	color: var(--acr-text);
	font-size: 14px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.acr-main *,
.acr-main *::before,
.acr-main *::after {
	box-sizing: border-box;
}

.acr-main a {
	color: var(--acr-accent-dark);
	text-decoration: none;
}

.acr-main a:hover {
	text-decoration: underline;
}

.acr-main a:focus-visible,
.acr-main button:focus-visible,
.acr-main summary:focus-visible {
	outline: 2px solid var(--acr-accent);
	outline-offset: 2px;
}

.acr-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ---------- hero ---------- */
.acr-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	border-radius: 3px;
	background: var(--acr-header-gradient);
	color: #fff;
}

.acr-hero__av {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	font-size: 19px;
	font-weight: 700;
}

.acr-hero__txt {
	flex: 1;
	min-width: 0;
}

.acr-crumb {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.acr-main .acr-crumb a {
	color: inherit;
}

.acr-main .acr-hero__h {
	margin: 2px 0;
	font-family: inherit;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

.acr-hero__sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.82);
}

.acr-hero__meta {
	flex: none;
	display: flex;
	gap: 22px;
}

.acr-hero__meta div {
	text-align: right;
}

.acr-hero__meta b {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
}

.acr-hero__meta span {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.78);
}

.acr-hero__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.acr-main .acr-hero__nav a {
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.acr-main .acr-hero__nav a.is-on {
	border-color: #fff;
	background: #fff;
	color: var(--acr-heading-strong);
}

/* ---------- block shell ---------- */
.acr-blk {
	min-width: 0;
	padding: 16px 18px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface);
}

.acr-sh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--acr-border);
}

.acr-main .acr-sh__t {
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--acr-heading-alt);
}

.acr-sh__m {
	margin-left: auto;
	font-size: 11px;
	font-weight: 500;
	text-align: right;
	color: var(--acr-label-muted);
}

.acr-main .acr-note {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.55;
	color: var(--acr-label-muted);
}

.acr-note b {
	font-weight: 600;
	color: var(--acr-label);
}

.acr-main .acr-empty {
	margin: 0;
	padding: 22px 16px;
	border: 1px dashed var(--acr-border-dashed);
	border-radius: 3px;
	background: var(--acr-surface-tint);
	text-align: center;
	font-size: 12.5px;
	color: var(--acr-label);
}

/* ---------- stat tiles ---------- */
.acr-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.acr-tiles--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.acr-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
}

.acr-tile__v {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.05;
	color: var(--acr-heading-strong);
}

.acr-tile__v small {
	font-size: 14px;
	font-weight: 700;
	color: var(--acr-label);
}

.acr-tile__v--y {
	color: var(--acr-draw);
}

.acr-tile__v--r {
	color: var(--acr-loss);
}

.acr-tile__l {
	margin-top: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-tile__s {
	font-size: 11px;
	color: var(--acr-label-muted);
}

/* ---------- cards by half ---------- */
.acr-half {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 28px;
}

.acr-split {
	margin: 2px 0 16px;
}

.acr-split__lbl {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-size: 12px;
	color: var(--acr-label);
}

.acr-split__lbl b {
	margin-right: 4px;
	font-size: 18px;
	font-weight: 800;
	color: var(--acr-heading-strong);
}

.acr-split__bar {
	display: flex;
	height: 10px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--acr-surface-tint-2);
}

.acr-split__a,
.acr-split__b {
	width: var(--acr-w, 0%);
}

.acr-split__a {
	background: var(--acr-gray);
}

.acr-split__b {
	background: var(--acr-draw);
}

.acr-split__pc {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 11px;
	color: var(--acr-label-muted);
}

.acr-cmp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px 96px;
}

.acr-cmp__r,
.acr-ou__r,
.acr-t__r {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: center;
	border-bottom: 1px solid var(--acr-divider);
}

.acr-cmp__r > *,
.acr-ou__r > * {
	padding: 7px 4px;
}

.acr-cmp__r:first-child,
.acr-ou__r:first-child,
.acr-t__r:first-child {
	border-bottom-color: var(--acr-border);
}

.acr-cmp__h,
.acr-ou__h {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: right;
	color: var(--acr-label);
}

.acr-ou__h {
	text-align: center;
}

.acr-cmp__h:first-child,
.acr-ou__h:first-child {
	text-align: left;
}

.acr-cmp__k,
.acr-ou__k {
	font-size: 13px;
	color: var(--acr-label-strong);
}

.acr-cmp__v {
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

.acr-cmp__v small,
.acr-ou__c small {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--acr-label-muted);
}

/* timing chart */
.acr-main .acr-tl__h {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--acr-heading-alt);
}

.acr-tl,
.acr-tl__x {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.acr-tl {
	align-items: end;
	height: 150px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--acr-border);
}

.acr-tl__col {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.acr-tl__val {
	position: relative;
	z-index: 1;
	margin-bottom: 4px;
	padding: 0 3px;
	background: var(--acr-surface);
	font-size: 11px;
	font-weight: 700;
	color: var(--acr-heading-alt);
}

.acr-tl__bar {
	width: 100%;
	max-width: 38px;
	height: var(--acr-h, 0%);
	border: 1px solid var(--acr-draw);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	background: var(--acr-draw-tint);
}

.acr-tl__avg {
	position: absolute;
	bottom: var(--acr-b, 0%);
	left: 50%;
	width: 46px;
	margin-left: -23px;
	border-top: 2px solid var(--acr-heading-alt);
}

.acr-tl__ht {
	align-self: stretch;
	margin-left: 4px;
	border-left: 1px dashed var(--acr-border-dashed);
}

.acr-tl__x {
	margin-top: 5px;
}

.acr-tl__x span {
	font-size: 10px;
	text-align: center;
	color: var(--acr-label-muted);
}

.acr-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
	font-size: 11px;
	color: var(--acr-label-muted);
}

.acr-legend i {
	display: inline-block;
	margin-right: 5px;
	vertical-align: -1px;
}

.acr-sw-bar {
	width: 10px;
	height: 10px;
	border: 1px solid var(--acr-draw);
	border-radius: 2px;
	background: var(--acr-draw-tint);
}

.acr-legend .acr-sw-avg {
	width: 14px;
	height: 0;
	border-top: 2px solid var(--acr-heading-alt);
	vertical-align: 3px;
}

/* ---------- two-up rows ---------- */
.acr-two {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

/* ---------- over / under heat table ---------- */
.acr-ou {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr));
}

.acr-main .acr-ou__g {
	grid-column: 1 / -1;
	padding-top: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acr-label-muted);
}

.acr-ou__c {
	border-left: 2px solid var(--acr-surface);
	background: rgba(47, 111, 237, var(--acr-heat, 0));
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
}

/* ---------- home vs away ---------- */
.acr-ha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

.acr-ha__v {
	font-size: 22px;
	font-weight: 800;
	color: var(--acr-heading-strong);
}

.acr-ha__l {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-ha__s {
	font-size: 11px;
	color: var(--acr-label-muted);
}

.acr-seg {
	display: flex;
	gap: 2px;
	height: 10px;
	overflow: hidden;
	border-radius: 3px;
}

.acr-seg > div {
	width: var(--acr-w, 0%);
}

.acr-seg__h {
	background: var(--acr-win-accent);
}

.acr-seg__d {
	background: var(--acr-gray);
}

.acr-seg__a {
	background: var(--acr-info);
}

.acr-seg-l {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 5px;
	font-size: 11px;
	color: var(--acr-label);
}

.acr-seg-l b {
	color: var(--acr-text);
}

.acr-main .acr-insight {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--acr-divider);
	font-size: 13px;
	color: var(--acr-label-strong);
}

/* ---------- competitions ---------- */
.acr-comps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.acr-comp {
	padding: 4px 9px;
	border: 1px solid var(--acr-border);
	border-radius: 4px;
	font-size: 12px;
	color: var(--acr-label-strong);
}

.acr-comp b {
	margin-left: 4px;
	color: var(--acr-text);
}

.acr-comp--on {
	background: var(--acr-surface-tint);
}

/* ---------- small div-grid tables (seasons, recent matches) ---------- */
.acr-t {
	display: grid;
}

.acr-t--seasons {
	grid-template-columns: minmax(0, 1fr) 46px 62px 50px 50px 56px;
}

.acr-t--games {
	grid-template-columns: 86px minmax(0, 1fr) 48px 50px 50px;
}

.acr-t__r > * {
	padding: 6px;
	font-size: 12.5px;
	text-align: right;
	white-space: nowrap;
}

.acr-t__r [role="columnheader"] {
	padding-bottom: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-main .acr-t__l {
	text-align: left;
}

.acr-t__m {
	color: var(--acr-label-muted);
}

.acr-t__b {
	font-weight: 700;
}

.acr-t__match {
	overflow: hidden;
	text-overflow: ellipsis;
}

.acr-t__sub {
	display: block;
	font-size: 10.5px;
	color: var(--acr-label-muted);
}

.acr-t__na {
	font-size: 11px;
	color: var(--acr-label-muted);
}

.acr-t__avg {
	border-bottom: 0;
	background: var(--acr-surface-tint);
	font-weight: 600;
	color: var(--acr-label-strong);
}

.acr-main abbr[title] {
	text-decoration: none;
	cursor: help;
}

/* ---------- filters ---------- */
.acr-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.acr-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.acr-fl {
	margin-right: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acr-label-muted);
}

.acr-main .acr-pill {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--acr-border);
	border-radius: 4px;
	background: var(--acr-surface);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--acr-label);
	text-decoration: none;
	cursor: pointer;
}

.acr-main .acr-pill:hover {
	border-color: var(--acr-gray);
	color: var(--acr-text);
	text-decoration: none;
}

.acr-main .acr-pill.is-on {
	border-color: var(--acr-accent);
	background: var(--acr-info-tint);
	font-weight: 600;
	color: var(--acr-text);
}

.acr-more {
	position: relative;
}

.acr-more summary {
	list-style: none;
}

.acr-more summary::-webkit-details-marker {
	display: none;
}

.acr-more summary::after {
	content: " ▾";
	font-size: 10px;
}

.acr-more__list {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface);
	box-shadow: 0 6px 16px rgba(31, 36, 48, 0.12);
}

/* period switch (buttons, aria-pressed; links, aria-current on the ranking pages) */
.acr-seg-ctl {
	display: inline-flex;
	margin-left: auto;
	overflow: hidden;
	border: 1px solid var(--acr-border);
	border-radius: 4px;
}

.acr-main .acr-seg-ctl button,
.acr-main .acr-seg-ctl a {
	box-shadow: none;
	line-height: 1.4;
	margin: 0;
	padding: 5px 12px;
	border: 0;
	border-radius: 0;
	background: var(--acr-surface);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--acr-label);
	cursor: pointer;
	text-decoration: none;
}

.acr-main .acr-seg-ctl button + button,
.acr-main .acr-seg-ctl a + a {
	border-left: 1px solid var(--acr-border);
}

.acr-main .acr-seg-ctl button:hover,
.acr-main .acr-seg-ctl a:hover,
.acr-main .acr-seg-ctl button:focus,
.acr-main .acr-seg-ctl a:focus {
	background: var(--acr-surface-tint);
	box-shadow: none;
	color: var(--acr-text);
}

.acr-main .acr-seg-ctl button[aria-pressed="true"],
.acr-main .acr-seg-ctl a[aria-current="page"] {
	background: var(--acr-heading-alt);
	color: #fff;
}

.acr-early {
	padding: 9px 12px;
	border: 1px solid var(--acr-draw-tint);
	border-radius: 3px;
	background: #fffbeb;
	font-size: 12.5px;
	color: var(--acr-draw);
}

.acr-main .acr-early a {
	margin-left: 4px;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
}

/* ---------- sortable tables (league tables, referees hub) ---------- */
.acr-tbl {
	--cols: 28px minmax(150px, 1fr) 40px 62px 70px 62px 60px 60px 60px 46px;

	overflow-x: auto;
}

.acr-tbl[hidden] {
	display: none;
}

.acr-tbl--corners {
	--cols: 28px minmax(150px, 1fr) 40px 62px 70px 62px 60px 60px 60px;
}

.acr-tbl--hub {
	--cols: 36px minmax(160px, 1fr) 120px 50px 70px 56px 56px 90px;
}

.acr-tbl__groups,
.acr-tbl__head,
.acr-tbl__row {
	display: grid;
	grid-template-columns: var(--cols);
}

.acr-tbl__groups {
	align-items: end;
}

.acr-tbl__g {
	padding: 0 6px 3px;
	border-bottom: 2px solid var(--acr-surface-tint-2);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--acr-label-muted);
}

.acr-tbl__g--pg {
	grid-column: 4 / span 3;
}

.acr-tbl__g--ou {
	grid-column: 7 / span 3;
}

.acr-tbl__head {
	border-bottom: 1px solid var(--acr-border);
}

.acr-tbl__h {
	padding: 7px 6px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--acr-label);
}

.acr-tbl__h--l,
.acr-tbl__h--rk {
	text-align: left;
}

.acr-main .acr-tbl__h button {
	box-shadow: none;
	line-height: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}

/* Themes (Kadence) style every button, including :hover / :focus - reset both controls. */
.acr-main .acr-tbl__h button:hover,
.acr-main .acr-tbl__h button:focus,
.acr-main .acr-tbl__h button:active {
	background: none;
	box-shadow: none;
	color: inherit;
}

.acr-tbl__h[aria-sort="descending"],
.acr-tbl__h[aria-sort="ascending"] {
	background: var(--acr-surface-tint);
	color: var(--acr-heading-strong);
}

.acr-tbl__h[aria-sort="descending"] button::after {
	content: "▾";
	margin-left: 2px;
	font-size: 8px;
}

.acr-tbl__h[aria-sort="ascending"] button::after {
	content: "▴";
	margin-left: 2px;
	font-size: 8px;
}

.acr-tbl__row {
	align-items: center;
	border-bottom: 1px solid var(--acr-divider);
}

.acr-tbl__row:hover {
	background: var(--acr-surface-tint);
}

.acr-tbl__rk {
	padding: 0 4px;
	font-size: 11px;
	text-align: right;
	color: var(--acr-label-muted);
}

.acr-tbl__team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 5px 6px;
	font-size: 13px;
}

.acr-tbl__team a {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-tbl__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-crest {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--acr-header-gradient);
	font-size: 7.5px;
	font-weight: 700;
	color: #fff;
}

/* 4-character codes (MAIF, LASK): smaller, tighter type so the circle stays round (5.3) */
.acr-crest--sm {
	font-size: 6px;
	letter-spacing: -0.02em;
}

.acr-tbl__v {
	padding: 6px;
	font-size: 12.5px;
	text-align: right;
	white-space: nowrap;
}

.acr-tbl__v--m {
	color: var(--acr-label-muted);
}

.acr-tbl__v--b {
	font-weight: 700;
}

.acr-tbl__v--txt {
	text-align: left;
	color: var(--acr-label-strong);
}

.acr-tbl__v--ou {
	border-left: 2px solid var(--acr-surface);
	background: rgba(47, 111, 237, var(--acr-heat, 0));
	text-align: center;
	font-weight: 600;
}

.acr-tbl__v--r {
	color: var(--acr-loss);
}

.acr-tbl__v.is-sorted {
	background: var(--acr-surface-tint);
	font-weight: 700;
}

.acr-tbl__avg {
	border-top: 1px solid var(--acr-border);
	border-bottom: 0;
	background: var(--acr-surface-tint);
	font-weight: 600;
}

.acr-tbl__avg .acr-tbl__name {
	font-weight: 700;
	color: var(--acr-label-strong);
}

/* ---------- referee leaderboard ---------- */
.acr-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--acr-rows, 10), auto);
	grid-auto-flow: column;
	column-gap: 28px;
}

.acr-board__r {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 76px 100px 40px;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--acr-divider);
	font-size: 13px;
}

.acr-board__rk {
	font-size: 11px;
	text-align: right;
	color: var(--acr-label-muted);
}

.acr-board__n {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-board__mp {
	font-size: 11px;
	text-align: right;
	color: var(--acr-label-muted);
}

.acr-board__bar {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--acr-surface-tint-2);
}

.acr-board__bar i {
	display: block;
	width: var(--acr-w, 0%);
	height: 100%;
	background: var(--acr-draw);
}

.acr-board__v {
	font-weight: 700;
	text-align: right;
}

/* ---------- container queries ---------- */
@container (max-width: 860px) {
	.acr-tiles--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.acr-half,
	.acr-two {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 700px) {
	.acr-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acr-board {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	/* Sortable tables: sticky team column, rank dropped, the rest scrolls sideways. */
	.acr-tbl {
		--cols: 128px 34px 50px 56px 52px 52px 52px 52px 40px;

		margin: 0 -12px;
	}

	.acr-tbl--corners {
		--cols: 128px 34px 50px 56px 52px 52px 52px 52px;
	}

	.acr-tbl--hub {
		--cols: 150px 44px 60px 50px 50px;
	}

	.acr-tbl__groups,
	.acr-tbl__head,
	.acr-tbl__row {
		width: max-content;
		min-width: 100%;
	}

	.acr-tbl__rk,
	.acr-tbl__h--rk,
	.acr-tbl__hide-s {
		display: none;
	}

	.acr-tbl__g--pg {
		grid-column: 3 / span 3;
	}

	.acr-tbl__g--ou {
		grid-column: 6 / span 3;
	}

	.acr-tbl__team,
	.acr-tbl__head .acr-tbl__h--l {
		position: sticky;
		left: 0;
		z-index: 2;
		padding-left: 12px;
		background: var(--acr-surface);
		box-shadow: 6px 0 6px -6px rgba(31, 36, 48, 0.18);
	}

	.acr-tbl__row:hover .acr-tbl__team,
	.acr-tbl__avg .acr-tbl__team {
		background: var(--acr-surface-tint);
	}

	.acr-tbl__team {
		font-size: 12px;
	}

	.acr-crest {
		width: 18px;
		height: 18px;
		font-size: 6.5px;
	}

	.acr-crest--sm {
		font-size: 5px;
	}

	.acr-board__r {
		grid-template-columns: 20px minmax(0, 1fr) 70px 60px 40px;
	}
}

@container (max-width: 520px) {
	.acr-hero {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.acr-hero__av {
		width: 44px;
		height: 44px;
		font-size: 15px;
	}

	.acr-main .acr-hero__h {
		font-size: 21px;
	}

	.acr-hero__meta {
		justify-content: flex-start;
		width: 100%;
		padding-top: 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.acr-hero__meta div {
		text-align: left;
	}

	.acr-hero__meta b {
		font-size: 18px;
	}

	.acr-tile:first-child {
		grid-column: 1 / -1;
	}

	.acr-tiles--4 .acr-tile:first-child {
		grid-column: auto;
	}

	.acr-blk {
		padding: 14px 12px;
	}

	.acr-cmp {
		grid-template-columns: minmax(0, 1fr) 72px 72px;
	}

	.acr-tl,
	.acr-tl__x {
		gap: 4px;
	}

	.acr-tl {
		height: 120px;
	}

	.acr-t--games {
		grid-template-columns: 76px minmax(0, 1fr) 44px 46px;
	}

	.acr-t__hide-s {
		display: none;
	}

	.acr-seg-ctl {
		margin-left: 0;
	}
}

/* ==========================================================================
   Phase 5 - ranking pages + managers hub (design frozen 2026-10-28, canvas v19;
   folded from the boards' acr-p5.css - the profile rules follow with the profile).
   New token: rank-change ink = FL win ink. All text pairs checked with contrast.js.
   ========================================================================== */

.acr-main {
	--acr-up: #166534;
}


.acr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- hero: ranking pages ---------- */
.acr-hero--rank {
	flex-wrap: wrap;
	align-items: flex-start;
}

.acr-hero--rank .acr-hero__txt {
	flex: 1 1 420px;
}

.acr-wknav {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.acr-main .acr-wknav__btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.acr-main .acr-wknav__btn:hover {
	background: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.acr-wknav__btn.is-off {
	border-style: dashed;
	color: rgba(255, 255, 255, 0.6);
	cursor: default;
}

.acr-wkpick {
	position: relative;
}

.acr-wkpick > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 4px;
	background: #fff;
	color: var(--acr-heading-strong);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
}

.acr-wkpick > summary::-webkit-details-marker {
	display: none;
}

.acr-wkpick > summary::after {
	content: "▾";
	font-size: 10px;
	color: var(--acr-label);
}

.acr-wkpick__pop {
	position: absolute;
	z-index: 10;
	top: calc(100% + 6px);
	right: 0;
	width: 420px;
	padding: 14px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface);
	color: var(--acr-text);
	box-shadow: 0 10px 28px rgba(31, 36, 48, 0.18);
}

.acr-wkpick__yr {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.acr-wkpick__yr label,
.acr-hero__nav label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-hero__nav label {
	color: rgba(255, 255, 255, 0.78);
}

.acr-main .acr-select {
	min-height: 36px;
	padding: 0 8px;
	border: 1px solid var(--acr-border);
	border-radius: 4px;
	background: var(--acr-surface);
	font: inherit;
	font-size: 13px;
	color: var(--acr-text);
}

.acr-wkgrid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px;
}

.acr-main .acr-wkgrid a,
.acr-wkgrid > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

.acr-main .acr-wkgrid a {
	background: var(--acr-surface-tint);
	color: var(--acr-heading-alt);
}

.acr-wkgrid small {
	font-size: 9.5px;
	font-weight: 500;
	color: var(--acr-label-muted);
}

.acr-main .acr-wkgrid a:hover {
	background: var(--acr-info-tint);
	text-decoration: none;
}

.acr-main .acr-wkgrid a.is-on {
	background: var(--acr-heading-alt);
	color: #fff;
}

.acr-main .acr-wkgrid a.is-on small {
	color: rgba(255, 255, 255, 0.8);
}

.acr-wkpick__ft {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--acr-divider);
	font-size: 12px;
	color: var(--acr-label-muted);
}

/* scope nav: nationality select sits in the hero nav row */
.acr-hero__nav {
	align-items: center;
}

.acr-hero--rank .acr-hero__nav {
	flex-basis: 100%;
	margin-top: 2px;
}

.acr-hero__nav .acr-nat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.acr-main .acr-hero__nav .acr-select {
	min-height: 30px;
	border-color: rgba(255, 255, 255, 0.35);
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

.acr-main .acr-hero__nav .acr-select.is-on {
	border-color: #fff;
	background: #fff;
	color: var(--acr-heading-strong);
}

/* the select's options use the OS list colours, not the hero's white text */
.acr-main .acr-hero__nav .acr-select option {
	background: var(--acr-surface);
	color: var(--acr-text);
}

/* ---------- strips ---------- */
.acr-arch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 9px 12px;
	border: 1px solid #c7d6fb;
	border-radius: 3px;
	background: var(--acr-info-tint);
	font-size: 12.5px;
	color: var(--acr-heading-alt);
}

.acr-main .acr-arch a {
	font-weight: 700;
}

/* ---------- ranking table (div grid, ARIA table roles) ---------- */
.acr-rk {
	--cols: 52px 46px 62px minmax(210px, 1.5fr) minmax(190px, 1fr) 104px 92px 76px;
}

.acr-rk--scope {
	--cols: 40px 58px 62px minmax(210px, 1.5fr) minmax(190px, 1fr) 104px 92px 76px;
}

.acr-rk__head,
.acr-rk__row {
	display: grid;
	grid-template-columns: var(--cols);
	align-items: center;
}

.acr-rk__head {
	border-bottom: 1px solid var(--acr-border);
}

.acr-rk__h {
	padding: 7px 8px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--acr-label);
}

.acr-rk__h--l {
	text-align: left;
}

.acr-rk__h--c {
	text-align: center;
}

.acr-rk__row {
	min-height: 40px;
	border-bottom: 1px solid var(--acr-divider);
}

.acr-rk__row:hover {
	background: var(--acr-surface-tint);
}

.acr-rk__rk {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 800;
	text-align: right;
	color: var(--acr-heading-strong);
}

.acr-rk__c {
	padding: 6px 8px;
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
}

.acr-rk__c--m {
	font-size: 12.5px;
	color: var(--acr-label-muted);
}

.acr-rk__c--b {
	font-size: 14px;
	font-weight: 800;
	color: var(--acr-heading-strong);
}

.acr-rk__ch {
	padding: 6px 4px;
	text-align: center;
	white-space: nowrap;
}

.acr-rk__mgr,
.acr-rk__club {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 6px 8px;
}

.acr-rk__mgr {
	font-size: 13.5px;
}

.acr-rk__mgr a {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-rk__club {
	font-size: 13px;
	color: var(--acr-label-strong);
}

.acr-rk__club > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-rk__club small {
	display: block;
	overflow: hidden;
	font-size: 11px;
	text-overflow: ellipsis;
	color: var(--acr-label-muted);
}

.acr-last {
	color: var(--acr-label-muted);
}

.acr-last b {
	font-weight: 500;
	color: var(--acr-label);
}

.acr-main .acr-rk__row[hidden] {
	display: none;
}

/* hub: a manager without a profile yet (unlinked) */
.acr-rk__name {
	font-weight: 600;
	color: var(--acr-heading-alt);
}

/* flag: circle-flags symbols, inlined per page from assets/img/flags.svg (ACR_Template::flag_sprite()) */
.acr-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.acr-flag {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--acr-border);
}

/* coach chip: 3-letter code, outlined, ink = BADGE_INKS[coach_id % 10] (port of the tennis hub's
   .thub-game-card__team-badge--outlined); every ink is AA on its own 8% tint (min 4.81:1, cyan) */
.acr-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 28px;
	border: 1px solid color-mix(in srgb, var(--chip-ink, #475067) 45%, #fff);
	border-radius: 6px;
	background: color-mix(in srgb, var(--chip-ink, #475067) 8%, #fff);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1;
	color: var(--chip-ink, #475067);
	white-space: nowrap;
}


.acr-ch {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 700;
}

.acr-ch svg {
	width: 8px;
	height: 8px;
	fill: currentColor;
}

.acr-ch--up {
	color: var(--acr-up);
}

.acr-ch--down {
	color: var(--acr-loss);
}

.acr-ch--same {
	font-weight: 500;
	color: var(--acr-label-muted);
}

.acr-ch--new {
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--acr-info-tint);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acr-accent-dark);
}

.acr-tag {
	flex: none;
	padding: 1px 6px;
	border: 1px solid var(--acr-border-dashed);
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--acr-label);
}

/* pager under a ranking table (5.6): plain links, the current page filled like a pressed switch */
.acr-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 14px;
}

.acr-main .acr-pager a,
.acr-pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 700;
}

.acr-main .acr-pager a {
	border: 1px solid var(--acr-border);
	border-radius: 4px;
	background: var(--acr-surface);
	color: var(--acr-heading-alt);
	text-decoration: none;
}

.acr-main .acr-pager a:hover,
.acr-main .acr-pager a:focus {
	background: var(--acr-surface-tint);
	color: var(--acr-text);
}

.acr-main .acr-pager a[aria-current="page"] {
	border-color: var(--acr-heading-alt);
	background: var(--acr-heading-alt);
	color: #fff;
}

.acr-pager__gap {
	min-width: 20px;
	padding: 0;
	color: var(--acr-label-muted);
}

/* ---------- managers hub ---------- */
.acr-rk.acr-rk--hub {
	--cols: minmax(200px, 1.2fr) minmax(220px, 1.4fr) 96px 80px 104px 84px;
}


.acr-wkgrid__off {
	color: #9097a8;
}

/* ---------- container queries ---------- */
@container (max-width: 1000px) {
	.acr-rk {
		--cols: 46px 62px minmax(180px, 1.4fr) minmax(160px, 1fr) 96px 70px;
	}

	.acr-rk--scope {
		--cols: 36px 52px 58px minmax(180px, 1.4fr) minmax(160px, 1fr) 96px 70px;
	}

	.acr-rk__pv,
	.acr-rk__tr {
		display: none;
	}
}

@container (max-width: 560px) {
	.acr-hero--rank .acr-hero__txt {
		flex-basis: 100%;
	}

	.acr-wknav {
		width: 100%;
	}

	.acr-wkpick {
		flex: 1;
	}

	.acr-wkpick > summary {
		justify-content: space-between;
		width: 100%;
	}

	.acr-wkpick__pop {
		position: fixed;
		left: 12px;
		right: 12px;
		width: auto;
	}

	.acr-hero__nav .acr-nat {
		width: 100%;
		margin: 4px 0 0;
		padding: 8px 0 0;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		border-left: 0;
	}

	.acr-hero__nav .acr-nat .acr-select {
		flex: 1;
		min-height: 40px;
	}

	/* ranking rows become two lines: rank / change, manager / club, rating / matches */
	.acr-rk__head,
	.acr-rk__row {
		grid-template-columns: 34px minmax(0, 1fr) auto;
		grid-template-areas:
			"rk mgr rt"
			"ch club gr";
	}

	.acr-rk__head {
		grid-template-areas: "rk mgr rt";
	}

	.acr-rk__row {
		padding: 5px 0;
	}

	.acr-rk__rk {
		grid-area: rk;
		padding: 0 4px 0 0;
		font-size: 15px;
		text-align: left;
	}

	.acr-rk__ch {
		grid-area: ch;
		padding: 0;
		text-align: left;
	}

	.acr-rk__mgr {
		grid-area: mgr;
		padding: 2px 6px 0;
	}

	.acr-rk__club {
		grid-area: club;
		padding: 0 6px 2px;
		font-size: 12px;
	}

	.acr-rk__rt {
		grid-area: rt;
		padding: 2px 0 0;
	}

	.acr-rk__gr {
		grid-area: gr;
		padding: 0;
		font-size: 11px;
	}

	.acr-rk__h--rk,
	.acr-rk__h--mgr,
	.acr-rk__h--rt {
		display: block;
		padding: 7px 0 6px;
		text-align: left;
	}

	.acr-rk__h--rk {
		grid-area: rk;
	}

	.acr-rk__h--mgr {
		grid-area: mgr;
		padding-left: 6px;
	}

	.acr-rk__h--rt {
		grid-area: rt;
		text-align: right;
	}

	.acr-rk__head > :not(.acr-rk__h--rk):not(.acr-rk__h--mgr):not(.acr-rk__h--rt),
	.acr-rk__wd,
	.acr-rk__pv,
	.acr-rk__tr,
	.acr-rk__club .acr-crest {
		display: none;
	}

	.acr-rk:not(.acr-rk--hub) .acr-rk__gr::after {
		content: " m";
	}

	/* hub rows: club / manager on two lines, rating + rank on the right */
	.acr-rk--hub .acr-rk__row {
		grid-template-areas:
			"club rt"
			"mgr gr";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.acr-rk--hub .acr-rk__club {
		font-size: 13px;
		font-weight: 600;
	}

	.acr-rk--hub .acr-rk__since,
	.acr-rk--hub .acr-rk__gp {
		display: none;
	}

}

/* ---------- ranking tabs + gained tables (Phase 5b) ---------- */
.acr-tabs {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--acr-border);
}

.acr-main .acr-tabs a {
	flex: none;
	margin-bottom: -1px;
	padding: 10px 14px 8px;
	border-bottom: 3px solid transparent;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	color: var(--acr-label-strong);
}

.acr-main .acr-tabs a:hover {
	color: var(--acr-heading-strong);
}

.acr-main .acr-tabs a[aria-current="page"] {
	border-bottom-color: var(--acr-heading-strong);
	color: var(--acr-heading-strong);
}

.acr-tabs__s {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: var(--acr-label-muted);
}

.acr-rk.acr-rk--gain {
	--cols: 52px 62px minmax(210px, 1.5fr) minmax(190px, 1fr) 96px 80px 108px;
}

.acr-rk.acr-rk--gain.acr-rk--scope {
	--cols: 40px 58px 62px minmax(210px, 1.5fr) minmax(190px, 1fr) 96px 80px 108px;
}

@container (max-width: 1000px) {
	.acr-rk.acr-rk--gain {
		--cols: 46px 58px minmax(180px, 1.4fr) minmax(150px, 1fr) 86px 66px 92px;
	}

	.acr-rk.acr-rk--gain.acr-rk--scope {
		--cols: 36px 52px 58px minmax(180px, 1.4fr) minmax(150px, 1fr) 86px 66px;
	}

	.acr-rk--gain.acr-rk--scope .acr-rk__cr {
		display: none;
	}
}

@container (max-width: 560px) {
	/* pager on one line at phone width: arrows only, tighter buttons */
	.acr-pager {
		gap: 3px;
	}

	.acr-main .acr-pager a {
		min-width: 32px;
		padding: 0 5px;
	}

	.acr-pager__gap {
		min-width: 14px;
	}

	.acr-pager__w {
		display: none;
	}

	.acr-main .acr-tabs a {
		padding: 9px 8px 7px;
		font-size: 13px;
	}

	.acr-tabs__s {
		display: none;
	}

	.acr-main .acr-wknav__btn {
		padding: 0 8px;
	}

	.acr-rk__cr {
		display: none;
	}
}

/* ---------- closed month / year final (Phase 5b, boards period + period-year) ---------- */
.acr-rk.acr-rk--period {
	--cols: 44px minmax(210px, 1.4fr) minmax(200px, 1.3fr) 108px 72px 92px 56px 104px;
}

.acr-pod {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.acr-pod .acr-rk__mgr {
	padding: 4px 0 0;
}

.acr-main .acr-pod__n {
	font-size: 15px;
	font-weight: 700;
	color: var(--acr-heading-strong);
}

.acr-pod .acr-tile__v {
	margin-top: 8px;
}

.acr-wkgrid--years {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ranking pages: "Best managers by month and year" - the months row, then the finals row */
.acr-periods .acr-pills + .acr-pills {
	margin-top: 10px;
}

@container (max-width: 1000px) {
	.acr-rk.acr-rk--period {
		--cols: 40px minmax(170px, 1.4fr) minmax(140px, 1fr) 84px 62px 76px 50px 86px;
	}
}

@container (max-width: 560px) {
	/* the top 3 are rows 1-3 right below: no tiles at phone width */
	.acr-pod,
	.acr-rk__wdl,
	.acr-rk__ppg,
	.acr-wknav__y {
		display: none;
	}
}

/* ==========================================================================
   Phase 5 - manager profile (design frozen 2026-10-27, canvas v19 boards manager-desktop /
   -mobile / -states; folded from the boards' acr-p5.css). New tokens: club chart series = FL
   staff c1..c3 (palette-diff "Phase 5a"), result tints = FL --fl-bg-*-light.
   ========================================================================== */
.acr-main {
	--acr-c1: #2563eb;
	--acr-c2: #c2410c;
	--acr-c3: #7c3aed;
	--acr-w-tint: #c3e6cb;
	--acr-d-tint: #ffeeba;
	--acr-l-tint: #f5c6cb;
}

/* switch panels (data-acr-when) and row groups carry their own display: hidden must still win */
.acr-mgr [hidden] {
	display: none !important;
}

/* one markup for both sizes: a phone label / cell next to the desktop one */
.acr-only-s {
	display: none;
}

/* ---------- hero ---------- */
.acr-hero--mgr {
	flex-wrap: wrap;
}

.acr-hero--mgr .acr-hero__nav {
	flex-basis: 100%;
	margin-top: 2px;
}

/* the chip takes the avatar slot on the navy hero */
.acr-chip--hero {
	width: 60px;
	height: 52px;
	border-width: 2px;
	border-radius: 10px;
	font-size: 19px;
	font-weight: 600;
}

.acr-hero__chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	vertical-align: 1px;
}

.acr-form {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
}

.acr-form__l {
	margin-right: 4px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.78);
}

.acr-res {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 800;
	color: var(--acr-text);
}

.acr-res--w {
	background: var(--acr-w-tint);
}

.acr-res--d {
	background: var(--acr-d-tint);
}

.acr-res--l {
	background: var(--acr-l-tint);
}

.acr-hero__meta .acr-ch {
	font-size: 11px;
}

.acr-hero__meta .acr-ch--up {
	color: #bbf7d0;
}

.acr-hero__meta .acr-ch--down {
	color: #fecaca;
}

.acr-hero__meta .acr-ch--same {
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- rating chart (inline SVG, D8) ---------- */
.acr-ctl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 16px 0 8px;
}

.acr-main button.acr-pill {
	margin: 0;
	box-shadow: none;
	font: inherit;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.acr-main button.acr-pill:focus {
	box-shadow: none;
}

.acr-chart {
	position: relative;
}

.acr-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.acr-chart .acr-chart__svg--narrow {
	display: none;
}

.acr-chart .g-grid {
	stroke: var(--acr-divider);
	stroke-width: 1;
}

.acr-chart .g-zero {
	stroke: var(--acr-gray);
	stroke-width: 1;
}

.acr-chart .g-lbl {
	font-size: 11px;
	fill: var(--acr-label-muted);
}

.acr-chart .g-lbl--y {
	text-anchor: end;
}

.acr-chart .g-lbl--x {
	text-anchor: middle;
}

.acr-chart .g-line {
	fill: none;
	stroke-width: 2.25;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.acr-chart .g-c1 {
	stroke: var(--acr-c1);
}

.acr-chart .g-c2 {
	stroke: var(--acr-c2);
}

.acr-chart .g-c3 {
	stroke: var(--acr-c3);
}

.acr-chart .g-c0 {
	stroke: var(--acr-label-muted);
	stroke-dasharray: 4 4;
	stroke-width: 1.5;
}

.acr-chart .g-top {
	fill: var(--acr-info-tint);
}

.acr-chart .g-top-l {
	font-size: 10px;
	font-weight: 700;
	fill: var(--acr-accent-dark);
}

.acr-chart .g-dot {
	fill: var(--acr-surface);
	stroke: var(--acr-heading-strong);
	stroke-width: 2.5;
}

.acr-chart .g-tip {
	fill: var(--acr-heading-strong);
}

.acr-chart .g-tip-t {
	font-size: 11px;
	fill: #fff;
}

.acr-chart .g-tip-b {
	font-size: 13px;
	font-weight: 800;
	fill: #fff;
}

.acr-chart__svg--narrow .g-tip-t {
	font-size: 9.5px;
}

.acr-chart__svg--narrow .g-tip-b {
	font-size: 11px;
}

.acr-legend .acr-sw-line {
	width: 16px;
	height: 0;
	border-top: 3px solid var(--acr-c1);
	vertical-align: 3px;
}

.acr-legend .acr-sw-line--c2 {
	border-top-color: var(--acr-c2);
}

.acr-legend .acr-sw-line--c3 {
	border-top-color: var(--acr-c3);
}

.acr-legend .acr-sw-line--c0 {
	border-top: 2px dashed var(--acr-label-muted);
}

.acr-legend .acr-sw-top {
	width: 14px;
	height: 8px;
	border-radius: 2px;
	background: var(--acr-info-tint);
	vertical-align: 0;
}

/* ---------- profile tables ---------- */
.acr-t--career {
	grid-template-columns: minmax(0, 1.5fr) 150px 60px 104px 50px 168px 86px 82px;
}

.acr-t--split {
	grid-template-columns: minmax(0, 1fr) 50px 50px 50px 50px 64px 54px 76px;
}

.acr-t--runs {
	grid-template-columns: minmax(0, 1fr) repeat(7, 74px);
}

.acr-t--runs [role="columnheader"] {
	white-space: normal;
}

.acr-t--cgames {
	grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.3fr) 44px 64px;
}

.acr-t__club {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.acr-t__club > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.acr-t__tot {
	border-bottom: 0;
	background: var(--acr-surface-tint);
	font-weight: 700;
}

.acr-tiles--rec {
	margin-bottom: 16px;
}

.acr-filters--rec {
	margin-bottom: 14px;
}

/* grouped caretaker spells: one summary row, the spells below it (acr-tables.js folds them) */
.acr-t__grp {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

.acr-main .acr-t__tog {
	flex: none;
	margin: 0;
	padding: 1px 6px;
	border: 1px solid var(--acr-border-dashed);
	border-radius: 3px;
	background: var(--acr-surface);
	box-shadow: none;
	font: inherit;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--acr-label);
	cursor: pointer;
}

.acr-main .acr-t__tog::after {
	content: " ▴";
}

.acr-main .acr-t__tog[aria-expanded="false"]::after {
	content: " ▾";
}

.acr-t__subrow > * {
	font-size: 12px;
	color: var(--acr-label);
	background: var(--acr-surface-tint);
}

.acr-main .acr-t__subrow > :first-child {
	padding-left: 36px;
}

.acr-up {
	color: var(--acr-up);
}

.acr-down {
	color: var(--acr-loss);
}

.acr-best {
	font-weight: 800;
	color: var(--acr-up);
}

.acr-score {
	display: inline-block;
	min-width: 44px;
	padding: 2px 6px;
	border-radius: 3px;
	text-align: center;
	font-weight: 700;
	color: var(--acr-text);
}

.acr-score--w {
	background: var(--acr-w-tint);
}

.acr-score--d {
	background: var(--acr-d-tint);
}

.acr-score--l {
	background: var(--acr-l-tint);
}

/* records + milestones */
.acr-recs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.acr-recs--6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.acr-tile__v--sm {
	font-size: 22px;
}

.acr-sub-h {
	margin: 18px 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--acr-heading-alt);
}

.acr-miles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
	gap: 8px;
}

.acr-mile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 10px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	font-size: 12.5px;
}

.acr-mile b {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-mile__o {
	grid-column: 1;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.acr-mile__s {
	grid-row: 1 / span 2;
	grid-column: 2;
}

.acr-mile__d {
	grid-column: 1 / -1;
	font-size: 11px;
	color: var(--acr-label-muted);
}

/* HT/FT grid (rows are display: contents, the cells sit on the grid) */
.acr-htft {
	display: grid;
	grid-template-columns: 96px repeat(3, minmax(0, 1fr));
	gap: 2px;
}

.acr-htft__r {
	display: contents;
}

.acr-htft__h {
	padding: 6px 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-htft__h--row {
	display: flex;
	align-items: center;
	text-align: left;
}

.acr-htft__c {
	padding: 8px 4px;
	border-radius: 2px;
	background: rgba(47, 111, 237, var(--acr-heat, 0));
	text-align: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--acr-heading-strong);
}

.acr-htft__c small {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--acr-label-strong);
}

.acr-seg__l {
	background: var(--acr-loss);
}

.acr-halves {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.acr-halves__h {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-size: 12px;
	color: var(--acr-label);
}

.acr-halves__h b {
	color: var(--acr-text);
}

/* playing style: butterfly rows */
.acr-sty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr);
	row-gap: 2px;
}

.acr-sty__r {
	display: contents;
}

.acr-sty__hd {
	padding-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-sty__hd--for {
	text-align: right;
}

.acr-sty__hd--k {
	text-align: center;
}

.acr-sty__f,
.acr-sty__a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 13px;
	font-weight: 700;
}

.acr-sty__f {
	justify-content: flex-end;
}

.acr-sty__bar {
	flex: none;
	width: calc(var(--acr-w, 0%) * 0.7);
	height: 10px;
	border-radius: 2px;
}

.acr-sty__f .acr-sty__bar {
	background: var(--acr-info);
}

.acr-sty__a .acr-sty__bar {
	background: var(--acr-label-muted);
}

.acr-sty__k {
	align-self: center;
	text-align: center;
	font-size: 12px;
	color: var(--acr-label-strong);
}

@container (max-width: 1000px) {
	.acr-recs,
	.acr-recs--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.acr-t--career {
		grid-template-columns: minmax(0, 1.5fr) 130px 54px 96px 50px 86px 76px;
	}

	.acr-t__hide-m {
		display: none;
	}
}

@container (max-width: 560px) {
	.acr-only-s {
		display: inline;
	}

	.acr-t__sub.acr-only-s {
		display: block;
	}

	.acr-not-s,
	.acr-mgr .acr-t__hide-s,
	.acr-chart .acr-chart__svg--wide {
		display: none;
	}

	.acr-chart .acr-chart__svg--narrow {
		display: block;
	}

	.acr-chip--hero {
		width: 46px;
		height: 40px;
		border-radius: 8px;
		font-size: 15px;
	}

	.acr-recs,
	.acr-recs--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acr-t--career {
		grid-template-columns: minmax(0, 1fr) 40px 78px 54px;
	}

	.acr-t--career .acr-t__club {
		align-items: flex-start;
		flex-wrap: wrap;
		white-space: normal;
	}

	.acr-t--career .acr-crest {
		display: none;
	}

	.acr-t--split {
		grid-template-columns: minmax(0, 1fr) 40px 74px 52px 46px;
	}

	.acr-t--split .acr-t__match {
		white-space: normal;
	}

	.acr-t--runs {
		grid-template-columns: minmax(0, 1fr) repeat(4, 50px);
	}

	.acr-sty__bar {
		width: calc(var(--acr-w, 0%) * 0.45);
	}

	.acr-t--cgames {
		grid-template-columns: 62px minmax(0, 1fr) 54px;
	}

	.acr-t--cgames .acr-t__match {
		white-space: normal;
	}

	.acr-sty {
		grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
	}

	.acr-htft {
		grid-template-columns: 64px repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Phase 7 - home + methodology (design frozen 2026-10-29, canvas v24, boards home,
   home-mobile, methodology, methodology-mobile; copied from the boards' acr-p7.css).
   The .acr-strip closes the home, ranking, period and manager pages.
   ========================================================================== */

/* ---------- home ---------- */

.acr-hero--home {
	flex-wrap: wrap;
	align-items: flex-end;
}

.acr-hero--home .acr-hero__txt {
	flex: 1 1 420px;
	min-width: 0;
}

.acr-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	color: #fff;
}

.acr-facts div {
	display: flex;
	flex-direction: column;
}

.acr-facts b {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
}

.acr-facts span {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.78);
}

.acr-main .acr-more-l {
	font-size: 13px;
	font-weight: 600;
}

/* top 10 at a club on the home page (= the ranking's default view): # · World · +/− · Manager · Club · Coach rating · Matches */
.acr-rk.acr-rk--home {
	--cols: 40px 58px 62px minmax(200px, 1.5fr) minmax(170px, 1fr) 104px 76px;
}

.acr-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* compact gained list: # · Manager (+ club under it) · Gained · Matches */
.acr-mini {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 76px 72px;
	font-size: 13px;
}

.acr-mini > div {
	display: contents;
}

.acr-mini > div > span {
	padding: 8px 0;
	border-bottom: 1px solid var(--acr-divider);
	align-self: stretch;
	display: flex;
	align-items: center;
}

.acr-mini__h > span {
	font-size: 11px;
	font-weight: 600;
	color: var(--acr-label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.acr-mini__who {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: center;
	gap: 1px;
	min-width: 0;
}

.acr-mini__who small {
	font-size: 12px;
	color: var(--acr-label);
}

/* chip + name + flag (7.2 note 4): capped at the column so a long name ellipses instead of running into Gained */
.acr-mini__who .acr-rk__mgr {
	max-width: 100%;
	padding: 0;
	gap: 6px;
}

.acr-mini__n {
	justify-content: flex-end;
	padding-left: 8px !important;
	font-weight: 700;
}

.acr-mini__m {
	justify-content: flex-end;
	padding-left: 8px !important;
	color: var(--acr-label);
}

.acr-browse {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 24px;
}

.acr-browse h3 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--acr-heading-alt);
}

.acr-browse__l a {
	display: block;
	padding: 3px 0;
	font-size: 14px;
}

.acr-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 14px 18px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface-tint);
	font-size: 14px;
	color: var(--acr-label-strong);
}

.acr-strip b {
	color: var(--acr-heading-strong);
}

/* ---------- methodology ---------- */

.acr-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 28px;
}

.acr-toc {
	flex: 1 1 220px;
	max-width: 260px;
	padding: 14px 16px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface-tint);
}

.acr-toc b {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-toc a {
	display: block;
	padding: 3px 0;
	font-size: 14px;
	line-height: 1.4;
}

.acr-prose {
	flex: 999 1 560px;
	min-width: 0;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--acr-text);
}

.acr-prose h2 {
	margin: 36px 0 10px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--acr-heading-strong);
	scroll-margin-top: 80px;
}

.acr-prose h2:first-child {
	margin-top: 0;
}

.acr-prose h3 {
	margin: 22px 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--acr-heading-alt);
}

.acr-prose p {
	margin: 0 0 12px;
}

.acr-prose ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.acr-prose li {
	margin: 0 0 6px;
}

.acr-formula {
	margin: 14px 0 16px;
	padding: 14px 18px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	background: var(--acr-surface-tint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.75;
	white-space: pre;
	overflow-x: auto;
}

/* key / value / note table (parameters, test results) */
.acr-kv {
	display: grid;
	grid-template-columns: minmax(150px, 1.1fr) 150px minmax(0, 2fr);
	margin: 12px 0 16px;
	border: 1px solid var(--acr-border);
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.45;
}

.acr-kv--res {
	grid-template-columns: minmax(150px, 1.2fr) 90px minmax(170px, 1.3fr) minmax(0, 1.4fr);
}

.acr-kv > div {
	display: contents;
}

.acr-kv > div > span {
	padding: 9px 12px;
	border-top: 1px solid var(--acr-divider);
}

.acr-kv > div:first-child > span {
	border-top: 0;
	background: var(--acr-surface-tint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acr-label);
}

.acr-kv__v {
	font-weight: 700;
	white-space: nowrap;
}

.acr-kv__n {
	color: var(--acr-label-strong);
}

.acr-callout {
	margin: 14px 0 16px;
	padding: 12px 16px;
	border-radius: 3px;
	background: var(--acr-info-tint);
	color: var(--acr-heading-strong);
	font-size: 15px;
}

.acr-changes {
	font-size: 15px;
}

.acr-changes > div {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--acr-divider);
}

.acr-changes time {
	font-weight: 700;
	color: var(--acr-label-strong);
}

/* ---------- phone ---------- */

@container (max-width: 760px) {
	.acr-duo,
	.acr-browse {
		grid-template-columns: minmax(0, 1fr);
	}

	/* the shipped CSS hides the period pages' top-3 tiles under 560px; on home they are the only content of the block */
	.acr-pod.acr-pod--home {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	/* the chip + flag of note 4 need the room the number columns had on the board */
	.acr-mini {
		grid-template-columns: 22px minmax(0, 1fr) 56px 60px;
	}

	.acr-mini__h > span {
		letter-spacing: 0;
	}

	.acr-rk.acr-rk--home {
		--cols: 30px minmax(150px, 1fr) 64px;
	}

	.acr-rk--home .acr-rk__ch,
	.acr-rk--home .acr-rk__wd,
	.acr-rk--home .acr-rk__club,
	.acr-rk--home .acr-rk__gr,
	.acr-rk--home .acr-rk__h--c,
	.acr-rk--home .acr-hide-s {
		display: none;
	}

	.acr-facts b {
		font-size: 17px;
	}

	.acr-toc {
		max-width: none;
	}

	.acr-prose {
		font-size: 15px;
	}

	.acr-prose h2 {
		font-size: 19px;
	}

	.acr-formula {
		padding: 12px 14px;
		font-size: 12px;
	}

	.acr-kv,
	.acr-kv--res {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.acr-kv > div > span:nth-child(n+3) {
		grid-column: 1 / -1;
		padding-top: 0;
		border-top: 0;
		font-size: 13px;
	}

	.acr-kv > div:first-child {
		display: none;
	}

	.acr-changes > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}