/*
 * Liga Sync block styles.
 *
 * Everything coloured lives in a variable and has a fallback. The plugin
 * settings swap them for the club colours — without that the widget looks
 * correct but neutral, which still beats a navy bar on the site of a club that
 * plays in red.
 *
 * Variables rather than theme classes, because a block lands on somebody else's
 * site and there is no telling what is already there. One layer to override is
 * easier to explain over the phone than ten selectors.
 */

.ligasync-table,
.ligasync-schedule {
	--ls-brand: #1D2731;
	--ls-accent: #2F80ED;
	--ls-accent-bg: #EAF2FD;
	--ls-text: #1D2731;
	--ls-muted: #64748B;
	--ls-line: #EDF2F7;
	--ls-surface: #FFFFFF;
	--ls-bg: #F8FAFC;
	--ls-success: #22A45D;
	--ls-danger: #D64545;

	/* Text on the leading colour. A variable of its own, because the club may
	   set a light colour and white on yellow disappears — the settings compute
	   this from contrast. */
	--ls-on-brand: #FFFFFF;

	/* Corner radius multiplier: 1 = rounded, 0 = square. The settings flip it
	   with a single switch — see `Appearance::variables()`. */
	--ls-radius: 1;

	/* The stripe on every other row. One value for the table and the schedule,
	   because they stand one under the other on the page and two different
	   greys read at once as sloppiness. */
	--ls-stripe: color-mix(in srgb, var(--ls-text) 7%, var(--ls-surface));

	color: var(--ls-text);
	font-variant-numeric: tabular-nums;

	/*
	 * Our own type size rather than one inherited from the theme.
	 *
	 * The typeface stays the theme's (`font-family` is left alone), but the size
	 * has to be ours: every gap, column width and icon in this stylesheet is in
	 * pixels, so a theme with 19px base text stretched the table vertically,
	 * while the plugin dashboard — where the base is 13px — showed it squeezed.
	 * That was the drift between the preview in the settings and the club site.
	 */
	font-size: 15px;
	line-height: 1.45;
}

/* ───────────────────────── tabela ───────────────────────── */

.ligasync-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ls-surface);
}

.ligasync-table th {
	padding: 10px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ls-muted);
	text-align: center;
	border-bottom: 1px solid var(--ls-line);
}

.ligasync-table td {
	padding: 11px 8px;
	text-align: center;
	border-bottom: 1px solid var(--ls-line);
}

.ligasync-table th.ligasync-club,
.ligasync-table td.ligasync-club {
	text-align: left;
}

.ligasync-table td.ligasync-club {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ligasync-table td.ligasync-club img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
}

.ligasync-table .ligasync-pos {
	width: 2.4em;
	color: var(--ls-muted);
	font-weight: 600;
}

.ligasync-table .ligasync-pts strong {
	font-weight: 700;
}

.ligasync-table .ligasync-goals {
	color: var(--ls-muted);
}

/*
 * The club row and the zones. A bar on the left instead of a border around the
 * whole row: a border pushes the table out by a pixel and every other row
 * jumps, while the bar fits into space that is empty anyway.
 */
.ligasync-table tbody tr {
	border-left: 4px solid transparent;
}

/*
 * Every other row dimmed. With sixteen teams the eye loses its place halfway
 * down and reads the points off the next row — stripes keep it on the line.
 *
 * The rule stands BEFORE the zones and the club row, because it has the same
 * specificity and has to lose to what follows: a stripe must not paint over a
 * promotion marker.
 */
.ligasync-table tbody tr:nth-child(even) {
	background: var(--ls-stripe);
}

.ligasync-table tbody tr.ligasync-own {
	background: var(--ls-accent-bg);
	border-left-color: var(--ls-accent);
	font-weight: 600;
}

/*
 * The zones are mixed with the block background, not with transparency.
 *
 * Eight percent of green "on transparent" meant eight percent of whatever
 * happens to be under the table — a barely visible tint on a white page, next
 * to nothing on a dark theme. Mixing with `--ls-surface` gives a result
 * independent of the club's site, and raising the share to 14% turns it into a
 * band you can see without staring.
 *
 * The colours themselves stay ours (`--ls-success` and `--ls-danger` are not in
 * the editable palette): promotion in red or relegation in green is not an
 * aesthetic choice but a reversal of meaning.
 */
.ligasync-table tbody tr.ligasync-promotion {
	background: color-mix(in srgb, var(--ls-success) 14%, var(--ls-surface));
	border-left-color: var(--ls-success);
}

.ligasync-table tbody tr.ligasync-relegation {
	background: color-mix(in srgb, var(--ls-danger) 14%, var(--ls-surface));
	border-left-color: var(--ls-danger);
}

/* The club inside a zone: the club highlight wins, because on their own site
   readers look for themselves first and for the danger second. */
.ligasync-table tbody tr.ligasync-own.ligasync-promotion,
.ligasync-table tbody tr.ligasync-own.ligasync-relegation {
	background: var(--ls-accent-bg);
}

/* Five slots, oldest on the left, always all of them — an empty slot is grey
   and says "not played yet", which is a different thing from a draw. */
.ligasync-form-row {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}

.ligasync-form {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #CBD5E1;
	flex: 0 0 auto;
}

