/**
 * Ettan Football Stats — standings + top scorers tables.
 * Inherits the sportadmin-cards theme tokens where available (color palette,
 * card radius), with sensible fallbacks so it also looks right standalone.
 */

.efs-block {
	--efs-border: var(--wp--preset--color--border, #e6e8eb);
	--efs-radius: var(--wp--custom--card-radius, 6px);
	--efs-head-bg: var(--wp--preset--color--primary, #1f2937);
	--efs-head-text: var(--wp--preset--color--vit, #fff);
	--efs-zebra: color-mix(in srgb, currentColor 4%, transparent);

	/* Match-card plates. inc/palette-ink.php overrides the *-text values when a
	   club's palette would put them below AA on their own surface — see there
	   before changing a fallback here, the two have to describe the same colour. */
	/* The winner's plate takes the head colour, not the accent. Accent is the
	   club's "energy" colour and is already the kickoff plate, so using it on a
	   final score made a played match read like a live one — as though a goal
	   had just gone in. The three states now separate cleanly:
	   error red = in progress, accent = still to come, head colour = settled. */
	--efs-score-win-bg: var(--efs-head-bg);
	--efs-score-win-text: var(--wp--preset--color--vit, #fff);
	--efs-score-neutral-bg: var(--wp--preset--color--ljus, #DFE3EC);
	--efs-score-neutral-text: var(--wp--preset--color--primary, #1f2937);
	--efs-kickoff-bg: var(--wp--preset--color--accent, #3F34FD);
	/* Scroll bar under a card row. Track reads against the section behind it,
	   thumb carries the club's accent so the progress is the coloured part. */
	--efs-scroll-track: var(--efs-border);
	--efs-scroll-thumb: var(--wp--preset--color--accent, #3F34FD);
	--efs-kickoff-text: var(--wp--preset--color--vit, #fff);
	/* Softened head ink, so the meta band reads as secondary without leaving the
	   band's own colour pair — derived, so it follows any override above. */
	--efs-meta-text: color-mix(in srgb, var(--efs-head-text) 80%, var(--efs-head-bg));

	/* Full-width section like the theme's card rows (.section-fullwidth):
	   break out to viewport width, content stays at content-size. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Scale with the global section-spacing preset, a touch tighter than a full
	   theme section (adjacent sections each add padding). */
	padding-block: calc(var(--wp--custom--section-spacing, clamp(2.5rem, 5vw, 4rem)) * 0.8);
}

/* Nested in a column, the section stops being a section.
   .efs-block breaks out to 100vw so a standalone block spans the viewport like
   the theme's own section patterns — inside a two-column layout that would blow
   straight through the column. Here the column decides the width and the group
   around it decides the vertical rhythm, so the block drops both the break-out
   and its section padding and simply fills what it was given. */
.wp-block-column .efs-block,
.wp-block-columns .efs-block {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-block: 0;
}

.wp-block-column .efs-block > .efs-inner {
	max-width: none;
	padding-inline: 0;
}

/* Stat lists stacked in the side column need air between them; on their own they
   get it from the section padding they just gave up. */
.wp-block-column > .efs-block + .efs-block {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Inner content constrained to the page content-size, centered. */
.efs-block > .efs-inner {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}

/* Mobile: side padding so content never touches the viewport edge
   (mirrors .section-fullwidth > * padding). */
@media (max-width: 781px) {
	.efs-block > .efs-inner {
		padding-inline: var(--wp--preset--spacing--50, 1rem);
	}
}

/* The league toggle is a scope filter — which dataset the whole section shows —
   so it keeps a contained, switch-like form: a hairline frame split into
   segments with the active one filled. Radius comes from --efs-radius (the
   theme's card-radius token) rather than a hardcoded pill, so a hard-edged
   profile gets square controls with no override. */
/* .efs-seg shares this form but not its behaviour: assets/js/league-toggle.js
   binds every .efs-league-toggle__btn inside a block, so a second selector
   wearing that class would be read as a league button — and clicking it hid
   every panel, because it has no data-league to match. Same look, own name. */
.efs-league-toggle,
.efs-seg {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	margin: 0;
	background: var(--wp--preset--color--vit, #fff);
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
}

.efs-league-toggle__btn,
.efs-seg__btn {
	padding: 0.5rem 1.15rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--primary, #1f2937);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.efs-league-toggle__btn + .efs-league-toggle__btn,
.efs-seg__btn + .efs-seg__btn {
	border-left: 1px solid var(--efs-border);
}

.efs-league-toggle__btn:hover,
.efs-seg__btn:hover {
	background: var(--efs-zebra);
}

.efs-league-toggle__btn--active,
.efs-league-toggle__btn--active:hover,
.efs-seg__btn--active,
.efs-seg__btn--active:hover {
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
}

/* Full label on roomy screens, short one on phones. */
.efs-league-toggle__btn .efs-lg-short { display: none; }

/* Resultat/Kommande is not a filter, it is navigation between two views of what
   the filter already chose. Tabs, therefore — no frame, no fill, just an
   underline on the active one. Giving it the same boxed form as the league
   toggle is what made the two read as rival widgets instead of a hierarchy. */
.efs-mode-toggle {
	display: inline-flex;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
}

.efs-mode-toggle__btn {
	padding: 0.15rem 0 0.45rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.efs-mode-toggle__btn:hover {
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-mode-toggle__btn--active {
	color: var(--wp--preset--color--primary, #1f2937);
	border-bottom-color: var(--wp--preset--color--accent, #3F34FD);
}

/* One control row under the title: mode toggle left, league toggle right. They
   used to sit on separate rows in different corners, which read as two unrelated
   widgets. Same row, same frame style, opposite ends. */
/* Tab row, sitting on the content it switches. The hairline runs the full width
   so the active tab's underline reads as lifted out of a rule rather than
   floating on its own. */
.efs-controls-bar {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--efs-border);
}

/* A control row that also carries the league toggle pushes it to the far end:
   the choice is made once, so it sits out of the way of the controls a reader
   actually works with. */
.efs-controls-bar--with-league .efs-controls-bar__end {
	margin-left: auto;
	padding-bottom: 0.35rem;
}

.efs-league-panel[hidden] {
	display: none;
}

/* Header bar: section title left, league toggle right (same row). */
.efs-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.efs-header-bar .efs-block__title,
.efs-header-bar .efs-league-toggle {
	margin-bottom: 0;
}

/* "Visa alla"-link, placed below the content, right-aligned. */
.efs-block__all,
.efs-fixtures__all {
	margin: 1.25rem 0 0;
	text-align: right;
}

/* The "see all" link is a UI affordance, not prose, so it is emitted in a div
   rather than a p — the theme underlines paragraph links on purpose, and a
   plugin has no business out-specifying that decision on a club's own site.
   Outside a p it simply inherits the theme's link colour, whatever the club
   has chosen. Only the hover feedback is ours, and only on our own element. */
.efs-block__all {
	margin: 1.25rem 0 0;
	text-align: right;
}

.efs-link-all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
}

.efs-link-all:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.efs-block__title {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin: 0 0 0.75rem;
}

.efs-block__season {
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.6;
}

.efs-block__message {
	padding: 1rem;
	border: 1px dashed var(--efs-border);
	border-radius: var(--efs-radius);
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-size: 0.9rem;
	margin: 0;
}

/* ---------- Skeleton: a cold cache that is filling ----------
   One shape for every block. Sixteen block types with sixteen layouts would
   mean sixteen skeletons to keep in sync, and this state is rare by design.
   The bars only have to say "content, shortly" — not impersonate a table. */
.efs-skeleton {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem 0;
}

/* Deliberately not --efs-border. That token is a hairline colour (#e6e8eb) and
   measures 1.23:1 against white — a 16px bar filled with it is a bar nobody
   sees, and a loading state that cannot be seen is not one. #d8dde3 measures
   1.37:1, which reads as a placeholder without shouting. The sweep is the part
   that says "working", so it is the brighter half of the gradient. */
.efs-skeleton__bar {
	height: 1rem;
	border-radius: var(--efs-radius, 4px);
	background: linear-gradient( 90deg, #d8dde3 0%, #f4f6f8 50%, #d8dde3 100% );
	background-size: 200% 100%;
	animation: efs-skeleton-sweep 1.4s ease-in-out infinite;
}

/* The head bar reads as a heading: taller, and short of the full width. */
.efs-skeleton__bar--head {
	height: 1.6rem;
	width: 40%;
	margin-bottom: 0.4rem;
}

/* Rows taper, so the block does not read as a solid grey slab. */
.efs-skeleton__bar:nth-child(3n) { width: 92%; }
.efs-skeleton__bar:nth-child(3n + 1) { width: 97%; }
.efs-skeleton__bar:nth-child(4n) { width: 84%; }

@keyframes efs-skeleton-sweep {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* A sweeping gradient is exactly what this setting is about. Keep the bars,
   drop the motion — the shape alone still says "loading". */
@media ( prefers-reduced-motion: reduce ) {
	.efs-skeleton__bar {
		animation: none;
		background: #d8dde3;
	}
}

/* Horizontal scroll on narrow screens, hidden scrollbar (theme convention). */
.efs-table-scroll {
	overflow-x: auto;
	scrollbar-width: none;
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
}
.efs-table-scroll::-webkit-scrollbar {
	display: none;
}

.efs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.925rem;
	background: var(--wp--preset--color--vit, #fff);
}

/* Fixed column widths so the table layout is identical for both leagues — only
   the content changes when toggling, the columns never "jump". The team column
   takes the remaining space (long names ellipsis via .efs-team__name). */
.efs-table--standings,
.efs-table--leaderboard,
.efs-table--players {
	table-layout: fixed;
}

.efs-table--standings {
	min-width: 34rem; /* keep columns readable; the wrapper scrolls on mobile */
}

.efs-table--standings .efs-col-goals { width: 4.5rem; }
.efs-table--standings .efs-col-pts { width: 3rem; }
.efs-table--standings thead th:not([class]) { width: 2.75rem; } /* S V O F */
.efs-table--leaderboard .efs-col-pts { width: 5.5rem; }

.efs-table thead th {
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	font-weight: 600;
	text-align: center;
	padding: 0.6rem 0.5rem;
	white-space: nowrap;
}

.efs-table th.efs-col-team {
	text-align: left;
}

.efs-table tbody td {
	padding: 0.55rem 0.5rem;
	text-align: center;
	border-top: 1px solid var(--efs-border);
	font-variant-numeric: tabular-nums;
}

.efs-table tbody tr:nth-child(even) {
	background: var(--efs-zebra);
}

.efs-col-rank {
	width: 2.5rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-col-team {
	text-align: left !important;
}

.efs-col-goals {
	white-space: nowrap;
}

.efs-col-pts {
	font-weight: 800;
}

.efs-team {
	display: flex; /* fill the (fixed-width) cell so the name can truncate */
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	max-width: 100%;
}

/* CREST GEOMETRY — read this before making any of these boxes square again.
   The Swedish FA serves every club crest on a 16:9 canvas (100x56 small,
   1000x560 large) with the mark fitted to the canvas HEIGHT and centred
   horizontally; the mark's own width varies per club, from 36 to 58 of 100.
   API-Football's marks, which these boxes were originally sized for, are square
   and fill their canvas. So in a square box `object-fit: contain` letterboxes
   the federation canvas and the mark renders at 56% of the box — the size
   regression this fixes. A 16:9 box makes the mark exactly as tall as the box,
   which is the size it always was, and keeping the box a fixed width is what
   keeps table columns aligned when neighbouring crests are different shapes. */
.efs-team__logo {
	flex: 0 0 auto;
	object-fit: contain;
}

.efs-team__photo {
	border-radius: 50%;
}

.efs-team__name {
	min-width: 0; /* allow the flex item to shrink → ellipsis instead of overflow */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Editor: ServerSideRender wrapper shouldn't add extra chrome. */
.editor-styles-wrapper .efs-block .components-server-side-render {
	margin: 0;
}

/* ---------- Team-stats: picker ---------- */
.efs-team-picker {
	margin-bottom: 1rem;
}


/* ---------- Team-stats: card ---------- */
.efs-team-card-slot.efs-loading {
	opacity: 0.5;
	transition: opacity 0.15s;
}

.efs-form {
	display: inline-flex;
	gap: 0.2rem;
}

.efs-form__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	/* Follows the theme's card radius like every other box, instead of a
	   hardcoded 4px that squares off nowhere and rounds nowhere. */
	border-radius: var(--efs-radius);
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--wp--preset--color--vit, #fff);
}

.efs-form--w { background: var(--wp--preset--color--success, #16a34a); }
.efs-form--d { background: var(--wp--preset--color--text-secondary, #6b7280); }
.efs-form--l { background: var(--wp--preset--color--error, #dc2626); }

/* ---------- Team card ----------
   Three tiers: where they stand, how they get there, what else is worth a look.
   The version this replaces was eight equal tiles in a four-column grid, which
   left the reader to work out which figure mattered. */
.efs-team-card {
	background: var(--wp--preset--color--vit, #fff);
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
}

.efs-team-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
}

.efs-team-head__logo {
	flex: 0 0 auto;
	width: 80px;
	height: 44px;
	object-fit: contain;
}

.efs-team-head__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.efs-team-head__name {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
}

.efs-team-head__pos {
	flex: 0 0 auto;
	text-align: right;
	line-height: 1.1;
}

/* The one number that answers "how are we doing". */
.efs-team-head__rank {
	display: block;
	font-size: 2rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.efs-team-head__meta {
	display: block;
	font-size: 0.75rem;
	color: var(--efs-meta-text);
}

/* Attack beside defence, each with its standing in the division — a figure on
   its own says nothing, a figure with a rank says everything. */
.efs-sides,
.efs-team-card__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--efs-border);
}

.efs-side {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.9rem 1.15rem 1rem;
	background: var(--wp--preset--color--vit, #fff);
}

.efs-side__label,
.efs-team-card__panel-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-side__figure {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-side__figure b {
	margin-right: 0.25rem;
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary, #1f2937);
}

/* A full bar is best in the division, so length reads as standing. */
.efs-side__bar {
	display: block;
	height: 4px;
	background: var(--wp--preset--color--ljus, #f5f6f7);
}

.efs-side__bar > span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent, #3F34FD);
}

/* Defence takes the club colour, matching the conceded bars in the chart. */
.efs-side--against .efs-side__bar > span {
	background: var(--efs-head-bg);
}

.efs-side__rank {
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-team-card__panel {
	padding: 0.9rem 1.15rem 1.1rem;
	background: var(--wp--preset--color--vit, #fff);
	border-top: 1px solid var(--efs-border);
}

.efs-team-card__cols .efs-team-card__panel {
	border-top: 0;
}

.efs-team-card__panel-title {
	display: block;
	margin-bottom: 0.7rem;
}

.efs-scorer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ranked rows with a bar, not a bordered table. The hairline-per-row treatment
   is what made this read as a spreadsheet. */
.efs-scorer {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.55rem 0;
}

.efs-scorer__pos {
	flex: 0 0 1.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-scorer__body {
	flex: 1;
	min-width: 0;
}

.efs-scorer__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.efs-scorer__name {
	font-size: 0.92rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.efs-scorer__goals {
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-scorer__bar {
	display: block;
	height: 3px;
	margin-top: 0.35rem;
	background: var(--wp--preset--color--ljus, #f5f6f7);
}

.efs-scorer__bar > span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent, #3F34FD);
}

/* 5. Facts: the label says what it is, so nothing rests on an icon being read
   correctly — a trophy alone does not say "biggest win". Two columns, no rules
   between; the grouping does the separating. */
.efs-fact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1.1rem 1.4rem;
}

.efs-fact__label {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-fact__value {
	display: block;
	margin-top: 0.25rem;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-fact__detail {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-team-card__empty {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---------- Goals per period ----------
   One axis, one scale. Both directions share pixels-per-goal, because a side
   scaled to its own maximum makes fourteen conceded look like forty-four
   scored. */
.efs-mchart__legend {
	display: flex;
	justify-content: flex-end;
	gap: 0.9rem;
	margin-bottom: 0.7rem;
	font-size: 0.7rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-mchart__key::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.35rem;
}

.efs-mchart__key--for::before { background: var(--wp--preset--color--accent, #3F34FD); }
.efs-mchart__key--against::before { background: var(--efs-head-bg); }

.efs-mchart__row {
	display: flex;
	gap: 0.4rem;
}

.efs-mchart__row--for { align-items: flex-end; }
.efs-mchart__row--against { align-items: flex-start; }

.efs-mchart__col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.efs-mchart__row--against .efs-mchart__col { justify-content: flex-start; }

.efs-mchart__bar {
	display: block;
	width: 100%;
}

.efs-mchart__bar--for { background: var(--wp--preset--color--accent, #3F34FD); }
.efs-mchart__bar--against { background: var(--efs-head-bg); }

.efs-mchart__n--zero {
	opacity: 0.45;
}

.efs-mchart__n {
	font-size: 0.68rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* The periods sit between the two rows and separate them on their own. A rule
   here read as an underline of the bars above rather than as an axis. */
.efs-mchart__axis {
	display: flex;
	gap: 0.4rem;
	margin: 0.35rem 0 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-mchart__tick {
	flex: 1;
	min-width: 0;
	text-align: center;
}

/* Readings the chart earns, as shares. Three at most, each one figure and one
   line — a paragraph of prose under a chart never gets read. */
.efs-mchart__insights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.1rem;
	margin-top: 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--efs-border);
}

.efs-insight__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent, #3F34FD);
}

.efs-insight__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---------- Leaderboard ---------- */
.efs-table--leaderboard td {
	text-align: left;
}

.efs-table--leaderboard .efs-col-rank {
	text-align: center;
}

.efs-mode-panel[hidden] {
	display: none;
}

/* ---------- Fixtures / results row ---------- */
.efs-fixtures__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.9rem;
}

.efs-fixtures__head .efs-block__title {
	margin-bottom: 0;
}

/* Four cards across, the rest reachable by scrolling sideways.
   Five across left the name column around 113px, where most club names hit the
   ellipsis — the row was legible only for clubs with short names. Four gives
   roughly 176px and makes truncation the exception.
   The row deliberately does not wrap to a second line: a partial second row of
   one or two cards reads as a mistake. Sizing on 4.15 leaves a sliver of the
   next card showing, which is how the theme's own card rows signal that there
   is more sideways — the scrollbar stays hidden per the theme convention. */
.efs-fixtures__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 0.75rem) / 4.15);
	gap: 0.75rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

/* Our own scroll bar, drawn as a real element. See assets/js/card-scroller.js
   for why the native one could not be used. */
.efs-scrollbar {
	position: relative;
	height: 6px;
	margin-top: 0.9rem;
	border-radius: 999px;
	background: var(--efs-scroll-track);
	cursor: pointer;
	transition: opacity 0.15s;
}

.efs-scrollbar[hidden] {
	display: none;
}

.efs-scrollbar__thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-radius: 999px;
	background: var(--efs-scroll-thumb);
}

.efs-scrollbar--dragging {
	cursor: grabbing;
}

/* Where there is a pointer, the bar stays out of the way until the visitor is
   in the section — hovering anywhere in it, or tabbing into a card, counts.
   Gated on (hover: hover) so a touch device, which can never trigger the
   reveal, keeps the bar visible at all times. */
@media (hover: hover) {
	.efs-fixtures .efs-scrollbar {
		opacity: 0;
	}

	.efs-fixtures:hover .efs-scrollbar,
	.efs-fixtures:focus-within .efs-scrollbar {
		opacity: 1;
	}
}

.efs-fixtures__row > .efs-match {
	scroll-snap-align: start;
}

.efs-match {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	/* The meta band and the venue rule run edge to edge, so the card holds no
	   padding of its own and clips them to whatever radius the theme sets. */
	overflow: hidden;
	background: var(--wp--preset--color--vit, #fff);
}

/* Band across the top, in the club's head colour — gives the card a defined top
   and ties the row of cards to the section header above it. */
.efs-match__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	background: var(--efs-head-bg);
	color: var(--efs-meta-text);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

.efs-match__date {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Takes the slack when the grid stretches cards to a common height, so the
   venue rule always lands on the bottom edge instead of floating under a short
   card's teams. */
.efs-match__body {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem;
}

.efs-match__teams {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.efs-match__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.efs-match__logo {
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	object-fit: contain;
}

/* One line. Wrapping to two was tried and rejected — it makes the card bulky and
   ragged. Names are kept readable by giving the card more width instead (four
   across, not five), so truncation is the exception rather than the rule. */
.efs-match__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
}

/* Weight and colour carry the outcome, so the result is readable without
   comparing the two figures. A draw leaves both rows alone. */
.efs-match__row--win .efs-match__name {
	color: var(--wp--preset--color--primary, #1f2937);
	font-weight: 700;
}

.efs-match__row--loss .efs-match__name {
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* The score is a plate, not a loose figure. Neutral is the base so a score the
   live feed injects mid-match (assets/js/live.js appends a bare
   .efs-match__score) still lands as a finished-looking plate. */
.efs-match__score {
	flex: 0 0 auto;
	min-width: 2rem;
	padding: 0.15rem 0.45rem;
	border-radius: var(--efs-radius);
	background: var(--efs-score-neutral-bg);
	color: var(--efs-score-neutral-text);
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.25;
}

.efs-match__row--win .efs-match__score {
	background: var(--efs-score-win-bg);
	color: var(--efs-score-win-text);
}

/* Upcoming: one plate for the whole card, centred between the two teams, where
   the pair of score plates sits on a played match. Same position, same weight,
   different content. */
.efs-match__kickoff {
	flex: 0 0 auto;
	align-self: center;
	padding: 0.35rem 0.6rem;
	border-radius: var(--efs-radius);
	background: var(--efs-kickoff-bg);
	color: var(--efs-kickoff-text);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.25;
}

.efs-match__venue {
	padding: 0.5rem 0.85rem;
	border-top: 1px solid var(--efs-border);
	/* Every card keeps the same three-part structure. A fixture the API gives no
	   venue for holds the line open rather than collapsing to padding — an
	   invented placeholder would read as data the club doesn't have. */
	min-height: 1.5em; /* fallback where lh is unsupported */
	min-height: 1lh;
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Phones: the chip loses the word "Ettan" so the control still fits beside the
   section title. Shortening a label beats stacking two full-width bars — no
   designer would stack them, and the word was redundant on a site that is
   Ettan's to begin with. */
@media (max-width: 600px) {
	.efs-league-toggle__btn .efs-lg-full { display: none; }
	.efs-league-toggle__btn .efs-lg-short { display: inline; }

	.efs-league-toggle__btn {
		padding: 0.5rem 0.9rem;
	}

	.efs-header-bar {
		gap: 0.5rem 0.75rem;
		flex-wrap: nowrap;
	}

	.efs-header-bar .efs-block__title {
		min-width: 0;
	}
}

/* The row scrolls at every width; narrower screens simply fit fewer cards.
   Same peek-the-next-card signal, sized for the viewport. */
@media (max-width: 900px) {
	.efs-fixtures__row {
		grid-auto-columns: calc((100% - 2 * 0.75rem) / 2.2);
	}
}

@media (max-width: 600px) {
	.efs-fixtures__row {
		grid-auto-columns: 78%;
	}
}

/* ---------- Full calendar (schedule + results) ---------- */
/* The row's layout depends on how wide the row is, not on how wide the window
   is: the club page puts two of these lists side by side in ~390px columns, so a
   viewport breakpoint left them in the wide layout with every club name cut to
   an ellipsis. The list is its own container and answers for itself. */
.efs-cal {
	container-type: inline-size;
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
}

.efs-cal__round + .efs-cal__round {
	border-top: 1px solid var(--efs-border);
}

.efs-cal__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.efs-cal__summary::-webkit-details-marker { display: none; }

.efs-cal__summary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
	opacity: 0.6;
	flex: 0 0 auto;
	margin-left: auto;
}

.efs-cal__round[open] .efs-cal__summary::after {
	transform: rotate(-135deg);
}

.efs-cal__round-date {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cal__matches {
	padding: 0;
	background: var(--wp--preset--color--vit, #fff);
}

/* The fixtures are a list, so they are drawn as one surface: a boxed row on a
   grey field, with the field showing through between every pair, gave each
   match four hairlines and a shadow gap — a stack of objects rather than a
   season. Rows now share one white plane and are parted by a single hairline,
   which also lets the date, crest and result line up as columns down the page
   instead of restarting inside every box.

   Three weights of line, and no more: the frame around the block, a full
   hairline between rounds, and a lighter one between matches within a round.
   Same-strength rules everywhere is what makes a table read as a spreadsheet. */
.efs-cal__row {
	display: grid;
	grid-template-columns: 5rem 1fr 4.75rem 1fr;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--vit, #fff);
	border: 0;
}

.efs-cal__row + .efs-cal__row {
	border-top: 1px solid color-mix(in srgb, var(--efs-head-bg) 11%, transparent);
}

/* The day owns its matches. A round is one weekend, so the date is stated once
   as a band across the plane instead of restated on every row — and with it gone
   from the row, the result sits on the centre line where the eye looks for it. */
.efs-cal__dayhead {
	padding: 0.55rem 1rem 0.5rem;
	background: color-mix(in srgb, var(--efs-head-bg) 5%, var(--wp--preset--color--vit, #fff));
	border-top: 1px solid color-mix(in srgb, var(--efs-head-bg) 11%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--efs-head-bg) 11%, transparent);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--efs-head-bg) 72%, transparent);
}

.efs-cal__matches > .efs-cal__dayhead:first-child {
	border-top: 0;
}

/* Date on one edge, round on the other, fixture between: the row is symmetric,
   so the result sits on the centre line without an empty column faking it. */
.efs-cal__row--withround {
	grid-template-columns: 5rem 1fr 4.75rem 1fr 5rem;
}

.efs-cal__round-tag {
	justify-self: end;
	text-align: right;
}

/* Home, result, away — the result on the centre line. The centre track is wide
   enough for a kickoff, and the plate fills it, so every result down the column
   is the same width and the spine reads straight. A plate sized to its own text
   overflowed the track and sat 2.8px off centre on every row. */
.efs-cal__row--nodate {
	grid-template-columns: 1fr 4.75rem 1fr;
}

/* Hover is the ground and nothing else. The row picks up the page's own light
   tone, edge to edge and over its own hairlines, so the whole band lifts out of
   the plane as one piece — the way a well-made table highlights a line. There is
   no rail: a coloured bar down the left edge is a decoration stuck onto a row
   rather than a property of it, and on a list of sixteen it announces the
   cursor's arrival louder than the row it points at.

   Nothing moves and nothing lifts. This brand is flat, and a shadow here would
   belong to a different site. */
.efs-cal__row {
	transition: background-color 0.12s ease-out;
}

.efs-cal__row:hover {
	background: color-mix(in srgb, var(--efs-head-bg) 10%, var(--wp--preset--color--vit, #fff));
}

/* The hovered band owns its edges: without this the next row's hairline draws a
   line across the highlight. */
.efs-cal__row:hover,
.efs-cal__row:hover + .efs-cal__row {
	border-top-color: transparent;
}

/* Accent belongs to focus, where a strong mark is the point — a keyboard user
   has no cursor to tell them where they are. */
.efs-cal__row:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: -2px;
	background: color-mix(in srgb, var(--efs-head-bg) 10%, var(--wp--preset--color--vit, #fff));
}

/* The crest is the one thing that may come forward — a fraction, and only
   because a badge growing slightly reads as "this row is live under the
   cursor" without moving any text. */
.efs-cal__row .efs-cal__logo {
	transition: transform 0.18s;
}

.efs-cal__row:hover .efs-cal__logo {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.efs-cal__row,
	.efs-cal__row .efs-cal__logo {
		transition: none;
	}

	.efs-cal__row:hover .efs-cal__logo {
		transform: none;
	}
}

.efs-cal__date {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	white-space: nowrap;
}

.efs-cal__team {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
}

.efs-cal__team--away {
	flex-direction: row-reverse;
	text-align: right;
}

.efs-cal__logo {
	flex: 0 0 auto;
	width: 36px;
	height: 20px;
	object-fit: contain;
}

.efs-cal__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #1f2937);
}

/* The winner is stated by weight alone. A colour would compete with the chip,
   which is the row's one loud thing. */
.efs-cal__team.is-winner .efs-cal__name {
	font-weight: 800;
}

/* A team that lost sits back, so a result reads at a glance. Only where there
   is a winner: in a draw nobody lost, and dimming both read as if both had. */
.efs-cal__row.is-done.has-winner .efs-cal__team:not(.is-winner) .efs-cal__name {
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* Centred by the box, not by the line: inline centring left the chip 2.8px
   right of its own cell on every row, which reads as a wobble down the column. */
.efs-cal__score {
	display: grid;
	place-items: center stretch;
	text-align: center;
	white-space: nowrap;
}

/* Per-club goals. The combined chip carries the result on wide rows, so these
   only come out on phones, where each club has a line of its own. */
.efs-cal__goals {
	display: none;
}

/* The single high-contrast element on the row. Navy means played, accent means
   still to come — state in form, not only in the number, so the page can be
   scanned without reading it. */
.efs-cal__chip {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 3.6rem;
	padding: 0.3rem 0.5rem;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.efs-cal__chip--time {
	background: var(--wp--preset--color--accent, #3F34FD);
	font-weight: 700;
	letter-spacing: 0;
}

/* Nothing scheduled yet is not a state worth shouting: hairline, not a fill. */
.efs-cal__chip--tbd {
	background: transparent;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	box-shadow: inset 0 0 0 1px var(--efs-border);
	font-weight: 600;
}

.efs-cal__vs {
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-weight: 400;
}

/* ---------- Calendar round pager ---------- */
.efs-cal--pager {
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/* Toolbar: filters (left) + round nav (right) on one row. */
.efs-cal__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	margin-bottom: 1.25rem;
}

.efs-cal__nav {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.efs-cal__nav-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: var(--efs-radius);
	background: transparent;
	color: var(--wp--preset--color--primary, #1f2937);
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.efs-cal__nav-btn:hover:not(:disabled) {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.efs-cal__nav-btn:disabled {
	opacity: 0.25;
	cursor: default;
}

.efs-cal__nav-btn::before {
	content: "";
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
}

.efs-cal__prev::before {
	transform: rotate(135deg);
	margin-left: 4px;
}

.efs-cal__next::before {
	transform: rotate(-45deg);
	margin-right: 4px;
}

/* Filter selects (Säsong + Lag), left side of the toolbar. */
.efs-cal__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* Everything visual lives in .efs-select > select — these only cap how wide a
   long club name is allowed to make the control. */
.efs-cal__select,
.efs-cal__season-select,
.efs-cal__team-select {
	max-width: 14rem;
}

.efs-cal-wrap.efs-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

.efs-cal__rounds {
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
}

/* Flat team-match list (single card, scrolls on long seasons). */
.efs-cal--list .efs-cal__matches {
	padding: 0;
}

/* Date/round column: just bolder text, no background. Day on the left; the
   kickoff time for unplayed matches moves to the score column (no extra row,
   so the row height never jumps). */
.efs-cal__date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1rem;
}

.efs-cal__date {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.efs-cal__day {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-cal__round-tag {
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cal__day {
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--body-text, #111);
}

/* Kickoff time shown in the score column for unplayed matches. */
.efs-cal__score .efs-cal__kickoff {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* The pager shows one round at a time, so the separator between rounds has
   nothing to separate — it drew a second hairline 1px inside the block's own
   frame. */
.efs-cal--pager .efs-cal__round + .efs-cal__round {
	border-top: 0;
}

.efs-cal--pager .efs-cal__round:not(.is-active) {
	display: none;
}

.efs-cal--pager .efs-cal__matches {
	padding: 0;
}

@container (max-width: 620px) {
	/* Four columns at phone width turns every club name into an ellipsis, so the
	   fixture keeps the shape people expect: home, result, away. Where a day
	   heading states the date, the row no longer spends a line on it either — and
	   every millimetre it frees goes to the names, which are the one thing on the
	   row a phone reader cannot guess. The crest and the chip give up what they
	   can spare: a badge is still recognisable small, and a kickoff is four
	   characters wide. */
	.efs-cal__row {
		grid-template-columns: 1fr 3.4rem;
		grid-template-areas:
			"date round"
			"home chip"
			"away chip";
		gap: 0.35rem 0.5rem;
		padding: 0.6rem;
	}
	.efs-cal__date {
		grid-area: date;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.5rem;
	}
	.efs-cal__team--home {
		grid-area: home;
	}
	/* Both clubs read from the same left edge, on the same two tracks, so the
	   crests form a column and the names start at one x. The away cell keeps its
	   markup order — name then crest — and places the two explicitly rather than
	   reversing the flow, which is what left the two lines out of step. */
	.efs-cal__team {
		display: grid;
		grid-template-columns: 26px 1fr;
		align-items: center;
		gap: 0.5rem;
		text-align: left;
	}
	.efs-cal__team--away {
		grid-area: away;
	}
	.efs-cal__team .efs-cal__logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
	}
	.efs-cal__team .efs-cal__name {
		grid-column: 2;
		grid-row: 1;
	}

	/* A played match reads down the lines rather than across them: each club
	   keeps its own goals at the end of its own line, so the centre column has
	   nothing left to hold and the row uses its full width for names. A kickoff
	   is not a club's property, so an unplayed match keeps the single chip. */
	.efs-cal__row.is-done {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"date round"
			"home home"
			"away away";
	}
	.efs-cal__row.is-done .efs-cal__score {
		display: none;
	}
	.efs-cal__row.is-done .efs-cal__team {
		grid-template-columns: 26px 1fr auto;
	}
	/* One line box for both, whatever size the type is. The goals are set larger
	   than the club name, so on a played row the line grew and a column of
	   results stood 8px taller per row than the column of kick-offs beside it. */
	.efs-cal__name,
	.efs-cal__goals {
		line-height: 1.35rem;
	}

	.efs-cal__goals {
		display: block;
		grid-column: 3;
		grid-row: 1;
		min-width: 1.4rem;
		font-size: 1rem;
		font-weight: 800;
		text-align: right;
		font-variant-numeric: tabular-nums;
		color: var(--efs-head-bg);
	}
	/* The loser's number recedes with the loser's name, so the winner reads at a
	   glance without a second colour. */
	.efs-cal__row.has-winner .efs-cal__team:not(.is-winner) .efs-cal__goals {
		color: color-mix(in srgb, var(--efs-head-bg) 45%, transparent);
	}
	.efs-cal__score {
		grid-area: chip;
	}
	.efs-cal__name {
		font-size: 0.85rem;
	}
	.efs-cal__logo {
		width: 26px;
		height: 18px;
	}
	.efs-cal__chip {
		min-width: 3.2rem;
		padding: 0.3rem 0.25rem;
		font-size: 0.82rem;
	}
	.efs-cal__round-tag {
		grid-area: round;
	}

	.efs-cal__dayhead {
		padding-inline: 0.6rem;
	}
}

/* ---------- YouTube video grid (single row, like the news row) ---------- */
.efs-yt__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.efs-yt__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.efs-yt__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--efs-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.efs-yt__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.efs-yt__card:hover .efs-yt__thumb img {
	transform: scale(1.05);
}

/* Play button overlay (CSS triangle in a circle) */
.efs-yt__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1f2937) 85%, transparent);
	transition: background 0.2s, transform 0.2s;
}

.efs-yt__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.6rem 0 0.6rem 1rem;
	border-color: transparent transparent transparent var(--wp--preset--color--vit, #fff);
	transform: translateX(0.12rem);
}

.efs-yt__card:hover .efs-yt__play {
	background: var(--wp--preset--color--primary, #1f2937);
	transform: scale(1.08);
}

.efs-yt__title {
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.efs-yt__meta {
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

@media (max-width: 781px) {
	/* One row that scrolls horizontally on mobile (like the card/news rows). */
	.efs-yt__grid {
		grid-auto-columns: 78%;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 0.85rem;
	}
	.efs-yt__grid::-webkit-scrollbar { display: none; }
	.efs-yt__play { width: 2.5rem; height: 2.5rem; }
	.efs-yt__title { font-size: 0.9rem; }
}

/* ---------- Mobile: compact standings (#, Lag, S, P) + "show all" toggle ---------- */
.efs-cols-more__cb { display: none; }   /* hidden control, toggled via its label */
.efs-cols-more { display: none; }       /* desktop: full table, no toggle */

@media (max-width: 640px) {
	/* Compact default: hide V, O, F, Mål (columns 4–7); keep #, Lag, S, P. */
	.efs-table--standings { min-width: 0; }
	.efs-table--standings :is(th, td):nth-child(n+4):nth-child(-n+7) { display: none; }

	.efs-cols-more {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		margin-top: 0.75rem;
		cursor: pointer;
		font-weight: 700;
		font-size: 0.85rem;
		color: var(--wp--preset--color--primary, #1f2937);
	}
	.efs-cols-more__hide { display: none; }

	/* Expanded: reveal every column and let the table size to its content
	   (full team names, no truncation) — the wrapper scrolls sideways. */
	.efs-cols-more__cb:checked ~ .efs-table-scroll .efs-table--standings {
		table-layout: auto;
		width: max-content;
		min-width: 100%;
	}
	.efs-cols-more__cb:checked ~ .efs-table-scroll .efs-table--standings :is(th, td) { display: table-cell; }
	.efs-cols-more__cb:checked ~ .efs-table-scroll .efs-team__name {
		overflow: visible;
		text-overflow: clip;
	}
	.efs-cols-more__cb:checked ~ .efs-cols-more .efs-cols-more__show { display: none; }
	.efs-cols-more__cb:checked ~ .efs-cols-more .efs-cols-more__hide { display: inline; }
}

/* ---------- Live match badge ---------- */
/* A live match used to get three red things at once: a 2px ring around the whole
   card, the meta band repainted over the club's colour, and the dot. The card
   stopped being the club's card and became an alarm.
   The ring and the repaint are gone. The card keeps its identity and one marker
   carries the state — see .efs-live-badge, which solves on every palette what
   the repaint solved on dark ones.
   The reason the band was repainted was real and is worth keeping in view:
   #dc2626 measures 2.33:1 on a club's dark blue and 1.89:1 on a dark green, so a
   bare red dot is not legible there. The badge brings its own surface instead. */

/* The live marker. White plate, red hairline, red text — measured 2026-08-30:
   4.83:1 for the text on its own plate (AA, which a bare dot never attempted),
   9.1-14.7:1 for the plate against dark bands, and the hairline gives 3.4-4.4:1
   against the light ones a white plate would vanish into. */
.efs-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.28em;
	padding: 0.1em 0.45em;
	border: 1px solid var(--wp--preset--color--error, #dc2626);
	border-radius: 999px;
	background: var(--wp--preset--color--vit, #fff);
	color: var(--wp--preset--color--error, #dc2626);
	font-weight: 800;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* The minute rides alongside the badge, in the band's own ink. */
.efs-live-min {
	margin-left: 0.35em;
	font-variant-numeric: tabular-nums;
}

/* The word goes before the dot does: on a narrow card the dot and the minute
   are the information, "LIVE" is the label. */
@media ( max-width: 30rem ) {
	.efs-live-badge__word {
		display: none;
	}
}

/* The match page's own live marker, in the hero's meta line. */
.efs-md__live {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* A goal, marked. The score changes silently otherwise — look away and the
   thing you were waiting for has already happened. */
@keyframes efs-goal-flash {
	0%   { transform: scale( 1 ); }
	30%  { transform: scale( 1.18 ); }
	100% { transform: scale( 1 ); }
}

.efs-score-changed {
	animation: efs-goal-flash 0.5s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.efs-score-changed {
		animation: none;
		outline: 2px solid var(--wp--preset--color--error, #dc2626);
		outline-offset: 2px;
	}
}

.efs-live-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--error, #dc2626);
	vertical-align: middle;
	margin-right: 0.15rem;
	animation: efs-live-pulse 1.4s ease-in-out infinite;
}

@keyframes efs-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* A kicked-off match grows score plates (assets/js/live.js injects one per team
   row), so the kickoff plate has done its job and would otherwise sit beside
   them repeating a time that has passed. */
.efs-match--live .efs-match__kickoff,
.efs-match--ended .efs-match__kickoff {
	display: none;
}

/* Softened from 8%. A tint stays here on purpose where it went from the card:
   picking one live match out of 480 rows needs something visible at row scale,
   and a badge alone is not findable in a list that long. Two surfaces, two
   needs — one rule applied blindly to both would serve neither. */
.efs-cal__row--live {
	background: color-mix(in srgb, var(--wp--preset--color--error, #dc2626) 4%, transparent);
}
.efs-cal__row--live .efs-cal__date {
	color: var(--wp--preset--color--error, #dc2626);
	font-weight: 800;
}

/* ---------- Statistik hub (efs-stats: tabs + league) ---------- */
.efs-stats__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.efs-stats__head .efs-league-toggle {
	margin-bottom: 0;
}

.efs-stats__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 2px solid var(--efs-border);
}

.efs-stats__tab {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0.6rem 1rem;
	margin-bottom: -2px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.efs-stats__tab:hover {
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-stats__tab--active {
	color: var(--wp--preset--color--primary, #1f2937);
	border-bottom-color: var(--wp--preset--color--primary, #1f2937);
}

.efs-stats__panel[hidden] {
	display: none;
}

/* Right-side controls in the head: season selector + league toggle. */
.efs-stats__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
}

/* ---------- Dropdowns ----------
   A bare <select> takes no pseudo-element, so its arrow can only ever be the
   browser's — different on every platform, and impossible to give the right
   colour or spacing. Hence the wrapper: appearance is switched off on the
   control and the chevron is drawn on the wrapper in currentColor, so it follows
   the club's text colour like everything else.
   One rule set for all of them — season, round and club pickers were three
   near-copies before. */
.efs-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Drawn, not typed, so it inherits colour and needs no font to be present. */
.efs-select::after {
	content: "";
	position: absolute;
	right: 0.85rem;
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.12em);
	pointer-events: none;
	opacity: 0.65;
}

.efs-select > select {
	appearance: none;
	-webkit-appearance: none;
	/* Right padding is the chevron's room, and it is stated once rather than
	   guessed per platform. */
	padding: 0.5rem 2.3rem 0.5rem 0.9rem;
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	background: var(--wp--preset--color--vit, #fff);
	color: var(--wp--preset--color--primary, #1f2937);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.efs-select > select:hover {
	background: var(--efs-zebra);
}

/* The browser's own ring was a hard black box around the control. Clicking a
   select should not draw a focus ring at all; tabbing to it must. */
.efs-select > select:focus {
	outline: none;
}

.efs-select > select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

/* An open list is still the same control, so it keeps its own border rather
   than gaining a second one. */
.efs-select > select:active,
.efs-select > select:focus {
	border-color: var(--wp--preset--color--primary, #1f2937);
}

.efs-league-panel.efs-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* ---------- Overview = top-lists grouped by category ---------- */
.efs-overview__cat + .efs-overview__cat {
	margin-top: 2.5rem;
}

.efs-overview__cat-title {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-leaderboard-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.efs-leaderboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.efs-leaderboard-grid {
		grid-template-columns: 1fr;
	}
}

/* A stat list is the same object wherever it appears, so the card is a title
   with a table under it and nothing more — the table brings its own frame, head
   band and zebra, exactly as on the front page. The previous version wrapped it
   in a floating white panel with two hand-written rgba shadows, which read as a
   different component and broke the theme's rule that shadows come from the
   palette. A soft shadow also contradicts a profile whose card radius is zero. */
.efs-leaderboard-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.efs-leaderboard-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1f2937);
}

/* Rank badge, on every surface that renders a leaderboard — the markup carries
   .efs-rank-badge everywhere, so scoping the style to the stats page was what
   made the two look different. #1 takes the head colour. */
.efs-table--leaderboard .efs-col-rank {
	width: 2.75rem;
}

.efs-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: var(--efs-radius);
	background: var(--wp--preset--color--ljus, #f5f6f7);
	color: var(--wp--preset--color--primary, #1f2937);
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.efs-table--leaderboard tbody tr:first-child .efs-rank-badge {
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
}

.efs-table--leaderboard .efs-col-team {
	width: 100%;
}

/* Player leaderboard. Same column skeleton as .efs-table--leaderboard: a fixed
   rank badge, the name taking the slack, the value right. The position column is
   the only addition, and it is the first thing to go on a phone — the metric is
   why someone opened the list, the position is context. */
.efs-table--players .efs-col-rank {
	width: 2.75rem;
}

.efs-table--players .efs-col-team {
	width: 100%;
}

/* The value column needs a width of its own. With table-layout: fixed and the
   name column claiming width: 100%, an unsized value column collapses to
   almost nothing and the number wraps onto a second line — which silently
   turned row height into a function of how many characters the value happens
   to have. "13" wrapped and "9" did not, so one list rendered three tall rows
   and two short ones; a per-90 metric like "0.53" made every row tall. Both
   sibling tables already size this column (--standings 3rem, --leaderboard
   5.5rem); this one never did. nowrap is the belt to that braces: a value
   wider than the column overflows rather than growing the row. */
.efs-table--players .efs-col-pts {
	width: 3.5rem;
	white-space: nowrap;
}

/* The width applies to the column, so it stays on the class. The dimmed body
   colour must not: on a th it paints the head's own navy text over the navy
   head background, leaving "Pos" invisible in every non-compact player list. */
.efs-table--players .efs-col-pos {
	width: 3.25rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.efs-table--players td.efs-col-pos {
	color: var(--wp--preset--color--primary, #1f2937);
	opacity: 0.65;
}

.efs-table--players tbody tr:first-child .efs-rank-badge {
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
}

@media (max-width: 480px) {
	.efs-table--players .efs-col-pos {
		display: none;
	}
}

/* "Se mer": the full ranking is already in the markup, so revealing it is a
   class flip and not a request. Same checkbox-plus-label mechanism the standings
   use for their column toggle, which means it works with JavaScript disabled.
   The checkbox, the table wrapper and the label have to stay siblings for the
   ~ selectors below to reach across. */
.efs-more__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.efs-row--extra {
	display: none;
}

.efs-more__cb:checked ~ .efs-table-scroll .efs-row--extra {
	display: table-row;
}

.efs-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
	color: var(--wp--preset--color--primary, #1f2937);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

/* The chevron, drawn rather than typed, so it turns when the list opens. */
.efs-more::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.15s;
}

.efs-more__cb:checked ~ .efs-more::after {
	transform: rotate(-135deg) translateY(-0.1em);
}

.efs-more:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Keyboard focus lands on the hidden checkbox, so the ring has to be drawn on
   the label it controls. */
.efs-more__cb:focus-visible ~ .efs-more {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

.efs-more__hide {
	display: none;
}

/* The same control, but it leaves the page. A chevron pointing down promises
   more rows below; this one points the way it actually goes. */
.efs-more--link {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #3F34FD);
}

.efs-more--link::after {
	transform: rotate(-45deg) translateX(-0.05em);
	transition: transform 0.15s ease-out;
}

.efs-more--link:hover::after,
.efs-more--link:focus-visible::after {
	transform: rotate(-45deg) translate(0.12em, -0.12em);
}

.efs-more--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

.efs-more__cb:checked ~ .efs-more .efs-more__show {
	display: none;
}

.efs-more__cb:checked ~ .efs-more .efs-more__hide {
	display: inline;
}

/* Form column shares the team card's badges — see .efs-form__item above. */
.efs-col-form {
	white-space: nowrap;
}

/* ---------- Team logo banner ---------- */
.efs-logo-banner {
	--efs-logo-h: 48px;
	text-align: center;
}

.efs-logo-banner__title {
	margin: 0 0 1.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-logo-banner__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

/* Grid variant: one row per series. Both Ettan series carry 16 clubs, so a row
   is a series — top row Norra, bottom row Södra — and the block lands on exactly
   two rows instead of wrapping to a ragged orphan row of four.
   The crests size themselves to their column rather than to a fixed height, so
   sixteen always fit the content width; --efs-logo-h becomes a ceiling rather
   than the size. */
.efs-logo-banner__grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.efs-logo-banner__row {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: clamp(0.35rem, 1vw, 0.9rem);
	align-items: center;
}

.efs-logo-banner__grid .efs-logo-banner__logo {
	height: auto;
	width: 100%;
	max-width: 100%;
	max-height: var(--efs-logo-h);
}

/* Between phone and desktop sixteen columns leaves the crests too small to read,
   so each series takes two rows of eight instead. */
@media (max-width: 1024px) {
	.efs-logo-banner__row {
		grid-template-columns: repeat(8, 1fr);
	}
}

/* Opt-in: the same crests already run across the top of every page in the header
   strip, so on a phone the grid repeats them at the cost of a lot of scrolling.
   Off by default — a club that shows this banner today keeps showing it. */
@media (max-width: 781px) {
	.efs-logo-banner-block--hide-mobile {
		display: none;
	}
}

/* The federation canvas is 16:9 with the mark centred at full height, so each
   crest carries transparent padding on both sides: the canvas is 1.79 times the
   height while the average mark is 0.875 of it, leaving about 0.455 per side.
   That padding sits between neighbouring crests and reads as spacing nobody
   asked for — the banner looked evenly spaced when the marks were square and
   filled their canvas. Pulling each item in by that measured amount cancels the
   padding, so `gap` again means the space you actually see.
   --efs-crest-pad is the padding on ONE side, so it is negated once per side,
   not halved: halving it corrects only half the gap. */
.efs-logo-banner {
	--efs-crest-pad: calc(var(--efs-logo-h) * 0.455);
}

.efs-logo-banner__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline: calc(var(--efs-crest-pad) * -1);
}

.efs-logo-banner__logo {
	height: var(--efs-logo-h);
	width: auto;
	max-width: calc(var(--efs-logo-h) * 1.8);
	object-fit: contain;
	transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}

.efs-logo-banner__item:hover .efs-logo-banner__logo {
	transform: scale(1.08);
}

/* Optional monochrome variant: grey at rest, full colour on hover. */
.efs-logo-banner--gray .efs-logo-banner__logo {
	filter: grayscale(1);
	opacity: 0.65;
}

.efs-logo-banner--gray .efs-logo-banner__item:hover .efs-logo-banner__logo {
	filter: grayscale(0);
	opacity: 1;
}

/* Logo banner — single-row strip (header-style), scrolls sideways on overflow. */
.efs-logo-banner-block--strip {
	padding-block: 0.6rem;
}

/* Strip uses the full viewport width (no content-size constraint) so logos
   spread edge-to-edge instead of scrolling inside an empty padded box. */
.efs-logo-banner-block--strip > .efs-inner {
	max-width: none;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.efs-logo-banner--strip .efs-logo-banner__track {
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow-x: auto;
	scrollbar-width: none;
	gap: clamp(0.85rem, 2.5vw, 1.75rem);
	-webkit-overflow-scrolling: touch;
}

.efs-logo-banner--strip .efs-logo-banner__track::-webkit-scrollbar {
	display: none;
}

.efs-logo-banner--strip .efs-logo-banner__item {
	flex: 0 0 auto;
}

/* Only where the site opted into the header strip (body.efs-header-strip, set in
   inc/header-logo-strip.php): the strip replaces the theme's partner banner, so
   hide the banner. Unscoped, this hid a club's OWN partner logos on every site
   that installed the plugin. */
.efs-header-strip .site-header .partner-banner {
	display: none !important;
}

.efs-header-strip .site-header .efs-logo-banner-block {
	border-bottom: 1px solid var(--wp--preset--color--border, #e6e8eb);
}

/* Scroll behaviour: shift the whole sticky header up by the strip's height so
   the strip slides above the viewport while the menu bar stays at the top. Uses
   `top` (not height) → no reflow, no jitter. The .efs-strip-away class is toggled
   on the sticky wrapper by assets/js/header-strip.js; --efs-strip-h is the
   measured strip height. Smooth on desktop + mobile (theme disables the wrapper
   transition on mobile, so we re-enable it here). */
.header-sticky-wrapper {
	transition: top 0.3s ease;
}

.header-sticky-wrapper.efs-strip-away {
	top: calc( var(--wp-admin--admin-bar--height, 0px) - var(--efs-strip-h, 0px) ) !important;
}

/* ---------- Team directory (Lagen list) ---------- */
.efs-club-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
	background: var(--wp--preset--color--vit, #fff);
}

.efs-club-list__item + .efs-club-list__item {
	border-top: 1px solid var(--efs-border);
}

/* Wrapper that keeps the anchor out of the theme's `li > a` rule — see the note
   in inc/team-directory-block.php. A span is inline by default, so it has to be
   told to behave like the row it replaced. */
.efs-club-list__row {
	display: block;
}

.efs-club-list__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 1rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}

.efs-club-list__link:hover {
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.efs-club-list__logo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.efs-club-list__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.efs-club-list__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.efs-club-list__name {
	font-weight: 700;
}

.efs-club-list__meta {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-club-list__rank {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-club-list__arrow {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.4;
}

/* ---------- Club detail ---------- */
/* ---------- Club hero ----------
   The first screen used to spend itself on a template heading, a back link and a
   name, with the table position set in grey at footnote size. The club's colour
   carries the band, the position is the headline figure, and the next match gets
   a strip of its own. */
.efs-club-hero {
	padding: 1.6rem 1.75rem 1.4rem;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
}

.efs-club-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--efs-meta-text);
}

.efs-club-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.efs-club-hero__eyebrow a:hover {
	text-decoration: underline;
}

.efs-club-hero__row {
	display: flex;
	align-items: flex-end;
	gap: 1.4rem;
	flex-wrap: wrap;
}

.efs-club-hero__logo {
	flex: 0 0 auto;
	width: 140px;
	height: 78px;
	object-fit: contain;
}

.efs-club-hero__id {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.efs-club-hero__name {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: inherit;
}

.efs-club-hero__standing {
	flex: 0 0 auto;
	text-align: right;
	line-height: 1;
}

/* The page's headline figure. */
.efs-club-hero__rank {
	display: block;
	font-size: clamp(2.75rem, 7vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.efs-club-hero__rank-meta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	color: var(--efs-meta-text);
}

/* Next match: often the only reason the page was opened, so it is not buried
   under four panels of analysis. Accent, because it points forward — the same
   meaning it carries on the match cards. */
.efs-club-next {
	display: flex;
	align-items: baseline;
	gap: 0.6rem 1.1rem;
	flex-wrap: wrap;
	padding: 0.85rem 1.75rem;
	background: var(--efs-kickoff-bg);
	color: var(--efs-kickoff-text);
}

.efs-club-next__label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
}

.efs-club-next__teams {
	font-size: 1.05rem;
	font-weight: 700;
}

.efs-club-next__when {
	font-size: 0.8rem;
	opacity: 0.85;
}

/* The things that never change, at the weight of things that never change. */
.efs-club-facts {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0.8rem 1.75rem;
	background: var(--wp--preset--color--vit, #fff);
	border-bottom: 1px solid var(--efs-border);
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-club-facts a {
	color: inherit;
}

.efs-club-facts__sep {
	opacity: 0.45;
}

/* The card sits flush under the hero rather than as a second floating box. */
.efs-club-detail__stats .efs-team-card {
	border: 0;
	border-radius: 0;
}

.efs-club-detail .efs-team-head {
	display: none;
}

/* ---------- Squad ----------
   Four position groups, read in team-sheet order. No portraits: the provider
   serves the same silhouette for nearly everyone, so a grid of them would be a
   grid of identical grey circles. The number, the name, the age and — where
   there is one — the player's goal tally from our own scorer list. */
.efs-squad {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.efs-squad__title {
	margin: 0;
}

.efs-squad__meta {
	margin: 0.2rem 0 1.1rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-squad__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--efs-border);
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	overflow: hidden;
}

.efs-squad__group {
	padding: 1rem 1.15rem 1.1rem;
	background: var(--wp--preset--color--vit, #fff);
}

.efs-squad__pos {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-squad__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.efs-squad__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.efs-player {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.4rem 0;
	font-size: 0.9rem;
}

.efs-player + .efs-player {
	border-top: 1px solid var(--efs-border);
}

/* Fixed width so the names line up whatever the number. */
.efs-player__number {
	flex: 0 0 1.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-player__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.efs-player__age {
	flex: 0 0 auto;
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* Only shown when there is something to show, so it reads as a mark of note
   rather than a column of zeroes. */
.efs-player__goals {
	flex: 0 0 auto;
	min-width: 1.35rem;
	padding: 0.05rem 0.3rem;
	border-radius: var(--efs-radius);
	background: var(--efs-score-win-bg);
	color: var(--efs-score-win-text);
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* 6. The results list sat flush against the white stats block above it. */
.efs-club-detail__matches {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

/* 8. Scoped to the club page so the calendar keeps its own look: rows on white,
   separated by hairlines only between them, and the score as the same plate the
   match cards use. A box with a dark border on a grey field is what made these
   read as a spreadsheet. */
.efs-club-fixtures .efs-cal {
	border: 0;
	border-radius: 0;
}

.efs-club-fixtures .efs-cal__score {
	min-width: 2.6rem;
	padding: 0.15rem 0.45rem;
	border-radius: var(--efs-radius);
	background: var(--efs-score-neutral-bg);
	color: var(--efs-score-neutral-text);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.efs-club-fixtures .efs-cal__round-tag {
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-club-fixtures__title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

@media (max-width: 781px) {
	.efs-club-detail__matches {
		grid-template-columns: 1fr;
	}
}


/* Standings: the row for the site's own club (or a block's chosen club). The table
   is never filtered to one team — this is how you spot yourself in it. Uses the
   theme palette so it inherits each club's colours. */
.efs-table--standings tr.efs-row--us > td {
	background: color-mix( in srgb, var( --wp--preset--color--primary, #1f2937 ) 10%, transparent );
	font-weight: 700;
}

.efs-table--standings tr.efs-row--us > td:first-child {
	box-shadow: inset 3px 0 0 0 var( --wp--preset--color--primary, #1f2937 );
}

/* ==========================================================================
   Statistics table (sportadmin-cards/efs-stats-table) and its card drawer.

   Built on the existing tokens rather than new colours: the head is
   --efs-head-bg like every other table, the segmented set selector is
   .efs-league-toggle, and the card's strip uses the theme's own player-card
   tokens (navy strip, yellow number). Radius comes from --efs-radius, which
   this brand resolves to 0 — no literal radii here.
   ========================================================================== */

/* The table carries the tokens it uses, so an embedded copy needs no
   .efs-block wrapper — that class is a full-width section and brings padding
   the host has already accounted for. */
.efs-stats-table {
	--efs-border: var(--wp--preset--color--border, #C3CBDA);
	--efs-radius: var(--wp--custom--card-radius, 0);
	--efs-head-bg: var(--wp--preset--color--primary, #002B4F);
	--efs-head-text: var(--wp--preset--color--vit, #fff);
	--efs-zebra: color-mix(in srgb, currentColor 4%, transparent);
}

.efs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Basis and row count share one baseline: on two rows the count hung in the
   air above the sentence it belongs to. */
/* One filter line: the active tab's own controls on the left, the shared season
   and league controls on the right. No rule under it — the table's own navy head
   starts two lines below and a hairline between them read as a stray divider. */
.efs-stats__filters {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
}

.efs-stats__filterset {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.efs-stats__filterset[hidden] {
	display: none;
}

.efs-stats__filters .efs-stats__controls {
	margin-left: auto;
}

.efs-stats-table .efs-controls-bar {
	border-bottom: 0;
	margin-bottom: 1.1rem;
}

.efs-st__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 0.5rem;
}

.efs-st__basis {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1f2937);
}

.efs-st__count {
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	font-variant-numeric: tabular-nums;
}

.efs-st__sets {
	flex: 0 0 auto;
}

.efs-st__pos {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1f2937);
	background: var(--wp--preset--color--vit, #fff);
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	padding: 0.5rem 0.65rem;
}

/* The head is already navy with white labels; this only turns the label into a
   button and marks the sorted column with the head's own ink — no new hue. */
.efs-table thead th.efs-st__sortable {
	padding: 0;
}

.efs-table thead th.efs-st__sortable button {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	padding: 0.6rem 0.5rem;
	width: 100%;
	text-align: inherit;
	white-space: nowrap;
	opacity: 0.72;
}

.efs-table thead th.efs-st__sortable button:hover {
	opacity: 1;
}

.efs-table thead th.efs-st__sortable button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.efs-table thead th.efs-st__sortable button.efs-st__sorted {
	opacity: 1;
	font-weight: 700;
}

/* Printed only where a column's unit differs from the set's basis. */
.efs-st__unit {
	display: block;
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.75;
	text-transform: none;
	letter-spacing: 0;
}

/* Wide enough that a five-character value never eats its own padding. */
.efs-table--players.efs-st__table .efs-col-pts {
	width: 5rem;
	white-space: nowrap;
}

.efs-st__table tbody tr {
	cursor: pointer;
}

.efs-st__table tbody tr:hover td {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 7%, var(--wp--preset--color--vit, #fff));
}

.efs-st__table tbody tr:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: -2px;
}

.efs-st__none {
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-st__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 0.1rem 0;
}

.efs-st__more {
	appearance: none;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	border: 0;
	border-radius: var(--efs-radius);
	padding: 0.65rem 1.35rem;
}

.efs-st__more[hidden] {
	display: none;
}

/* margin-left:auto rather than space-between, so the credit stays right even
   when the button beside it is gone. */
.efs-st__credit {
	margin: 0 0 0 auto;
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-st__credit b {
	color: var(--wp--preset--color--primary, #1f2937);
}

/* ---------- one tooltip, for headings and spider vertices alike ---------- */
.efs-st__tip {
	position: fixed;
	pointer-events: none;
	opacity: 0;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	padding: 0.4rem 0.6rem;
	font-size: 0.74rem;
	line-height: 1.35;
	max-width: 17rem;
	transform: translate(-50%, -100%);
	transition: opacity 0.1s;
	z-index: 100004;
}

.efs-st__tip.is-on {
	opacity: 1;
}

/* The rich variant: a small card rather than a line of text. Same element, same
   positioning — only the content is different. */
.efs-st__tip--rich {
	max-width: 15rem;
	padding: 0;
	text-align: left;
}

.efs-cp__tip-head {
	display: block;
	padding: 0.5rem 0.7rem 0.45rem;
	border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent);
}

.efs-cp__tip-head strong {
	display: block;
	font-size: 0.86rem;
	font-weight: 800;
	line-height: 1.2;
}

.efs-cp__tip-head em {
	display: block;
	margin-top: 0.1rem;
	font-style: normal;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.efs-cp__tip-body {
	display: block;
	padding: 0.45rem 0.7rem 0.55rem;
}

.efs-cp__tip-body span {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.11rem 0;
}

.efs-cp__tip-body i {
	font-style: normal;
	opacity: 0.72;
}

.efs-cp__tip-body b {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* No help cursor. A question mark on the pointer is a Windows 97 tell, and the
   tooltip announces itself by appearing. */

.efs-st__hit {
	cursor: pointer;
}

.efs-st__hit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

/* ---------- the card drawer ---------- */
/* The drawer, its scrim, the tooltip and the toast all live at the end of
   <body>, outside any .efs-block — so the --efs-* tokens are undefined there and
   var(--efs-head-bg) resolved to nothing, which paints black. They carry their
   own copies.

   The z-index is above the theme's sticky site header, which sits at 100001: at
   41 the header covered the card's top 72px, taking the club and the name with
   it and making the header look like it had scrolled away. */
.efs-st__card,
.efs-st__scrim,
.efs-st__tip,
.efs-st__toast {
	--efs-border: var(--wp--preset--color--border, #C3CBDA);
	--efs-radius: var(--wp--custom--card-radius, 0);
	--efs-head-bg: var(--wp--preset--color--primary, #002B4F);
	--efs-head-text: var(--wp--preset--color--vit, #fff);
}

.efs-st__scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 27, 51, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 100002;
}

.efs-st__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* The theme already has an off-canvas panel — its navigation drawer — so this
   borrows that treatment: same width, same left-cast shadow, same easing. No
   border: a light hairline against the navy strip reads as a seam. */
.efs-st__card {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 92vw);
	z-index: 100003;
	background: var(--wp--preset--color--vit, #fff);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
	overflow-y: auto;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
}

.efs-st__card.is-open {
	transform: translateX(0);
}

@media (max-width: 640px) {
	.efs-st__card {
		width: 100%;
		top: auto;
		bottom: 0;
		height: 88%;
		transform: translateY(100%);
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
	}

	.efs-st__card.is-open {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.efs-st__card,
	.efs-st__scrim {
		transition: none;
	}
}

/* Sticky: the card scrolls past two spiders, and the reader has to keep knowing
   whose numbers these are. */
.efs-st__strip {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--wp--preset--color--player-card-strip-bg, var(--efs-head-bg));
	color: var(--wp--preset--color--player-card-text, #fff);
	padding: 1rem 1.25rem 1.1rem;
}

/* z-index, because .efs-st__club carries opacity < 1 — which makes it a
   stacking context painted like a positioned element, and being later in the
   DOM it covered the middle of this button. The corners were clickable and the
   centre was not, which is a worse bug than a dead button. */
.efs-st__close {
	position: absolute;
	z-index: 1;
	top: 0.6rem;
	right: 0.6rem;
	appearance: none;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	width: 1.9rem;
	height: 1.9rem;
}

.efs-st__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.efs-st__club {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.76rem;
	opacity: 0.85;
	margin-bottom: 0.6rem;
}

.efs-st__club img {
	width: 28px;
	height: 16px;
	object-fit: contain;
}

.efs-st__name {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.03;
	text-wrap: balance;
	padding-right: 2.5rem;
}

/* Its own name, not a variant of the table's meta row: one flex rule for two
   unrelated elements is how a stylesheet starts fighting itself. */
.efs-st__submeta {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
	opacity: 0.82;
}

.efs-st__card-body {
	padding: 1.15rem 1.25rem 2rem;
}

/* The theme colours headings explicitly, which beats inheritance — so the name
   rendered navy on the navy strip, which is to say invisibly. */
.efs-st__strip .efs-st__name,
.efs-st__strip .efs-st__club,
.efs-st__strip .efs-st__submeta {
	color: inherit;
}

/* Value and percentile in two labelled columns. The meter measures the number
   printed beside it, never the one in the value column. */
.efs-st__metrics {
	display: grid;
	grid-template-columns: 1fr auto 108px;
	align-items: center;
	gap: 0.55rem 0.9rem;
	margin-bottom: 1.4rem;
}

.efs-st__mh {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--efs-border);
}

.efs-st__mh.is-right {
	text-align: right;
}

.efs-st__mn {
	font-size: 0.82rem;
}

.efs-st__mv {
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.efs-st__mp {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: flex-end;
}

/* Square ends, not the rounded data-end a chart would take: this brand resolves
   every radius to 0 and the system outranks the default. */
.efs-st__meter {
	position: relative;
	flex: 1;
	height: 6px;
	background: var(--wp--preset--color--ljus, #DFE3EC);
}

.efs-st__meter i {
	display: block;
	height: 6px;
	background: var(--efs-head-bg);
}

/* Median reference, so a short meter reads as "below half the division" rather
   than merely "short". */
.efs-st__meter::after {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: 50%;
	width: 1px;
	background: var(--efs-head-bg);
	opacity: 0.35;
}

.efs-st__mp b {
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 2.6em;
	text-align: right;
}

.efs-st__mnone {
	grid-column: 2 / span 2;
	text-align: right;
	font-size: 0.74rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-st__sec {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	margin: 0 0 0.6rem;
}

/* Totals divided by hairlines, the way the standings divide their columns. */
.efs-st__tot {
	display: flex;
	border-top: 1px solid var(--efs-border);
	border-bottom: 1px solid var(--efs-border);
	margin-bottom: 1.5rem;
}

.efs-st__tot > div {
	flex: 1;
	padding: 0.6rem 0.3rem;
	text-align: center;
	border-left: 1px solid var(--efs-border);
}

.efs-st__tot > div:first-child {
	border-left: 0;
}

.efs-st__tot i {
	display: block;
	font-style: normal;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-st__tot b {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Two spiders stacked: the drawer is 420px, so side by side would shrink both
   below readability. */
.efs-st__spiders {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-bottom: 1.3rem;
}

.efs-st__spider {
	margin: 0;
	position: relative;
}

.efs-st__spider svg {
	display: block;
	width: 100%;
	height: auto;
}

/* A label with a rule under it — the same device the table head uses, so a
   section reads as a section instead of a caption floating over a chart. */
.efs-st__spider figcaption {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	margin: 0 0 0.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--efs-border);
}

.efs-st__legend {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
	font-size: 0.7rem;
	margin-top: 0.15rem;
}

.efs-st__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.efs-st__legend i {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
}

/* The swatches mirror the marks: a filled pale shape, and an outlined one. */
.efs-st__legend i.ref {
	background: var(--wp--preset--color--ljus, #DFE3EC);
	box-shadow: inset 0 0 0 1px var(--efs-border);
}

.efs-st__legend i.you {
	background: color-mix(in srgb, var(--efs-head-bg) 18%, var(--wp--preset--color--vit, #fff));
	box-shadow: inset 0 0 0 1.5px var(--efs-head-bg);
}

.efs-st__scale {
	font-size: 0.66rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	margin: 0.1rem 0 1.3rem;
}

.efs-st__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--efs-border);
}

/* Quiet on purpose: a full-width filled bar made sharing the loudest thing on
   a card whose point is the statistics. */
.efs-st__share {
	appearance: none;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	background: none;
	color: var(--wp--preset--color--primary, #1f2937);
	border: 1px solid var(--efs-border);
	border-radius: var(--efs-radius);
	padding: 0.4rem 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.efs-st__share:hover {
	border-color: var(--wp--preset--color--primary, #1f2937);
}

.efs-st__share:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

.efs-st__share svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.efs-st__toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%) translateY(10px);
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	padding: 0.6rem 1.15rem;
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0;
	transition: all 0.18s ease;
	z-index: 100004;
	pointer-events: none;
}

.efs-st__toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Match page (sportadmin-cards/efs-match-detail)

   The club's own graphics carry a navy block with the score and a plain list of
   numbers under it. That reads once in a feed; a page repeats and needs a
   hierarchy, so the score keeps the navy block and everything below it stays
   quiet. One accent, used for the away side of a comparison and for the two
   calls to action — nothing else competes.
   ========================================================================== */

/* The match page is normally the only block on its page, so nothing above it
   supplies a side gutter the way a group wrapper does elsewhere. It carries its
   own, matching the inset the theme uses for content. */
.efs-md {
	--efs-md-gutter: clamp(1rem, 4vw, 2.5rem);
}

.efs-md > .efs-inner {
	padding-inline: var(--efs-md-gutter);
}

/* The hero names the round, the date, the venue and both clubs, so the page
   title above it can only ever say "Match" — a heading that repeats nothing and
   labels a page the reader arrived at by clicking a fixture. The block hides it
   where it renders, so no club has to build a title-less template for it. The
   query-loop exclusion keeps news titles on a page that also holds a match.
   Browsers without :has() simply keep the heading. */
body:has(.efs-md) .wp-block-post-title:not(:where(.wp-block-query *)),
body:has(.efs-cp) .wp-block-post-title:not(:where(.wp-block-query *)) {
	display: none;
}

.efs-md__hero {
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	padding: 1.5rem 1.25rem 1.75rem;
}

.efs-md__meta > * + *::before {
	content: " · ";
	opacity: 0.6;
}

.efs-md__meta {
	margin: 0 0 1.1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
	text-align: center;
}

.efs-md__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

.efs-md__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.efs-md__crest {
	width: 72px;
	height: 40px;
	object-fit: contain;
}

.efs-md__club {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

/* The one number the page exists for. Proportional figures, not tabular: a
   score is read, not aligned in a column. */
/* The dash is set smaller than the goals and given air on both sides. At a
   phone's score size an en dash on the same body as the digits is nearly as wide
   as one, and 1–5 reads as a single three-figure word. */
.efs-md__score {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.14em;
	font-size: clamp(2.25rem, 8vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.efs-md__dash {
	font-size: 0.62em;
	font-weight: 600;
	opacity: 0.65;
	transform: translateY(-0.12em);
}

.efs-md__time {
	display: inline-block;
	background: var(--wp--preset--color--accent, #3F34FD);
	color: #fff;
	padding: 0.4rem 0.8rem;
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.efs-md__sec {
	padding: 2.25rem 0 0;
}

.efs-md__h {
	margin: 0 0 1rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-md__note {
	margin: 0.7rem 0 0;
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-md__none {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---------- form ---------- */
/* Form sits on the page like a comparison row: the run of results on each side,
   the label between them. A card around it made it a separate object and forced
   the club name to be repeated inside. */
.efs-md__cmp-row--form {
	grid-template-columns: auto 1fr auto;
	padding-bottom: 0.35rem;
}

.efs-md__form {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.efs-md__form.is-away {
	justify-content: flex-end;
}

/* ---------- comparison rows ---------- */
.efs-md__cmp {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.efs-md__cmp-row {
	display: grid;
	grid-template-columns: 4.5rem 1fr 4.5rem;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.efs-md__cmp-v {
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-md__cmp-row .efs-md__cmp-v:first-child {
	text-align: left;
}

.efs-md__cmp-row .efs-md__cmp-v:nth-child(3) {
	text-align: right;
}

/* The side that is ahead comes forward. Weight and ink only — a colour here
   would fight the track below. */
.efs-md__cmp-v.is-lead {
	color: var(--wp--preset--color--primary, #1f2937);
	font-weight: 800;
}

.efs-md__cmp-label {
	text-align: center;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* One track split between the two clubs: navy from the left, accent taking the
   remainder. The difference reads before either number does. */
.efs-md__cmp-track {
	grid-column: 1 / -1;
	display: block;
	height: 9px;
	background: var(--wp--preset--color--accent, #3F34FD);
}

/* The seam is the reading: two clubs meeting at a share, not one line ruled
   across the row. */
.efs-md__cmp-home {
	display: block;
	height: 9px;
	background: var(--efs-head-bg);
	box-shadow: 2px 0 0 0 var(--wp--preset--color--ljus, #DFE3EC);
}

/* ---------- timeline ---------- */
/* A timeline, not a list of boxes. Twenty bordered cards stacked with gaps was
   twenty framed objects where the page needed one thread: the minutes run down
   a spine in the middle, each team's events hang off their own side, and the
   line breaks around every minute so it reads as beads on a thread. */
.efs-md__tl {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.efs-md__tl::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 50%;
	width: 1px;
	transform: translateX(-0.5px);
	background: color-mix(in srgb, var(--efs-head-bg) 18%, transparent);
}

/* Five tracks, mirrored about the spine: name, glyph, minute, glyph, name. The
   glyph tracks are a fixed width rather than auto — with auto, a row whose event
   has a glyph on one side only sized its tracks differently from its neighbours
   and the minutes wandered 15px across the column, which is the one thing a
   spine cannot do. A constant gutter beside the thread keeps it straight. */
.efs-md__tl-row {
	display: grid;
	grid-template-columns: 1fr 1.15rem 3.5rem 1.15rem 1fr;
	align-items: baseline;
	gap: 0 0.45rem;
	padding: 0.3rem 0;
	background: none;
	border: 0;
}

/* Home reads inward from the left, away outward to the right; the minute stays
   on the spine for both, so every minute in the match lines up in one column. */
/* Every cell names its row as well as its column. The markup runs minute,
   glyph, name, so a column-only rule left auto-placement to push the earlier
   columns onto rows of their own and every home event stood twice as tall as
   the away ones. */
.efs-md__tl-row .efs-md__tl-what {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
}

.efs-md__tl-row .efs-md__tl-icon {
	grid-column: 2;
	grid-row: 1;
}

.efs-md__tl-row.is-away .efs-md__tl-what {
	grid-column: 5;
	grid-row: 1;
	text-align: left;
}

.efs-md__tl-row.is-away .efs-md__tl-icon {
	grid-column: 4;
	grid-row: 1;
}

.efs-md__tl-icon {
	font-size: 0.85rem;
	line-height: 1.3;
	opacity: 0.75;
}

.efs-md__tl-crest {
	display: none;
}

.efs-md__tl-min {
	grid-column: 3;
	grid-row: 1;
	justify-self: center;
	padding: 0.1rem 0.35rem;
	background: var(--wp--preset--color--ljus, #DFE3EC);
	font-size: 0.76rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--efs-head-bg) 70%, transparent);
}

/* A goal is the one event worth marking, and the spine is where to mark it —
   a filled minute instead of a coloured bar stuck to the row's edge. */
.efs-md__tl-row.is-goal .efs-md__tl-min {
	background: var(--efs-head-bg);
	color: var(--efs-head-text, #fff);
}

.efs-md__tl-what {
	font-size: 0.9rem;
	font-weight: 600;
}

.efs-md__tl-row.is-goal .efs-md__tl-what {
	font-weight: 800;
}

.efs-md__tl-sub {
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---------- momentum ---------- */
/* No box. A white rectangle with grey gridlines and system numerals is what
   makes a chart read as pasted in from a spreadsheet — so the plot sits on the
   page's own ground and the only frame is the baseline. */
.efs-md__chart {
	margin: 0;
}

.efs-md__mom {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Gridlines are one shade off the ground and solid — dashes would read as a
   threshold. The baseline is the one that carries weight. */
.efs-md__grid {
	stroke: color-mix(in srgb, var(--efs-head-bg) 14%, transparent);
	stroke-width: 1;
}

.efs-md__grid.is-base {
	stroke: color-mix(in srgb, var(--efs-head-bg) 32%, transparent);
}

/* The axis wears the same eyebrow voice as every label on the page, so the
   numbers belong to this site rather than to the renderer's default font. */
.efs-md__axis {
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--wp--preset--color--text-secondary, #6b7280);
}

/* Area under each curve: body without competition. Two translucent fills still
   read where they cross, which is the moment worth seeing. */
.efs-md__area {
	stroke: none;
}

.efs-md__area.is-home {
	fill: color-mix(in srgb, var(--efs-head-bg) 14%, transparent);
}

.efs-md__area.is-away {
	fill: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 11%, transparent);
}

.efs-md__line {
	fill: none;
	stroke-width: 2.75;
	stroke-linejoin: round;
}

/* A goal, on the curve. The tick is quiet; the dot on the top rail carries the
   colour of whoever scored. */
.efs-md__goal-tick {
	stroke: color-mix(in srgb, var(--efs-head-bg) 22%, transparent);
	stroke-width: 1;
}

.efs-md__goal-dot.is-home {
	fill: var(--efs-head-bg);
}

.efs-md__goal-dot.is-away {
	fill: var(--wp--preset--color--accent, #3F34FD);
}

.efs-md__end-v {
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	fill: #fff;
}

.efs-md__legend i.is-goal {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--efs-head-bg);
}

.efs-md__legend {
	display: flex;
	gap: 1.1rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	font-size: 0.75rem;
}

.efs-md__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.efs-md__legend i {
	width: 14px;
	height: 3px;
	flex: 0 0 auto;
}

.efs-md__legend i.is-home {
	background: var(--efs-head-bg);
}

.efs-md__legend i.is-away {
	background: var(--wp--preset--color--accent, #3F34FD);
}

/* ---------- calls to action, and the player that is not wired yet ---------- */
.efs-md__cta {
	display: inline-block;
	background: var(--wp--preset--color--accent, #3F34FD);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.75rem 1.4rem;
	border: 0;
}

.efs-md__cta:hover,
.efs-md__cta:focus {
	color: #fff;
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 85%, #000);
}

/* A control with nowhere to go says so: hairline, not a filled button that
   looks clickable and is not. */
.efs-md__cta.is-pending {
	background: transparent;
	color: var(--wp--preset--color--text-secondary, #6b7280);
	box-shadow: inset 0 0 0 1px var(--efs-border);
	cursor: not-allowed;
}

.efs-md__play {
	display: grid;
	grid-template-columns: minmax(160px, 260px) 1fr;
	gap: 1.1rem;
	align-items: center;
}

.efs-md__play-frame {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--efs-head-bg);
	color: var(--efs-head-text);
	font-size: 1.6rem;
}

.efs-md__play-title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
}

@media (max-width: 600px) {
	.efs-md__play {
		grid-template-columns: 1fr;
	}

	.efs-md__cmp-row {
		grid-template-columns: 3.5rem 1fr 3.5rem;
	}

	.efs-md__crest {
		width: 56px;
		height: 32px;
	}
}

/* A card, drawn. Yellow and red in their own colours, with a hairline so the
   yellow one has an edge against white. */
.efs-md__card {
	display: inline-block;
	width: 9px;
	height: 13px;
	vertical-align: -1px;
	box-shadow: inset 0 0 0 1px rgba(0, 43, 79, 0.35);
}

.efs-md__card.is-yellow {
	background: var(--wp--preset--color--solgul, #FAE532);
}

.efs-md__card.is-red {
	background: var(--wp--preset--color--error, #F61722);
}

.efs-md__bar {
	display: none;
}

/* ---------- Match page on a phone ---------- */
/* Two things change. The header meets the site header instead of floating below
   it on a band of grey, and it stays: on a phone the hero is the only thing that
   says which match you are reading, and it scrolled away after one swipe.

   The gap it used to leave was 47px — 20 from the theme's page padding, 8 from
   the block gap above the content, and 32 of the plugin's own section padding.
   The plugin drops its own, and closes the theme's two with a negative margin
   written in the theme's own spacing tokens rather than in pixels, so it moves
   if those tokens ever do. */
@media (max-width: 620px) {
	.efs-block.efs-md {
		padding-top: 0;
	}

	/* The last 28px belong to the page, not to the block: the site's own global
	   styles pin `.efs-block` to `margin-block-start: 0 !important`, deliberately,
	   and the plugin has no business shouting that down. So the hero is pulled up
	   instead — it is not an `.efs-block` and nobody has an opinion about it. The
	   distance is the theme's two spacing tokens, the same two that make the gap,
	   so it stays correct if those ever change. */
	/* Edge to edge as well: a navy panel inset by a gutter on a phone wastes the
	   two things the header is short of, width and presence. */
	.efs-md__hero {
		margin-top: calc(-1 * (var(--wp--preset--spacing--30, 0.5rem) + var(--wp--preset--spacing--60, 1.25rem)));
		margin-inline: calc(-1 * var(--efs-md-gutter));
		padding: 1.15rem 1rem 1.25rem;
	}

	.efs-md__meta {
		margin-bottom: 0.85rem;
	}

	.efs-md__crest {
		width: 52px;
		height: 34px;
	}

	/* The pinned bar. Fixed, so it costs the page no layout at all: it fades in
	   below the theme's own header once the reader has scrolled past the hero,
	   and says the only three things needed to keep their place — who, what it
	   stands, and when. */
	.efs-md__bar {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--efs-md-stick, 0px);
		/* Below the theme's sticky header (100001), above the page. */
		z-index: 90000;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		padding: 0.45rem 0.85rem;
		background: var(--efs-head-bg);
		color: var(--efs-head-text, #fff);
		opacity: 0;
		transform: translateY(-100%);
		transition: transform 0.18s ease-out, opacity 0.18s ease-out;
		pointer-events: none;
	}

	.efs-md.is-stuck .efs-md__bar {
		opacity: 1;
		transform: translateY(0);
	}

	.efs-md__bar-crest {
		width: 30px;
		height: 22px;
		object-fit: contain;
		flex: 0 0 auto;
	}

	.efs-md__bar .efs-md__score {
		font-size: 1.25rem;
	}

	.efs-md__bar .efs-md__time {
		padding: 0.12rem 0.4rem;
		font-size: 0.95rem;
	}

	.efs-md__bar-date {
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		opacity: 0.75;
		white-space: nowrap;
	}

	/* The timeline straightens out. Mirroring about a spine gives each side
	   about 150px here, which turns every substitution into three wrapped
	   lines; and once the events share one column, position can no longer say
	   whose they were, so each row carries its club's crest. */
	.efs-md__tl::before {
		display: none;
	}

	.efs-md__tl-row,
	.efs-md__tl-row.is-away {
		grid-template-columns: 2.5rem 1.5rem 1.2rem 1fr;
		gap: 0 0.4rem;
		padding: 0.42rem 0;
	}

	.efs-md__tl-row + .efs-md__tl-row {
		border-top: 1px solid color-mix(in srgb, var(--efs-head-bg) 9%, transparent);
	}

	.efs-md__tl-row .efs-md__tl-min,
	.efs-md__tl-row.is-away .efs-md__tl-min {
		grid-column: 1;
		justify-self: start;
		padding-inline: 0.3rem;
	}

	.efs-md__tl-crest {
		display: block;
		grid-column: 2;
		grid-row: 1;
		width: 24px;
		height: 16px;
		object-fit: contain;
	}

	.efs-md__tl-row .efs-md__tl-icon,
	.efs-md__tl-row.is-away .efs-md__tl-icon {
		grid-column: 3;
		justify-self: center;
	}

	.efs-md__tl-row .efs-md__tl-what,
	.efs-md__tl-row.is-away .efs-md__tl-what {
		grid-column: 4;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.efs-md__bar {
		transition: none;
	}
}

/* ---------- Club page (efs-cp) ---------- */
/* One page per club on Ettan's own site, so it wears Ettan's clothes: no club
   colour anywhere, the crest is the only thing that belongs to the club. */
.efs-cp {
	--efs-cp-gutter: clamp(1rem, 4vw, 2.5rem);
}

.efs-cp > .efs-inner {
	padding-inline: var(--efs-cp-gutter);
}

.efs-cp__pick {
	margin: 0 0 1.25rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--efs-head-bg);
}

.efs-cp__sec {
	padding: 2.25rem 0 0;
}

.efs-cp__h {
	margin: 0 0 1rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cp__note {
	margin: 0.7rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---- hero ---- */
.efs-cp__hero {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.75rem 1.5rem;
	background: var(--efs-head-bg);
	color: var(--efs-head-text, #fff);
}

.efs-cp__crest {
	width: 96px;
	height: 96px;
	object-fit: contain;
	flex: 0 0 auto;
}

.efs-cp__league {
	margin: 0 0 0.3rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--solgul, #FAE532);
}

.efs-cp__name {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.05;
	color: inherit;
}

.efs-cp__record {
	margin: 0.5rem 0 0;
	font-size: 0.86rem;
	opacity: 0.82;
}

.efs-cp__form {
	margin-top: 0.85rem;
}

/* ---- the four numbers ---- */
/* Four, always: auto-fit dropped one onto a second row and left a hole where
   the grid's own background showed through. */
.efs-cp__nums {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--efs-border);
	border: 1px solid var(--efs-border);
}

@media (max-width: 760px) {
	.efs-cp__nums {
		grid-template-columns: repeat(2, 1fr);
	}
}

.efs-cp__num {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.1rem 0.9rem;
	background: var(--wp--preset--color--vit, #fff);
}

.efs-cp__num-v {
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: var(--efs-head-bg);
	font-variant-numeric: tabular-nums;
}

.efs-cp__num-l {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* The rank is the claim the number makes, so it is the accent on the tile. */
/* The number and its rank share the top line: the rank is a fact about the
   number, not about the label under it. */
.efs-cp__num-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

/* The rank, optically level with the top of the figure rather than with its
   line box: the big number sets at line-height 1, so its cap starts a hair
   below the box's edge. */
.efs-cp__num-rank {
	margin-top: 0.12em;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--accent, #3F34FD);
	white-space: nowrap;
}

/* Two bars on one scale: the dark one is what happened, the light one what the
   chances were worth. Length against length — the comparison the tile exists
   to make, and the only thing on it that needs a picture. */
.efs-cp__pair {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 0.7rem;
}

.efs-cp__pair-bar {
	display: block;
	height: 7px;
}

.efs-cp__pair-bar.is-actual {
	background: var(--efs-head-bg);
}

.efs-cp__pair-bar.is-exp {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 55%, transparent);
}

.efs-cp__num-exp {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.76rem;
	color: var(--wp--preset--color--text-secondary, #4D6B84);
	font-variant-numeric: tabular-nums;
}

/* The expected figure is what the tick marks, so it is labelled in the tick's
   own colour rather than left to the reader to pair up. */
.efs-cp__num-exp::before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.7em;
	margin-right: 0.4rem;
	vertical-align: -0.05em;
	background: var(--wp--preset--color--accent, #3F34FD);
}

/* The tiles are a grid of identical rows, so a missing value never shifts the
   ones beside it. */
.efs-cp__num {
	justify-content: start;
}

/* ---- season, match by match ---- */
.efs-cp__chart {
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.efs-cp__cols {
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	min-width: min-content;
}

/* A whole season has to fit without scrolling on a desktop — eighteen columns
   that need a swipe hide exactly the half of the season the reader came for. */
.efs-cp__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	flex: 1 1 0;
	min-width: 2.1rem;
}

.efs-cp__col:hover .efs-cp__bar.is-for,
.efs-cp__col:focus-visible .efs-cp__bar.is-for {
	background: var(--wp--preset--color--accent, #3F34FD);
}

.efs-cp__col:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: 2px;
}

.efs-cp__bars {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 120px;
	border-bottom: 1px solid color-mix(in srgb, var(--efs-head-bg) 22%, transparent);
}

.efs-cp__bar {
	display: block;
	width: 8px;
	min-height: 2px;
}

.efs-cp__bar.is-for {
	background: var(--efs-head-bg);
}

/* The light accent, solid and without an outline. */
.efs-cp__bar.is-against {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 55%, transparent);
}

/* The result under the column is what makes the bars worth reading: a tall bar
   over a loss is a match that got away. */
/* Won, drawn, lost read as filled, outlined and faint — three states that are
   told apart at a glance and in greyscale, without a second colour. */
.efs-cp__col-res {
	padding: 0.08rem 0.28rem;
	font-size: 0.7rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--efs-head-bg);
	background: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--efs-head-bg) 45%, transparent);
}

.efs-cp__col.is-w .efs-cp__col-res {
	background: var(--efs-head-bg);
	color: var(--efs-head-text, #fff);
	box-shadow: none;
}

.efs-cp__col.is-l .efs-cp__col-res {
	color: color-mix(in srgb, var(--efs-head-bg) 55%, transparent);
	box-shadow: none;
}

.efs-cp__col-crest {
	width: 22px;
	height: 16px;
	object-fit: contain;
}

.efs-cp__col-ha {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cp__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0.85rem 0 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cp__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.efs-cp__legend i {
	width: 14px;
	height: 9px;
}

.efs-cp__legend i.is-for {
	background: var(--efs-head-bg);
}

.efs-cp__legend i.is-against {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 55%, transparent);
}

/* ---- home and away ---- */
.efs-cp__venues {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--efs-border);
	border: 1px solid var(--efs-border);
}

.efs-cp__venue {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.1rem;
	background: var(--wp--preset--color--vit, #fff);
}

.efs-cp__venue-l {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

.efs-cp__venue-rec {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--efs-head-bg);
	font-variant-numeric: tabular-nums;
}

.efs-cp__venue-sub {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-secondary, #6b7280);
}

/* ---- squad ---- */
/* The squad as one table: position groups as bands inside it rather than as
   four separate lists, so a reader scans one column of names instead of four. */
.efs-cp__squad {
	width: 100%;
}

.efs-cp__squad-head th {
	padding: 0.7rem 0.75rem 0.4rem;
	background: none;
	text-align: left;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--efs-head-bg);
	border-bottom: 1px solid color-mix(in srgb, var(--efs-head-bg) 22%, transparent);
}

.efs-cp__squad-head th span {
	color: var(--wp--preset--color--text-secondary, #4D6B84);
}

.efs-cp__squad tbody tr:not(.efs-cp__squad-head) + .efs-cp__squad-head th {
	padding-top: 1.4rem;
}

/* A clickable row behaves like every other clickable row on the site: the
   pointer over the whole row, the same accent wash on hover and the same focus
   ring as the statistics table, because it opens the same card. Without
   `user-select: none` the cursor turns into a text caret over the name and the
   row stops looking clickable exactly where the eye lands. */
.efs-cp__squad tbody tr.is-openable {
	cursor: pointer;
	user-select: none;
}

.efs-cp__squad tbody tr.is-openable:hover td {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #3F34FD) 7%, var(--wp--preset--color--vit, #fff));
}

.efs-cp__squad tbody tr.is-openable:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3F34FD);
	outline-offset: -2px;
}

.efs-cp__c-shirt {
	width: 2.6rem;
	text-align: right;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-secondary, #4D6B84);
}

.efs-cp__c-pos {
	width: 3.2rem;
	text-align: left;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-secondary, #4D6B84);
}

.efs-cp__fixtures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem 2rem;
}

.efs-cp__fixh {
	margin: 0 0 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--efs-head-bg);
}

@media (max-width: 620px) {
	.efs-cp__hero {
		gap: 1rem;
		padding: 1.25rem 1rem;
		margin-inline: calc(-1 * var(--efs-cp-gutter));
	}

	.efs-cp__crest {
		width: 62px;
		height: 62px;
	}

}