/* Afisha date picker — Figma «Date Picker» 3312:12262 (289×483, inside the
   open «Дати» cell of «Filters Open» 3222:11825) and 4234:25233 (390×447,
   inside the drawer's «дати» row 4234:25369).

   The two frames differ in more than the type tokens — 18 vs 16 padding,
   10 vs 6 between the quick-range chips, a 14/16 vs a 16/20 month
   heading, 20×20 plain arrows vs 40×40 «Arrow Button» instances — so the
   rules are keyed off which form the calendar sits in (`--bar` = the 1440
   frame, `--drawer` = the 390 one) rather than off a width: the bar only
   exists from 1440 and the drawer only below it, so the frame and the
   selector always agree. No 768 frame exists; the drawer's 390 geometry
   carries over with the type tokens stepping up on their own.

   Colour substitutions (designer-questions.md):
     #D0D5DC on the unchosen quick-range chips is 1.34:1 on the panel's
       #F3F4F6, under WCAG 1.4.11's 3:1 for the only edge a control has →
       --color-neutral-500 (4.32:1);
     #0C0D12 (chosen chip, chip label) → --color-neutral-950;
     #697482 for «Дні з виставами позначено крапкою» is 4.32:1 on
       #F3F4F6 → --color-neutral-600 (6.89:1), the same fix
       site-footer.css and mobile-menu.css already make for this pair;
     the chosen day's 1px #12AD99 edge is 2.81:1 on white, and it is the
       whole state indicator → --color-primary-700 (5.49:1). The .fig
       also puts an `inset 0 0 0 1px #2A2A2A` inner shadow on that day,
       exactly under its own 1px stroke, so nothing of it is ever
       rendered; it is not reproduced.

   No motion: the .fig has no prototype action on the picker, and the
   «Arrow Button» component it uses at 390 has no Hover variant for
   mob=on (its hovers are mob=off only) — see animations.md. */

/* --------------------------------------------------------- the panel box */

/* Figma: pad 18 (1440) / 16 (390), 32 between the chips and the grid. */
.afisha-filters__panel--date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 16px;
}

/* --------------------------------------------------- quick range chips */

.c-date-presets {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	gap: 6px;
	margin: 0;
	border: 0;
	padding: 0;
	width: 100%;
	min-inline-size: 0;
}

.c-date-preset {
	display: inline-flex;
	cursor: pointer;
}

/* The radio itself is off-screen, not `display: none` — it stays in the
   accessibility tree and keeps the label as its name; the visible chip is
   the `<span>`, and `:focus-visible` on the input draws the ring there. */
.c-date-preset__control {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	padding: 0;
}

/* The chip box and its text are two nodes in the .fig (72×34 frame, 46×16
   label), so the text has an element of its own here too — that is what the
   selector map measures the type on. */
.c-date-preset__text {
	display: block;
}

/* A real border: this node has `strokesIncludedInLayout: true`, so its 34px
   height is 1 + 8 + 16 + 8 + 1 (an inset box-shadow measured 32). */
.c-date-preset__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 10px;
	border: 1px solid var(--color-neutral-500);
	padding: 8px 12px;
	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;
	white-space: nowrap;
}

.c-date-preset__control:checked + .c-date-preset__label {
	border-color: var(--color-neutral-950);
	background: var(--color-neutral-950);
	color: var(--color-base-white);
}

.c-date-preset__control:focus-visible + .c-date-preset__label {
	outline: 2px solid var(--color-primary-700);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ calendar */

.c-calendar {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 12px;
	width: 100%;
}

.c-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 40px;
}

/* 4234:25250: the mobile month title is trimmed to cap height (11px on a
   16px font), the 1440 one (3312:12265) is not. */
.afisha-filters--drawer .c-calendar__month {
	text-box: trim-both cap alphabetic;
}

.c-calendar__month {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
}

.c-calendar__nav {
	display: flex;
	flex: none;
}

/* Figma 4234:25369: two 40×40 «Arrow Button» instances with gap −1, i.e.
   sharing one 1px edge. */
.c-calendar__step {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	/* The .fig's own value on a frame that holds one icon — no visual
	   effect, kept so the node and the element agree. */
	gap: 10px;
	margin: 0;
	border: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	box-shadow: inset 0 0 0 1px var(--color-neutral-800);
	background: transparent;

	/* The shared Arrow--left/right assets paint with `currentColor`. */
	color: var(--color-neutral-800);
	cursor: pointer;
}

.c-calendar__step + .c-calendar__step {
	margin-left: -1px;
}

.c-calendar__step svg {
	width: 24px;
	height: 24px;
}