.ligasync-form-none {
	background: none;
	box-shadow: inset 0 0 0 1px #D8DFE7;
}

.ligasync-form-win { background: var(--ls-success); }
.ligasync-form-loss { background: var(--ls-danger); }
.ligasync-form-draw { background: #94A3B8; }

/*
 * The narrow layout — the table for a sidebar.
 *
 * Not a separate renderer but hidden columns: the table has one code path, one
 * row order and one place to fix. What stays is position, club, played and
 * points — that is what a widget gets looked at for. W/D/L can be derived from
 * those; goals and form belong to the full table.
 *
 * Hidden by class rather than by media query, because in a sidebar it is the
 * container that is narrow, not the screen: the page is 1400px on a monitor and
 * the widget beside it three hundred.
 */
/*
 * In a sidebar the table stands next to the match tiles, so it gets the same
 * frame — white surface, rule, rounded corners. Without it, it looked like a
 * raw fragment of a page pasted between two widgets.
 */
.ligasync-table--narrow {
	padding: 0 0 4px;
	overflow: hidden;
	background: var(--ls-surface);
	border: 1px solid var(--ls-line);
	border-radius: calc(12px * var(--ls-radius));
	font-size: 14px;
}

/*
 * A fixed column grid. Without it a long club name pushes its own column out
 * and the numbers escape the widget — "PKT" then broke into three letters one
 * under the other, and a two-digit position into two lines.
 */
.ligasync-table--narrow table {
	table-layout: fixed;
}

.ligasync-table--narrow th {
	white-space: nowrap;
}

/*
 * The numeric columns get exactly what their content needs — every spare pixel
 * is taken from the club name, and the name is the content here. A two-digit
 * position and the "PKT" heading are the widest things they will ever hold.
 */
/*
 * The width has to sit on the header, not on a cell inside the table:
 * `table-layout: fixed` reads the first row only. For a while the rule hung on
 * a class used by `td` and the "#" column shared the remaining space equally
 * with the club name — hence a hundred and sixteen pixels for a two-digit
 * number.
 */
.ligasync-table--narrow .ligasync-col-pos,
.ligasync-table--narrow .ligasync-pos {
	/* Wide enough for two digits with the cell's own padding subtracted. Below
	   that a club standing thirteenth got its position squeezed against the
	   crest — and a two-digit place is the normal case in a sixteen-team
	   league, not the exception. */
	width: 2.9em;
	white-space: nowrap;
}

.ligasync-table--narrow .ligasync-col-played {
	width: 2em;
}

.ligasync-table--narrow .ligasync-col-pts,
.ligasync-table--narrow .ligasync-pts {
	width: 2.7em;
}

.ligasync-table--narrow th,
.ligasync-table--narrow td {
	padding: 8px 2px;
}

/* Less than the widget's other edges on purpose: the left one already carries
   the 3px band marking our club and the zones, and ten pixels on top of it left
   the number nowhere to sit. */
.ligasync-table--narrow th:first-child,
.ligasync-table--narrow td:first-child {
	padding-left: 6px;
}

.ligasync-table--narrow th:last-child,
.ligasync-table--narrow td:last-child {
	padding-right: 10px;
}

.ligasync-table--narrow .ligasync-col-wdl,
.ligasync-table--narrow .ligasync-col-form,
.ligasync-table--narrow .ligasync-col-goals,
.ligasync-table--narrow .ligasync-goals {
	display: none;
}

/* The crest is 16px here and the name sat right against it, so the row read as
   one smudge. The air costs nothing — the name is truncated with an ellipsis
   anyway. */
.ligasync-table--narrow td.ligasync-club {
	gap: 9px;
	padding-left: 2px;
}

.ligasync-table--narrow td.ligasync-club img {
	width: 16px;
	height: 16px;
}

/*
 * The name is truncated with an ellipsis rather than broken into syllables.
 *
 * `min-width: 0` in both places is a requirement here, not a flourish: a flex
 * item does not shrink below its content by default, so without it
 * `text-overflow` has nothing to cut and the name keeps pushing the column out.
 */
.ligasync-table--narrow td.ligasync-club {
	min-width: 0;
}

.ligasync-table--narrow td.ligasync-club span {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/* ───────────────────────── terminarz ───────────────────────── */

/* The switcher pills. The active one is dark and the inactive one grey, not
   the other way round: it is the active view that has to be visible, not the
   one you could switch to. */
.ligasync-pills {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.ligasync-pill {
	padding: 8px 16px;
	border: 0;
	/* The pill follows the shape switch like the tiles do: it is a button with a
	   background, not a dot — with the rest of the widget squared off, an oval
	   would look like an element from another site. */
	border-radius: calc(999px * var(--ls-radius));
	background: var(--ls-line);
	color: var(--ls-muted);
	font: 700 11px/1 inherit;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.ligasync-pill.is-active {
	background: var(--ls-brand);
	color: var(--ls-on-brand);
}

.ligasync-expand {
	margin: 2px 0 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ls-accent);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.ligasync-expand:hover {
	text-decoration: underline;
}

/*
 * DWIE KLASY, NIE JEDNA, i to jest tu jedyny powód takiego zapisu.
 *
 * Blok stoi w treści wpisu, a motywy stylują tam nagłówki selektorem w rodzaju
 * `.page-content h3` — jedna klasa i element, czyli więcej niż nasza jedna
 * klasa. Nasz pasek kolejki dostawał wtedy barwę wiodącą motywu jako kolor
 * tekstu, przy barwie wiodącej jako tle: napis znikał w tle i wychodził dopiero
 * po zaznaczeniu myszą.
 *
 * `.ligasync-schedule .ligasync-heading` to dwie klasy, więc wygrywa z każdym
 * takim zapisem, nie podnosząc wagi tam, gdzie klub chce coś nadpisać sam.
 */
.ligasync-schedule .ligasync-heading {
	margin: 22px 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ls-muted);
}

.ligasync-schedule .ligasync-heading--accent {
	color: var(--ls-brand);
}

.ligasync-match {
	display: grid;
	grid-template-columns: 4.6em 1fr 6.5em 1fr;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 6px;
	background: var(--ls-bg);
	border-radius: calc(10px * var(--ls-radius));
	border-left: 3px solid transparent;
}

/* The next match is the one row somebody plans a Saturday around — hence a
   white surface with a shadow instead of the grey background of the rest. */
.ligasync-match--highlight {
	background: var(--ls-surface);
	border-left-color: var(--ls-accent);
	box-shadow: 0 2px 10px rgba(29, 39, 49, .08);
	padding: 16px 14px;
}

.ligasync-when {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ls-muted);
}

.ligasync-match--highlight .ligasync-when {
	color: var(--ls-accent);
}

.ligasync-side {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ligasync-side--away {
	justify-content: flex-end;
	text-align: right;
}

.ligasync-side img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Our own club name in colour and heavier — in a list of ten matches it is the
   only thing the eye is looking for. */
.ligasync-side.ligasync-ours span {
	color: var(--ls-brand);
	font-weight: 700;
}

.ligasync-middle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.ligasync-result {
	display: inline-block;
	min-width: 4em;
	padding: 4px 10px;
	border-radius: calc(6px * var(--ls-radius));
	background: var(--ls-line);
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/*
 * The kick-off time and "vs" in the place of a score. The same badge as a score
 * read as a score — in a listing where an unplayed round follows a played one,
 * "17:00" looked like 17:0. The background goes, the text dims, the weight
 * returns to normal; the width stays so the column does not move.
 */
.ligasync-result--date {
	background: none;
	color: var(--ls-muted);
	font-weight: 500;
}

/*
 * Penalties and walkover under the score, in a schedule row and in a match tile.
 *
 * A line of their own rather than an addition beside it: the score column has a
 * fixed width and it is what keeps the whole listing aligned. "1:1 k. 7-6" on
 * one line would widen it by half and shift the club names in every row,
 * including the rows without a shoot-out.
 *
 * `wo` in lower case and in a box, because it is an abbreviation rather than a
 * score — in capitals it would read as a second score next to the first.
 */
.ligasync-penalties,
.ligasync-walkover {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	color: var(--ls-muted);
}

.ligasync-walkover {
	/* The cursor says there is something to hover — the reason for the walkover
   sits in `title`. */
	cursor: help;
	text-transform: lowercase;
	letter-spacing: .04em;
}

.ligasync-cup {
	padding: 2px 8px;
	border-radius: calc(4px * var(--ls-radius));
	background: #FDE68A;
	color: #7C5E10;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ligasync-stadium {
	margin: 4px 0 0 14px;
	font-size: 13px;
	color: var(--ls-muted);
}

.ligasync-stadium::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--ls-accent);
}

.ligasync-no-data {
	padding: 12px 14px;
	border: 1px dashed #CBD5E1;
	border-radius: calc(8px * var(--ls-radius));
	color: var(--ls-muted);
}

/*
 * The same sentence on the public page, without the dashed frame. A dashed box
 * is the editor's way of saying "something belongs here and is missing"; to
 * a visitor it says the site is broken, when all that happened is that the
 * season has not started.
 */
.ligasync-no-data--page {
	padding: 0;
	border: 0;
}

/* ─────────────── the full listing ("all matches") ─────────────── */

/*
 * The same content as in "our matches", but with the density of a table: eight
 * matches times twenty rounds cannot look like twenty tiles. The rows are
 * separated by a rule in the table line colour, not by a gap and a background
 * of their own.
 */
.ligasync-rounds {
	margin-top: 13px;
}

.ligasync-rounds .ligasync-match {
	margin-bottom: 0;
	padding: 8px 4px;
	background: none;
	border-radius: 0;
	border-left: 0;
	border-bottom: 1px solid var(--ls-line);
}

/* The date column disappears — the heading above describes the whole round. */
.ligasync-rounds .ligasync-when {
	display: none;
}

.ligasync-rounds .ligasync-match {
	grid-template-columns: 1fr 6.5em 1fr;
}

.ligasync-rounds .ligasync-result {
	padding: 2px 10px;
}

/* The round heading gets the same bar as a match tile — the same role (a
   heading over match data) and the same weight, so there is no reason for two
   different solutions in one plugin. Rounded at the top only, because
   underneath the bar meets the first row. */
.ligasync-schedule .ligasync-round {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 18px 0 0;
	padding: 9px 14px;
	border-radius: calc(8px * var(--ls-radius)) calc(8px * var(--ls-radius)) 0 0;
	background: var(--ls-brand);
	color: var(--ls-on-brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* The gap above the first round comes from the section itself, so the bar does
   not add one — otherwise the space under the switcher would be twice the space
   between rounds. */
.ligasync-rounds > .ligasync-round:first-child {
	margin-top: 0;
}

.ligasync-round-date {
	opacity: .75;
	letter-spacing: .08em;
}

/* The rows under the bar: the first with no gap below the heading, the last
   closing the block with a rule so that a round reads as one whole. */
.ligasync-rounds .ligasync-match:last-child {
	border-bottom: 1px solid var(--ls-line);
}

/*
 * Every other match dimmed — eight rows in a row with nothing but rules blur
 * together when scrolled quickly.
 *
 * We darken the surface with the text colour instead of laying down the
 * "secondary background": that one is one and a half percent darker than white
 * and on a row thirty pixels tall there was simply no seeing that anything
 * changed.
 */
.ligasync-rounds .ligasync-match--even {
	background: var(--ls-stripe);
}

/*
 * The same in "our matches", one step deeper: there the rows are tiles and
 * already carry the secondary background, so the stripe darkens that background
 * with the text colour. White would be the wrong choice — the tile would vanish
 * on a white page, and white with a shadow is reserved for the next match.
 */
[data-ligasync-section="nasze"] .ligasync-match--even {
	background: color-mix(in srgb, var(--ls-text) 7%, var(--ls-bg));
}

/* ───────────────────────── kafel meczu (sidebar) ───────────────────────── */

/*
 * A vertical layout, because a sidebar is about three hundred pixels wide. The
 * same data laid out horizontally — crest, name, score, name, crest — would
 * break club names into syllables, and "Świętochłowice" split over three lines
 * looks like a fault.
 */
.ligasync-tile {
	--ls-brand: #1D2731;
	--ls-accent: #2F80ED;
	--ls-muted: #64748B;
	--ls-line: #EDF2F7;
	--ls-surface: #FFFFFF;
	--ls-on-brand: #FFFFFF;
	--ls-radius: 1;

	background: var(--ls-surface);
	border: 1px solid var(--ls-line);
	border-radius: calc(12px * var(--ls-radius));
	overflow: hidden;
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.ligasync-tile-bar,
.ligasync-table-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 14px;
	background: var(--ls-brand);
	color: var(--ls-on-brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ligasync-tile-round,
.ligasync-table-competition {
	opacity: .75;
	letter-spacing: .08em;
}

/* The bar of the narrow table does not sit in a card with `overflow: hidden`,
   so it has to round its own top corners — not the bottom ones, because the
   rows begin right below it. */
.ligasync-table-bar {
	border-radius: calc(12px * var(--ls-radius)) calc(12px * var(--ls-radius)) 0 0;
	margin: -1px -1px 0;
}

/* The break between the cut and our club brought back from below it. The
   ellipsis stands in the position column, because that is what jumps here —
   without it the club looks as if it were three places higher. */
.ligasync-table-jump td {
	padding: 9px 0 8px;
	color: var(--ls-muted);
	line-height: 1;
	/* The dashed rule runs cell by cell instead of across one `colspan`: a cell
	   spanning the table brings back the columns the narrow layout hides, and
	   the club name loses its width to them. */
	border-top: 1px dashed var(--ls-line);
	border-bottom: 0;
}

.ligasync-table-jump .ligasync-pos {
	text-align: center;
	letter-spacing: .1em;
}

.ligasync-table-more {
	display: block;
	padding: 10px 14px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ls-accent);
	text-decoration: none;
	border-top: 1px solid var(--ls-line);
}

.ligasync-table-more:hover {
	text-decoration: underline;
}

.ligasync-tile-sides {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 16px 14px 10px;
}

.ligasync-tile-club {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	font-size: 13px;
	line-height: 1.25;
}

.ligasync-tile-club img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.ligasync-tile-club.ligasync-ours span {
	color: var(--ls-brand);
	font-weight: 700;
}

.ligasync-tile-middle {
	font-size: 26px;
	font-weight: 700;
	color: var(--ls-brand);
	white-space: nowrap;
}

.ligasync-tile-vs {
	font-size: 17px;
	color: var(--ls-muted);
}

.ligasync-tile-date {
	margin: 0;
	padding: 0 14px 14px;
	text-align: center;
	font-size: 12px;
	color: var(--ls-muted);
}
/* ─────────────── the match bar (last + next) ─────────────── */

/*
 * Two full-width panels in the club colour — the last match and the next one.
 * Meant for a front page, above the news.
 *
 * The right-hand panel is a lighter version of the same colour (`color-mix`),
 * not a separate colour from the palette: the two panels have to read as one
 * bar in the club colours, not as two different widgets placed side by side.
 */
.ligasync-bar {
	--ls-brand: #1D2731;
	--ls-accent: #2F80ED;
	--ls-muted: #64748B;
	--ls-line: #EDF2F7;
	--ls-surface: #FFFFFF;
	--ls-on-brand: #FFFFFF;
	--ls-accent-light: #8CE3B1;
	--ls-radius: 1;

	display: flex;
	flex-wrap: wrap;
	border-radius: calc(12px * var(--ls-radius));
	overflow: hidden;
	color: var(--ls-on-brand);
	font-size: 15px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* A choice from the block sidebar: panels one under the other whatever the
   width. Useful in a content column, where "side by side" squeezes the crests
   down to a size at which there is no telling whose club it is. */
.ligasync-bar--stacked .ligasync-bar-panel {
	flex: 1 1 100%;
}

/* Each panel takes half, and the whole width when it stands alone. */
.ligasync-bar-panel {
	flex: 1 1 300px;
	min-width: 0;
	padding: 20px 24px 24px;
}

.ligasync-bar-last {
	background: var(--ls-brand);
}

.ligasync-bar-next {
	background: color-mix(in srgb, var(--ls-brand) 72%, #FFFFFF);
}

/* Ten sam panel zmieszany z czernią zamiast z bielą — do wyboru w bloku.
   Rozjaśnienie działa na ciemnej barwie klubu, ale klub grający w jasnym
   granacie albo w żółci dostawał panel prawie biały, a napisy na nim znikały.
   Ciemniejszy odcień odróżnia oba panele tak samo, tylko w drugą stronę. */
.ligasync-bar--next-dark .ligasync-bar-next {
	background: color-mix(in srgb, var(--ls-brand) 72%, #000000);
}

.ligasync-bar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ligasync-bar-label {
	color: var(--ls-accent-light);
	white-space: nowrap;
}

.ligasync-bar-context {
	font-weight: 500;
	letter-spacing: .12em;
	text-align: right;
	opacity: .82;
}

.ligasync-bar-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
}

.ligasync-bar-club {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Ramka szersza niż wysoka, bo mieszczą się w niej dwa kształty naraz. Herb
   okrągły i tak zatrzymuje się na 72 px — ogranicza go wysokość, a `contain`
   pilnuje proporcji, więc dostaje tylko luz po bokach. Znak poziomy z nazwą
   klubu, dotąd ścięty do 72 px szerokości i przez to niski, korzysta z całych
   100 px. Ta sama reguła rysuje herb przeciwnika, więc szerokość musi być
   bezpieczna dla obu. */
.ligasync-bar-club img {
	width: 100px;
	height: 72px;
	object-fit: contain;
}

.ligasync-bar-middle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0 8px;
}

.ligasync-bar-result {
	font-size: 58px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
}

.ligasync-bar-when {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The kick-off in the accent colour — the one number on this bar that somebody
   writes into a calendar. */
.ligasync-bar-time {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ls-accent-light);
}

.ligasync-bar-stadium {
	margin: 16px 0 0;
	font-size: 13px;
	text-align: center;
	opacity: .88;
}

.ligasync-bar-stadium::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--ls-accent-light);
}

/* ─────────────────── relacja pomeczowa (wpis) ─────────────────── */

/*
 * The score card and the three report cards attached to post content by
 * `LigaSync\Post_Report`. The colours come from variables, because the plugin
 * lands at every club rather than at one.
 *
 * We impose no typeface. The plugin sits on somebody else's site and a forced
 * font would be the one thing sticking out from the rest. Small caps and letter
 * spacing do the same job on the font the club already has.
 */
.ligasync-card,
.ligasync-report {
	--ls-brand: #1D2731;
	--ls-accent: #2F80ED;
	--ls-accent-bg: #EAF2FD;
	--ls-text: #1D2731;
	--ls-muted: #64748B;
	--ls-line: #EDF2F7;
	--ls-surface: #FFFFFF;
	--ls-bg: #F8FAFC;
	--ls-success: #22A45D;
	--ls-danger: #D64545;
	--ls-on-brand: #FFFFFF;
	--ls-on-accent: #FFFFFF;
	--ls-radius: 1;

	color: var(--ls-text);
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

/* ---------- the score card (above the text) ---------- */

.ligasync-card {
	margin: 0 0 18px;
	padding: 14px 14px 16px;
	background: var(--ls-brand);
	border-radius: calc(14px * var(--ls-radius));
	color: var(--ls-on-brand);
	text-align: center;
}

.ligasync-card-above {
	margin: 0 0 12px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .82;
}

.ligasync-card-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
}

.ligasync-card-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ligasync-card-side img {
	width: 58px;
	height: 58px;
	object-fit: contain;
}

.ligasync-card-club {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ligasync-card-middle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 6px;
}

.ligasync-card-score {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

/* The half-time score in brackets sits right under the match score, so no
   letter spacing and larger than a caption — it is a number, not a label. */
.ligasync-card-halftime {
	font-size: 13px;
	font-weight: 600;
	opacity: .8;
}

/* The shoot-out stands where the half-time score would and has to be more
   legible than it — in a cup it is what says who goes through. */
.ligasync-card-penalties {
	font-size: 15px;
	font-weight: 700;
}

/* The reason for a walkover under the kick-off line: a sentence, not a badge,
   so an ordinary paragraph with full leading. */
.ligasync-card-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	opacity: .85;
}

.ligasync-card-below {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--ls-on-brand) 16%, transparent);
	font-size: 12px;
	line-height: 1.4;
	opacity: .86;
}

/* ---------- the report (below the text) ---------- */

/* A gap larger than the one between the cards themselves: this is the boundary
   between the author's text and the competition data, and it has to be visible
   that the article has ended. */
.ligasync-report {
	margin: 40px 0 0;
}

.ligasync-card-section {
	margin: 0 0 20px;
	background: var(--ls-surface);
	border: 1px solid var(--ls-line);
	border-radius: calc(12px * var(--ls-radius));
	overflow: hidden;
}

.ligasync-card-bar {
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.ligasync-bar-brand {
	background: var(--ls-brand);
	color: var(--ls-on-brand);
}

.ligasync-bar-accent {
	background: var(--ls-accent);
	color: var(--ls-on-accent);
}

/* ---------- summary ---------- */

.ligasync-summary-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px 14px;
}

.ligasync-summary-label {
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ls-muted);
}

/* Two clubs side by side, one column each. `auto-fit` collapses them into one
   column on a narrow screen, and a row with only one club scoring takes the
   whole width instead of leaving a hole where the other one would be. */
.ligasync-summary-teams {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 8px 18px;
}

/* The club stands over its own column instead of in brackets after every
   surname. Both in the same colour: which of them is ours is said by the
   scorecard above, and painting one of the two here would read as a mark on
   the players rather than on the club. */
.ligasync-summary-club {
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ls-brand);
}

.ligasync-summary-value {
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- przebieg meczu ---------- */

/* The side labels above the event list — the columns have no headings of their
   own, and a surname alone does not say whose player it is. */
.ligasync-timeline-sides {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px 6px;
	border-bottom: 1px solid var(--ls-line);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ls-brand);
}

.ligasync-timeline-sides span:last-child {
	text-align: right;
	color: var(--ls-muted);
}

/*
 * The horizontal match axis — all 90 minutes condensed onto one line, above the
 * event list. Home above the line, away below it. The captions sit in two rows
 * (PHP assigns the positions), so the height is fixed and does not jump when
 * the closing minutes get busy.
 */
.ligasync-timeline-axis {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 4px 0 2px;
	padding: 0 12px;
}

/* The crest gutter: home above the line, away below it. A fixed width, because
   the axis canvas computes positions in percent and needs a predictable start. */
.ligasync-timeline-crests {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
}

.ligasync-timeline-crest {
	position: absolute;
	left: 0;
	display: block;
	width: 30px;
	height: 30px;
}

.ligasync-timeline-crest img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ligasync-timeline-crest-home { top: 26px; }
.ligasync-timeline-crest-away { top: 62px; }

.ligasync-timeline-canvas {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 116px;
}

.ligasync-timeline-tick {
	position: absolute;
	left: 2%;
	right: 2%;
	top: 58px;
	height: 3px;
	border-radius: 2px;
	background: var(--ls-line);
}

/* The half-time rule (and the end of normal time when there is extra time).
   PHP supplies the position, because it depends on whether the axis runs to 90
   or to 120 minutes. */
.ligasync-timeline-half {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -51%);
	width: 3px;
	height: 20px;
	border-radius: 2px;
	background: var(--ls-line);
}

