/* Generated from shared/ — edit the original, then run tools/sync-seat-picker.sh. */
/**
 * Seat picker styles.
 *
 * Written to inherit rather than impose: no font stack, no brand colour, and a layout that adapts
 * to whatever container the theme puts it in. Logical properties throughout, so RTL works without a
 * second sheet.
 *
 * Every colour is a custom property on `.seatmap-widget`, so a theme can restyle the picker to
 * match its shop by overriding a handful of values rather than fighting selectors.
 */

.seatmap-widget {
	/* Surfaces and lines */
	--seatmap-surface: #ffffff;
	--seatmap-surface-sunken: #f6f7f9;
	--seatmap-surface-hover: #eef0f4;
	--seatmap-border: #dfe3ea;
	--seatmap-border-strong: #c7cddb;

	/* Text */
	--seatmap-text: #1b2030;
	--seatmap-muted: #626b83;

	/* The one colour the picker asserts. A shop that wants its own sets this and nothing else. */
	--seatmap-accent: #1b2030;
	--seatmap-on-accent: #ffffff;

	--seatmap-danger: #b12f27;
	--seatmap-danger-soft: #fdedec;
	--seatmap-ok: #0f7a4a;

	--seatmap-radius: 12px;
	--seatmap-radius-sm: 8px;
	--seatmap-shadow: 0 1px 2px rgba(27, 32, 48, 0.06), 0 4px 16px rgba(27, 32, 48, 0.06);
	--seatmap-ring: 0 0 0 3px rgba(27, 32, 48, 0.16);

	margin-block: 1.5rem;
	color: var(--seatmap-text);
}

/*
 * The picker sits inside someone else's theme, so it follows the reader's system preference rather
 * than a class the theme may or may not set.
 */
@media (prefers-color-scheme: dark) {
	.seatmap-widget:not([data-seatmap-theme='light']) {
		--seatmap-surface: #171a24;
		--seatmap-surface-sunken: #101219;
		--seatmap-surface-hover: #232838;
		--seatmap-border: #2c3244;
		--seatmap-border-strong: #3b4256;

		--seatmap-text: #e9ecf3;
		--seatmap-muted: #a8b0c3;

		--seatmap-accent: #e9ecf3;
		--seatmap-on-accent: #12151f;

		--seatmap-danger: #f0736a;
		--seatmap-danger-soft: rgba(240, 115, 106, 0.12);
		--seatmap-ok: #4ac585;

		--seatmap-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
		--seatmap-ring: 0 0 0 3px rgba(233, 236, 243, 0.22);
	}
}

/*
 * A host that has already decided.
 *
 * The rule above is right for a picker on somebody's shop: follow the reader. It is wrong inside a
 * host with a switch of its own — the panel has a light/dark toggle, and a clerk who set it to dark
 * on a machine whose system is light was getting a white hall inside a dark screen. `data-seatmap-
 * theme` on the container is that host saying which one, and it beats the preference in both
 * directions. The canvas needs no rule of its own: it measures the box it is drawn in.
 */
.seatmap-widget[data-seatmap-theme='dark'] {
	--seatmap-surface: #171a24;
	--seatmap-surface-sunken: #101219;
	--seatmap-surface-hover: #232838;
	--seatmap-border: #2c3244;
	--seatmap-border-strong: #3b4256;

	--seatmap-text: #e9ecf3;
	--seatmap-muted: #a8b0c3;

	--seatmap-accent: #e9ecf3;
	--seatmap-on-accent: #12151f;

	--seatmap-danger: #f0736a;
	--seatmap-danger-soft: rgba(240, 115, 106, 0.12);
	--seatmap-ok: #4ac585;

	--seatmap-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
	--seatmap-ring: 0 0 0 3px rgba(233, 236, 243, 0.22);
}

.seatmap-widget *,
.seatmap-widget *::before,
.seatmap-widget *::after {
	box-sizing: border-box;
}

.seatmap-widget--notice {
	padding: 1rem 1.25rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius);
	background: var(--seatmap-surface-sunken);
	color: var(--seatmap-muted);
}

