/**
 * Komandos „Tvarkaraštis" — one table, the whole season, in date order.
 *
 * Tokens, `.rkl-card`, `.rkl-field` and `.rkl-link-button` all come from
 * assets/base.css and are never redefined here; this file only sizes and places
 * them (landmine 21). base.css is enqueued AFTER this sheet, so every override
 * of a shared control below carries two classes — a one-class rule ties on
 * specificity and loses on source order (landmine 48).
 *
 * Figma: 2466-78736 (desktop), 2582-14591 (mobile).
 */

/*
 * The card surface. `.rkl-card` carries only the box model and the font — no
 * background, no radius, no shadow — so every block paints its own four
 * declarations, the same ones rkl/teams-table and rkl/players-table use.
 *
 * `width: 100%` is load-bearing: the card is a flex item of
 * `.rkl-tab-panel__inner`, and without a definite width that resolves to
 * fit-content, which here is the table's own minimum (landmine 38).
 *
 * The table bleeds to the card's left and right edges — the header band in the
 * frame is the full 1344, while the toolbar is inset 16 (2466:79061) — so the
 * horizontal inset belongs to the toolbar, not to the card.
 */
.rkl-tsched {
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: var(--rkl-shadow);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: flex;
	flex-direction: column;
	font-family: var(--rkl-font);
	/* 16 between the toolbar and the header band (2466:79061 → 2466:78929). */
	gap: 16px;
	padding: 16px 0 0;
	width: 100%;
}

.rkl-tsched[hidden] {
	display: none;
}

.rkl-tsched__notice {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 24px 16px;
	text-align: center;
}

/* Toolbar ------------------------------------------------------------------ */

/*
 * Two items pushed apart — the frame needs no gap (336 − 112 − 152 = 72 to
 * spare) but one is declared anyway, because the month field grows with its
 * longest option.
 *
 * It never wraps, and that is deliberate: flexbox wraps BEFORE it shrinks, so a
 * wrappable toolbar took a second line at a 343px card (a 375px phone) while
 * there was still room for both controls. The field shrinks instead — see below.
 */
.rkl-tsched__toolbar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	min-height: 48px;
	/* The card has no horizontal padding of its own — see .rkl-tsched. */
	padding: 0 16px;
}

/*
 * „Atspausdinti" is a button because the action is window.print(); the node has
 * no href (2466:79062). `.rkl-link-button` already gives it the green Medium
 * 14/1.3 and the 14px glyph, so this only undoes the user-agent button box.
 * None of these properties are declared on `.rkl-link-button`, so one class is
 * enough here.
 */
.rkl-tsched__print {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/*
 * The design's field is 152 wide with „Spalis" in it (2466:78928). It is a
 * MINIMUM rather than a width, for the reason `.rkl-matches__toolbar .rkl-field`
 * already carries: a `<select>` sized `auto` is as wide as its longest option
 * (landmine 37), and „Lapkritis" does not fit 152 next to the label — a fixed
 * 152 buys „Lapkriti…". The field takes the few pixels it needs instead, and
 * gives them back when the toolbar runs out of room: measured 198 at the
 * design's 368px card, 182 at 343, 159 at 320.
 *
 * `flex: 0 1 auto` and not `1 1 152px`: with a definite basis Chrome grows the
 * field to its max-content and then refuses to shrink it at all, so a 320px card
 * overflowed by 24px.
 */
.rkl-tsched__field {
	flex: 0 1 auto;
	min-width: var(--rkl-tsched-field-w, 152px);
}

/* Scroller ----------------------------------------------------------------- */

/*
 * The 1344 table exactly fills the 1344 card, so there is nothing to scroll at
 * the design width; below it — and on every mobile width — the table is wider
 * than the card and scrolls sideways under a header that scrolls with it.
 * Nothing is sticky: neither frame asks for it.
 *
 * The affordance the mobile frame draws (2582:15773) is a bare 9px rounded thumb
 * on white with no track, which is what these rules reproduce on WebKit;
 * Firefox gets the same shape from `scrollbar-width: thin`.
 */
.rkl-tsched__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-color: var(--rkl-grey-02) transparent;
	scrollbar-width: thin;
}

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

