/* Afisha filters — Figma «Filters Bar» 3905:11616 (1440×50), the open
   dropdowns of «Filters Open» 3222:11825 (Genre 3222:12379, Venue
   3222:11776, Accessibility 3834:13009), the chips of «Filters Applied»
   3327:15693 (3327:15624 / 3327:15625), and at 390 the trigger row
   4372:23236 (390×58) with the drawer 4234:25443 / 4234:25084 /
   4234:25687 and its action bar 4234:26063. Calendar: calendar.css.

   Two forms, one shown at a time: `.afisha-filters--bar` from 1440 up,
   `.afisha-drawer` below it. The .fig orders the same five filters
   differently at the two widths, so one DOM reflowed with CSS `order`
   would give a tab order that disagrees with the visual one (WCAG
   2.4.3); `display: none` on the other form keeps it out of the layout,
   the tab order and the accessibility tree. No 768/1920 filter frame
   exists: 768–1439 use the 390 drawer with the breakpoint-aware type
   tokens, 1920 the 1440 bar with its cells still splitting the width
   five ways (the .fig's own `w:fill`). See task-7-9-report.md.

   Inside strokes are `box-shadow: inset` per project convention, except
   the bar's own top/bottom edge, where Figma's inside stroke does shrink
   the children (50px bar, 48px cells) and `padding: 1px 0` reproduces
   that without a border changing the box.

   Colours not in the variable set, substituted with the nearest token
   and listed in designer-questions.md:
     #0C0D12 (option label, option control when checked, chip edge,
       «Очистити фільтри» fill) → --color-neutral-950 (#070A0D);
     #C3C6CA (unchecked option control) → --color-neutral-500, which is
       also what WCAG 1.4.11 needs: #C3C6CA is 1.56:1 on the panel's
       #F3F4F6, the token is 4.32:1;
     #12AD99 on white/#F3F4F6 for the drawer's «Скинути» and ✕ is
       2.6–2.8:1 → --color-primary-700 (5.1–5.5:1), the same
       substitution a11y-panel.css and site-header.css already make.

   No motion: the .fig has no prototype action on any filter, dropdown,
   chip, calendar or drawer node (all 643 actions of the `design` page
   are accounted for by the 17 components of animations.md, none of them
   these), so opening and closing are instant — as for the mega menu,
   the mobile menu and the accessibility panel. The only animated thing
   inside these components is the shared `.c-ticket` («Показати
   результат»), which carries its own hover from ticket-button.css. */

/* ------------------------------------------------- shared: option rows */

/* Figma «Industry Item …» rows: 289×46 at 1440 (pad 12/16, gap 8) and
   390×50 at 390 (pad 16, gap 8). The first row («Усі») is drawn with
   gap 6 and its label 2px further left than every other row's — a slip
   in the mockup, not a rule; all rows use 8 here (designer-questions.md). */
.c-filter-options {
	margin: 0;
	border: 0;
	padding: 0;
	min-inline-size: 0;
}

.c-filter-option {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 8px;
	padding: 16px;
	cursor: pointer;
}

/* 16×16, radius 2, 1px inside stroke — a real checkbox/radio with the
   platform control replaced, not a styled span. */
.c-filter-option__control {
	appearance: none;
	flex: none;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 2px;
	width: 16px;
	height: 16px;
	box-shadow: inset 0 0 0 1px var(--color-neutral-500);
	background: transparent;
	cursor: pointer;
}

.c-filter-option__control:checked {
	box-shadow: inset 0 0 0 1px var(--color-neutral-950);
	background: var(--color-neutral-950);
}

/* The 12×12 check mark, «Icons/check mark» 3222:11774 — a remote
   component the REST `svg` export could not deliver (the month's image
   quota is spent), so its geometry comes from the designer's own PDF
   export instead: design/figma-export-2026-09-18.pdf keeps vectors as
   vectors, and page 61 («Filters Open» 3222:11825) holds this tick as a
   filled white path at the node's own box. Same route task 13 took for
   the play glyph.
   A mask rather than a background image: the shape then takes its colour
   from CSS, which is what keeps it visible under forced-colors below. */
.c-filter-option__control:checked::after {
	content: "";
	display: block;
	margin: 2px;
	width: 12px;
	height: 12px;
	background: var(--color-base-white);
	mask: url(../../icons/check-mark__3222-11774.svg) no-repeat center / 12px 12px;
}