/*
 * Sized here rather than inherited.
 *
 * The picker is dropped into somebody else's theme, and a theme's `h2` is written for the top of a
 * page. Left alone, "Select your seats" comes out the same size as the name of the show — which is
 * the one thing on the page it must not compete with.
 */
.seatmap-widget__title {
	margin: 0 0 1rem;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	line-height: 1.2;
}

/*
 * The plan and the summary, side by side when there is room for both.
 *
 * No media query: a theme routinely gives the picker a 40rem column on a 1600px screen, so the
 * decision has to be made from the space the picker actually has. Two flex items with a stated
 * ideal width do exactly that — they sit together when both fit and stack when they do not.
 */
.seatmap-widget__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.25rem;
}

.seatmap-widget__main {
	position: relative;
	flex: 1 1 30rem;
	min-inline-size: 0;
}

.seatmap-widget__side {
	flex: 1 1 17rem;
	min-inline-size: 0;
}

/*
 * Beside the plan it follows the seat list down; stacked underneath there is nothing to follow.
 *
 * `align-self: stretch` is what makes that true rather than merely declared. A sticky element only
 * travels inside its own containing block, and the layout above sets `align-items: flex-start` —
 * so this column was exactly as tall as the card inside it, the card had nowhere to travel, and the
 * rule below did nothing at all. Measured: a 260px column holding a 260px summary, scrolling away
 * with the page while the buyer read a seat list eight hundred pixels long.
 *
 * Stretching the column is invisible — it is a bare wrapper, and the card keeps its own height —
 * and it gives the sticky card the room it was always supposed to have. It matters most on exactly
 * the page where it was broken: the total and the button that reserves the seats now stay in front
 * of somebody who is scrolling a long list of areas to choose from.
 */
.seatmap-widget__side { align-self: stretch; }

.seatmap-widget__side .seatmap-widget__summary {
	position: sticky;
	/*
	 * How much to leave above it is the host's business, not the picker's.
	 *
	 * This same widget is served inside a hosted site with a sticky masthead, inside somebody
	 * else's WordPress theme with whatever header they have, and inside the panel's box office. A
	 * fixed offset is right for exactly one of those and puts the total behind a header on the
	 * others. So the host sets `--seatmap-sticky-top` if it has something in the way, and 1rem is
	 * the answer when nobody says otherwise.
	 */
	inset-block-start: var(--seatmap-sticky-top, 1rem);
	margin-block-start: 0;
}

/* ============================================================================ the legend */

.seatmap-widget__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.seatmap-widget__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem 0.25rem 0.45rem;
	border: 1px solid var(--seatmap-border);
	border-radius: 999px;
	background: var(--seatmap-surface);
	font-size: 0.8125rem;
	line-height: 1.5;
	white-space: nowrap;
}

[dir="rtl"] .seatmap-widget__legend li {
	padding-inline: 0.45rem 0.6rem;
}

.seatmap-widget__swatch {
	inline-size: 0.75rem;
	block-size: 0.75rem;
	flex: none;
	border-radius: 50%;
	background: #5b63f0;
	box-shadow: inset 0 0 0 1px rgba(27, 32, 48, 0.16);
}

.seatmap-widget__swatch--selected {
	background: var(--seatmap-accent);
}

.seatmap-widget__swatch--unavailable {
	background: var(--seatmap-border-strong);
}

/* ============================================================================= the plan */

.seatmap-widget__stage {
	position: relative;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius);
	overflow: hidden;
	background: var(--seatmap-surface-sunken);
}

/*
 * The picker, filling the screen.
 *
 * Two selectors for one state because two mechanisms produce it: the Fullscreen API where the
 * browser offers it for an element, and a pinned overlay where it does not — an iPhone being the
 * one that does not. A buyer cannot tell them apart, which is the point.
 *
 * The whole picker goes, not only the plan, so that what has been chosen and the button that
 * reserves it are still on the screen. The stage takes whatever height is left over; the canvas
 * is then measured against it in script, because a canvas is sized in pixels rather than styled.
 */
