/* Performance page: sticky buy bar, anchor navigation and the show
   table (Task 12). Figma «Sticky Buy Ticket Bar» 3336:16924 /
   «Frame 1437255304» 4277:17436, «Quick Navigation Bar» 3099:2411 /
   4277:17369, «Show Schedule» 3110:3504 / «Date Selector Container»
   4234:26331. tz-ua.md §4.4(2–3),
   accessibility-ua.md §3.5.

   Breakpoints: like the hero (performance-hero.css), only 390 and 1440 frames
   exist for all three components, so the 390 layout stays fluid up to 1440 —
   one control point, no invented intermediate — and the 1440 spec then holds
   through 1920 (no wider node either).

   Teal text: every «#12AD99 on light» text in these frames is 2.7:1, below
   WCAG AA — replaced by `--color-primary-700` (5.3:1 on `--color-neutral-50`),
   which is the substitution this project already made for the same colour in
   the header, footer and event card (animations.md). Logged in
   design/figma/designer-questions.md.

   `#2A2A2A` (the show table's date text, 3110:3288) is an unbound literal in
   the design — every other colour in these nodes resolves to a Colors
   variable — so it renders as its nearest token, `--color-neutral-800`
   (#272B30). Also logged. */

:root {

	/* 42px specs strip + 84px bar (4277:17423 + 4277:17386). Read by
	   `scroll-padding-block-end` and the footer reserve below, so it has to
	   live on :root, not on the bar. This file only loads on a performance
	   page. */
	--podil-sticky-bar-h: 126px;
}

/* accessibility-ua.md §3.5: on mobile the bar takes at most 20 % of the
   viewport height. 126px crosses that at 630px of viewport height, so below
   it the «Найближчий показ» strip folds away and the bar alone (84px) stays —
   the strip repeats the hero's accordion row, the bar carries the purchase. */
@media (max-width: 1439px) and (max-height: 629px) {

	:root {
		--podil-sticky-bar-h: 84px;
	}
}

@media (min-width: 1440px) {

	:root {
		--podil-sticky-bar-h: 85px;
	}
}

/* accessibility-ua.md §3.5: «не перекриває фокусований елемент». Two rules do
   it together. `scroll-padding-block-end` makes anchor jumps and the browser's
   own "scroll the focused element into view" keep the bar's height clear; the
   footer then reserves that same height as empty space, so even at the very
   end of the document — where there is nothing left to scroll — the strip the
   bar covers is the reserve and never content. `:has()` so a performance with
   nothing to buy — and a page whose bar has not been revealed yet, including
   one without JavaScript — gets neither (fix round 1, Minor 3). */
html:has(.performance-sticky:not([hidden])) {
	scroll-padding-block-end: var(--podil-sticky-bar-h);
}

body:has(.performance-sticky:not([hidden])) .site-footer::after {
	content: "";
	display: block;
	height: var(--podil-sticky-bar-h);
}

/* === Sticky buy bar ================================================ */

/* Bottom of the viewport, not under the header: both Figma mocks are
   viewport-sized frames with `justify=end` and the bar's only stroke is on its
   top edge (1/0/0/0). Below the a11y panel / mobile menu overlays (z-index 20 /
   15), above page content. */

/* Kilok is not licensed yet: the site runs Exo 2 under its name (fonts.css,
   size-adjust 95.5 %). Figma trims these layers to Kilok's cap height
   (0.70 em), the substitute's is 0.659 em, so a `text-box`-trimmed box lands
   0.041 em short. The difference is added back as bottom padding, the same
   remedy visit.css uses, so the boxes match the spec instead of the
   substitute's metrics. */
.performance-sticky,
.show-table {
	--podil-cap-fix: 0.041em;
}

.performance-sticky {
	container-name: podil-sticky;
	position: fixed;
	inset: auto 0 0;
	z-index: 10;
}


/* «Section/Premiere/Specs» 4277:17423 — 390 only (1440 puts the poster,
   tagline and title in the bar instead). Inside stroke: the node's own height
   (42) excludes it, so it cannot be a border here. */
.performance-sticky__specs {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 42px;
	padding: 12px 16px;
	background: var(--color-neutral-50);
	box-shadow: inset 0 1px 0 var(--color-neutral-300);
}

