/* Compact standings card. Tokens live in assets/base.css. */

/* Container around the card, so the sponsor mark can sit outside the white
   surface as the design has it. */
.rkl-standings {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* „Pristato“ mark, centred under the card. */
.rkl-standings__sponsor {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: center;
	margin: 0;
}

/*
 * `.rkl-sponsor-link` in assets/base.css sets gap: 8px for the chips that use its
 * default spacing. This card's mark is 16px, and base.css loads after every
 * block's own stylesheet, so at equal specificity it would win and pull the two
 * chip states apart — 16px unlinked, 8px linked. The two-class selector outranks
 * it without an !important.
 */
.rkl-standings__sponsor.rkl-sponsor-link {
	gap: 16px;
}

.rkl-standings__sponsor-label {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.rkl-standings__sponsor-logo {
	display: block;
	height: 44px;
	max-width: 160px;
	object-fit: contain;
	width: auto;
}

/*
 * The three numbers the scroll area is built from, named once here and used by
 * the table rules below, so the height cannot drift from the rows it holds.
 *
 * A row is 49px, not 48. The cells are border-box (`.rkl-card *` in base.css),
 * so a 48px cell had to fit the 32px crest, 2 × 8px padding and the 1px divider,
 * and the crest pushed every row to 49 regardless. Declared at 48, the scroll
 * area came up 1px short per row: 10.5 rows showed only 14px of the eleventh,
 * all of it under the fade, and in Chrome the rail card read as a ten-row table
 * with a blank strip under it (measured 2026-10-02). At 49 the rows are exactly
 * what they render as, and the half row below really is half a row.
 */
.rkl-standings-card {
	--rkl-standings-head-h: 32px;
	--rkl-standings-row-h: 49px;
	--rkl-standings-rows: 10.5;

	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: var(--rkl-shadow);
	font-family: var(--rkl-font);
	overflow: hidden;
}

.rkl-standings-card__control {
	padding: 16px;
}

/*
 * „Pasirinkite" and the group stay on one row at every width.
 *
 * `assets/base.css` wraps every `.rkl-field` below 480px — label and select
 * both take `flex: 1 0 100%`, which stacks them, and the label drops to 12px.
 * That is right for the long labels elsewhere; on this card the label is one
 * word and the client asked for a single row. Until 2026-10-02 this override
 * lived inside the same 480px query, which left the desktop rail — 298px wide,
 * far above that breakpoint — on base.css's own sizing. There the label is
 * `flex: 0 1 auto` with a 70px floor, „Pasirinkite" in Poppins 14 measures
 * 70.4px (see news-archive/style.css), and the select's flex basis is its
 * widest option — so with the B group names in the list the arithmetic leaves
 * the label 0.4px short, and that reads „Pasirinkit…". Unconditional now, and
 * the label does not shrink at all, so the row is the same at 320 and at 1440.
 *
 * The select gives way instead: it takes what the label leaves and ellipsises
 * the group name. In the 298px rail that leaves ~126px for text (298 − 2 − 32
 * card and control − 2 − 32 field − 70.4 label − 8 gap − 26 chevron room), so
 * „A divizionas" fits whole and „B divizionas D grupė" — 140px in Poppins 14,
 * measured in Chrome — loses the end of „grupė", never its letter; a 320px
 * phone leaves 116px and the letter still shows. Safari draws no ellipsis
 * inside a select and clips instead — still one row.
 *
 * Two classes rather than an !important: base.css is (0,1,0) both in and out of
 * its media query, and block styles are not guaranteed to load after it.
 */
.rkl-standings-card .rkl-field {
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
}

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

.rkl-standings-card .rkl-field__select {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hidden division panels must stay hidden regardless of theme table styles. */
.rkl-standings-card__panel[hidden] {
	display: none;
}

/* Scroll area ------------------------------------------------------------ */

/*
 * The panel paints the fade; the scroller inside it scrolls. Split in two so
 * the fade stays on the bottom edge instead of travelling with the rows.
 */
.rkl-standings-card__panel {
	position: relative;
}

/*
 * Every team of the group, inside roughly the height the top-ten card had.
 *
 * Before: the top-ten card measured 655px in the 298px rail — 80 control, 32
 * head, ten 48.5px rows and a 50px „Rodyti viską" footer. Now the scroller takes
 * the footer's place and stops at 10.5 rows, 32 + 10.5 × 49 = 546.5, so the
 * card is 628.5 — shorter than before and never taller, so nothing under it on
 * the home page moves down. The half row is deliberate: a row cut through the
 * middle is what says „the table goes on" at a glance, and a whole number of
 * rows never does. At that height a group of ten or fewer fits and simply ends,
 * with no scrollbar and no fade; A division's eighteen and an eleven-team pool
 * scroll.
 *
 * 70vh caps it on short screens, which in practice means phones: the card is
 * full width there, and a 546px scroller in a ~550px visible viewport would
 * leave nowhere to put a thumb to scroll the page past it.
 *
 * Momentum scrolling is native for overflow containers on iOS 13+ and Android.
 * Overscroll is left at `auto` on purpose: the horizontal scrollers elsewhere
 * `contain` it to stop a swipe turning into back-navigation, but here
 * containing it would stop the page from taking over once the last team is
 * reached.
 */
.rkl-standings-card__scroller {
	max-height: min(var(--rkl-standings-head-h) + var(--rkl-standings-rows) * var(--rkl-standings-row-h), 70vh);
	overflow-x: hidden;
	overflow-y: auto;
	/* A row focused from the keyboard lands below the sticky header, not under it. */
	scroll-padding-top: var(--rkl-standings-head-h);
	scrollbar-color: var(--rkl-grey-02) transparent;
	scrollbar-width: thin;
}

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

.rkl-standings-card__scroller::-webkit-scrollbar {
	width: 6px;
}

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

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

/*
 * Fade over the bottom edge while there are rows below it. view.js adds
 * `has-more` from the scroll position, so the last team is never left washed
 * out once it is reached, and a group that fits gets no fade at all. Without the
 * script there is no fade and the half row still says it scrolls.
 *
 * 24px, the visible half of the cut row, so that row fades out rather than
 * disappearing: at 40px the fade was opaque over everything of it that showed
 * and took the cue away with it.
 *
 * `right` stops at the scrollbar where the platform draws a classic one —
 * view.js measures it — so the thumb is not faded along with the rows.
 */
.rkl-standings-card__panel::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--rkl-white) 100%);
	bottom: 0;
	content: "";
	height: 24px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: var(--rkl-standings-scrollbar, 0px);
	transition: opacity 0.2s ease;
}