.seatmap-widget:fullscreen,
.seatmap-widget--filling {
	background: var(--seatmap-surface);
	padding: clamp(10px, 2vw, 22px);
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.seatmap-widget--filling {
	position: fixed;
	inset: 0;
	/* Above a theme's sticky header and its cookie bar, which is the whole point of the control. */
	z-index: 2147483000;
}

.seatmap-widget:fullscreen .seatmap-widget__layout,
.seatmap-widget--filling .seatmap-widget__layout {
	flex: 1;
	min-block-size: 0;
	/* Stacked at the top by default, so that a short seat list does not stretch; here the plan is
	   the thing that should take the room, so both columns are given the full height. */
	align-items: stretch;
	flex-wrap: nowrap;
}

.seatmap-widget:fullscreen .seatmap-widget__side,
.seatmap-widget--filling .seatmap-widget__side {
	overflow: auto;
}

/*
 * The lists under the plan keep their place but not their appetite.
 *
 * The block chooser is a dozen cards tall in a big venue, and full screen is a request for a
 * bigger *plan* — so they scroll within a share of the height instead of taking a third of it.
 */
.seatmap-widget:fullscreen .seatmap-widget__seats,
.seatmap-widget--filling .seatmap-widget__seats,
.seatmap-widget:fullscreen .seatmap-widget__areas,
.seatmap-widget--filling .seatmap-widget__areas {
	flex: 0 0 auto;
	max-block-size: 22vh;
	overflow: auto;
}

.seatmap-widget:fullscreen .seatmap-widget__main,
.seatmap-widget--filling .seatmap-widget__main {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
}

.seatmap-widget:fullscreen .seatmap-widget__stage,
.seatmap-widget--filling .seatmap-widget__stage {
	flex: 1;
	min-block-size: 0;
}

/* The page behind it holds still, or the plan scrolls the article underneath as it is dragged. */
body.seatmap-widget-filling {
	overflow: hidden;
}

.seatmap-widget__canvas {
	display: block;
	inline-size: 100%;
	touch-action: none; /* the canvas handles its own pan and pinch */
	cursor: grab;
}

.seatmap-widget__canvas:active {
	cursor: grabbing;
}

/* Floating controls over the plan share one treatment, so they read as one layer. */
.seatmap-widget__float {
	position: absolute;
	z-index: 2;
	border: 1px solid var(--seatmap-border);
	border-radius: 999px;
	background: var(--seatmap-surface);
	box-shadow: var(--seatmap-shadow);
}

.seatmap-widget__zoom {
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	display: flex;
	flex-direction: column;
	padding: 2px;
}

/* The floor switcher only exists on a chart with more than one, so it is never dead furniture. */
.seatmap-widget__floors {
	inset-block-end: 0.6rem;
	inset-inline-start: 0.6rem;
	display: flex;
	padding: 2px;
	gap: 2px;
}

.seatmap-widget__floor {
	min-inline-size: 2rem;
	block-size: 1.75rem;
	padding-inline: 0.5rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--seatmap-muted);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
}

.seatmap-widget__floor:hover {
	background: var(--seatmap-surface-hover);
	color: var(--seatmap-text);
}

.seatmap-widget__floor[aria-pressed="true"] {
	background: var(--seatmap-accent);
	color: var(--seatmap-on-accent);
}

/* One round control: zoom, reset, and the quantity steppers are all the same object. */
.seatmap-widget__icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--seatmap-muted);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.seatmap-widget__icon-button:hover:not(:disabled) {
	background: var(--seatmap-surface-hover);
	color: var(--seatmap-text);
}

.seatmap-widget__icon-button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.seatmap-widget__icon-button svg {
	display: block;
	inline-size: 1rem;
	block-size: 1rem;
}

/* ================================================================= standing and tables */

/*
 * Standing areas: a stepper each, because there is no seat to click. Real buttons rather than a
 * drag control, so the keyboard path is the same as the pointer one.
 */