.ligasync-timeline-point {
	position: absolute;
	transform: translateX(-50%);
}

/* The ball on the axis has a white fill (drawn by the SVG), so the axis line
   does not run through its middle. Its colour comes from `currentColor`: the
   club colour for the home side, grey for the away side — with two sides to the
   axis that is the only thing that shows at a glance who scored. */
.ligasync-timeline-point-goal {
	width: 20px;
	height: 20px;
	color: var(--ls-brand);
}

.ligasync-timeline-point-away.ligasync-timeline-point-goal {
	color: var(--ls-muted);
}

.ligasync-timeline-point-goal.ligasync-timeline-point-home { top: 36px; }
.ligasync-timeline-point-goal.ligasync-timeline-point-away { top: 63px; }

.ligasync-timeline-point-card {
	width: 11px;
	height: 15px;
	border-radius: 2px;
}

.ligasync-timeline-point-card.ligasync-timeline-point-home { top: 41px; }
.ligasync-timeline-point-card.ligasync-timeline-point-away { top: 63px; }

/* A substitution is the lightest kind of event, so its marker is smaller —
   otherwise two substitutions late on cover the goal next to them. */
.ligasync-timeline-point-sub {
	width: 17px;
	height: 17px;
}

.ligasync-timeline-point-sub.ligasync-timeline-point-home { top: 39px; }
.ligasync-timeline-point-sub.ligasync-timeline-point-away { top: 63px; }