.rkl-standings-card__panel.has-more::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rkl-standings-card__panel::after {
		transition: none;
	}
}

/* Table ----------------------------------------------------------------- */

/*
 * Fixed layout: the stat columns keep their width and the team name truncates,
 * exactly as in the design. With an automatic layout a long club name pushes
 * GM/W/L out of a narrow card.
 *
 * Separate borders with no spacing, not `collapse`: a collapsed border belongs
 * to the table rather than to the cell, so the sticky header below would leave
 * its bottom line behind and the rows' lines would scroll across it. With
 * separate borders each cell carries its own. `border: 0` on the table and the
 * cells undoes the 1px white frame `rkl-addons/assets/css/style.css` puts on
 * every bare `table` and `thead th` site-wide; under `collapse` those merged
 * into near-invisible white hairlines, under `separate` they would double up.
 */
.rkl-standings-table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}

.rkl-standings-table th,
.rkl-standings-table td {
	border: 0;
	border-bottom: 1px solid var(--rkl-grey-01);
}

/*
 * The card's own border closes the table, so the last row drops its line —
 * otherwise the bottom reads as a 2px rule once the scroller reaches it.
 */
.rkl-standings-table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * The header row stays put while the teams scroll under it. Each cell sticks
 * rather than the `thead`, because sticky cells are the form every engine has
 * supported longest (Chrome could not stick a `thead` before 91). The grey
 * surface is opaque, so nothing shows through, and z-index keeps the crests and
 * links of the rows below underneath it.
 */
.rkl-standings-table thead th {
	background: var(--rkl-grey-04);
	color: var(--rkl-black);
	font-size: 12px;
	font-weight: 600;
	height: var(--rkl-standings-head-h);
	line-height: 1.3;
	padding: 0 8px;
	position: sticky;
	text-align: left;
	top: 0;
	white-space: nowrap;
	z-index: 1;
}

/* Themes commonly stripe table rows; the design uses a flat white surface. */
.rkl-standings-table tbody tr,
.rkl-standings-table tbody tr:nth-child(odd),
.rkl-standings-table tbody tr:nth-child(even) {
	background: var(--rkl-white);
}

.rkl-standings-table tbody td {
	color: var(--rkl-black);
	font-size: 12px;
	height: var(--rkl-standings-row-h);
	padding: 8px;
	vertical-align: middle;
}

.rkl-standings-table__indicator {
	padding: 8px 2px !important;
	width: 8px;
}

.rkl-standings-table__rank {
	font-weight: 600;
	padding: 8px 4px !important;
	text-align: center;
	white-space: nowrap;
	width: 28px;
}

.rkl-standings-table__team {
	overflow: hidden;
	padding-left: 4px !important;
	padding-right: 4px !important;
	width: auto;
}

.rkl-standings-table__stat {
	text-align: center;
	white-space: nowrap;
	width: 34px;
}

.rkl-standings-table thead .rkl-standings-table__stat {
	text-align: center;
}

/* Position indicator ---------------------------------------------------- */

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

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

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

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

/* Team cell ------------------------------------------------------------- */

.rkl-team {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 4px;
	text-decoration: none;
}

.rkl-team:hover .rkl-team__name,
.rkl-team:focus-visible .rkl-team__name {
	color: var(--rkl-green-03);
}

.rkl-team__logo {
	flex: none;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

.rkl-team__name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * No footer link any more. Its `.rkl-link-button` rules went with it, and they
 * had to: they were unscoped, so on any page carrying this card they also
 * turned the „Youtube" link's external-link arrow in rkl/videos a quarter turn
 * the wrong way. base.css owns the shared link button.
 */

/* Narrow containers ------------------------------------------------------ */

@media (max-width: 380px) {
	.rkl-team__name {
		font-size: 11px;
	}

	.rkl-standings-table tbody td,
	.rkl-standings-table thead th {
		padding-left: 4px;
		padding-right: 4px;
	}
}