.seatmap-widget__areas {
	margin-block-start: 1rem;
	padding: 0.9rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius);
	background: var(--seatmap-surface);
}

.seatmap-widget__areas h3 {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--seatmap-muted);
}

/*
 * One ticket type, one row.
 *
 * In a room with no chairs this list *is* the picker, so a row has to carry its own weight: the
 * name and the price at the size a price is read at, how many are left underneath, and the stepper
 * far enough from both that nobody taps it by accident.
 */
.seatmap-widget__area {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
	padding: 0.85rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface-sunken);
	transition: border-color 140ms ease;
}

.seatmap-widget__area + .seatmap-widget__area { margin-block-start: 0.5rem; }
.seatmap-widget__area:hover { border-color: var(--seatmap-border-strong); }
.seatmap-widget__area:has(output[data-chosen]:not([data-chosen="0"])) {
	border-color: var(--seatmap-accent);
	background: var(--seatmap-surface);
}

.seatmap-widget__area-name {
	flex: 1;
	min-inline-size: 8rem;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.seatmap-widget__area-left {
	font-size: 0.8125rem;
	color: var(--seatmap-muted);
	font-variant-numeric: tabular-nums;
}

.seatmap-widget__stepper {
	display: flex;
	align-items: center;
	padding: 3px;
	border: 1px solid var(--seatmap-border);
	border-radius: 999px;
	background: var(--seatmap-surface);
}

.seatmap-widget__stepper output {
	min-inline-size: 2.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/*
 * One row per kind of ticket inside an area.
 *
 * A standing event with concessions is asking three questions of one area — how many adults, how
 * many children, how many students — so each gets its own line and its own stepper. With one kind
 * of ticket none of this renders and the area keeps the single row it always had.
 */
.seatmap-widget__area-kind {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
	inline-size: 100%;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var(--seatmap-border);
}

.seatmap-widget__area-kind-name {
	flex: 1;
	min-inline-size: 7rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.seatmap-widget__area-kind-note {
	flex-basis: 100%;
	order: 3;
	font-size: 0.8125rem;
	color: var(--seatmap-muted);
}

/* Who the ticket is for, under the seat it belongs to. */
.seatmap-widget__line-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	min-inline-size: 0;
}

.seatmap-widget__type {
	max-inline-size: 100%;
	padding: 0.15rem 1.6rem 0.15rem 0.4rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.seatmap-widget__type:focus-visible {
	outline: none;
	border-color: var(--seatmap-accent);
	box-shadow: var(--seatmap-ring);
}

[dir="rtl"] .seatmap-widget__type { padding-inline: 0.4rem 1.6rem; }

/* ============================================================================ the tooltip */

/*
 * What is under the pointer, in words.
 *
 * The plan cannot label four hundred circles at a size anybody could read, so the label follows the
 * pointer instead. Positioned from script against the stage; everything else about it is here.
 */
.seatmap-widget__tip {
	position: absolute;
	z-index: 3;
	max-inline-size: 16rem;
	padding: 0.4rem 0.6rem;
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-accent);
	color: var(--seatmap-on-accent);
	font-size: 0.8125rem;
	line-height: 1.4;
	pointer-events: none;
	box-shadow: var(--seatmap-shadow);
}

/* ========================================================================= the seat list */

/*
 * The seat list is the accessible control, not a fallback: it is always in the document and always
 * reachable by keyboard. It is visually compact rather than hidden, because "available to screen
 * readers only" would leave keyboard users navigating an invisible grid.
 */
/*
 * The chairs as a list, folded away.
 *
 * The plan is where seats are picked; this is the same offer in words, for anyone reading or
 * tabbing rather than pointing. It is a disclosure and not something clipped out of sight, because
 * a panel that folds itself away when focus leaves moves the page between a mouse going down and
 * coming up — and the click then lands where nobody aimed.
 */
.seatmap-widget__list > summary {
	cursor: pointer;
	padding: 0.4rem 0.2rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--seatmap-muted);
}

.seatmap-widget__list > summary:focus-visible {
	outline: none;
	border-radius: var(--seatmap-radius-sm);
	box-shadow: var(--seatmap-ring);
}

.seatmap-widget__list[open] > summary { color: var(--seatmap-text); }

.seatmap-widget__list-body {
	max-block-size: 20rem;
	overflow: auto;
	padding-block-end: 0.5rem;
}

.seatmap-widget__seats {
	margin-block-start: 1rem;
	padding: 0.25rem 0.9rem 0.9rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius);
	background: var(--seatmap-surface);
}

