/**
 * EventsStat Feed.
 *
 * Styled to read like the source statistics pages. Everything is driven by the
 * custom properties on `.esstat`, so a theme can rebrand the blocks without
 * touching this file.
 */

.esstat {
	--esstat-font: inherit;
	--esstat-size: 14px;
	--esstat-text: #23272b;
	--esstat-muted: #7c828a;
	--esstat-border: #e6e8ea;
	--esstat-border-strong: #d5d8dc;
	--esstat-head-bg: #2b2f33;
	--esstat-head-fg: #ffffff;
	--esstat-surface: #ffffff;
	--esstat-surface-alt: #f7f8f9;
	--esstat-hover: #f1f3f5;
	--esstat-panel: #ececec;
	--esstat-score-bg: #8d9095;
	--esstat-score-fg: #ffffff;
	--esstat-win: #4caf50;
	--esstat-lose: #e04a45;
	--esstat-draw: #9aa0a6;
	--esstat-live: #e04a45;
	--esstat-promote: #d6f0d6;
	--esstat-promote-hover: #c8e9c8;
	--esstat-relegate: #f8d9d9;
	--esstat-radius: 2px;
	--esstat-row-height: 40px;
	--esstat-size-mobile: 13px;
	--esstat-accent: #23272b;
	--esstat-link: inherit;
	--esstat-badge-fg: #ffffff;
	--esstat-score-radius: var(--esstat-radius);
	--esstat-gap: 24px;

	color: var(--esstat-text);
	font-family: var(--esstat-font);
	font-size: var(--esstat-size);
	line-height: 1.35;
	background: var(--esstat-surface);
	border: 1px solid var(--esstat-border);
	border-radius: var(--esstat-radius);
	overflow: hidden;
}

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

.esstat__title {
	margin: 0;
	padding: 0.9em 1.15em;
	background: var(--esstat-head-bg);
	color: var(--esstat-head-fg);
	font-size: 0.93em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.esstat__updated {
	margin: 0;
	padding: 0.7em 1.15em;
	border-top: 1px solid var(--esstat-border);
	background: var(--esstat-surface-alt);
	color: var(--esstat-muted);
	font-size: 0.8em;
}

/* Space above and below every shortcode and block — tables, matches, ratings,
   team and player sections, screenshots, notices — so none of them sits flush
   against the text around it, or against the next one (the two margins
   collapse into one gap). Appearance → Type & shape sets the size.

   `body` lifts these one step above a theme's own spacing between blocks
   (`:root :where(.is-layout-flow) > *` and the like), which would otherwise
   win on load order and leave no space underneath. In a plain wrapper — a
   group without padding — the margin passes through it, so the space shows
   between the wrapper and the text around it, which is where it belongs. */
body .esstat,
body .esstat-screenshot,
body .esstat-empty {
	margin: var(--esstat-gap, 24px) 0;
}

/* Side by side — columns, table cells — a gap on top would push one column's
   content below its neighbour's, so none at the edges there. */
body :is(.wp-block-column, td, th) > :is(.esstat, .esstat-screenshot, .esstat-empty):first-child {
	margin-top: 0;
}

body :is(.wp-block-column, td, th) > :is(.esstat, .esstat-screenshot, .esstat-empty):last-child {
	margin-bottom: 0;
}

/* Inside a block — a screenshot above its "Updated" line, a notice in place of
   a table — they are part of it and keep no gap of their own. */
body .esstat .esstat-screenshot,
body .esstat .esstat-empty {
	margin: 0;
}

/* One date for the whole page, from [esstat_updated]; lives outside .esstat,
   so its colour comes from Appearance as a rule of its own. */
.esstat-page-updated {
	margin: 0 0 1.2em;
	color: #7c828a;
	font-size: 0.85em;
}

.esstat-empty {
	padding: 0.85em 1.15em;
	border-left: 3px solid #ffb300;
	background: #fff8e1;
	color: #6b5900;
	font-size: 0.9em;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.esstat-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tables ---------------------------------------------------------------- */

.esstat-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 1em;
}

.esstat-table caption {
	padding: 0.7em 1.15em;
	background: var(--esstat-surface-alt);
	color: var(--esstat-muted);
	text-align: center;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.esstat-table th,
.esstat-table td {
	height: var(--esstat-row-height);
	padding: 0.35em 0.7em;
	border: 0;
	border-bottom: 1px solid var(--esstat-border);
	background: transparent;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-weight: 400;
}

.esstat-table thead th {
	color: var(--esstat-muted);
	font-size: 0.93em;
	font-weight: 400;
	border-bottom: 1px solid var(--esstat-border-strong);
}

.esstat-table tbody tr:last-child td {
	border-bottom: 0;
}

/**
 * The row carries the colour and the cell inherits it. On narrow screens the
 * first two columns are sticky, and a sticky cell needs an opaque background of
 * its own — `inherit` is the only way it can be the row's colour and not a
 * second, wrong one.
 */
.esstat-table thead tr,
.esstat-table tbody tr {
	background: var(--esstat-surface);
}

.esstat-table tbody tr:hover {
	background: var(--esstat-hover);
}

/* Two class selectors so alignment beats the base `.esstat-table td` rule. */
.esstat-table .esstat-col--team {
	text-align: left;
	white-space: normal;
	padding-left: 1.15em;
}

.esstat-table .esstat-col--pos {
	width: 3.2em;
	padding-left: 1.15em;
	color: var(--esstat-muted);
	text-align: left;
}

.esstat-table .esstat-col--rank {
	width: 4em;
	padding-left: 1.15em;
	color: var(--esstat-text);
	text-align: left;
}

.esstat-table .esstat-col--pts {
	font-weight: 700;
}

.esstat-team {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
}

.esstat-logo {
	width: 22px;
	height: 22px;
	max-width: none;
	object-fit: contain;
	flex: 0 0 22px;
	border-radius: 0;
	box-shadow: none;
}

.esstat-team__name {
	white-space: normal;
	min-width: 0;
}

/**
 * A badge the source no longer serves would otherwise render as the browser's
 * broken-image glyph next to every name. The script marks it and it stops
 * taking room; the name alone is the content that matters.
 */
.esstat-logo.is-broken {
	display: none;
}

/* Standings ------------------------------------------------------------- */

.esstat-stage + .esstat-stage {
	border-top: 1px solid var(--esstat-border);
}

.esstat-stage__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.9em 1.15em;
	background: var(--esstat-head-bg);
	color: var(--esstat-head-fg);
	font-size: 0.93em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.esstat-table tbody tr.esstat-row--color_top {
	background: var(--esstat-promote);
}

.esstat-table tbody tr.esstat-row--color_top:hover {
	background: var(--esstat-promote-hover);
}

.esstat-table tbody tr.esstat-row--color_bottom {
	background: var(--esstat-relegate);
}

.esstat-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: 0;
	padding: 0.8em 1.15em;
	border-top: 1px solid var(--esstat-border);
	list-style: none;
	color: var(--esstat-text);
	font-size: 0.88em;
}

.esstat-legend__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}