.rkl-tsched__scroller::-webkit-scrollbar {
	height: 9px;
}

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

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

/* Reset -------------------------------------------------------------------- */

/*
 * 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` — no class, no scope. It zebra-stripes
 * the rows, sets 13px bold text with `!important`, forces
 * `border-collapse: collapse`, paints the header `#eaeaea` and adds a grey
 * hover, and it reaches every table in every new block.
 *
 * The `!important` here is not a shortcut: the declarations being overridden
 * carry it themselves. The zebra kill needs TWO classes, because
 * `tbody tr:nth-child(odd)` is (0,1,2) and a one-class rule ties and loses on
 * source order. `border-collapse: separate` is what lets each cell own its own
 * divider.
 */
.rkl-tsched__table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	/*
	 * Fixed layout plus a width per column, or the content renegotiates every
	 * one of them (landmine 46). The widths are on the <col> elements below.
	 */
	table-layout: fixed;
	/*
	 * 308 + 308 + 112 + 308 = 1036 of fixed columns plus 196 for the address —
	 * the mobile frame's address width, which is the narrowest the design ever
	 * draws it. Below that the table scrolls instead of crushing the column.
	 */
	min-width: 1232px;
	width: 100%;
}

.rkl-tsched__table thead {
	background: none;
}

.rkl-tsched .rkl-tsched__table tbody tr,
.rkl-tsched .rkl-tsched__table tbody tr:hover {
	background: none;
}

.rkl-tsched__table th,
.rkl-tsched__table td {
	border: 0;
	color: var(--rkl-black) !important;
	font-weight: 400 !important;
	vertical-align: middle;
}

/*
 * A hidden row must stay hidden whatever a later `display` rule says — a
 * class-level `display` beats the user-agent `[hidden]` rule, and this project
 * has already lost a round to exactly that (landmine 2).
 */
.rkl-tsched__table tr[hidden] {
	display: none;
}

.rkl-tsched__empty[hidden] {
	display: none;
}

/* Columns ------------------------------------------------------------------
 *
 * 308 · 308 · 112 · 308 · 308 = 1344 in the frame. Four of them are declared
 * and the address takes the remainder, deliberately: the card is 1344 wide in a
 * 1344 column and its 1px border leaves 1342 inside, so a fifth fixed 308 would
 * put 2px of horizontal scroll on the tab at the design width. The address
 * column measures 306 there and 196 on mobile, which is the frame's own number.
 */

.rkl-tsched__col-date {
	width: 308px;
}

.rkl-tsched__col-team {
	width: 308px;
}

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

/* Header ------------------------------------------------------------------- */

/*
 * The table class is on the selector because the reset above says
 * `.rkl-tsched__table th, td { border: 0 }` at (0,1,1): a bare
 * `.rkl-tsched__head { border-bottom }` is (0,1,0) and loses to it, which is how
 * a table ships with no rules between its rows (landmine 23). `font-weight`
 * needs `!important` for the same reason — the reset's 400 carries it.
 *
 * `height: 49px` is the frame's 48px band plus its 1px divider: the cell is
 * border-box, so the border is inside the height, and 48 here would leave a
 * 47px band and land the six-row table 6px short of the frame's 518.
 *
 * No top border. The band in the frame (2466:78929) carries `border-b` only,
 * and the 518 arithmetic only closes without one.
 *
 * No vertical padding either: a cell's height is a minimum and padding ADDS to
 * it, so the design's 16px inset is exactly that — an inset (landmine 45).
 */