.c-filter-option__label {
	color: var(--color-neutral-950);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	font-weight: 600;
	text-transform: uppercase;
}

/* --------------------------------------------------------- shared: chips */

/* Figma «Active Filter Tags Bar» 1440×66 (pad 16, gap 10) / 390×154. The
   .fig nests a fixed 1283px wrap frame inside it; that redundant frame
   is not rendered, the chips wrap in the bar itself — otherwise the row
   would stop 125px short of the design's own container. */
.afisha-filters__chips {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	gap: 10px;
	padding: 16px;
	background: var(--color-neutral-100);
}

/* An author `display` beats the UA's `[hidden] { display: none }` whatever
   the specificity, so the empty row needs saying again — otherwise it shows
   as a bare 32px band and pushes the drawer's fields down by it. */
.afisha-filters__chips[hidden] {
	display: none;
}

/* Figma «Filter Tag /…» 34px tall, pad 8/12, gap 10, 1px inside stroke.
   A real border, not the project's usual inset box-shadow: this node has
   `strokesIncludedInLayout: true`, so its 34px height is 1 + 8 + 16 + 8 + 1
   — the stroke is part of the box, which only a border reproduces (a
   box-shadow measured 32). The same distinction decides every edge in this
   file and calendar.css: stroke in layout → border, otherwise → box-shadow
   (the option rows and the option panels are the latter, which is why their
   rows are the panel's full 289px wide). */
.c-filter-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 10px;
	margin: 0;
	border: 1px solid var(--color-neutral-950);
	padding: 8px 12px;
	background: transparent;
	color: var(--color-neutral-950);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	font-weight: 600;

	/* The chip hugs its label in the design; at 150% text scale a long genre
	   name would push past the 358px row, so the label wraps inside the chip
	   rather than overflow the drawer. */
	max-width: 100%;
	cursor: pointer;
}

.c-filter-chip__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The chip's ✕ is «Icons/cross» 3222:11765 — 16×16, and a different
   glyph from the mobile menu's `icons/cross` 4163:16956 (rounded ends,
   two overlapping strokes). Also a remote component, also taken out of
   the PDF export, page 75 («Filters Applied» 3327:15693). It paints with
   `currentColor`, so the chip's own colour carries it. */
.c-filter-chip svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* «Очистити фільтри» 3327:15638: filled, white label and ✕. */
.c-filter-chip--clear {
	border-color: var(--color-neutral-950);
	background: var(--color-neutral-950);
	color: var(--color-base-white);
}

/* ------------------------------------------- shared: the two dropdowns */

.afisha-filters__field {
	position: relative;
	box-sizing: border-box;
}

/* The element is a `<summary>` until filters.js swaps it for a `<button>`,
   so it carries a button reset: Chromium's UA padding (1px 6px) and 2px
   outset border would otherwise move every child 8px inwards the moment
   the script runs. The cell's own box — 288×48 with the .fig's 12/24
   padding, its gap and its left edge — lives here rather than on the
   wrapper, so the wrapper is only the positioning anchor the absolute
   panel needs. */