.esstat-legend__swatch {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 1px solid var(--esstat-border-strong);
}

.esstat-legend__swatch.esstat-row--color_top {
	background: var(--esstat-promote);
}

.esstat-legend__swatch.esstat-row--color_bottom {
	background: var(--esstat-relegate);
}

/* Form badges */

.esstat-form {
	display: inline-flex;
	gap: 3px;
}

.esstat-form__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--esstat-radius);
	background: var(--esstat-draw);
	color: var(--esstat-badge-fg);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.esstat-form__badge--win {
	background: var(--esstat-win);
}

.esstat-form__badge--lose {
	background: var(--esstat-lose);
}

.esstat-form__badge--none {
	background: var(--esstat-surface);
	border: 1px solid var(--esstat-border-strong);
}

/* Play-off bracket ------------------------------------------------------ */

.esstat-bracket {
	display: flex;
	gap: 0;
	align-items: stretch;
	padding: 1.2em 1.15em 1.5em;
	background: var(--esstat-panel);
}

.esstat-bracket__round {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 1em;
	min-width: 230px;
	flex: 0 0 auto;
	padding-right: 1.5em;
}

.esstat-bracket__title {
	margin: 0 0 0.4em;
	color: var(--esstat-muted);
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

.esstat-bracket__match {
	background: var(--esstat-surface);
	border: 1px solid var(--esstat-border);
	border-radius: var(--esstat-radius);
	overflow: hidden;
}

.esstat-bracket__side {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 0.7em;
	font-size: 0.93em;
}

.esstat-bracket__side + .esstat-bracket__side {
	border-top: 1px solid var(--esstat-border);
}

.esstat-bracket__side--winner {
	font-weight: 700;
}

.esstat-bracket__seed {
	color: var(--esstat-muted);
	font-size: 0.9em;
}

.esstat-bracket__score {
	margin-left: auto;
	padding-left: 0.6em;
	color: var(--esstat-text);
	font-variant-numeric: tabular-nums;
}

/* Day matches ----------------------------------------------------------- */

.esstat-match__status-short {
	display: none;
}

.esstat-day + .esstat-day {
	border-top: 1px solid var(--esstat-border);
}

.esstat-day__title {
	margin: 0;
	padding: 0.75em 1.15em;
	background: var(--esstat-surface-alt);
	border-bottom: 1px solid var(--esstat-border);
	color: var(--esstat-text);
	font-size: 0.93em;
	font-weight: 700;
}

.esstat-day__league {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.75em 1.15em;
	background: var(--esstat-head-bg);
	color: var(--esstat-head-fg);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.esstat-day__none {
	margin: 0;
	padding: 1.5em 1.15em;
	color: var(--esstat-muted);
	text-align: center;
}

.esstat-table .esstat-match__time,
.esstat-table .esstat-match__status {
	width: 1%;
	padding-left: 1.15em;
	color: var(--esstat-muted);
	font-size: 0.93em;
	text-align: left;
}

.esstat-table .esstat-match__team {
	width: 42%;
}

.esstat-table .esstat-match__team--home {
	text-align: right;
}

.esstat-table .esstat-match__team--away {
	text-align: left;
}

.esstat-match__team--home .esstat-team {
	flex-direction: row-reverse;
}

.esstat-table .esstat-match__score {
	width: 1%;
	padding: 0 0.7em;
}

.esstat-match__score-box {
	display: inline-block;
	min-width: 108px;
	padding: 0.45em 0.9em;
	border-radius: var(--esstat-score-radius);
	background: var(--esstat-score-bg);
	color: var(--esstat-score-fg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.esstat-match--live .esstat-match__score-box {
	background: var(--esstat-live);
}

.esstat-match--live .esstat-match__status {
	color: var(--esstat-live);
	font-weight: 700;
}

.esstat-match__note td {
	height: auto;
	padding: 0 1.15em 0.7em;
	color: var(--esstat-muted);
	font-size: 0.85em;
	text-align: left;
	white-space: normal;
}

.esstat-table tbody tr.esstat-match__note:hover {
	background: var(--esstat-surface);
}

/* Day slider ------------------------------------------------------------ */

.esstat-slider__nav {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--esstat-border);
	background: var(--esstat-surface-alt);
}

.esstat-slider__arrow {
	flex: 0 0 auto;
	width: 40px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--esstat-border);
	background: transparent;
	color: var(--esstat-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.esstat-slider__arrow:last-child {
	border-right: 0;
	border-left: 1px solid var(--esstat-border);
}

.esstat-slider__arrow:hover:not(:disabled) {
	background: var(--esstat-hover);
}

.esstat-slider__arrow:disabled {
	color: var(--esstat-border-strong);
	cursor: default;
}










/* Compact head: arrows, the day on screen, and a dot per day. Five labelled
   tabs took most of the block's width to express five positions. */

.esstat-slider--compact .esstat-slider__current {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	padding: 0.6em 0.4em;
	min-width: 0;
}

.esstat-slider--compact .esstat-slider__day {
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.esstat-slider--compact .esstat-slider__count {
	font-size: 0.75em;
	opacity: 0.6;
}

.esstat-slider--compact .esstat-slider__count::after {
	content: attr(data-esstat-suffix);
}

.esstat-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.1em;
}

.esstat-slider__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--esstat-border);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.esstat-slider__dot:hover {
	transform: scale(1.25);
}

.esstat-slider__dot.is-active {
	background: var(--esstat-accent);
	transform: scale(1.3);
}

/* Today keeps a marker even when another day is on screen. */
.esstat-slider__dot[data-esstat-today]:not(.is-active) {
	box-shadow: 0 0 0 2px var(--esstat-surface), 0 0 0 3px var(--esstat-border);
}

/* The head already names the day, so the heading inside the slide would say it
   twice — but only once the script is running and one slide is visible. */
.esstat-slider--compact.is-ready .esstat-day__title {
	display: none;
}

/* Before the script runs every slide is visible, so no-JS still works. */
.esstat-slider.is-ready .esstat-slider__slide {
	display: none;
}

.esstat-slider.is-ready .esstat-slider__slide.is-active {
	display: block;
}

.esstat-slider__slide + .esstat-slider__slide {
	border-top: 1px solid var(--esstat-border);
}

/* Ratings --------------------------------------------------------------- */

.esstat-rating__period {
	margin: 0;
	padding: 0.7em 1.15em;
	border-bottom: 1px solid var(--esstat-border);
	background: var(--esstat-surface-alt);
	color: var(--esstat-muted);
	font-size: 0.88em;
}

/**
 * Like the source: the position stays in the normal text colour and only the
 * movement arrow is green or red. A direct rule on the arrow beats the colour
 * it would otherwise inherit from the cell.
 */
.esstat-rank__arrow {
	margin-left: 4px;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1;
}

.esstat-rank--up .esstat-rank__arrow {
	color: var(--esstat-win);
}

.esstat-rank--down .esstat-rank__arrow {
	color: var(--esstat-lose);
}

/* Screenshot ------------------------------------------------------------ */

.esstat-screenshot {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.esstat-screenshot__img {
	max-width: 100%;
	height: auto;
	display: block;
}

.esstat-screenshot__caption {
	padding: 0.6em 1.15em;
	border-top: 1px solid var(--esstat-border);
	background: var(--esstat-surface-alt);
	color: var(--esstat-muted);
	font-size: 0.8em;
}

/* Links to team and player pages ----------------------------------------- */

.esstat-team__link {
	color: var(--esstat-link);
	text-decoration: none;
}

.esstat-team__link:hover,
.esstat-team__link:focus {
	color: var(--esstat-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Team and player pages -------------------------------------------------- */

.esstat-entity {
	display: flex;
	align-items: center;
	gap: 1.1em;
	padding: 1.1em 1.15em;
}

.esstat-entity__media {
	flex: 0 0 auto;
}

.esstat .esstat-entity__image {
	width: 72px;
	height: 72px;
	flex-basis: 72px;
	object-fit: contain;
}

.esstat-entity--player .esstat-entity__image {
	border-radius: 50%;
	background: var(--esstat-surface-alt);
	object-fit: cover;
}

.esstat-entity__body {
	min-width: 0;
}

.esstat-entity__name {
	margin: 0;
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1.2;
}

.esstat-entity__sub {
	margin: 0.2em 0 0;
	color: var(--esstat-muted);
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.esstat-entity__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.2em;
	margin: 0.65em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
}

.esstat-entity__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.esstat-entity__label {
	color: var(--esstat-muted);
}

/* Squad, career, statistics, transfers: ordinary tables on a desktop. */
.esstat-table--grid td.esstat-col--team,
.esstat-table--grid th.esstat-col--team {
	text-align: left;
}

.esstat-table--grid tfoot th,
.esstat-table--grid tfoot td {
	border-top: 1px solid var(--esstat-border-strong);
	border-bottom: 0;
	font-weight: 700;
}

.esstat-table .esstat-col--date {
	width: 1%;
	padding-left: 1.15em;
	color: var(--esstat-muted);
	text-align: left;
	white-space: nowrap;
}

.esstat-table--squad .esstat-col--role {
	color: var(--esstat-muted);
}

.esstat-move {
	font-weight: 700;
}

.esstat-move--in {
	color: var(--esstat-win);
}

.esstat-move--out {
	color: var(--esstat-lose);
}

/* Label / value facts: stadium, about the team, injuries. */
.esstat-table--facts th,
.esstat-table--facts td {
	height: auto;
	padding: 0.6em 1.15em;
	text-align: left;
	white-space: normal;
}

.esstat-table--facts th {
	width: 38%;
	color: var(--esstat-muted);
	font-weight: 400;
}

/* Style of play: strengths beside weaknesses. */
.esstat-style {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.esstat-style__group {
	padding: 0.4em 0 0.8em;
}

.esstat-style__group + .esstat-style__group {
	border-left: 1px solid var(--esstat-border);
}

.esstat-style__title {
	margin: 0;
	padding: 0.6em 1.15em;
	color: var(--esstat-muted);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.esstat-style ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.esstat-style__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0;
	padding: 0.45em 1.15em;
}

.esstat-level {
	flex: none;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	background: var(--esstat-surface-alt);
	color: var(--esstat-muted);
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
}

.esstat-level--very-strong {
	background: var(--esstat-win);
	color: var(--esstat-badge-fg);
}

.esstat-level--strong {
	background: var(--esstat-promote);
	color: var(--esstat-text);
}

.esstat-level--low {
	background: var(--esstat-relegate);
	color: var(--esstat-text);
}

.esstat-level--very-low {
	background: var(--esstat-lose);
	color: var(--esstat-badge-fg);
}

/* Bookmaker odds -------------------------------------------------------- */

/* The cards carry their own frames, so the block has none around them. */
.esstat.esstat--odds {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.esstat--odds .esstat__title {
	margin-bottom: 12px;
	border-radius: var(--esstat-radius);
}

.esstat--odds .esstat__updated {
	padding: 10px 0 0;
	border-top: 0;
	background: transparent;
}

.esstat-odds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 12px;
}

.esstat-odds__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 12px 14px 14px;
	background: var(--esstat-surface);
	border: 1px solid var(--esstat-border);
	border-radius: max(var(--esstat-radius), 6px);
}

.esstat-odds__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.82em;
	color: var(--esstat-muted);
}

.esstat-odds__league {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--esstat-text);
}

.esstat-odds__when {
	flex: none;
	white-space: nowrap;
}

.esstat-odds__teams {
	display: grid;
	gap: 6px;
	font-weight: 600;
}

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

.esstat-odds__team .esstat-logo,
.esstat-odds__nologo {
	flex: none;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.esstat-odds__nologo {
	border-radius: 50%;
	background: var(--esstat-panel);
}

.esstat-odds__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.esstat-odds .esstat-odds__stage {
	margin: -4px 0 0;
	font-size: 0.8em;
	color: var(--esstat-muted);
}

/* The prices sit on the card's bottom edge, so a row of cards lines up even
   when one championship name or stage runs longer than the next. */
.esstat-odds__prices {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 6px;
	margin-top: auto;
}

.esstat-odds .esstat-odds__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	min-width: 0;
	padding: 8px 10px;
	background: var(--esstat-panel);
	border-radius: var(--esstat-radius);
	color: var(--esstat-text);
	line-height: 1.2;
	text-decoration: none;
}

.esstat-odds a.esstat-odds__price {
	transition: box-shadow 0.15s ease;
}

.esstat-odds a.esstat-odds__price:hover,
.esstat-odds a.esstat-odds__price:focus-visible {
	box-shadow: inset 0 0 0 2px var(--esstat-accent);
	color: var(--esstat-text);
	text-decoration: none;
}

.esstat-odds__label {
	color: var(--esstat-muted);
	font-size: 0.85em;
}

.esstat-odds__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Narrow screens -------------------------------------------------------- */

@media (max-width: 782px) {
	.esstat {
		--esstat-size: var(--esstat-size-mobile);
		--esstat-row-height: 36px;
	}

	.esstat-table th,
	.esstat-table td,
	.esstat-table .esstat-col--team,
	.esstat-table .esstat-col--pos,
	.esstat-table .esstat-match__time {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* Between 600 and 782 the row is still a row, and the status column is the
	   one whose text can be spared; under 600 the scoreboard has room for it. */
	.esstat-table .esstat-match__status {
		display: none;
	}

	.esstat-match__score-box {
		min-width: 84px;
		padding: 0.4em 0.6em;
	}

	.esstat-logo {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}

	.esstat__title,
	.esstat-stage__title,
	.esstat-day__league,
	.esstat-day__title,
	.esstat__updated,
	.esstat-legend,
	.esstat-rating__period {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}

	/**
	 * A standings table is wider than a phone whatever is done to it — twelve
	 * columns do not fit in 360 px and shrinking the type until they do makes
	 * the table unreadable rather than narrow. So it scrolls sideways, and the
	 * two columns that say *which row you are looking at* stay put while it
	 * does. Without them a scrolled table is a grid of anonymous numbers.
	 */
	.esstat-table--standings th.esstat-col--pos,
	.esstat-table--standings td.esstat-col--pos {
		position: sticky;
		left: 0;
		z-index: 2;
		width: 2.4em;
		background: inherit;
	}

	.esstat-table--standings th.esstat-col--team,
	.esstat-table--standings td.esstat-col--team {
		position: sticky;
		left: 2.4em;
		z-index: 2;
		min-width: 9.5em;
		max-width: 12em;
		background: inherit;
		box-shadow: 1px 0 0 var(--esstat-border);
	}

	/* Six form badges are half the table's width on a phone, for the column
	   that matters least once the scroll has already cost something. */
	.esstat-table--standings .esstat-col--form {
		display: none;
	}

	/* The scroller has to clip the sticky cells, so it cannot also be the
	   element that rounds or hides overflow for the whole block. */
	.esstat-scroll {
		overflow-y: hidden;
	}
}

/**
 * Phones: a match stops being a table row and becomes a scoreboard — the
 * kick-off on its own line, then the two names either side of the score. The
 * five-column row survives 782 px by hiding things; at 600 it is simply the
 * wrong shape, and a horizontal scrollbar under every fixture is worse than a
 * layout that fits.
 */
@media (max-width: 600px) {
	.esstat-table--matches,
	.esstat-table--matches tbody,
	.esstat-table--matches tr,
	.esstat-table--matches td {
		display: block;
	}

	.esstat-table--matches tr.esstat-match {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas:
			'time time status'
			'home score away';
		align-items: center;
		gap: 0.4em 0.5em;
		padding: 0.7em;
		border-bottom: 1px solid var(--esstat-border);
	}

	/* Grid items default to a minimum of their own content, which a long name
	   or a status sentence blows past — and the row then overflows the card
	   however the tracks are sized. `min-width: 0` is what lets them shrink. */
	.esstat-table--matches td {
		height: auto;
		/* The five-column row sized the time, status and score cells with
		   `width: 1%` so the table gave the rest to the names. As grid items
		   that percentage is a real width and it collapses them. */
		width: auto;
		min-width: 0;
		padding: 0;
		border: 0;
		white-space: normal;
	}

	.esstat-table--matches .esstat-match__time {
		grid-area: time;
		text-align: left;
		font-size: 0.85em;
		white-space: nowrap;
	}

	/* The day is already named above the list. */
	.esstat-match__date {
		display: none;
	}

	/* …except in a tournament's single list, where nothing else says it. */
	.esstat-table--flat .esstat-match__date {
		display: inline;
	}

	.esstat-match__status-long {
		display: none;
	}

	.esstat-match__status-short {
		display: inline;
	}

	.esstat-table--matches .esstat-match__status {
		grid-area: status;
		display: block;
		text-align: right;
		font-size: 0.8em;
	}

	.esstat-table--matches .esstat-match__team--home {
		grid-area: home;
		width: auto;
		text-align: right;
	}

	.esstat-table--matches .esstat-match__team--away {
		grid-area: away;
		width: auto;
		text-align: left;
	}

	.esstat-table--matches .esstat-match__score {
		grid-area: score;
		width: auto;
		padding: 0;
	}

	.esstat-match__score-box {
		min-width: 0;
		padding: 0.35em 0.55em;
		font-size: 0.95em;
	}

	.esstat-table--matches .esstat-team {
		align-items: flex-start;
	}

	.esstat-table--matches .esstat-team__name {
		overflow-wrap: anywhere;
	}

	.esstat-table--matches tr.esstat-match__note {
		padding: 0 0.7em 0.6em;
	}

	.esstat-table--matches tr.esstat-match__note td {
		padding: 0;
	}

	/* Landscape screenshots of a 1639 px page shrink to an illegible strip on a
	   phone. Panning a readable image beats staring at an unreadable one. */
	.esstat-screenshot--pan .esstat-screenshot__img {
		max-width: none;
		width: 680px;
	}
}

/**
 * Phones, tables without a sideways scroll.
 *
 * Twelve columns do not fit in 360 px and shrinking the type until they do
 * makes them unreadable, so a row stops being one line of cells and becomes
 * two: who it is (position, team, points) on the first, the numbers on the
 * second, each with its own label from the `data-label` the renderer puts on
 * the cell. The header row has nothing left to label and goes. Everything the
 * desktop table says is still there; none of it is behind a scroll.
 */
@media (max-width: 640px) {
	.esstat:not(.esstat--scroll) .esstat-table--standings thead,
	.esstat:not(.esstat--scroll) .esstat-table--rating thead {
		display: none;
	}

	/* The form column stays hidden on phones, as it is in the scrolling
	   layout: six badges are most of a phone's width. */
	.esstat:not(.esstat--scroll) .esstat-table--standings .esstat-col--form {
		display: none;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings,
	.esstat:not(.esstat--scroll) .esstat-table--standings tbody,
	.esstat:not(.esstat--scroll) .esstat-table--rating,
	.esstat:not(.esstat--scroll) .esstat-table--rating tbody {
		display: block;
		width: 100%;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings caption {
		display: block;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings tbody tr,
	.esstat:not(.esstat--scroll) .esstat-table--rating tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0.6em 0.7em 0.65em;
		border-bottom: 1px solid var(--esstat-border);
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings tbody tr:last-child,
	.esstat:not(.esstat--scroll) .esstat-table--rating tbody tr:last-child {
		border-bottom: 0;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td,
	.esstat:not(.esstat--scroll) .esstat-table--rating td,
	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--pos,
	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--team {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		white-space: normal;
	}

	/* First line: position, team, points; then a full-width break, so the
	   numbers always start a line of their own whatever the font size. */
	.esstat-table--standings tbody tr::after,
	.esstat:not(.esstat--scroll) .esstat-table--rating tbody tr::after {
		content: '';
		order: 4;
		flex: 0 0 100%;
		height: 0;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--pos,
	.esstat:not(.esstat--scroll) .esstat-table--rating td.esstat-col--rank {
		order: 1;
		flex: 0 0 2.4em;
		color: var(--esstat-muted);
		font-variant-numeric: tabular-nums;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--team,
	.esstat:not(.esstat--scroll) .esstat-table--rating td.esstat-col--team {
		order: 2;
		flex: 1 1 0;
		font-weight: 600;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--pts {
		order: 3;
		flex: 0 0 auto;
		padding-left: 0.8em;
		text-align: right;
		font-size: 1.05em;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--pts::after {
		content: ' ' attr(data-label);
		color: var(--esstat-muted);
		font-size: 0.72em;
		font-weight: 400;
		text-transform: uppercase;
	}

	/* Second line: every number with its label above it. */
	.esstat-table--standings td.esstat-col--stat,
	.esstat:not(.esstat--scroll) .esstat-table--rating td.esstat-col--stat {
		order: 5;
		flex: 1 1 0;
		min-width: 3.2em;
		margin-top: 0.5em;
		color: var(--esstat-text);
		font-size: 0.92em;
		text-align: center;
		font-variant-numeric: tabular-nums;
		overflow-wrap: anywhere;
	}

	.esstat:not(.esstat--scroll) .esstat-table--standings td.esstat-col--stat::before,
	.esstat:not(.esstat--scroll) .esstat-table--rating td.esstat-col--stat::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.1em;
		color: var(--esstat-muted);
		font-size: 0.72em;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	/* Under the team name rather than under the position number. */
	.esstat-table--standings td.esstat-col--team + td.esstat-col--stat,
	.esstat:not(.esstat--scroll) .esstat-table--rating td.esstat-col--team + td.esstat-col--stat {
		margin-left: 2.4em;
	}

	/* Nothing scrolls any more, so nothing needs a scroller. */
	.esstat-scroll {
		overflow: visible;
	}

	/* The bracket reads top to bottom: one round under the other, each
	   match a full-width card, instead of columns panned sideways. */
	.esstat-bracket {
		display: block;
		padding: 0.8em 0.7em 1em;
	}

	.esstat:not(.esstat--scroll) .esstat-bracket__round {
		min-width: 0;
		padding: 0;
		gap: 0.5em;
	}

	.esstat:not(.esstat--scroll) .esstat-bracket__round + .esstat-bracket__round {
		margin-top: 1.1em;
	}

	.esstat:not(.esstat--scroll) .esstat-bracket__title {
		margin: 0 0 0.2em;
		text-align: left;
	}

	.esstat:not(.esstat--scroll) .esstat-bracket .esstat-team__name {
		overflow-wrap: anywhere;
	}

	/* Squad, career, statistics, transfers: the same two lines — who or
	   which season first, every number labelled underneath. */
	.esstat-table--grid thead {
		display: none;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid,
	.esstat:not(.esstat--scroll) .esstat-table--grid tbody,
	.esstat:not(.esstat--scroll) .esstat-table--grid tfoot {
		display: block;
		width: 100%;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid caption {
		display: block;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0.6em 0.7em 0.65em;
		border-bottom: 1px solid var(--esstat-border);
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid tbody tr:last-child {
		border-bottom: 0;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid tr::after {
		content: '';
		order: 4;
		flex: 0 0 100%;
		height: 0;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid td,
	.esstat:not(.esstat--scroll) .esstat-table--grid th {
		display: block;
		width: auto;
		height: auto;
		padding: 0;
		border: 0;
		white-space: normal;
		background: transparent;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid .esstat-col--pos,
	.esstat:not(.esstat--scroll) .esstat-table--grid .esstat-col--date {
		order: 1;
		flex: 0 0 auto;
		width: auto;
		min-width: 2.4em;
		margin-right: 0.6em;
		padding: 0;
		font-size: 0.85em;
	}

	/* Sized by its content, not from zero: alone on its line (a format, a
	   season) it would otherwise share that line with the break and wrap
	   every word. */
	.esstat-table--grid .esstat-col--team {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		font-weight: 600;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid .esstat-col--stat {
		order: 5;
		flex: 1 1 0;
		min-width: 3.2em;
		margin-top: 0.5em;
		font-size: 0.92em;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid .esstat-col--stat::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.1em;
		color: var(--esstat-muted);
		font-size: 0.72em;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	/* Names and competitions need a line, not a chip. */
	.esstat-table--grid .esstat-col--wide {
		flex: 1 1 100%;
		text-align: left;
	}

	/* A player's position sits beside the name, quietly. */
	.esstat-table--grid .esstat-col--role {
		order: 3;
		flex: 0 0 auto;
		min-width: 0;
		margin: 0 0 0 0.6em;
		color: var(--esstat-muted);
		font-size: 0.8em;
		text-align: right;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid .esstat-col--role::before {
		content: none;
	}

	.esstat:not(.esstat--scroll) .esstat-table--grid tfoot .esstat-col--wide {
		display: none;
	}

	.esstat-entity {
		align-items: flex-start;
		padding: 0.9em 0.7em;
	}

	.esstat .esstat-entity__image {
		width: 56px;
		height: 56px;
		flex-basis: 56px;
	}

	.esstat-entity__name {
		font-size: 1.25em;
	}

	.esstat-style__group + .esstat-style__group {
		border-left: 0;
		border-top: 1px solid var(--esstat-border);
	}

	.esstat-table--facts th,
	.esstat-table--facts td {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
}

@media (prefers-color-scheme: dark) {
	.esstat {
		--esstat-text: #e6e8ea;
		--esstat-muted: #9aa1a9;
		--esstat-border: #3a3f45;
		--esstat-border-strong: #4a5058;
		--esstat-surface: #1c1f22;
		--esstat-surface-alt: #23272b;
		--esstat-hover: #2a2e33;
		--esstat-panel: #23272b;
		--esstat-promote: #1f3d24;
		--esstat-promote-hover: #26492c;
		--esstat-relegate: #3d1f1f;
	}
}

/* Shortcodes docs page (docs/shortcodes-page.html) ------------------------
   Here rather than in the page itself: WordPress strips a <style> block from
   the content when whoever saves it may not post unfiltered HTML, and the page
   then loses its spacing and frames. Classic themes put a
   .wp-block-group__inner-container between a group and its children, hence
   the paired selectors; :where() keeps the generic spacing below the
   specific rules after it. */

:where(.esstat-docs, .esstat-docs > .wp-block-group__inner-container) > * {
	margin-top: 0;
	margin-bottom: 0;
}

:where(.esstat-docs, .esstat-docs > .wp-block-group__inner-container) > * + * {
	margin-top: 1.1rem !important;
}

.esstat-docs > :first-child,
.esstat-docs > .wp-block-group__inner-container > :first-child {
	margin-top: 0 !important;
}

.esstat-docs h2 {
	margin-top: 2.8rem !important;
	margin-bottom: 0.9rem !important;
	line-height: 1.25;
}

.esstat-docs h3 {
	margin-top: 2rem !important;
	margin-bottom: 0.7rem !important;
	line-height: 1.3;
}

.esstat-docs p {
	line-height: 1.65;
}

.esstat-docs .wp-block-code {
	margin: 1rem 0 !important;
	padding: 0.85rem 1.1rem;
	border: 1px solid rgba(127, 127, 127, 0.25);
	border-radius: 8px;
	background: rgba(127, 127, 127, 0.12);
}

.esstat-docs .wp-block-code code {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.95em;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.esstat-docs :not(pre) > code {
	padding: 0.12em 0.4em;
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.14);
	font-size: 0.92em;
}

.esstat-docs .wp-block-table {
	margin: 1.5rem 0 !important;
	overflow-x: auto;
}

.esstat-docs .wp-block-table td,
.esstat-docs .wp-block-table th {
	padding: 0.6rem 0.9rem;
	vertical-align: top;
}

.esstat-docs ul {
	margin: 1rem 0 !important;
	padding-left: 1.4rem;
}

.esstat-docs li {
	margin-bottom: 0.6rem;
	line-height: 1.6;
}

.esstat-docs li:last-child {
	margin-bottom: 0;
}

.esstat-docs__label {
	margin-top: 1.2rem !important;
	margin-bottom: 0.5rem !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.esstat-docs__demo {
	margin-top: 0 !important;
	padding: 1.1rem;
	border: 1px dashed rgba(127, 127, 127, 0.4);
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.05);
	overflow-x: auto;
}

/* The frame has padding of its own: no block gap against its edges. */
.esstat-docs__demo > :first-child,
.esstat-docs__demo :is(.esstat, .esstat-screenshot, .esstat-empty):first-child {
	margin-top: 0 !important;
}

.esstat-docs__demo > :last-child,
.esstat-docs__demo :is(.esstat, .esstat-screenshot, .esstat-empty):last-child {
	margin-bottom: 0 !important;
}

.esstat-docs__demo img {
	max-width: 100%;
	height: auto;
}