/**
 * The Rungtynės card.
 *
 * Figma: 2407-66372 (tvarkaraštis), 2466-41736 / 2405-61724 (rezultatai),
 * 2342-39826 / 2405-58241 (turnyro lentelė), 2543-58620 (filtrai),
 * 2407-70884 (atkrintamosios).
 *
 * Two things about the tables are worth stating once, because they explain most
 * of what follows:
 *
 * 1. Figma draws every table as side-by-side flex COLUMNS, not as rows. That is
 *    an authoring convenience, not a requirement — these are real tables, with
 *    real headers, because a screen reader and a keyboard both need them to be.
 *    The column widths below are the ones measured off those frames.
 * 2. There are no vertical rules anywhere. What look like column separators in
 *    the render are the 1px gaps between Figma's column frames, with the white
 *    card showing through, plus the fill boundary of the sorted `#` column.
 */

/*
 * The card sits in the same column as the hero's heading: 1344 wide with a 48px
 * gutter, 16px on a phone. The gutter lives on the full-bleed wrapper and the
 * width cap on the card itself — putting a max-width on an `alignfull` block
 * instead cancels one of the theme's negative margins and the whole column drifts
 * left. The theme's own column is close (its content-size is 1344 too) but its
 * root padding is 50px at every width, which is neither the 48 nor the 16 the
 * design asks for.
 */
.rkl-matches {
	--rkl-gutter: 48px;
	/* The card's own inset: the toolbar's padding, and the breathing room under
	 * the play-off board. Declared once so the two cannot drift apart. */
	--rkl-card-pad: 16px;

	box-sizing: border-box;
	color: var(--rkl-black);
	font-family: var(--rkl-font);
	padding-inline: var(--rkl-gutter);
}

.rkl-matches *,
.rkl-matches *::before,
.rkl-matches *::after {
	box-sizing: inherit;
}

.rkl-matches__card {
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: var(--rkl-shadow);
	margin-inline: auto;
	max-width: 1344px;
	overflow: hidden;
	position: relative;
}

/*
 * Without a script every panel is shown, so the page reads as four stacked
 * sections rather than one that appears empty. `hidden` is left in the markup so
 * that the usual case — a browser that runs the script — never flashes all four.
 */
@media (scripting: none) {
	.rkl-matches__panel[hidden] {
		display: block;
	}
}

/*
 * The panel fades in — but the animation is applied to the toolbar and the
 * tables, never to a wrapper that contains the sheet.
 *
 * An element with a filling transform animation is a containing block for
 * `position: fixed` descendants, `transform: none` in the final keyframe
 * included. Animating `.rkl-matches__panel-inner` therefore pinned the Filtrai
 * sheet to the card — it measured 341x382 inside the card instead of covering
 * the viewport — which looks like a z-index or an overflow bug and is neither.
 */
.rkl-matches__panel.is-entering .rkl-matches__toolbar,
.rkl-matches__panel.is-entering .rkl-matches__groups {
	animation: rkl-matches-in 0.18s ease-out both;
}

@keyframes rkl-matches-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rkl-matches__panel-inner {
	position: relative;
}

.rkl-matches__panel-inner.is-loading .rkl-matches__groups {
	animation: rkl-shimmer 1.4s linear infinite;
	background-image: linear-gradient(
		90deg,
		var(--rkl-grey-04) 20%,
		#eef1f4 40%,
		#eef1f4 55%,
		var(--rkl-grey-04) 75%
	);
	background-size: 200% 100%;
	min-height: 200px;
	opacity: 0.55;
	pointer-events: none;
}

.rkl-matches__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	padding: 32px 16px 40px;
	text-align: center;
}

/* Toolbar ----------------------------------------------------------------
 *
 * 16px inset on three sides, 48px tall, and it never wraps. Items do not
 * shrink and the row clips, which is what makes scrollWidth an honest answer to
 * "does this fit" in view.js.
 */

.rkl-matches__toolbar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	overflow: hidden;
	padding: var(--rkl-card-pad);
	border-bottom: 1px solid var(--rkl-grey-01)
}

.rkl-matches__toolbar > * {
	flex: 0 0 auto;
}