.seatmap-widget__section h4,
.seatmap-widget__seats h4 {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	margin: 0 -0.9rem 0.5rem;
	padding: 0.75rem 0.9rem 0.4rem;
	background: var(--seatmap-surface);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seatmap-muted);
}

.seatmap-widget__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-block-end: 0.35rem;
}

.seatmap-widget__row-label {
	inline-size: 3.5rem;
	flex: none;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--seatmap-muted);
	font-variant-numeric: tabular-nums;
}

.seatmap-widget__seat {
	position: relative;
	min-inline-size: 2rem;
	block-size: 2rem;
	padding-inline: 0.4rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.seatmap-widget__seat:hover:not(:disabled):not(.is-selected) {
	background: var(--seatmap-surface-hover);
	border-color: var(--seatmap-border-strong);
}

.seatmap-widget__seat.is-selected {
	background: var(--seatmap-accent);
	color: var(--seatmap-on-accent);
	border-color: var(--seatmap-accent);
	font-weight: 600;
}

.seatmap-widget__seat:disabled {
	background: var(--seatmap-surface-sunken);
	border-style: dashed;
	color: var(--seatmap-muted);
	cursor: not-allowed;
}

/*
 * The accessibility mark is a masked vector rather than the ♿ emoji: an emoji is a different
 * weight, colour and size on every platform, and cannot take the colour of the chip it sits on.
 */
.seatmap-widget__seat.is-accessible::after {
	content: "";
	position: absolute;
	inset-block-start: 1px;
	inset-inline-end: 1px;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	background: currentColor;
	opacity: 0.75;
	-webkit-mask: var(--seatmap-accessible-mark) center / contain no-repeat;
	mask: var(--seatmap-accessible-mark) center / contain no-repeat;
}

.seatmap-widget {
	--seatmap-accessible-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.8' r='1.9'/%3E%3Cpath d='M8 8.6h8M12 8.6v5h4.5M12 13.6 9.5 20M16.5 13.6 19 20'/%3E%3C/svg%3E");
}

/* Never rely on the browser default alone — some themes remove it entirely. */
.seatmap-widget button:focus-visible {
	outline: 2px solid var(--seatmap-accent);
	outline-offset: 2px;
	box-shadow: var(--seatmap-ring);
}

/* ============================================================================ the summary */

.seatmap-widget__summary {
	margin-block-start: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius);
	background: var(--seatmap-surface);
	box-shadow: var(--seatmap-shadow);
}

.seatmap-widget__summary h3 {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seatmap-muted);
}

/* --- seats together ----------------------------------------------------------------------
 *
 * The shortcut past the plan, at the top of the summary: how many, side by side. First in the
 * column because a buyer who wants four together will not find them by clicking.
 */

.seatmap-widget__together {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.9rem;
	padding: 0 0 0.9rem;
	border-block-end: 1px solid var(--seatmap-border);
}

.seatmap-widget__together-label {
	flex: 1 1 100%;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seatmap-muted);
}