.afisha-filters__toggle {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 8px;
	margin: 0;
	border: 0;
	padding: 0;
	width: 100%;
	background: transparent;
	text-align: left;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.afisha-filters__toggle::-webkit-details-marker {
	display: none;
}

.afisha-filters__toggle-icon {
	display: flex;
	flex: none;
}

.afisha-filters__toggle-icon svg {
	width: 20px;
	height: 20px;
}

/* The label is `w:fill` in the .fig and a filter name plus one value can
   outgrow the 288px cell; the cell height is fixed at 48, so the line is
   kept single and clipped rather than allowed to reflow the bar. */
.afisha-filters__toggle-label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.afisha-filters__toggle-arrow {
	display: flex;
	flex: none;
}

.afisha-filters__toggle-arrow svg {
	width: 20px;
	height: 20px;
}

/* Two separate assets in the .fig («icons / arrow down» 3384:8590 and
   «arrow up» 3384:8804), not one rotated triangle — the open cell of
   3905:11616 (Accessibility) draws the up arrow. */
.afisha-filters__arrow {
	display: flex;
}

.afisha-filters__arrow--up,
.afisha-filters__field[open] .afisha-filters__arrow--down,
.afisha-filters__field--open .afisha-filters__arrow--down {
	display: none;
}

.afisha-filters__field[open] .afisha-filters__arrow--up,
.afisha-filters__field--open .afisha-filters__arrow--up {
	display: flex;
}

/* --------------------------------------------- «Квитки у наявності» */

/* Figma «Ticket Availability Filter»: a 26×26 control with a 1/2/2/1px
   inside stroke (the asymmetry is the mockup's; designer-questions.md)
   and the label 8px to its right. */
.afisha-filters__available {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 8px;
	cursor: pointer;
}

.afisha-filters__available-control {
	appearance: none;
	flex: none;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 0;
	width: 26px;
	height: 26px;
	box-shadow:
		inset 0 1px 0 0 var(--color-neutral-800),
		inset -2px 0 0 0 var(--color-neutral-800),
		inset 0 -2px 0 0 var(--color-neutral-800),
		inset 1px 0 0 0 var(--color-neutral-800);
	background: transparent;
	cursor: pointer;
}

/* Checked: the .fig keeps the square empty and draws a tick across it that
   deliberately overflows the box — `Group 44` inside the checked instances
   of this control (`3312:12255`, `3384:8771`, `4234:25701`, `4234:25836`),
   27.13 × 20.91 at (−0.03, 1.23) from the box's own corner, two `#12AD99`
   vectors. Geometry mined from the PDF export the same way as the other
   two glyphs; `#12AD99` is 2.56:1 on the bar's `#F3F4F6` and this tick is
   the whole state indicator, so it paints in `--color-primary-700`
   (5.1:1) — the same substitution this component makes four times over. */
.afisha-filters__available-control {
	position: relative;
}

.afisha-filters__available-control:checked::after {
	content: "";
	position: absolute;
	top: 1.23px;
	left: -0.03px;
	width: 27.13px;
	height: 20.91px;
	background: var(--color-primary-700);
	mask: url(../../icons/tickets-check__3312-12256.svg) no-repeat center / 27.13px 20.91px;
}

.afisha-filters__available-label {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	font-weight: 600;
	text-transform: uppercase;
}

/* ---------------------------------------------------- bar, 1440 and up */

.afisha-filters--bar {
	display: none;
}

/* ------------------------------------------------------ drawer, < 1440 */

/* Figma 4372:23236: the whole row is the control — 390×58, centred
   icon + label, `--color-neutral-100` between two 1px edges. */
.afisha-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 6px;
	margin: 0;
	border: 0;
	width: 100%;
	height: 58px;
	padding: 16px;
	box-shadow:
		inset 0 1px 0 0 var(--color-neutral-300),
		inset 0 -1px 0 0 var(--color-neutral-300);
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.afisha-drawer__toggle::-webkit-details-marker {
	display: none;
}

.afisha-drawer__toggle-icon,
.afisha-drawer__title-icon {
	display: flex;
	flex: none;
}

.afisha-drawer__toggle-icon svg,
.afisha-drawer__title-icon svg {
	width: 24px;
	height: 24px;
}

/* «фільтри [6]» — the count is the .fig's own idiom (4234:25449, the
   drawer heading); the trigger row has no count in the mockup, ТЗ and
   task-9 ask for one. */
.afisha-drawer__count {
	font-variant-numeric: tabular-nums;
}

/* Without JavaScript the panel is the `<details>` body: it expands in
   flow under the trigger and every field is reachable. filters-drawer.js
   turns it into the .fig's full-height dialog (`.afisha-drawer__panel`
   fixed below) as soon as it runs. */
.afisha-drawer__panel {
	box-sizing: border-box;
	background: var(--color-neutral-100);
}

.afisha-drawer__panel[hidden] {
	display: none;
}

/* With the script the panel is the .fig's own screen: the drawer frame
   (4234:25443/4234:25822) is a full 390×802 view with its header pinned
   at the top, the field list scrolling between, and the action bar
   sitting 66px above the bottom edge whatever the content height — so
   the panel is a fixed, full-viewport flex column, the form scrolls and
   the actions stick to its bottom. dialog.js has already frozen the
   page behind it at its scroll position (base.css `.has-dialog`). */
.afisha-drawer--dialog .afisha-drawer__panel {
	position: fixed;
	z-index: 20;
	inset: 0;

	/* The drawer is the form for everything below 1440 and the .fig draws it
	   only at 390 — there is no 768 frame for it anywhere in the file (all
	   768 frames belong to «Головна» and «Меню»). Rather than stretch a
	   390-px layout to 1439, the panel keeps the mobile content width and
	   centres itself; designer-questions.md carries the question. */
	margin: 0 auto;
	max-width: 390px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* `display: flex` above outranks `[hidden]`'s UA `display: none` at equal
   specificity, so the closed dialog needs saying again. */
.afisha-drawer--dialog .afisha-drawer__panel[hidden] {
	display: none;
}

.afisha-drawer--dialog .afisha-drawer__head {
	flex: none;
}

.afisha-drawer--dialog .afisha-filters--drawer {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The .fig pins the action bar to the bottom edge of the drawer whatever
   the field list's height (4234:25822: the bar sits 66px above the frame
   bottom while the content above it is 1379px long). `margin-top: auto`
   does that when the fields are short, `position: sticky` keeps it in
   view when they are long enough to scroll. */
.afisha-drawer--dialog .afisha-drawer__actions {
	position: sticky;
	bottom: 0;
	margin-top: auto;
}

/* Figma 4234:25444: 390×73, pad 24/16, the heading left and ✕ right. */
.afisha-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 24px 16px;
	box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);
	background: var(--color-neutral-100);
}