.rkl-matches__toolbar-groups,
.rkl-matches__toolbar-controls {
	align-items: center;
	display: flex;
	gap: 16px;
	min-width: 0;
}

.rkl-matches__toolbar-controls {
	gap: 16px;
}

/*
 * The division control has two forms and both are always in the markup: the
 * segmented control from the desktop frame, and the native select from the
 * mobile one. CSS decides which is shown, so the card is correct before any
 * script runs. `is-compact` is view.js reporting that the pills no longer fit,
 * whatever the viewport width says.
 */
.rkl-matches__toolbar-groups .rkl-field {
	display: none;
}

.rkl-matches__panel-inner.is-compact .rkl-matches__group-tabs {
	display: none;
}

.rkl-matches__panel-inner.is-compact .rkl-matches__toolbar-groups .rkl-field {
	display: flex;
}

.rkl-matches__toolbar .rkl-field {
	min-width: 152px;
}

/*
 * base.css stacks the label above the value under 480px. That is right for the
 * narrow standings card it was written for and wrong here — the mobile frame
 * keeps „Pasirinkite  A divizionas" on one line in a 280px field.
 */
@media (max-width: 480px) {
	.rkl-matches .rkl-field {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px 16px;
	}

	.rkl-matches .rkl-field__label {
		flex: 0 0 auto;
		font-size: 14px;
	}

	.rkl-matches .rkl-field__select {
		flex: 1 1 auto;
	}
}

.rkl-matches__filter-button {
	align-items: center;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 48px;
}

.rkl-matches__filter-button:hover {
	background: var(--rkl-white);
	border-color: var(--rkl-black);
}

.rkl-matches__filter-button:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-matches__filter-button img {
	display: block;
	height: 20px;
	width: 20px;
}

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

.rkl-matches__group.is-entering {
	animation: rkl-matches-in 0.14s ease-out both;
}

.rkl-mtable__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: var(--rkl-grey-02) transparent;
	scrollbar-width: thin;
}

.rkl-mtable__scroller:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/*
 * The design draws the scroll affordance as a bare rounded thumb with no track,
 * which is what these rules reproduce on WebKit; Firefox gets the same shape
 * from `scrollbar-width: thin` above.
 */
.rkl-mtable__scroller::-webkit-scrollbar {
	height: 9px;
}

.rkl-mtable__scroller::-webkit-scrollbar-track {
	background: transparent;
}

.rkl-mtable__scroller::-webkit-scrollbar-thumb {
	background: var(--rkl-grey-02);
	border-radius: 10px;
}

/*
 * Undo the legacy global table styling before anything else.
 *
 * `rkl-addons/assets/css/style.css` is enqueued site-wide and styles bare
 * `table`, `thead`, `tbody tr` and `td` selectors — no class, no scope. It came
 * from the old site's shortcodes and it reaches every table on every page: it
 * zebra-stripes the rows, sets 13px bold text with `!important`, forces
 * `border-collapse: collapse`, paints the header `#eaeaea` and adds a grey
 * hover. All of that was visible in this card until these rules landed.
 *
 * The `!important` here is not a shortcut — the declarations being overridden
 * carry `!important` themselves, so nothing else reaches them. The proper fix is
 * to scope that stylesheet to the legacy shortcodes; until someone does, every
 * new block that renders a table needs this reset.
 */
.rkl-matches .rkl-mtable {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	table-layout: auto;
	width: 100%;
}

.rkl-matches .rkl-mtable thead {
	background: none;
}

.rkl-matches .rkl-mtable tbody tr {
	background: none;
}
.rkl-matches .rkl-mtable tbody tr:hover {
	background: var(--rkl-grey-04);
}

.rkl-matches .rkl-mtable th,
.rkl-matches .rkl-mtable td {
	border: 0;
	border-bottom: 1px solid var(--rkl-grey-01);
	color: var(--rkl-black) !important;
	font-weight: 400 !important;
	text-align: left;
	vertical-align: middle;
}