.seatmap-widget__together-count {
	flex: 0 0 4.5rem;
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.seatmap-widget__together-go {
	flex: 1 1 auto;
	min-block-size: 2.25rem;
	padding-inline: 0.9rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.seatmap-widget__together-go:hover:not(:disabled) {
	border-color: var(--seatmap-accent);
	color: var(--seatmap-accent);
}

.seatmap-widget__together-count:focus-visible {
	outline: 2px solid var(--seatmap-accent);
	outline-offset: 1px;
}

/* --- timed entry -------------------------------------------------------------------------
 *
 * A choice that has to be made before anything else, so it sits above the seats rather than
 * below them and is boxed off from the summary it precedes.
 */

.seatmap-widget__entry {
	margin: 0 0 0.9rem;
	padding: 0 0 0.9rem;
	border-block-end: 1px solid var(--seatmap-border);
}

.seatmap-widget__entry-title {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seatmap-muted);
}

.seatmap-widget__entry-select {
	inline-size: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.seatmap-widget__entry-select:focus-visible {
	outline: 2px solid var(--seatmap-accent);
	outline-offset: 1px;
}

.seatmap-widget__selection {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.seatmap-widget__selection li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	padding-block: 0.3rem;
	border-block-end: 1px solid var(--seatmap-border);
	font-variant-numeric: tabular-nums;
}

/* The money and the way to take the line back, kept together at the end of the line. */
.seatmap-widget__line-end {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}

.seatmap-widget__drop {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 999px;
	color: var(--seatmap-muted);
}

.seatmap-widget__drop:hover:not(:disabled) {
	background: var(--seatmap-danger-soft);
	color: var(--seatmap-danger);
	border-color: var(--seatmap-danger);
}

.seatmap-widget__drop svg { inline-size: 0.75rem; block-size: 0.75rem; }

.seatmap-widget__selection li:last-child {
	border-block-end: none;
}

/* "No seats selected yet" is a sentence, not a priced line. */
.seatmap-widget__selection-empty {
	display: block;
	border-block-end: none;
	color: var(--seatmap-muted);
}

.seatmap-widget__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--seatmap-border);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.seatmap-widget__message:empty {
	display: none;
}

.seatmap-widget__message {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.7rem;
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-danger-soft);
	color: var(--seatmap-danger);
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* Navigation is news, not a problem, so it does not wear the colour of one. */
.seatmap-widget__message--quiet {
	background: var(--seatmap-surface-sunken);
	color: var(--seatmap-muted);
}

/*
 * The submit carries the theme's own `.button` class too. Its appearance is written inside
 * `:where()`, which has no specificity at all, so the shop's own button style wins without a
 * single `!important` — and a theme that styles nothing still gets a real button rather than the
 * browser's default grey.
 */
:where(.seatmap-widget__submit) {
	border: 1px solid var(--seatmap-accent);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-accent);
	color: var(--seatmap-on-accent);
	font: inherit;
	font-weight: 600;
}

:where(.seatmap-widget__submit:hover:not(:disabled)) {
	filter: brightness(1.15);
}

.seatmap-widget__submit {
	inline-size: 100%;
	min-block-size: 2.75rem;
	cursor: pointer;
}

/*
 * Nothing chosen yet.
 *
 * Half opacity was enough on a pale shop and not on a dark one: a crimson button at 50% over a
 * dark surface is still a crimson button, and a primary action that looks ready but does nothing
 * is worse than no button at all. Emptied out instead, which reads the same everywhere.
 */