.afisha-drawer__title {
	display: flex;
	align-items: center;

	/* 4px to the count, 8px inside the icon+word pair — the .fig's own two frames
	   (`4234:25445` and `4234:25446`). */
	gap: 4px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);

	/* The .fig sets 20/24 here — the ≥768 mode of the same «Menu,button»
	   style whose 390 mode is 16/20, i.e. the desktop text style left on
	   a mobile frame. The token is used, so the 24px row height comes
	   from the 24×24 icon either way; the 4px text-height residual is in
	   task-7-9-report.md and designer-questions.md. */
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-transform: uppercase;
}

.afisha-drawer__title-main {
	display: flex;
	align-items: center;
	gap: 8px;
}

.afisha-drawer__close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.afisha-drawer__close[hidden] {
	display: none;
}

.afisha-drawer__close svg {
	width: 24px;
	height: 24px;
}

/* #12AD99 in the .fig (2.56:1 on --color-neutral-100, under WCAG
   1.4.11's 3:1 for a control that is only an icon). */
.afisha-drawer__close svg path {
	fill: var(--color-primary-700);
}

.afisha-filters--drawer {
	display: flex;
	flex-direction: column;
}

/* Figma 4234:25435: pad 20/16. The row's only fill in the dump is
   `{"visible": false, white}`, so it inherits the drawer's own
   `--color-neutral-100` — it is not a white band (review I9). */
.afisha-filters--drawer .afisha-filters__available {
	box-sizing: border-box;
	padding: 20px 16px;
	box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
}

.afisha-filters--drawer .afisha-filters__available-label {
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

/* Figma «Filter - …» rows 390×54: pad 16, gap 6, 1px edge top and
   bottom, label «M/M text (semi bold)». */
.afisha-filters--drawer .afisha-filters__field {
	background: var(--color-neutral-100);
}

/* Real 1px edges, not the inset box-shadow: `strokesIncludedInLayout` is
   true on this row, so its 54px is 1 + 16 + 20 + 16 + 1 (a box-shadow
   measured 52). */
.afisha-filters--drawer .afisha-filters__toggle {
	gap: 6px;
	border-top: 1px solid var(--color-neutral-300);
	border-bottom: 1px solid var(--color-neutral-300);
	padding: 16px;
	box-shadow: none;
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
}

/* The .fig trims this label to cap height (leadingTrim CAP_HEIGHT on
   4234:25467 and its siblings): 11px tall, not the 20px line box. The
   bar's own labels have no trim, so this is the drawer's alone. */
.afisha-filters--drawer .afisha-filters__toggle-label {
	text-box: trim-both cap alphabetic;
}

/* The panel is in flow under its own row, full width (4234:25108). */
.afisha-filters--drawer .afisha-filters__panel {
	background: var(--color-neutral-100);
}

.afisha-filters--drawer .afisha-filters__panel[hidden] {
	display: none;
}

/* Figma 4234:26063: 390×66 on white, pad 16, «Скинути» left and
   «показати результат» right. */
.afisha-drawer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	gap: 10px;
	padding: 16px;
	background: var(--color-base-white);
}