.performance-sticky__specs-label,
.performance-sticky__specs-value {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.performance-sticky__specs-label {
	color: var(--color-neutral-600);
	font-weight: 400;
}

.performance-sticky__specs-value {
	color: var(--color-neutral-800);
	font-weight: 600;
}

/* The «Найближчий показ» strip folds away when the two strips would cross the
   20 % of the viewport height accessibility-ua.md §3.5 allows on mobile —
   either because the viewport is short (126px crosses it at 630px high) or
   because the accessibility widget is at its top text step (§4: 87.5…150 % in
   12.5 % steps; at 150 % on a 390×844 phone they measure 173.5px against a
   168.8px ceiling — every step below it fits). The bar itself always stays:
   the strip only repeats the hero's «Найближчий показ» row, the bar carries
   the purchase. Both rules sit after the strip's own `display`, which an
   `@media`/`@container` block does not outrank on specificity. */
@media (max-width: 1439px) and (max-height: 629px) {

	.performance-sticky__specs {
		display: none;
	}
}

@container podil-sticky style(--font-scale: 1.5) {

	.performance-sticky__specs {
		display: none;
	}
}

/* …and the measured version of the same rule, which `sticky-bar.js` sets from
   the bar's own height against 20 % of the current viewport — the static rules
   above can only guess at the widget's text steps and cannot see the dyslexia
   font's line-height scale at all (fix round 1, Critical 2). Two levels: fold
   the «Найближчий показ» row, then drop the badge and price, which the hero's
   buy card repeats anyway, so the purchase itself never disappears. */
.performance-sticky[data-podil-sticky-fit] .performance-sticky__specs {
	display: none;
}

.performance-sticky[data-podil-sticky-fit="tight"] .performance-sticky__state {
	display: none;
}

.performance-sticky[data-podil-sticky-fit="tight"] .performance-sticky__bar {
	padding-block: 8px;
}

/* «Frame 1437254861» 4277:17386 (390) / 3099:2428 (1440). Here the node's own
   height *does* include the 1px top stroke (390: 1 + 16 + 51 + 16 = 84;
   1440: 1 + 12 + 60 + 12 = 85), so a real border-top reproduces both the
   height and the content offset exactly. */
.performance-sticky__bar {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-top: 1px solid var(--color-neutral-300);
	background: var(--color-neutral-50);
}

/* Poster thumbnail + tagline + title: 1440 only (3106:1896). */
.performance-sticky__show {
	display: none;
}

.performance-sticky__buy {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* «Frame 1437255303» 4277:17432 — badge over price, bottoms of the two texts
   apart by 8. At 1440 the badge is hidden and this collapses to the price row
   alone, which is what «Frame 1437254842» draws there. */

/* `flex: 0 0 auto` — never below the badge's own width: at `sold_out` the
   disabled button comes with an explanation span, which is a third item in the
   row above and was squeezing «Продано» to «Продан» under the button
   (fix round 1, Critical 1). */
.performance-sticky__state {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* The sold-out explanation (`podil_ticket_button()`) has no room and no node in
   either bar frame — the state badge beside it already says «Продано» in text.
   Out of the layout, still announced; the show table below shows it visibly. */
.performance-sticky .c-ticket__note {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.performance-sticky__badge {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	margin: 0;
	padding: 4px 8px;
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 400;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	white-space: nowrap;
}

.performance-sticky__badge--available {
	background: var(--color-primary-100);
	color: var(--color-primary-800);
}

.performance-sticky__badge--few {
	background: var(--color-attention-100);
	color: var(--color-attention-700);
}

.performance-sticky__badge--sold_out {
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
}

/* «Frame 1437254972»: amount and «₴» sit on a common bottom edge, 4 apart, at
   two different sizes. */
.performance-sticky__price {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
}

.performance-sticky__amount {
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
}

.performance-sticky__currency {
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* The instance's own padding (pad=12/36 at 390, 14/36 at 1440) — wider than
   `.c-ticket`'s default gutter, which was measured for the header's «Квитки»,
   not for «Купити квиток» — and its fixed frame width (192 / 209) as a basis
   rather than a floor: at the widget's top text steps the state column beside
   it keeps its own width (Critical 1), so the button is what has to give, and
   it does it by wrapping its label rather than pushing the bar off-screen. */
.performance-sticky .c-ticket {
	flex: 0 1 192px;
	min-width: 0;
	padding-inline: 36px;
	white-space: normal;
}

@media (min-width: 1440px) {

	.performance-sticky__specs {
		display: none;
	}

	/* 3099:2428 is #FFFFFF here, not the 390 bar's #FAFAFA. */
	.performance-sticky__bar {
		padding: 12px 56px;
		background: var(--color-base-white);
	}

	.performance-sticky__show {
		display: flex;
		align-items: center;
		gap: 20px;
		min-width: 0;
	}

	.performance-sticky__thumb {
		flex-shrink: 0;
		width: 45px;
		height: 60px;
		object-fit: cover;
	}

	/* «Frame 1437254862» is a fixed 765 next to a right group that hugs, which
	   is what puts 161px of space between them; `flex: 0 1 765px` keeps that
	   width but lets a longer title shrink it instead of overflowing the bar. */
	.performance-sticky__titles {
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 765px;
		min-width: 0;
	}

	.performance-sticky__tagline {
		margin: 0;
		color: var(--color-primary-700);
		font-family: var(--font-body);
		font-size: var(--fs-s-text);
		font-weight: 600;
		line-height: var(--lh-s-text);
		letter-spacing: var(--ls-s-text);
		text-transform: uppercase;
	}

	.performance-sticky__title {
		margin: 0;
		color: var(--color-neutral-800);
		font-family: var(--font-title);
		font-size: var(--fs-h3);
		font-weight: 400;
		line-height: var(--lh-h3);
		letter-spacing: var(--ls-h3);
		padding-bottom: var(--podil-cap-fix);
		text-box: trim-both cap alphabetic; /* leadingTrim CAP_HEIGHT on 3099:2429. */
		text-transform: uppercase;
	}

	.performance-sticky__buy {
		flex: 0 0 auto;
		justify-content: flex-end;
		gap: 40px;
	}

	.performance-sticky__badge {
		display: none;
	}

	.performance-sticky .c-ticket {
		flex-basis: 209px;
		min-width: 209px;
		white-space: nowrap;
	}
}

/* === Anchor navigation ============================================= */

/* Full-bleed strip, 40px tall at 390 (4277:17369) and 50px at 1440
   (3099:2411). At 390 the eight tabs are 843px wide inside a 390 frame — the
   design's own horizontal scroll — and the same container handles a grown
   `--font-scale` at any width. */
.performance-anchor-nav {
	margin-block: 40px;
	overflow-x: auto;
}

/* «Таби фіксуються зверху» — 4497:25429 (1440) and 4497:25436 (390). CSS
   sticky, as the note's own Locomotive reference («03. CSS sticky») says: no
   duration, no script, and the strip keeps its own horizontal scroll (sticky
   is resolved against the PAGE, the nearest scrolling ancestor of the nav
   itself, not against the row inside it).

   It sticks below the site header and rides with it, the same pair of custom
   properties filters.css uses, so the header can never land on top of the
   tabs; both are 0 when the header is not sticky (no script, or motion off),
   which is the plain `top: 0` this would otherwise be.

   z-index 11: over the page, under the afisha filter bar's 12 and the
   header's 30, and over the sticky buy bar's 10 — the two never meet
   (one is pinned to the top, the other to the bottom), and the order only
   matters at a viewport short enough for them to touch, where the tabs
   are what the reader is aiming at.

   accessibility-ua.md §3.5 asks the same of it as of the buy bar: it must not
   cover a focused element. That is `scroll-padding-top` (site-header.css) plus
   this strip's own height, which is why the height is published as
   `--podil-anchor-nav-h` and added to the page's scroll padding below. */
.performance-anchor-nav {
	position: sticky;
	z-index: 11;

	/* The shift goes in `top`, never in `transform`: a transform on a
	   `position: sticky` box applies while it is still IN FLOW too, so with the
	   header hidden the bar was lifted a whole header height above its own place
	   and lay over the content above it — including, on 390, the hero's focused
	   accordion toggle (fix round 1, C1: WCAG 2.4.11, accessibility-ua §3.5).
	   `top` on a sticky box does nothing until it actually sticks. The
	   `transform` argument site-header.css makes for the header itself (its
	   panels are `position: fixed` children) does not apply here: none of these
	   bars has a fixed descendant — the afisha dropdowns are `absolute` inside
	   the bar — and using `top` also stops the bar being a containing block for
	   one. */
	top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px));
	background: var(--color-base-white);
	transition: top 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* One offset for both bars: the sticky tabs at the top, the buy bar at the
   bottom. `scroll-padding-top` is declared once in site-header.css from
   `--podil-header-h`; on this page the tab strip stands under the header, so
   the anchor a reader jumps to has to clear both.

   On `:root`, not on `body`: scroll padding is read from the SCROLLING box,
   and for the page that is the document element — the same declaration on
   `body` computes and reads back but moves nothing. `:root:has()` also out-
   specifies site-header.css's own `:root` rule whatever order the two sheets
   are printed in. */
:root:has(.performance-anchor-nav) {
	scroll-padding-top: calc(var(--podil-header-h, 0px) + var(--podil-anchor-nav-h, 0px));
}

/* `min-width: max-content` is what makes the strip scroll instead of squeezing:
   without it the row would stay at the container's width and the tabs beyond it
   would spill out of the scrollport. */
.performance-anchor-nav__list {
	display: flex;
	min-width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.performance-anchor-nav__item {
	display: flex;
	flex: 0 0 auto;
}

/* The three tabs Figma lets fill the 1440 row (3099:2416 / 3099:2418 /
   3099:2426) grow to fill it ONLY when at least one other `--grow` tab also
   rendered (`podil_performance_section_grow_ids()`: trailer/cast/reviews —
   only sections that actually have content get a tab, tz-ua.md §4.4). Real
   content rarely has all three; most performances have only "Актори" among
   them (client fix ПР-4: /repertoire/kolyshni/, /repertoire/bilshe-krasy…/),
   and `flex-grow: 1` alone on that one tab swallowed the whole remaining row
   — "second tab spans half the screen". The frame never shows this partial
   state (it draws all eight tabs, `global-constraints.md`'s node table), so
   there is nothing to match pixel-for-pixel here; a lone grow tab instead
   hugs its label like every non-grow tab, leaving the row short of 1440
   rather than invented-stretched — `.performance-anchor-nav`'s own
   `overflow-x: auto` already anticipates a row that doesn't exactly fill the
   viewport. `:has()` finds "another `--grow` tab exists among the siblings"
   without a script: the general-sibling half catches every grow tab that
   *follows* another one, the `:has(~ …)` half catches every grow tab that
   has one *following* it — together, every grow tab when 2+ are present,
   none when only 1 is. */
.performance-anchor-nav__item--grow {
	flex-grow: 0;
}

.performance-anchor-nav__item--grow:has(~ .performance-anchor-nav__item--grow),
.performance-anchor-nav__item--grow ~ .performance-anchor-nav__item--grow {
	flex-grow: 1;
}

.performance-anchor-nav__link {
	display: flex;
	box-sizing: border-box;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 8px;
	background: var(--color-base-white);
	box-shadow:
		inset 0 1px 0 var(--color-neutral-300),
		inset 0 -1px 0 var(--color-neutral-300),
		inset 1px 0 0 var(--color-neutral-300);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 600;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* `individualStrokeWeights.left = 0` on the first tab (3099:2412 / 4277:17370)
   — every other tab carries a left edge, this one starts the strip
   (fix round 1, Minor 2). `:not([aria-current])` so the current tab, which has
   no strokes at all in the design, is not given two back by specificity. */
.performance-anchor-nav__item:first-child
.performance-anchor-nav__link:not([aria-current]) {
	box-shadow:
		inset 0 1px 0 var(--color-neutral-300),
		inset 0 -1px 0 var(--color-neutral-300);
}

.performance-anchor-nav__link[aria-current] {
	background: var(--color-neutral-800);
	box-shadow: none;
	color: var(--color-base-white);
}

/* Inside the scrolling strip an offset ring would be clipped at the ends, so
   the ring is drawn inside the tab instead (still 2px, still
   `--color-primary-700`; never removed). On the dark current tab that teal is
   2.5:1, so there the ring turns white (13:1). */
.performance-anchor-nav__link:focus-visible {
	outline-offset: -2px;
}

.performance-anchor-nav__link[aria-current]:focus-visible {
	outline-color: var(--color-base-white);
}

/* Chromium drops author `box-shadow` here and remaps `background`, so both the
   cell edges and the current tab's dark fill vanish together. Same remedy as
   base.css's own forced-colors block: the inset edges become an inset outline,
   and the current tab is painted with the system's own selected pair
   (fix round 1, Important 4). */
@media (forced-colors: active) {

	.performance-anchor-nav__link {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.performance-anchor-nav__link[aria-current] {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	/* The row rules of the show table are `border-bottom` already, which
	   forced-colors keeps; the badges are background-only, so they get the same
	   inset edge as every other flattened surface. */
	.show-table__badge {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}

@media (min-width: 1440px) {

	/* 3076:2406 ends 85px above the nav, 3110:3504 starts 45px below it. */
	.performance-anchor-nav {
		margin-block: 85px 45px;
	}

	.performance-anchor-nav__link {
		height: 50px;
		padding: 12px 20px;
		font-size: var(--fs-s-text);
		line-height: var(--lh-s-text);
		letter-spacing: var(--ls-s-text);
	}
}

/* === Show table ==================================================== */

.show-table {
	padding: 0 16px;
}

.show-table__title {
	max-width: 314px;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-s);
	font-weight: 400;
	line-height: var(--lh-h2-s);
	letter-spacing: var(--ls-h2-s);
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic; /* leadingTrim CAP_HEIGHT on 3110:3283 / 4234:26301. */
	text-transform: uppercase;

	/* At 320 px with the widget's 150 % step (and again with the dyslexia
	   face, which is wider still) a single Ukrainian word of this heading is
	   longer than the column, and an unbreakable word is clipped by its own
	   box — `element-overflow.js` on the three real performances reported it
	   at 320/360/390. The theme's established remedy, used by the repertoire
	   and afisha titles for exactly this case: let the word break rather than
	   cut it or widen the page. Nothing changes at the design's own sizes,
	   where no word reaches the edge. */
	overflow-wrap: anywhere;
}

/* Below 1440 Figma stacks each show into a card (4234:26331), which a table row
   cannot do while it lays its cells out in a line — hence `display` overrides
   down the whole table here, and the explicit `role` attributes in
   show-table.php that keep the table a table for assistive technology once the
   native roles are gone. Restored to real table display at 1440. */
.show-table__table,
.show-table__head,
.show-table__head tr,
.show-table__head th,
.show-table__table tbody {
	display: block;
}

.show-table__table {
	width: 100%;
	margin-top: 40px;
	border-collapse: collapse;
}

/* Figma draws no header row. The cells stay in the table (semantics), their
   labels are screen-reader-only and they carry no padding, so the row has no
   height of its own. */
.show-table__head th {
	padding: 0;
	border: 0;
	font-weight: inherit;
}

.show-table__row {
	display: grid;
	grid-template-columns: 1fr auto;
	padding-block: 48px;
	border-bottom: 1px solid var(--color-neutral-300);
}

.show-table__row:first-child {
	padding-top: 0;
}

.show-table__cell {
	padding: 0;
	font-weight: inherit;
	text-align: left;
}

/* Hugs its text (4234:26275 is `w:hug`) while its grid column keeps the
   remaining width, and sits on a common bottom edge with the time column
   (4234:26300 is `align=end`). */
.show-table__cell--date {
	grid-row: span 2;
	align-self: end;
	justify-self: start;
}

.show-table__cell--time {
	grid-column: 2;
	justify-self: end;
	margin-top: 8px;
}

.show-table__cell--state {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

/* Hugs its icon + name (4234:26279 is `w:hug`) rather than stretching across
   the row it spans. */
.show-table__cell--hall {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 24px;
}

.show-table__cell--buy {
	grid-column: 1 / -1;
	margin-top: 32px;
}

.show-table__date-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.show-table__weekday {
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;
}

.show-table__date,
.show-table__time {
	display: block;
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic; /* leadingTrim CAP_HEIGHT on 3110:3288 / 3110:3289. */
	text-transform: uppercase;
}

.show-table__date {
	color: var(--color-neutral-800);
}

.show-table__time {
	color: var(--color-primary-700);
}

.show-table__hall-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.show-table__hall-group svg {
	flex-shrink: 0;
	width: 21px;
	height: 20px;
}

.show-table__hall {
	padding-top: 1px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 600;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic; /* leadingTrim CAP_HEIGHT on 3110:3290 / 4234:26282. */
	text-transform: uppercase;
}

/* Block-level, not inline: as an inline box inside a table cell its line box
   would add the font's descender space and push the badge ~1px below the
   spec's centre (3110:3349 y=128.5). */
.show-table__badge {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	padding: 4px 8px;
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 400;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	white-space: nowrap;
}

.show-table__badge--available {
	background: var(--color-primary-100);
	color: var(--color-primary-800);
}

.show-table__badge--few {
	background: var(--color-attention-100);
	color: var(--color-attention-700);
}

.show-table__badge--sold_out {
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
}

/* Full-width button (4234:26284 is `w:fill`) at its own 40px height, which is
   taller than `.c-ticket`'s 34 below 768 — the instance in this table pins the
   mob=off variant. */
.show-table .c-ticket {
	width: 100%;
	min-height: 40px;
	padding-inline: 36px;
}

/* …and its label comes from that same instance rather than from the shared
   390 component: taking the box from one and the type from the other left a
   font-size/line-height DRIFT the rules do not allow (fix round 1,
   Important 2). `M/M text` is the token pair closest to the instance's 16/22
   at this width — 16/20, inside spec-diff's line-height tolerance. */
.show-table .c-ticket__label {
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
}

.show-table__cell--buy .c-ticket__note {
	display: block;
	margin-top: 8px;
}

@media (min-width: 1440px) {

	/* Full-bleed section (3110:3504 is 1440 wide) with the content inset 56
	   from the frame edge; from 1920 up the inset grows instead, so the content
	   stays the 1328 container the hero also uses (performance-hero.css) rather
	   than stretching — there is no 1920 node for this section. The inset is the
	   site's one column token, `--page-gutter` (components/container.css); this
	   rule held a literal copy of its formula until plan 06's final review. */
	.show-table {
		padding: 18px var(--page-gutter-1328) 0;
	}

	.show-table__title {
		max-width: 1008px;
	}

	.show-table__table {
		display: table;
		margin-top: 54px;
		table-layout: fixed;
	}

	.show-table__head {
		display: table-header-group;
	}

	.show-table__head tr {
		display: table-row;
	}

	.show-table__head th {
		display: table-cell;
	}

	.show-table__table tbody {
		display: table-row-group;
	}

	/* One row, five cells: 350 / 120 / 229 / 100 / 209 of content with 80
	   between them (3110:3287's space-between resolves to exactly that), so
	   each cell is its content width plus the gap as padding. */
	.show-table__row {
		display: table-row;
		padding: 0;
		border-bottom: 0;
	}

	.show-table__cell {
		display: table-cell;
		padding-block: 20px;
		padding-right: 80px;
		border-bottom: 1px solid var(--color-neutral-300);
		vertical-align: middle;
	}

	.show-table__row:first-child .show-table__cell {
		padding-top: 0;
	}

	/* `table-layout: fixed` takes the column widths from the table's first row,
	   which is the (invisible) header row — so the widths live there. */
	.show-table__head th:nth-child(1) {
		width: 430px;
	}

	.show-table__head th:nth-child(2) {
		width: 200px;
	}

	.show-table__head th:nth-child(3) {
		width: 309px;
	}

	.show-table__head th:nth-child(4) {
		width: 180px;
	}

	.show-table__head th:nth-child(5) {
		width: 209px;
	}

	.show-table__cell--time,
	.show-table__cell--hall,
	.show-table__cell--buy {
		margin: 0;
	}

	.show-table__cell--buy {
		padding-right: 0;
	}

	/* Figma's own 59px content band inside an 80/100px row: the date block
	   carries 6px below it, the other four cells centre against it. */
	.show-table__date-group {
		gap: 4px;
		padding-bottom: 6px;
	}

	.show-table__hall {
		width: 200px;
	}

	.show-table__badge {
		min-width: 100px;
	}

	/* Fills its own column (209, the Figma frame width) instead of hugging a
	   label that is `min-width`-padded to the same number: at `--font-scale`
	   1.5 a nowrap label needs ~300px and would push the table past the page
	   edge. Filling + wrapping keeps the row inside the column — the button
	   grows taller, not wider. */
	.show-table .c-ticket {
		width: 100%;
		min-width: 0;
		white-space: normal;
	}

	/* From 1440 the shared component's own type already is the instance's
	   16/22, so the override above is handed back. */
	.show-table .c-ticket__label {
		font-size: inherit;
		line-height: inherit;
	}
}