/* The number of events grouped at this point. The rest lives in the tooltip
   and in the summary — on the axis what counts is that more happened in that
   minute. */
.ligasync-timeline-count {
	position: absolute;
	right: -6px;
	top: -6px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background: var(--ls-brand);
	color: var(--ls-on-brand);
	font-size: 9px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}

/* The counter moves away from the caption: for the home side the caption sits
   above the marker, so the number goes below it, and the other way round for
   the away side. Otherwise the "3" lands on top of the minute. */
.ligasync-timeline-point-home .ligasync-timeline-count {
	top: auto;
	bottom: -6px;
}

.ligasync-timeline-point-away .ligasync-timeline-count {
	background: var(--ls-muted);
	color: var(--ls-surface);
}

.ligasync-timeline-caption {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--ls-muted);
}

.ligasync-timeline-caption-goal.ligasync-timeline-caption-home { color: var(--ls-brand); }
.ligasync-timeline-caption-goal.ligasync-timeline-caption-away { color: var(--ls-muted); }

/* Two rows of captions on each side of the line: the first right at the
   marker, the second further out. Which row a caption gets is decided by PHP
   (see `$assign`), how far that row sits is CSS alone, so that it can be
   squeezed on a narrow screen. */
.ligasync-timeline-caption-home.ligasync-timeline-caption-row0 { top: 22px; }
.ligasync-timeline-caption-home.ligasync-timeline-caption-row1 { top: 6px; }
.ligasync-timeline-caption-away.ligasync-timeline-caption-row0 { top: 85px; }
.ligasync-timeline-caption-away.ligasync-timeline-caption-row1 { top: 101px; }