.rkl-tsched__table .rkl-tsched__head {
	background: var(--rkl-grey-04);
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 500 !important;
	height: 49px;
	line-height: 1.3;
	overflow: hidden;
	padding: 0 16px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-tsched__table .rkl-tsched__head.is-end {
	text-align: right;
}

.rkl-tsched__table .rkl-tsched__head.is-center {
	text-align: center;
}

/* Rows --------------------------------------------------------------------- */

/*
 * 65 = the frame's 64px cell plus its 1px divider, for the same border-box
 * reason as the header. The last row has no divider under it — the card's own
 * border is there instead — so it measures the bare 64. `is-last` rather than
 * `:last-child`, because the month filter hides rows and the visually last row
 * is then not the last child; PHP prints it on the last row so the table is
 * right before any script runs, and view.js moves it as rows are filtered.
 */
.rkl-tsched__table .rkl-tsched__cell {
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	height: 65px;
	line-height: 1.5;
	padding: 8px 16px;
	text-align: left;
}

.rkl-tsched__table .rkl-tsched__row.is-last .rkl-tsched__cell {
	border-bottom: 0;
	height: 64px;
}

.rkl-tsched__table .rkl-tsched__cell.rkl-tsched__date {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The home side faces the score, so its name and crest sit against the middle
 * column. (0,3,0) — the cell rule above is (0,2,0) and sets `left`.
 */
.rkl-tsched__table .rkl-tsched__cell.is-end {
	text-align: right;
}

/*
 * 4px of side padding, not the frame's 16: the score assembly is ~84 wide and
 * the day label wider still, and 16 either side of a 112px column leaves 80.
 * The column stays 112 either way — the table is fixed-layout.
 */
.rkl-tsched__table .rkl-tsched__cell.rkl-tsched__mid {
	padding: 8px 4px;
	text-align: center;
}

/*
 * The address stays on one line. Wrapped, it was the tallest thing in the row
 * and pushed the 64px rhythm out; the table scrolls sideways anyway, so a second
 * line buys nothing.
 */
.rkl-tsched__table .rkl-tsched__cell.rkl-tsched__address {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-tsched__address a {
	color: inherit;
	font-weight: 400;
	text-decoration: none;
}

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

/* The two teams ------------------------------------------------------------ */

/*
 * `vertical-align: middle` matters: an inline-flex box sits on the cell's text
 * baseline and reserves room for the descender under it, which adds several
 * pixels to every row and pushes the table off its rhythm (landmine 25).
 *
 * Mirrored, not repeated: the markup puts the name before the crest on the home
 * side and after it on the away side, and the cell's `text-align` is what
 * pushes each one against the score.
 */
.rkl-tsched__team {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	text-decoration: none;
	vertical-align: middle;
}

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

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

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

/*
 * `contain`, not the frame's `cover`: a club crest must not be cropped. One
 * class is enough to beat the legacy `tbody td img { width: 30px }` at (0,0,3).
 */
.rkl-tsched__crest {
	flex: 0 0 auto;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

/* The middle column ------------------------------------------------------- */

/*
 * 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 own box, which is why `box-sizing` is stated here.
 *
 * The existing card puts the stroke on both boxes where the frame gives the
 * filled one none — black on black, invisible either way, and it keeps the two
 * boxes the same height.
 */
.rkl-tsched__score {
	display: inline-flex;
	vertical-align: middle;
}

.rkl-tsched__score-box {
	align-items: center;
	background: var(--rkl-white);
	border: 2px solid var(--rkl-black);
	box-sizing: border-box;
	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-tsched__score-box:first-child {
	border-radius: var(--rkl-radius) 0 0 var(--rkl-radius);
}

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

/*
 * `!important` on the colour only: the cell's own `color: … !important` from the
 * reset is inherited, and while an own declaration beats an inherited value, the
 * legacy sheet paints `table td { color: #000 !important }` too — the matches
 * card carries the same guard for the same reason.
 */
.rkl-tsched__score-box.is-winner {
	background: var(--rkl-black);
	color: var(--rkl-white) !important;
	position: relative;
	z-index: 1;
}

/*
 * An unplayed game has no score, so the same 112px column carries the tip-off
 * time over the day it falls on — the stack the /rungtynes/ schedule panel
 * already uses. No chip: neither frame contains one.
 */
.rkl-tsched__when {
	display: block;
}

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

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

/* Empty state -------------------------------------------------------------- */

.rkl-tsched__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 0 16px 24px;
	text-align: center;
}

/*
 * base.css stacks `.rkl-field` under 480px, label above value. That is right for
 * the narrow standings card it was written for and wrong here: the mobile frame
 * keeps „Mėnuo  Spalis" on one line in a 152px field (2582:15116). Two classes,
 * because base.css's rules are one class and are enqueued after this sheet.
 */
@media (max-width: 480px) {
	.rkl-tsched .rkl-field {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px 16px;
	}

	.rkl-tsched .rkl-field__label {
		flex: 0 0 auto;
		font-size: 14px;
		font-weight: 400;
	}

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

	/*
	 * Under a ~305px card („Atspausdinti" 112 + 16 + the field's 152 + the
	 * toolbar's own 32 of padding) the designed minimum no longer fits, so the
	 * select gives up its last pixels rather than the field hanging over the
	 * card's edge. At every width the design draws there is room to spare and
	 * this changes nothing.
	 */
	.rkl-tsched .rkl-tsched__field {
		min-width: 0;
	}
}

/* BREAKPOINT 782 ----------------------------------------------------------- */

/*
 * The mobile card is 368 wide with a 703px table inside it (2582:15112), so the
 * table scrolls sideways and the 9px thumb from the frame gets its lane: 6px
 * from the last row to the thumb, 9px of thumb, 6px to the card's edge.
 *
 * Two numbers in the frame are not used. The away column is drawn 109 against
 * the home column's 154 for identical content (§4.3) — an artifact of the column
 * sitting past the 368 viewport, so both get 154. And the team cells are drawn
 * with no gap at all (§4.5); 4px costs nothing in a table that scrolls.
 *
 * The score box does NOT shrink here: the frame keeps it at 32 tall with 20px
 * digits (2582:15136), same as desktop.
 */
@media (max-width: 782px) {
	.rkl-tsched {
		padding-bottom: 6px;
	}

	.rkl-tsched__scroller {
		padding-bottom: 6px;
	}

	.rkl-tsched__table {
		/* 85 + 154 + 114 + 154 + 196 = 703 (2582:15118 …). */
		min-width: 703px;
	}

	.rkl-tsched__col-date {
		width: 85px;
	}

	.rkl-tsched__col-team {
		width: 154px;
	}

	.rkl-tsched__col-score {
		width: 114px;
	}

	/* 32 band + 1px divider. */
	.rkl-tsched__table .rkl-tsched__head {
		font-size: 12px;
		font-weight: 600 !important;
		height: 33px;
		padding: 0 8px;
	}

	/* 48 cell + 1px divider; the 48 is the crest plus its 8px insets. */
	.rkl-tsched__table .rkl-tsched__cell {
		font-size: 12px;
		height: 49px;
		padding: 8px;
	}

	.rkl-tsched__table .rkl-tsched__row.is-last .rkl-tsched__cell {
		height: 48px;
	}

	/* The address cell alone keeps 14px, as measured (2582:15152). */
	.rkl-tsched__table .rkl-tsched__cell.rkl-tsched__address {
		font-size: 14px;
	}

	.rkl-tsched__team {
		gap: 4px;
	}

	.rkl-tsched__team-name {
		font-size: 12px;
		font-weight: 600;
	}
}

/* BREAKPOINT 782 */
@media (max-width: 782px) {
	/*
	 * An unplayed fixture stacks the clock over the day. At the desktop sizes
	 * that stack is 39.6px inside a 48px row, which leaves no room for the
	 * cell's own padding and pushes the row to 56. Both steps down here so the
	 * pitch stays 48 whether the game has been played or not.
	 */
	.rkl-tsched__clock {
		font-size: 16px;
		line-height: 1.2;
	}

	.rkl-tsched__day {
		font-size: 11px;
		line-height: 1.2;
	}
}