/* Reuses the «Скинути налаштування» component's own type and colour
   (a11y-panel.css .a11y-panel__reset). primary-700, not the design's
   primary-500: 2.81:1 on white fails WCAG AA for text, 5.49:1 passes.
   No hover — the .fig's mob=on variant of this component has none (its
   Hover variants are mob=off only), and the drawer is a mobile frame. */
.afisha-drawer__reset {
	flex: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

/* «показати результат» is a Ticket Button instance (4234:26065), so it
   is the shared `.c-ticket`: 2px inside stroke, its own four-line hover
   from ticket-button.css. As a submit button it needs the element reset
   the component's `<a>`/`<span>` call sites never did. */

/* `padding: 0 36px` with the component's own `min-height`, not the .fig's
   12px block padding: the Ticket Button frame is a fixed 227×34 that is
   shorter than its own padding plus its 18px label, and Figma centres the
   label anyway — the same reading ticket-button.css already makes for every
   other call site (12 + 18 + 12 would be 42). */
.afisha-drawer__submit {
	flex: 0 1 auto;
	margin: 0;
	border: 0;
	padding: 0 36px;
	min-width: 0;
	max-width: 100%;

	/* `.c-ticket` keeps its label on one line, which is right at the design
	   scale (155px inside a 227px button) but 343px wide once the a11y
	   widget's 150% text scale is on — wider than the 326px row. Wrapping
	   is allowed so the label stays inside the drawer; nothing moves at
	   scale 1. */
	white-space: normal;
	cursor: pointer;
}

/* Hidden with JavaScript on (filters.js): the form applies a change
   immediately, so the design has no «Застосувати» button and no date
   fields in the .fig — both exist only for the no-JS path. */
.afisha-filters__actions,
[data-filters-nojs] {
	box-sizing: border-box;
}

.afisha-filters__actions[hidden],
[data-filters-nojs][hidden] {
	display: none;
}

.afisha-filters__submit {
	margin: 16px;
	box-sizing: border-box;
	border: 0;
	padding: 8px 12px;
	box-shadow: inset 0 0 0 1px var(--color-neutral-950);
	background: var(--color-neutral-950);
	color: var(--color-base-white);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

@media (min-width: 1440px) {

	.afisha-drawer {
		display: none;
	}

	.afisha-filters--bar {
		display: block;

		/* ТЗ §4.2.2: the panel stays with the reader while the list
		   scrolls. Since 22.09 the header is sticky too (note 4496:35839
		   on this very page), so the bar sticks BELOW it and travels with
		   it: `top` leaves room for the header, the transform follows the
		   header down and up. Both properties are 0 when the header is not
		   sticky — no script, or «Зменшити анімацію» on — which is the
		   `top: 0` this rule used to have. */
		position: sticky;
		z-index: 12;

		/* 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));
		transition: top 300ms cubic-bezier(0, 0, 0.58, 1);
	}

	/* 1440×50 = a 1px edge, 48px of cells, a 1px edge. `min-height`, not
	   `height`: with JavaScript off the panels stay in flow (below), so an
	   open dropdown has to be able to make the bar taller instead of
	   covering «Застосувати». With the script the panels are absolute and
	   the bar is exactly 50px again. */
	.afisha-filters__bar {
		display: flex;
		box-sizing: border-box;
		min-height: 50px;
		padding: 1px 0;
		box-shadow:
			inset 0 1px 0 0 var(--color-neutral-300),
			inset 0 -1px 0 0 var(--color-neutral-300);
		background: var(--color-neutral-100);
	}

	/* Five equal cells, 288×48 at 1440 (`w:fill` in the .fig, so they
	   split 1920 five ways too), each with its own left edge. */

	/* `flex: 1 1 20%`, not `1 1 0`: with a border-box basis of 0 an item
	   can never be narrower than its own padding, so the one padded cell
	   («Квитки у наявності», the only one whose padding is on the flex
	   item itself) came out 48px wider than the other four — measured
	   326.4 against 278.4. A 20% basis is the .fig's own "five equal
	   fifths" at any width. */
	.afisha-filters__bar > .afisha-filters__field,
	.afisha-filters__bar > .afisha-filters__available {
		flex: 1 1 20%;
		box-sizing: border-box;
		min-width: 0;
	}

	/* Only a cell that can hold an open panel needs to be able to grow. */
	.afisha-filters__bar > .afisha-filters__field {
		min-height: 48px;
	}

	/* Fixed, like the .fig's own cell: its 26px control is 2px taller than
	   the 12px padding leaves, and Figma lets it overflow rather than
	   stretch the bar to 52. */
	.afisha-filters__bar > .afisha-filters__available {
		height: 48px;
		padding: 12px 24px;
		box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
	}

	.afisha-filters--bar .afisha-filters__toggle {
		height: 48px;
		padding: 12px 24px;
		box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
		font-size: var(--fs-s-text);
		line-height: var(--lh-s-text);
		letter-spacing: var(--ls-s-text);
	}

	/* 289 wide at a 288 cell: the extra pixel puts the panel's right
	   edge on the next cell's left one (Figma 3222:11776 x=288 w=289).
	   `top` clears the bar's own bottom edge. */

	/* `.afisha-filters--js` is set by filters.js: only once a script is
	   there does the panel leave the flow. The 8px bottom padding is a
	   separate rule below because it does not belong to the date panel. */
	.afisha-filters--js.afisha-filters--bar .afisha-filters__panel {
		position: absolute;
		z-index: 1;
		top: calc(100% + 1px);
		left: 0;
		box-sizing: border-box;
		width: calc(100% + 1px);
		box-shadow:
			inset -1px 0 0 0 var(--color-neutral-300),
			inset 0 -1px 0 0 var(--color-neutral-300),
			inset 1px 0 0 0 var(--color-neutral-300);
		background: var(--color-neutral-100);
	}

	/* `:not(--date)`: this longhand is (0,3,0) and would otherwise outrank
	   calendar.css's `padding: 18px` shorthand at (0,2,0) whatever the load
	   order, leaving the date panel 10px short at the bottom (review I10). */
	.afisha-filters--js.afisha-filters--bar .afisha-filters__panel:not(.afisha-filters__panel--date) {
		padding-bottom: 8px;
	}

	.afisha-filters--bar .afisha-filters__panel[hidden] {
		display: none;
	}

	/* The date panel's own stroke IS in its layout (unlike the option
	   panels'), so its 18px padding sits inside a real 1px border: the
	   .fig's content frame is 251px wide inside a 289px panel. */
	.afisha-filters--bar .afisha-filters__panel--date {
		border-right: 1px solid var(--color-neutral-300);
		border-bottom: 1px solid var(--color-neutral-300);
		border-left: 1px solid var(--color-neutral-300);
		box-shadow: none;
	}

	/* 289×46 rows at 1440 (pad 12/16). */
	.afisha-filters--bar .c-filter-option {
		padding: 12px 16px;
	}
}

/* The list that follows the bar draws its own 1px top rule (afisha.css
   `.afisha-day`), and it lands exactly on the bar's bottom one — 2 CSS px
   of `--color-neutral-300` where the design has 1 (review M15). The bar
   owns the edge between the two, so the duplicate is dropped here, and
   only for the group that touches it. */
.afisha-filters--bar + .afisha-list > .afisha-day:first-child,
.afisha-filters--bar + .afisha-list > .afisha-empty:first-child {
	box-shadow: none;
}

/* Windows High Contrast: every edge in this component is an inset
   box-shadow, which Chromium drops (base.css documents the convention
   and covers the controls that existed then). `outline` redraws it
   without touching the box model. */
@media (forced-colors: active) {

	.c-filter-option__control,
	.afisha-filters__available-control,
	.c-filter-chip,
	.afisha-drawer__submit {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	/* Both checked marks are masks, and forced-colors flattens
	   `background` — they have to come back as a visible colour. */
	.c-filter-option__control:checked::after,
	.afisha-filters__available-control:checked::after {
		background: Highlight;
	}

	.afisha-filters__bar,
	.afisha-drawer__toggle,
	.afisha-drawer__head,
	.afisha-filters--drawer .afisha-filters__toggle {
		border-bottom: 1px solid CanvasText;
	}
}