/*
 * Event icons. A goal takes the club colour for the home side and goes grey for
 * the away side — with two columns that is the only way to see at once who
 * scored. The cards stay yellow and red whatever the club colours: that is not
 * decoration but how the event is recognised.
 */
.ligasync-icon {
	display: inline-block;
	flex: 0 0 auto;
}

.ligasync-icon-goal,
.ligasync-icon-sub {
	width: 15px;
	height: 15px;
	line-height: 0;
	color: var(--ls-brand);
}

.ligasync-icon-goal svg,
.ligasync-icon-sub svg {
	display: block;
}

/* The marker on the axis is larger than the one in the legend — the SVG scales
   to its box, so one rule covers both places. */
.ligasync-timeline-point .ligasync-icon {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.ligasync-icon-card {
	width: 10px;
	height: 14px;
	border-radius: 2px;
}

.ligasync-icon-yellow { background: #F2B336; border: 1px solid #D99B1F; }
.ligasync-icon-red    { background: #DF0021; border: 1px solid #A03328; }

/* The event list under the axis: home on the left, away on the right, the
   minute in a fixed column in the middle. Alternating backgrounds instead of
   rules — with a substitution taking two lines, a rule between rows gets lost
   in the middle. */
.ligasync-timeline-rows {
	padding: 4px 0;
}

.ligasync-timeline-row {
	display: grid;
	grid-template-columns: 1fr 44px 1fr;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
}

.ligasync-timeline-even {
	background: var(--ls-bg);
}

.ligasync-timeline-minute {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ls-muted);
}

.ligasync-timeline-side {
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
}

.ligasync-timeline-away {
	text-align: right;
}

.ligasync-timeline-event {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.ligasync-timeline-home .ligasync-timeline-event { align-items: flex-start; }
.ligasync-timeline-away .ligasync-timeline-event { align-items: flex-end; }

.ligasync-timeline-line {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ligasync-timeline-event strong {
	font-weight: 600;
}

.ligasync-timeline-score,
.ligasync-timeline-out {
	color: var(--ls-muted);
}

.ligasync-sub-in { color: var(--ls-success); font-weight: 700; }
.ligasync-sub-out { color: var(--ls-danger); font-weight: 700; }

/* The half-time bar — without it the events of both halves merge into one
   list. */
.ligasync-timeline-halftime {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	background: var(--ls-bg);
}

.ligasync-timeline-halftime > span:not(.ligasync-timeline-halftime-label) {
	flex: 1;
	height: 1px;
	background: var(--ls-line);
}

.ligasync-timeline-halftime-label {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ls-muted);
}

/* The ball next to a goal in the list is smaller than on the axis — it stands
   beside a name rather than on a line, so it has nothing to defend itself
   against. */
.ligasync-timeline-line .ligasync-icon-goal {
	width: 13px;
	height: 13px;
	color: var(--ls-brand);
}

.ligasync-timeline-away .ligasync-timeline-line .ligasync-icon-goal {
	color: var(--ls-muted);
}

/* ---------- line-ups ---------- */

.ligasync-lineups-body {
	padding: 12px 14px 16px;
}

.ligasync-lineup-club {
	margin: 14px 0 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ls-brand);
}

.ligasync-lineup-club:first-child {
	margin-top: 0;
}

.ligasync-lineup-line {
	font-size: 14px;
	line-height: 1.6;
}

.ligasync-lineup-bench {
	margin-top: 4px;
	font-size: 13px;
	color: var(--ls-muted);
}

.ligasync-lineup-bench span {
	font-weight: 700;
}

.ligasync-referees {
	margin: 0;
	font-size: 12px;
	color: var(--ls-muted);
}

/*
 * Line-ups and referees stand inside the match card, under the list of events.
 * They used to be cards of their own, stacked below — three frames in a column,
 * each with its own heading, for three answers to the same question. Inside,
 * they need the separating line the frame used to give them, and the referees
 * need the padding they had from being a standalone paragraph.
 */
.ligasync-flow .ligasync-lineups {
	border-top: 1px solid var(--ls-line);
}

/* Sędziowie po `.ligasync-card-section`, nie po `.ligasync-flow`: przy meczu
   bez zdarzeń nie ma pasa przebiegu, a składy i sędziowie stają wtedy we
   własnej sekcji — i tam też mają wyglądać jak stopka karty, nie jak akapit
   doklejony do krawędzi. */
.ligasync-card-section .ligasync-referees {
	padding: 12px 14px 14px;
	border-top: 1px solid var(--ls-line);
}

/* ───────────────────────── narrow screen ───────────────────────── */

@media (max-width: 640px) {
	/* The match bar: flex-wrap already stacks the panels, so all that is left
	   here is shrinking what has no business fitting into 320px. */
	.ligasync-bar-panel {
		padding: 16px 14px 18px;
	}

	.ligasync-bar-club img {
		width: 52px;
		height: 52px;
	}

	.ligasync-bar-club {
		font-size: 11px;
	}

	.ligasync-bar-result {
		font-size: 40px;
	}

	.ligasync-bar-when {
		font-size: 16px;
	}

	.ligasync-bar-time {
		font-size: 26px;
	}

	/* The score card at 320px: a smaller crest and a smaller score leave the
	   club names enough room not to break into syllables. */
	.ligasync-card-side img {
		width: 42px;
		height: 42px;
	}

	.ligasync-card-score {
		font-size: 34px;
	}

	.ligasync-card-club {
		font-size: 11px;
	}

	.ligasync-timeline-sides {
		font-size: 10px;
		letter-spacing: .06em;
		padding-left: 8px;
		padding-right: 8px;
	}

	/*
	 * The axis shrinks by a third instead of disappearing. What does disappear
	 * is the detail that is unreadable at three hundred pixels anyway — what
	 * stays is the shape of the match, which is what the axis is for.
	 */
	.ligasync-timeline-axis {
		padding: 0 8px;
	}

	.ligasync-timeline-canvas {
		height: 88px;
	}

	.ligasync-timeline-tick { top: 44px; }
	.ligasync-timeline-half { height: 14px; }

	.ligasync-timeline-caption-home.ligasync-timeline-caption-row0 { top: 15px; }
	.ligasync-timeline-caption-home.ligasync-timeline-caption-row1 { top: 3px; }
	.ligasync-timeline-caption-away.ligasync-timeline-caption-row0 { top: 66px; }
	.ligasync-timeline-caption-away.ligasync-timeline-caption-row1 { top: 78px; }

	/* The crests go — thirty pixels of gutter is a tenth of the axis width on a
	   phone, and the club names are printed above the list anyway. */
	.ligasync-timeline-crests {
		display: none;
	}

	.ligasync-timeline-point-goal {
		width: 15px;
		height: 15px;
	}

	.ligasync-timeline-point-goal.ligasync-timeline-point-home { top: 27px; }
	.ligasync-timeline-point-goal.ligasync-timeline-point-away { top: 49px; }

	.ligasync-timeline-point-card {
		width: 8px;
		height: 11px;
	}

	.ligasync-timeline-point-card.ligasync-timeline-point-home { top: 31px; }
	.ligasync-timeline-point-card.ligasync-timeline-point-away { top: 49px; }

	.ligasync-timeline-point-sub {
		width: 13px;
		height: 13px;
	}

	.ligasync-timeline-point-sub.ligasync-timeline-point-home { top: 29px; }
	.ligasync-timeline-point-sub.ligasync-timeline-point-away { top: 49px; }

	.ligasync-timeline-count {
		min-width: 12px;
		height: 12px;
		border-radius: 6px;
		font-size: 8px;
		line-height: 12px;
	}

	.ligasync-timeline-caption {
		font-size: 9px;
		letter-spacing: 0;
	}

	/*
	 * The list: one column instead of two. At three hundred pixels half the
	 * width stood empty on the other side while a surname broke into three
	 * lines next to that emptiness. Which team an event belongs to is still
	 * said by the alignment — home to the left, away to the right — and the
	 * names of both clubs stand above the list in the same order.
	 */
	.ligasync-timeline-row {
		grid-template-columns: 30px 1fr;
		gap: 8px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.ligasync-timeline-row--home .ligasync-timeline-away,
	.ligasync-timeline-row--away .ligasync-timeline-home {
		display: none;
	}

	/*
	 * The minute goes on the opposite side from the event: right for home,
	 * left for away. This is the same layout as on a wide screen — text at its
	 * own edge, minute towards the middle — with the empty half cut off. The
	 * minutes zigzag, but the rows carry the order anyway, and "whose event is
	 * this" is visible without reading the name.
	 *
	 * The columns are assigned explicitly, because otherwise the grid places
	 * children in HTML order and in a home row the name lands in the minute
	 * column.
	 */
	.ligasync-timeline-row--home {
		grid-template-columns: 1fr 30px;
	}

	.ligasync-timeline-row--home .ligasync-timeline-side { grid-column: 1; }
	.ligasync-timeline-row--home .ligasync-timeline-minute { grid-column: 2; }

	.ligasync-timeline-row--away .ligasync-timeline-minute { grid-column: 1; }
	.ligasync-timeline-row--away .ligasync-timeline-side { grid-column: 2; }

	.ligasync-timeline-minute,
	.ligasync-timeline-side {
		grid-row: 1;
	}

	.ligasync-timeline-minute {
		text-align: left;
		font-size: 12px;
	}

	.ligasync-timeline-side {
		font-size: 13px;
	}

	/* W/D/L can be derived from the rest, and eight columns of numbers at 320px
	   give 18px slivers with truncated values. */
	.ligasync-table .ligasync-col-wdl {
		display: none;
	}

	.ligasync-table th,
	.ligasync-table td {
		padding: 9px 5px;
	}

	.ligasync-match {
		grid-template-columns: 3.8em 1fr 5em 1fr;
		gap: 7px;
		padding: 10px;
		font-size: 14px;
	}

	.ligasync-side img {
		width: 20px;
		height: 20px;
	}
}