.rkl-matches .rkl-mtable thead th,
.rkl-matches .rkl-mtable .rkl-mtable__team-name,
.rkl-matches .rkl-mtable .rkl-mtable__chip,
.rkl-matches .rkl-mtable .rkl-mtable__badge,
.rkl-matches .rkl-mtable .rkl-mtable__clock,
.rkl-matches .rkl-mtable .rkl-mtable__link,
.rkl-matches .rkl-mtable .rkl-mtable__score-box {
	font-weight: 500 !important;
}

.rkl-matches .rkl-mtable .rkl-mtable__day {
	color: var(--rkl-grey-05) !important;
	font-weight: 600 !important;
}

.rkl-matches .rkl-mtable .rkl-mtable__link {
	color: var(--rkl-green-03) !important;
}

.rkl-matches .rkl-mtable .rkl-mtable__chip--win {
	color: var(--rkl-green-03) !important;
}

.rkl-matches .rkl-mtable .rkl-mtable__chip--loss {
	color: var(--rkl-red-02) !important;
}

.rkl-matches .rkl-mtable .rkl-mtable__badge.is-dark,
.rkl-matches .rkl-mtable .rkl-mtable__score-box.is-winner {
	color: var(--rkl-white) !important;
}

/*
 * The header strip runs the full card width with a hairline on all four sides,
 * and it stays on one line. `position: sticky` keeps it against the left edge of
 * the scroller rather than the table, so a horizontally scrolled table still has
 * its labels over the right columns.
 */