.seatmap-widget__submit:disabled {
	background: var(--seatmap-surface-sunken);
	border-color: var(--seatmap-border);
	color: var(--seatmap-muted);
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

@media (max-width: 600px) {
	.seatmap-widget__row-label {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seatmap-widget * {
		transition: none !important;
	}
}

/* --- the venue as blocks ------------------------------------------------------------------
 *
 * A plan of two thousand chairs is not something a person chooses from. The first view is the
 * venue the way the building is signposted, and the chairs appear once a block has been chosen.
 */

.seatmap-widget__back {
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	padding: 2px;
}

.seatmap-widget__back-button {
	block-size: 1.75rem;
	padding-inline: 0.75rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}

.seatmap-widget__back-button:hover { background: var(--seatmap-surface-hover); }

.seatmap-widget__back-button:focus-visible,
.seatmap-widget__block:focus-visible {
	outline: none;
	box-shadow: var(--seatmap-ring);
}

.seatmap-widget__blocks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.5rem;
}

.seatmap-widget__block {
	display: grid;
	gap: 0.15rem;
	padding: 0.7rem 0.8rem;
	text-align: start;
	border: 1px solid var(--seatmap-border);
	border-radius: var(--seatmap-radius-sm);
	background: var(--seatmap-surface);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.seatmap-widget__block:hover:not(:disabled) { border-color: var(--seatmap-border-strong); }

.seatmap-widget__block:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.seatmap-widget__block-name { font-weight: 600; }

.seatmap-widget__block-meta {
	font-size: 0.75rem;
	color: var(--seatmap-muted);
}


/*
 * What it looks like from here.
 *
 * A thumbnail above the chairs, at the moment somebody has chosen where in the room to sit and is
 * choosing which seat. Small on purpose: it is an aid to the decision rather than the decision, and
 * pressing it opens the photograph properly.
 */
.seatmap-widget__view {
	margin: 0 0 var(--sm-space-3, 0.75rem);
	border: 1px solid var(--sm-border, #e3e6ec);
	border-radius: var(--sm-radius, 10px);
	overflow: hidden;
	background: var(--sm-surface-sunken, #f6f7f9);
}

.seatmap-widget__view a { display: block; }

.seatmap-widget__view img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.seatmap-widget__view figcaption {
	padding: 0.45rem 0.6rem;
	font-size: 0.8125rem;
	color: var(--sm-text-muted, #5f6878);
}

/* ================================================================== the picker, in one hand
 *
 * A phone is where most seats are actually chosen, and the thing that made it hard was never the
 * plan — it was that everything you need in order to *finish* was somewhere below the plan. You
 * pick a seat, and the total and the button that reserves it are off the bottom of the screen; you
 * scroll down to press it, and now you cannot see what you picked.
 *
 * So on a touch screen narrow enough to be a phone, and only once something has actually been
 * chosen, the summary lifts off the page and sits at the foot of the screen. Nothing is duplicated
 * and no script is involved: it is the same element, in the same place in the document, told to
 * stay where a thumb is.
 */
@media (max-width: 600px) and (pointer: coarse) {
	/*
	 * `:has()` is doing the real work: "the summary of a picker in which at least one line is not
	 * the empty-state line". A picker nobody has touched yet stays an ordinary box in the page,
	 * because a tray that is there before there is anything to put in it is a tray in the way.
	 */
	.seatmap-widget:not(.seatmap-widget--filling)
		.seatmap-widget__summary:has(.seatmap-widget__selection li:not(.seatmap-widget__selection-empty)) {
		position: fixed;
		inset-inline: 0;
		/* Explicitly released. The desktop rule above pins this element a rem from the top of the
		   scroller, and an element with both a top and a bottom and a height of its own resolves
		   in favour of the top — so without this the tray lands at the top of the screen. */
		inset-block-start: auto;
		inset-block-end: 0;
		z-index: 30;
		margin-block-start: 0;
		max-block-size: 62vh;
		overflow: auto;
		overscroll-behavior: contain;
		border-inline: 0;
		border-block-end: 0;
		border-start-start-radius: var(--seatmap-radius);
		border-start-end-radius: var(--seatmap-radius);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
		padding-block-end: max(1rem, env(safe-area-inset-bottom));
		box-shadow: 0 -10px 30px rgba(27, 32, 48, 0.18);
	}

	/* The hole the tray left. Without it the page shortens the moment a seat is chosen, and the
	   plan jumps under the finger that just pressed it. */
	.seatmap-widget:not(.seatmap-widget--filling)
		.seatmap-widget__side:has(.seatmap-widget__selection li:not(.seatmap-widget__selection-empty)) {
		min-block-size: 13rem;
	}

	/* A row of chairs is a row of targets, and 32px is not one. */
	.seatmap-widget__seat {
		min-inline-size: 2.5rem;
		block-size: 2.5rem;
		font-size: 0.8125rem;
	}

	.seatmap-widget__row-label {
		inline-size: 100%;
	}
}