.c-calendar__grid {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Seven equal columns as a grid, not `flex: 1 1 0`: a border-box flex item
   can never be narrower than its own padding, so the empty cells (which
   carry the day cells' 1px/6px padding) came out 12px wider than the days.
   `1fr` columns are exactly the .fig's "width ÷ 7". */
.c-calendar__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Seven equal columns: 51.14px at 390, 35.86px at 1440 — both are the
   .fig's own "width ÷ 7", so `flex: 1 1 0` is the value, not a px. */
.c-calendar__weekday {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	height: 32px;
	padding: 6px 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
}

.c-calendar__cell {
	display: flex;
	box-sizing: border-box;
	min-width: 0;
}

/* Figma «Button - …» 40px tall on white, a 1px right and bottom edge in
   --color-neutral-100, the number and (when the day has shows) a 4px dot
   3px under it. */
.c-calendar__cell--empty,
.c-calendar__day {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 3px;
	margin: 0;
	border: 0;
	padding: 1px 6px;
	min-width: 0;
	height: 40px;
	box-shadow:
		inset -1px 0 0 0 var(--color-neutral-100),
		inset 0 -1px 0 0 var(--color-neutral-100);
	background: var(--color-base-white);
}

.c-calendar__day {
	cursor: pointer;
}

.c-calendar__number {
	color: var(--color-neutral-500);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
}

/* A day with shows is the darker of the two number colours — the dot is
   the second, redundant marker, and the `aria-label` a third
   (accessibility-ua.md §3.4: "не лише крапкою"). */
.c-calendar__day--shows .c-calendar__number {
	color: var(--color-neutral-800);
}

.c-calendar__dot {
	flex: none;
	border-radius: 999px;
	width: 4px;
	height: 4px;
	background: var(--color-neutral-800);
}

.c-calendar__cell[aria-selected="true"] .c-calendar__day {
	box-shadow: inset 0 0 0 1px var(--color-primary-700);
}

.c-calendar__hint {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

/* --------------------------------------- no-JS range fields (no node) */

/* ТЗ §4.2 / accessibility-ua.md §3.4 "альтернатива — … поле дати": the
   .fig draws only the scripted calendar, so these fields have no design
   of their own and reuse the panel's own row metrics. filters.js hides
   the whole block, so they never reach a spec comparison. */
.c-date-range {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
}

.c-date-range__title {
	flex: 1 0 100%;
	margin: 0;
	color: var(--color-neutral-800);
	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;
}

.c-date-range__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
}

.c-date-range__field input {
	box-sizing: border-box;
	border: 0;
	padding: 8px;
	box-shadow: inset 0 0 0 1px var(--color-neutral-500);
	background: var(--color-base-white);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
}

.c-date-range__submit {
	box-sizing: border-box;
	margin: 0;
	border: 0;
	padding: 8px 12px;
	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;
}

/* ----------------------------------------------- the 1440 frame's own */

@media (min-width: 1440px) {

	.afisha-filters--bar .afisha-filters__panel--date {
		padding: 18px;
	}

	.afisha-filters--bar .c-date-presets {
		gap: 10px;
	}

	/* 3312:12262: the heading row is 20px tall and the arrows 20×20 with
	   4px between them and 16×16 glyphs — not the 390 frame's 40×40. */
	.afisha-filters--bar .c-calendar__head {
		height: 20px;
	}

	.afisha-filters--bar .c-calendar__month {
		font-size: var(--fs-xs-text);
		line-height: var(--lh-xs-text);
		letter-spacing: var(--ls-xs-text);
	}

	.afisha-filters--bar .c-calendar__nav {
		gap: 4px;
	}

	.afisha-filters--bar .c-calendar__step {
		width: 20px;
		height: 20px;
	}

	.afisha-filters--bar .c-calendar__step + .c-calendar__step {
		margin-left: 0;
	}

	.afisha-filters--bar .c-calendar__step svg {
		width: 16px;
		height: 16px;
	}
}

@media (forced-colors: active) {

	.c-date-preset__label,
	.c-calendar__step,
	.c-date-range__field input,
	.c-date-range__submit {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	/* The grid's own 1px separators and the chosen day's edge are inset
	   box-shadows, which Chromium drops here. */
	.c-calendar__day,
	.c-calendar__cell--empty {
		border-right: 1px solid CanvasText;
		border-bottom: 1px solid CanvasText;
	}

	.c-calendar__cell[aria-selected="true"] .c-calendar__day {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	/* «Дні з виставами позначено крапкою» has to stay true here: the dot's
	   own `background` is flattened to Canvas (white on white) and both day
	   numbers flatten to CanvasText, so a day with shows would carry no
	   visible marker at all while the legend still promises one (review
	   I16). The dot is repainted in CanvasText and the day itself gets an
	   underline, which forced-colors keeps. */
	.c-calendar__dot {
		background: CanvasText;
	}

	.c-calendar__day--shows .c-calendar__number {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.c-date-preset__control:checked + .c-date-preset__label {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}