.rkl-mtable thead th {
	background: var(--rkl-grey-04);
	border-top: 1px solid var(--rkl-grey-01);
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	padding: 14px 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.rkl-mtable tbody td {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	padding: 8px 16px;
}

.rkl-mtable tbody tr {
	height: 64px;
}

/*
 * A class-level `display` beats the user-agent `[hidden]` rule, and this project
 * has already lost a round to exactly that (landmine 2). Stated explicitly so a
 * later `display: table-row` cannot silently switch filtering off.
 */
.rkl-mtable tr[hidden],
.rkl-matches [hidden] {
	display: none;
}

.rkl-mtable tbody tr.is-entering {
	animation: rkl-row-in 0.22s ease-out both;
}

@keyframes rkl-row-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Match rows -------------------------------------------------------------- */

.rkl-mtable__col-date {
	width: 112px;
}

.rkl-mtable__col-mid {
	width: 114px;
}

.rkl-mtable__col-score {
	width: 112px;
}

.rkl-mtable__col-live {
	width: 149px;
}

.rkl-mtable__col-address {
	width: 212px;
}

.rkl-mtable--results .rkl-mtable__col-date,
.rkl-mtable--results .rkl-mtable__col-address {
	width: 308px;
}

.rkl-mtable__date {
	white-space: nowrap;
}

.rkl-mtable__side {
	min-width: 0;
}


/*
 * `vertical-align: middle` matters: an inline-flex box sits on the cell's text
 * baseline and reserves room for the descender under it, which added 7px to
 * every row and pushed the mobile table off its 48px rhythm.
 */
.rkl-mtable__team {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	text-decoration: none;
	vertical-align: middle;
}

.rkl-mtable__team--home {
	flex-direction: row;
}

.rkl-mtable__team-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.rkl-mtable__team:hover .rkl-mtable__team-name,
a.rkl-mtable__team:focus-visible .rkl-mtable__team-name {
	text-decoration: underline;
}

a.rkl-mtable__team:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-mtable__crest {
	flex: 0 0 auto;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

/* The tip-off time, and the day it falls on. */

.rkl-mtable__clock {
	display: block;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.rkl-mtable__day {
	color: var(--rkl-grey-05);
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

/*
 * The score. Two boxes butted together: the winner's filled, the loser's white
 * with a 2px stroke, and only the outer corners rounded. The right box's 2px
 * border is inside its 40px, which is why box-sizing matters here.
 */
.rkl-mtable__score {
	display: inline-flex;
	vertical-align: middle;
}

.rkl-mtable__score-box {
	align-items: center;
	background: var(--rkl-white);
	border: 2px solid var(--rkl-black);
	color: var(--rkl-black);
	display: flex;
	font-size: 20px;
	font-weight: 500;
	height: 32px;
	justify-content: center;
	line-height: 1.2;
	min-width: 40px;
	padding: 4px 8px;
}

.rkl-mtable__score-box:first-child {
	border-radius: var(--rkl-radius) 0 0 var(--rkl-radius);
}

.rkl-mtable__score-box:last-child {
	border-radius: 0 var(--rkl-radius) var(--rkl-radius) 0;
	/* The two boxes share one edge rather than drawing two. */
	margin-left: -2px;
}

.rkl-mtable__score-box.is-winner {
	background: var(--rkl-black);
	color: var(--rkl-white);
	position: relative;
	z-index: 1;
}

.rkl-mtable__link {
	align-items: center;
	color: var(--rkl-green-03);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.rkl-mtable__link:hover {
	color: var(--rkl-green-03);
}

.rkl-mtable__link:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-mtable__link img {
	display: block;
	height: 14px;
	width: 14px;
}

.rkl-mtable__muted {
	color: var(--rkl-grey-05);
}

/*
 * The address stays on one line. Wrapped, it was the tallest thing in the row
 * and pushed a 48px row to 80 — the table scrolls sideways anyway, so a second
 * line buys nothing and costs the rhythm.
 */
.rkl-mtable__address {
	white-space: nowrap;
}

.rkl-mtable__address a {
	color: inherit;
	text-decoration: none;
}

.rkl-mtable__address a:hover {
	text-decoration: underline;
}

/* Alignment ---------------------------------------------------------------
 *
 * Every alignment rule for these tables lives here, and every one of them names
 * `.rkl-matches .rkl-mtable` explicitly.
 *
 * That is not decoration. The reset that undoes `rkl-addons`' global table CSS
 * has to say `.rkl-matches .rkl-mtable th, td` — three classes and an element —
 * and it sets `text-align: left`. A tidy `.rkl-mtable__stat { text-align:
 * center }` is one class and loses to it silently: the rule is in the
 * stylesheet, reads correctly, and does nothing. Every stat chip in the
 * standings table sat hard against the left edge of its column because of it.
 *
 * Keep new alignment rules in this block, at this specificity.
 */

/* Everything after Komanda: the value is centred in the column and the text is
 * centred in the value. Chips and dot rows are inline-flex, so the cell's
 * text-align is what positions them. */
.rkl-matches .rkl-mtable thead th.rkl-mtable__stat,
.rkl-matches .rkl-mtable tbody td.rkl-mtable__stat,
.rkl-matches .rkl-mtable thead th.rkl-mtable__streak,
.rkl-matches .rkl-mtable tbody td.rkl-mtable__streak,
.rkl-matches .rkl-mtable thead th.rkl-mtable__last5,
.rkl-matches .rkl-mtable tbody td.rkl-mtable__last5,
.rkl-matches .rkl-mtable thead th.rkl-mtable__rank,
.rkl-matches .rkl-mtable tbody td.rkl-mtable__rank,
.rkl-matches .rkl-mtable tbody td.rkl-mtable__mid {
	text-align: center;
}

/* The home side faces the score, so its name and crest sit against the middle
 * column. */
.rkl-matches .rkl-mtable thead th.is-end,
.rkl-matches .rkl-mtable tbody td.is-end {
	text-align: right;
}

/* Standings ---------------------------------------------------------------
 *
 * Fixed layout, so a column is the width it is given rather than the width its
 * longest label happens to need. Without it the eleven statistics ran 63px to
 * 145px and the grid had no rhythm.
 */

/*
 * `.rkl-matches .rkl-mtable` — the legacy reset — sets `table-layout: auto`, and
 * a single-class rule loses to it silently. Third time this has caught me on
 * this stylesheet; see the Alignment block and landmine 23.
 */
.rkl-matches .rkl-mtable--standings {
	table-layout: fixed;
}

.rkl-mtable__col-bar {
	width: 36px;
}

.rkl-mtable__col-rank {
	width: 67px;
}

/*
 * No width on wide screens: with a fixed layout the unsized column absorbs the
 * remainder. That only holds while the fixed columns add up to less than the
 * table — below that there is no remainder and the column collapses to zero,
 * which is exactly what happened on a phone until the media query below gave it
 * a width of its own.
 */
.rkl-mtable__col-club {
	width: auto;
}

/*
 * 76, not 80. The nine numbers only need ~72 for their widest heading („PTS+"),
 * and every pixel taken here comes out of Komanda — at 80 the longest club in
 * the A division, „Kazlų Rūdos SC „Ataka-Danilus"", was ellipsised.
 */
.rkl-mtable__col-stat {
	width: 76px;
}

/* A chip carrying a number and an arrow, and a row of five 8px dots: neither is
 * the same shape as a bare number, so neither is forced to the same width. */
.rkl-mtable__col-streak {
	width: 88px;
}

.rkl-mtable__col-last5 {
	width: 132px;
}

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

.rkl-mtable--standings th,
.rkl-mtable--standings td {
	white-space: nowrap;
}

.rkl-mtable__bar {
	padding-inline: 16px;
	width: 36px;
}

.rkl-mtable__indicator {
	border-radius: 20px;
	display: block;
	height: 32px;
	width: 4px;
}

.rkl-mtable__indicator--green {
	background: var(--rkl-green-02);
}

.rkl-mtable__indicator--yellow {
	background: var(--rkl-yellow);
}

/*
 * The relegation band. A single class is enough here, exactly as green and
 * yellow above: the scoped `th, td` reset further up declares no `background`
 * and never matches this span, so there is nothing to out-specify.
 */
.rkl-mtable__indicator--red {
	background: var(--rkl-red-02);
}

.rkl-mtable__rank {
	width: 67px;
}

/*
 * The sorted column is filled, header and cells alike. `Grey 03` is named
 * "Hover" in the library, but in this frame it is the sort state — the design
 * shows the whole `#` column filled because that is the column it is sorted by.
 * view.js moves the class as the sort moves.
 */
.rkl-matches .rkl-mtable th.is-sorted,
.rkl-matches .rkl-mtable td.is-sorted {
	background: var(--rkl-grey-03);
}

/*
 * Every header is a button, so every column sorts. The header cell gives up its
 * padding to the button, which then fills the cell and gives the whole heading a
 * comfortable hit area rather than just the few characters of the label.
 */
.rkl-mtable thead th:has(.rkl-mtable__sort) {
	padding: 0;
}

.rkl-mtable__sort {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: 500;
	gap: 8px;
	height: 100%;
	justify-content: inherit;
	padding: 14px 16px;
	text-align: inherit;
	transition: background-color 0.15s ease;
	white-space: nowrap;
	width: 100%;
}

/* The label carries the column's own alignment; centred columns centre. */
.rkl-mtable thead th.rkl-mtable__club .rkl-mtable__sort {
	justify-content: flex-start;
}

.rkl-mtable thead th.rkl-mtable__stat .rkl-mtable__sort,
.rkl-mtable thead th.rkl-mtable__rank .rkl-mtable__sort,
.rkl-mtable thead th.rkl-mtable__streak .rkl-mtable__sort,
.rkl-mtable thead th.rkl-mtable__last5 .rkl-mtable__sort {
	justify-content: center;
}

.rkl-mtable__sort:hover {
	background: var(--rkl-grey-03);
}

.rkl-mtable__sort:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/*
 * At rest the table looks exactly as designed: only the sorted column shows a
 * caret. The others reveal theirs on hover or keyboard focus, which is the
 * affordance — a row of carets on every heading is not what the frame draws.
 */
.rkl-mtable__sort-icon {
	flex: 0 0 auto;
	opacity: 0;
	transform: rotate(180deg);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/*
 * In the standings the caret is taken out of flow. Left in it, every one of the
 * thirteen headings reserved 22px for a glyph that is invisible most of the
 * time, which widened the columns and left the numbers sitting at uneven
 * intervals under their labels. Absolute keeps the heading the width of its
 * text and the caret still appears in the same place.
 */
.rkl-mtable--standings .rkl-mtable__sort {
	position: relative;
}

.rkl-mtable--standings .rkl-mtable__sort-icon {
	margin-left: -14px;
	position: absolute;
	right: 2px;
	top: 50%;
	translate: 0 -50%;
}

.rkl-mtable th.is-sorted .rkl-mtable__sort-icon,
.rkl-mtable__sort:hover .rkl-mtable__sort-icon,
.rkl-mtable__sort:focus-visible .rkl-mtable__sort-icon {
	opacity: 1;
}

/* Up while ascending, as the design draws it; flipped when reversed. */
.rkl-mtable th.is-descending .rkl-mtable__sort-icon {
	transform: none;
}


.rkl-mtable__badge {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	color: var(--rkl-black);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	height: 32px;
	justify-content: center;
	line-height: 1.3;
	max-width: 64px;
	min-width: 32px;
	padding-inline: 8px;
}

.rkl-mtable__badge.is-dark {
	background: var(--rkl-black);
	color: var(--rkl-white);
}

.rkl-mtable__club {
	min-width: 200px;
}

/*
 * HW, HL, DIFF and P are plain text rather than chips — a different type style,
 * Regular 14/1.5 instead of Medium 14/1.3. The Figma frame left-aligns them; the
 * client asked for every column after Komanda to be centred, so alignment is
 * handled with the rest of them below and only the type differs here.
 */
.rkl-mtable__stat--plain {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.rkl-mtable__chip {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	height: 32px;
	justify-content: center;
	line-height: 1.3;
	max-width: 72px;
	min-width: 32px;
	padding-inline: 8px;
}

.rkl-mtable__chip--win {
	background: var(--rkl-green-01);
	color: var(--rkl-green-03);
}

.rkl-mtable__chip--loss {
	background: var(--rkl-red-01);
	color: var(--rkl-red-02);
}

/* The run's number stays black; only the arrow carries the colour. */
.rkl-mtable__chip--streak.is-up .rkl-mtable__streak-icon {
	color: var(--rkl-green-03);
	transform: rotate(180deg);
}

.rkl-mtable__chip--streak.is-down .rkl-mtable__streak-icon {
	color: var(--rkl-red-02);
}


.rkl-mtable__dots {
	display: inline-flex;
	gap: 4px;
}

.rkl-mtable__dot {
	border-radius: 20px;
	display: block;
	height: 8px;
	width: 8px;
}

.rkl-mtable__dot--win {
	background: var(--rkl-green-02);
}

.rkl-mtable__dot--loss {
	background: var(--rkl-red-02);
}

.rkl-mtable__dot--none {
	background: var(--rkl-grey-01);
}

/* Play-offs --------------------------------------------------------------- */

/*
 * The board is the last thing in the card and has no row of its own to end on,
 * so without this it stops one pixel short of the card's bottom border and reads
 * as clipped. The inset matches the toolbar's at the other end of the panel —
 * same token, so they stay equal.
 */
.rkl-matches .rkl-playoffs--embedded {
	background: none;
	border: 0;
	box-shadow: none;
	padding: var(--rkl-card-pad) 0;
}

/* Filtrai sheet ----------------------------------------------------------- */

.rkl-matches__sheet {
	inset: 0;
	position: fixed;
	z-index: 100;
}

.rkl-matches__sheet-scrim {
	background: var(--rkl-black);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.22s ease;
}

.rkl-matches__sheet.is-open .rkl-matches__sheet-scrim {
	opacity: 0.34;
}

/*
 * A bottom sheet, not a centred dialog: full-bleed, rounded at the top only,
 * and its grey title bar sits over those corners — which is why they read grey
 * in the design rather than white.
 */
.rkl-matches__sheet-panel {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius) var(--rkl-radius) 0 0;
	bottom: 0;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	left: 0;
	max-height: 85vh;
	position: absolute;
	right: 0;
	transform: translateY(100%);
	transition: transform 0.22s ease;
}

.rkl-matches__sheet.is-open .rkl-matches__sheet-panel {
	transform: none;
}

.rkl-matches__sheet-header {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius) var(--rkl-radius) 0 0;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 8px 16px;
}

.rkl-matches__sheet-title {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	/*
	 * The frame has the title at x=183 rather than the true centre of 175,
	 * because the row is right-justified with a literal 111px gap. Centring the
	 * text is the sane reading of that, and it survives a longer word.
	 */
	margin-inline-start: 40px;
	text-align: center;
	flex: 1 1 auto;
}

.rkl-matches__sheet-close {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--rkl-radius);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}

.rkl-matches__sheet-close:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-matches__sheet-close img {
	display: block;
	height: 20px;
	width: 20px;
}

.rkl-matches__sheet-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	padding: 24px;
}

.rkl-matches__sheet-fields .rkl-field {
	display: flex;
	width: 100%;
}

.rkl-matches__sheet-actions {
	padding: 16px 24px 40px;
}

.rkl-matches__sheet-apply {
	background: var(--rkl-green-03);
	border: 0;
	border-radius: var(--rkl-radius);
	color: var(--rkl-white);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	padding: 12px 16px;
	transition: filter 0.15s ease;
	width: 100%;
}

.rkl-matches__sheet-apply:hover {
	filter: brightness(1.08);
}

.rkl-matches__sheet-apply:focus-visible {
	outline: 2px solid var(--rkl-black);
	outline-offset: 2px;
}

/* The page behind the sheet must not scroll while it is open. */
body.rkl-sheet-open {
	overflow: hidden;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 782px) {
	.rkl-matches {
		--rkl-gutter: 16px;
	}

	.rkl-matches__toolbar {
		gap: 8px;
	}

	.rkl-matches__toolbar-groups {
		flex: 1 1 auto;
		min-width: 0;
	}

	.rkl-matches__group-tabs {
		display: none;
	}

	.rkl-matches__toolbar-groups .rkl-field {
		display: flex;
		width: 100%;
	}

	.rkl-matches__toolbar .rkl-field {
		min-width: 0;
	}

	/*
	 * Every filter has moved into the sheet on a phone, so the toolbar is the
	 * division picker and the button — the mobile frame exactly.
	 */
	.rkl-matches__toolbar-controls .rkl-field {
		display: none;
	}

	.rkl-mtable thead th {
		font-size: 14px;
		padding: 7px 8px;
	}

	.rkl-mtable tbody td {
		padding: 8px 4px;
	}

	.rkl-mtable tbody tr {
		height: 48px;
	}

	.rkl-mtable__date {
		padding-inline: 8px;
	}

	.rkl-mtable__col-date {
		width: 100px;
	}

	.rkl-mtable__team {
		gap: 4px;
	}

	.rkl-mtable__score-box {
		font-size: 18px;
		min-width: 40px;
	}

	.rkl-mtable__bar {
		padding-inline: 2px;
		width: 12px;
	}

	.rkl-mtable__indicator {
		height: 24px;
	}

	.rkl-mtable__rank {
		width: 49px;
	}

	.rkl-mtable__sort {
		gap: 4px;
		padding: 7px 8px;
	}

	.rkl-mtable__badge {
		height: 24px;
		min-width: 24px;
	}

	.rkl-mtable__club {
		min-width: 154px;
	}

	/*
	 * The mobile frame's own column set — 12 / 49 / 154 and tight statistics.
	 *
	 * Komanda is given a width here rather than left to absorb the remainder:
	 * the fixed columns already total more than a 358px card, so there is no
	 * remainder and an `auto` column resolves to zero — the team names vanished
	 * entirely. The table scrolls sideways, which it did before and which the
	 * mobile frame draws.
	 */
	.rkl-mtable__col-bar {
		width: 12px;
	}

	.rkl-mtable__col-rank {
		width: 49px;
	}

	.rkl-mtable__col-club {
		width: 154px;
	}

	.rkl-mtable__col-stat {
		width: 44px;
	}

	.rkl-mtable__col-streak {
		width: 56px;
	}

	.rkl-mtable__col-last5 {
		width: 76px;
	}

	.rkl-mtable__chip {
		height: 24px;
		min-width: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rkl-matches__panel.is-entering .rkl-matches__toolbar,
	.rkl-matches__panel.is-entering .rkl-matches__groups,
	.rkl-matches__group.is-entering,
	.rkl-mtable tbody tr.is-entering {
		animation: none;
	}

	.rkl-matches__sheet-scrim,
	.rkl-matches__sheet-panel,
	.rkl-mtable__sort-icon,
	.rkl-matches__filter-button,
	.rkl-matches__sheet-apply {
		transition: none;
	}

	.rkl-matches__panel-inner.is-loading .rkl-matches__groups {
		animation: none;
	}
}