/*! Space Events 1.0.0-beta.65 — directory.css. Built from assets/src/directory.css. */
/*
 * Space Events directory styles.
 *
 * Every selector is namespaced under a plugin class so the active theme is
 * never altered. Layout responds to the container width, not just the
 * viewport, so a directory in a narrow sidebar reflows correctly.
 * Custom properties are the documented theming surface.
 */

/*
 * The greys are mixed from the text colour they sit on, not fixed.
 *
 * They used to be fixed shades of black, swapped for shades of white when the
 * device was in dark mode. The background was never swapped with them, because
 * it belongs to the theme — so on a light theme, every reader with a dark-mode
 * device got white labels, notes and borders on a white page. Mixed from
 * `currentColor`, a grey is always a lighter version of whatever the text is,
 * on a light theme or a dark one, and needs no guess about which it is.
 */
.space-events {
	--space-events-accent: #1f5f9b;
	--space-events-background: transparent;
	--space-events-surface: color-mix(in srgb, currentColor 5%, transparent);
	--space-events-border: color-mix(in srgb, currentColor 22%, transparent);
	--space-events-text: inherit;
	--space-events-muted: color-mix(in srgb, currentColor 72%, transparent);
	--space-events-radius: 6px;
	--space-events-gap: 1rem;
	/* Status colours, as tokens so a chosen scheme can redefine them. Fixed
	 * dark reds and ambers were 2:1 on the dark scheme's background. */
	--space-events-critical: #a3161b;
	--space-events-warning: #8a5300;
	--space-events-notice: #1f5f9b;
	--space-events-error: #a4111d;
	--space-events-field-background: transparent;
	/* Card tints: light yellow for an event taking place today, light
	 * green for an editor's pick, each with its own text colour so the
	 * card stays readable whatever colour the site's theme gives text. */
	--space-events-in-progress: #fff6cc;
	--space-events-editors-pick: #e2f5de;
	--space-events-tint-text: #1d2327;
	--space-events-tint-link: #1a4f86;
	--space-events-tint-muted: #3c434a;
	/* Fluorescent orange, with near-black text at 6:1. Every colour in this
	 * group can be changed under Settings > General > Directory highlights. */
	--space-events-pick-badge: #ff5f1f;
	--space-events-pick-badge-text: #111;
	--space-events-now-badge: #ffd23f;
	--space-events-now-badge-text: #1d2327;
	--space-events-new-badge: #d63638;
	--space-events-new-badge-text: #ffffff;
	--space-events-updated-badge: #7e3bd0;
	--space-events-updated-badge-text: #ffffff;

	background: var(--space-events-background);
	color: var(--space-events-text);
	container-type: inline-size;
	container-name: space-events;
	display: block;
	max-width: 100%;
}

.space-events--compact {
	--space-events-gap: 0.5rem;
}

/*
 * A scheme the reader chose is drawn on a background of its own. Changing the
 * text colour alone left dark text on a dark theme, or light on a light one.
 */
.space-events--theme-dark,
.space-events--theme-light {
	border-radius: var(--space-events-radius);
	padding: var(--space-events-gap);
}

.space-events--theme-dark {
	--space-events-accent: #7cb6ee;
	--space-events-background: #16191d;
	--space-events-text: #eceef1;
	--space-events-muted: #b9bec6;
	--space-events-surface: #1f242a;
	--space-events-border: #737c87;
	--space-events-critical: #ff9b9b;
	--space-events-warning: #f2c46d;
	--space-events-notice: #9cc8f2;
	--space-events-error: #ff9b9b;
	--space-events-field-background: #0f1216;
	--space-events-in-progress: #3b3410;
	--space-events-editors-pick: #15361c;
	--space-events-tint-text: #eceef1;
	--space-events-tint-link: #9cc8f2;
	--space-events-tint-muted: #c9cdd3;
	color-scheme: dark;
}

.space-events--theme-dark .space-events-button:not(.space-events-button--quiet),
.space-events--theme-dark .space-events-filters__badge {
	color: #0d1117;
}

.space-events--theme-light {
	--space-events-background: #fff;
	--space-events-text: #1d2327;
	--space-events-muted: #50575e;
	--space-events-surface: #f6f7f7;
	--space-events-border: #8c8f94;
	--space-events-field-background: #fff;
	color-scheme: light;
}

/*
 * A chosen scheme owns every foreground inside it, not just the root's.
 *
 * Dark mode set the text colour on the directory's root and relied on it
 * being inherited, and it was not: the theme's own rules for headings,
 * paragraphs and links — `h3 { color: #111 }`, `.entry-content p { … }` —
 * apply to those elements directly and win over anything inherited. Event
 * names, summaries and the comparison stayed near-black on the dark
 * background. Two classes plus the element outrank a theme's one-class rule,
 * so the scheme is applied where the text actually is.
 */
.space-events.space-events--theme-dark :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, summary, caption, th, td, span, small, strong, em, time, div, nav, section, article, details, figcaption, blockquote),
.space-events.space-events--theme-light :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, summary, caption, th, td, span, small, strong, em, time, div, nav, section, article, details, figcaption, blockquote) {
	color: var(--space-events-text);
}

.space-events.space-events--theme-dark a,
.space-events.space-events--theme-light a {
	color: var(--space-events-accent);
}

.space-events.space-events--theme-dark a:hover,
.space-events.space-events--theme-light a:hover {
	color: var(--space-events-text);
}

.space-events.space-events--theme-dark :is(.space-events-card__note, .space-events-card__meta dt, .space-events-field__hint, .space-events-agenda__meta, .space-events-saved__note, .space-events-detail__note, .space-events-facet__count),
.space-events.space-events--theme-light :is(.space-events-card__note, .space-events-card__meta dt, .space-events-field__hint, .space-events-agenda__meta, .space-events-saved__note, .space-events-detail__note, .space-events-facet__count) {
	color: var(--space-events-muted);
}

.space-events.space-events--theme-dark .space-events-calendar__warning { color: var(--space-events-warning); }
.space-events.space-events--theme-dark .space-events-badge--critical { color: var(--space-events-critical); }
.space-events.space-events--theme-dark .space-events-badge--warning { color: var(--space-events-warning); }
.space-events.space-events--theme-dark .space-events-badge--notice { color: var(--space-events-notice); }
.space-events.space-events--theme-dark :is(.space-events-field__error, .space-events-error-summary a) { color: var(--space-events-error); }

.space-events.space-events--theme-dark :is(input, select, textarea),
.space-events.space-events--theme-light :is(input, select, textarea) {
	background-color: var(--space-events-field-background);
	border-color: var(--space-events-border);
	color: var(--space-events-text);
}

.space-events.space-events--theme-dark :is(input, select, textarea)::placeholder {
	color: var(--space-events-muted);
	opacity: 1;
}

.space-events.space-events--theme-dark :is(input, select, textarea):disabled,
.space-events.space-events--theme-dark .space-events-button:disabled {
	color: var(--space-events-muted);
	opacity: 1;
}

/* Buttons draw their own colours; the rule above would otherwise repaint a
 * filled button's label in the text colour. */
.space-events.space-events--theme-dark .space-events-button:not(.space-events-button--quiet),
.space-events.space-events--theme-dark .space-events-button:not(.space-events-button--quiet) *,
.space-events.space-events--theme-dark .space-events-filters__badge {
	color: #0d1117;
}

.space-events.space-events--theme-light .space-events-button:not(.space-events-button--quiet),
.space-events.space-events--theme-light .space-events-button:not(.space-events-button--quiet) * {
	color: #fff;
}

.space-events.space-events--theme-dark .space-events-button--quiet,
.space-events.space-events--theme-light .space-events-button--quiet {
	color: var(--space-events-text);
}

/* Surfaces that carry their own light background keep their own dark text
 * in the light scheme and get a dark equivalent in the dark one. */
.space-events.space-events--theme-dark :is(.space-events-detail__status, .space-events-diagnostics, .space-events-diagnostics *) {
	background: var(--space-events-surface);
	border-color: var(--space-events-border);
	color: var(--space-events-text);
}

.space-events.space-events--theme-dark .space-events-detail__status.is-critical { color: var(--space-events-critical); }
.space-events.space-events--theme-dark .space-events-detail__status.is-warning { color: var(--space-events-warning); }

.space-events.space-events--theme-dark .space-events-compare__table td.is-different {
	background: #22303f;
}

.space-events.space-events--theme-dark :is(.space-events-card, .space-events-facet, .space-events-compare__table th, .space-events-compare__table td, .space-events-table th, .space-events-table td, .space-events-calendar__month td, .space-events-calendar__month th) {
	border-color: var(--space-events-border);
}

/* The focus ring is the accent in either scheme, and never removed. */
.space-events.space-events--theme-dark :focus-visible,
.space-events.space-events--theme-light :focus-visible {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

/* Visually hidden text stays available to assistive technology. */
.space-events-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.space-events :focus-visible {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

/*
 * The same ring, stated strongly enough to survive a theme's
 * `input:focus { outline: none }`, which took it off the search box and the
 * date fields. Two classes plus the element outrank a theme's element or
 * one-class rule.
 */
.space-events.space-events :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.space-events.space-events input[type="date"]:focus-within {
	/* A date field's focus lands on its inner day, month or year segment, so
	 * the field itself never matches :focus-visible and showed no ring. */
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Chrome                                                            */
/* ---------------------------------------------------------------- */

.space-events--full {
	display: grid;
	gap: var(--space-events-gap);
}

@container space-events (min-width: 48rem) {
	.space-events--full:has(.space-events-filters--left) {
		grid-template-columns: minmax(14rem, 18rem) 1fr;
	}
}

.space-events-count {
	font-weight: 600;
	margin: 0 0 var(--space-events-gap);
}

/* ---------------------------------------------------------------- */
/* Tabs                                                              */
/* ---------------------------------------------------------------- */

/*
 * The directory's groups. Each tab is a link to an address of its own, so this
 * is navigation rather than a widget: it is styled as a bar, but a reader with
 * no styles at all still gets a plain list of links that work.
 */
.space-events-tabs {
	border-bottom: 1px solid var(--space-events-border);
	margin: 0;
	/* A row that is wider than the screen scrolls; it never wraps into a
	 * second row of tabs, which reads as two separate bars. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.space-events-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-tabs__item {
	flex: 0 0 auto;
}

.space-events-tabs__link {
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--space-events-radius) var(--space-events-radius) 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.space-events-tabs__link:hover,
.space-events-tabs__link:focus-visible {
	background: var(--space-events-surface);
}

/* The open group is marked by weight and an underline as well as colour, so
 * it is still identifiable without colour vision. */
.space-events-tabs__link.is-current {
	background: var(--space-events-surface);
	border-color: var(--space-events-border);
	box-shadow: inset 0 3px 0 0 var(--space-events-accent);
	font-weight: 700;
}

.space-events-tabs__count {
	color: var(--space-events-muted);
	font-weight: 400;
}

.space-events__panel {
	padding-top: var(--space-events-gap);
}

.space-events-panel__heading {
	margin: 0 0 0.25rem;
}

.space-events-panel__note {
	color: var(--space-events-muted);
	margin: 0 0 var(--space-events-gap);
	max-width: 62ch;
}

/* The conditions in force, restated above results whose filter form is now in
 * a group of its own. */
.space-events-results__conditions {
	margin-bottom: var(--space-events-gap);
}

/* ---------------------------------------------------------------- */
/* Settings, compare and submit groups                               */
/* ---------------------------------------------------------------- */

.space-events-settings__matrix {
	display: grid;
	gap: var(--space-events-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.space-events-settings__actions,
.space-events-compare-panel__actions,
.space-events-submit-panel__actions,
.space-events-help__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-events-gap) 0 0;
}

.space-events-field__hint {
	color: var(--space-events-muted);
	display: block;
	font-size: 0.875rem;
}

.space-events-compare-panel {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	padding: var(--space-events-gap);
}

.space-events-compare-panel__list {
	border-collapse: collapse;
	margin: 0 0 var(--space-events-gap);
	width: 100%;
}

.space-events-compare-panel__list th,
.space-events-compare-panel__list td {
	border-bottom: 1px solid var(--space-events-border);
	padding: 0.5rem 0.75rem;
	text-align: start;
	vertical-align: middle;
}

.space-events-compare-panel__list td,
.space-events-compare-panel__list thead th:last-child {
	text-align: end;
	white-space: nowrap;
}

.space-events-compare-panel__list thead th {
	font-size: 0.85rem;
}

.space-events-submit-panel__note,
.space-events-help__section {
	max-width: 68ch;
}

.space-events-help__heading {
	margin-bottom: 0.25rem;
}

.space-events-chips__list,
.space-events-pagination__list,
.space-events-facet__list,
.space-events-results__list,
.space-events-ticker__track {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-chip {
	background: var(--space-events-surface);
	border: 1px solid var(--space-events-border);
	border-radius: 999px;
	font-size: 0.875rem;
	padding: 0.25rem 0.75rem;
}

.space-events-chip--locked {
	opacity: 0.8;
}

.space-events-button {
	background: var(--space-events-accent);
	border: 1px solid transparent;
	border-radius: var(--space-events-radius);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A comfortable target for touch and Voice Control. */
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.space-events-button--quiet {
	background: transparent;
	border-color: var(--space-events-border);
	color: inherit;
}

.space-events-input,
.space-events-select {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	width: 100%;
}

.space-events-filters__form {
	display: grid;
	gap: var(--space-events-gap);
}

/* The panel is always open; its heading is a heading, not a control. */
.space-events-filters__panel {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	padding: 0.75rem;
}

.space-events-filters__heading {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.1rem;
	font-weight: 600;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0;
}

/* The count of applied conditions rides on the heading. */
.space-events-filters__badge {
	background: var(--space-events-accent);
	border-radius: 999px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
}

.space-events-filters__primary {
	display: grid;
	gap: 0.75rem;
}

@container space-events (min-width: 34rem) {
	.space-events-filters__primary {
		grid-template-columns: 2fr 1fr;
	}
}

/* The facet groups are a matrix, not a column: they fill the width available
 * and reflow from four tracks to one without a media query per breakpoint. */
.space-events-filters__matrix {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* In the left-hand rail there is only ever room for one track. */
.space-events-filters--left .space-events-filters__matrix,
.space-events-filters--drawer .space-events-filters__matrix {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Every filter group is an open box: heading and count on top, then (for the
 * long groups) a box to find an option, then the options. Every group shows
 * the same number of options — --space-events-facet-visible, set under
 * Settings → General (10 by default) — and scrolls inside itself for the
 * rest; a group with fewer shows them all, with no scrollbar.
 */
.space-events-facet {
	--space-events-facet-visible: 10;
	/* One option row: the 40px minimum item and the list's gap. The script
	 * measures the real rows (a long label takes two lines) and sets the
	 * exact height; this is the starting point and the no-script height. */
	--space-events-facet-row: calc(40px + 0.1rem);
	--space-events-scrollbar-width: 14px;
	background: var(--space-events-background);
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	padding: 0.5rem 0.5rem 0.6rem 0.75rem;
}

/* A group holding a choice is marked by its count and a heavier edge — never
 * by dimming the others, and never in the same way as keyboard focus. */
.space-events-facet--selected {
	border-color: var(--space-events-accent);
	box-shadow: inset 3px 0 0 var(--space-events-accent);
}

.space-events-facet:focus-within {
	outline: 2px solid var(--space-events-accent);
	outline-offset: 2px;
}

.space-events-facet__heading {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.4rem;
	padding: 0.2rem 0;
}

.space-events-facet__selected {
	color: var(--space-events-muted);
	font-weight: 400;
}

.space-events-facet__note {
	font-size: 0.85rem;
	margin: 0 0 0.4rem;
}

.space-events-facet__find {
	margin: 0 0 0.4rem;
}

.space-events-facet__find-label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.2rem;
}

.space-events-facet__find-row {
	display: flex;
	gap: 0.4rem;
}

.space-events-facet__find-input {
	flex: 1 1 auto;
	font-size: 0.9rem;
	min-width: 0;
}

/* A button's own display must not undo `hidden`: this outranks the button
 * class by specificity alone, so a theme can still override it. */
.space-events .space-events-facet__find[hidden],
.space-events .space-events-facet__find [hidden] {
	display: none;
}

.space-events-facet__find-status {
	color: var(--space-events-muted);
	display: block;
	font-size: 0.8rem;
	min-height: 1.1em;
}

/* The options and their scrollbar. The right-hand column is reserved from the
 * start, with or without the script, so nothing shifts when the bar appears
 * and no label runs underneath it.
 *
 * A row of two flex items, not a grid: iPad Safari sized the grid's row from
 * the options laid out at a wider width, where every label fitted on one line,
 * so a group whose labels wrap at the card's real width ("Space component
 * (404)") was cut short and scrolled with room to spare. A flex row lays the
 * options out at their final width before it takes their height. */
.space-events-facet__box {
	align-items: stretch;
	column-gap: 4px;
	display: flex;
	/* As tall as its options, up to the chosen number of them: never
	 * stretched to the card, never grown to the whole list. */
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
}

.space-events-facet__options {
	/* Without the script, the options take the whole width; the browser's own
	 * bar sits in the gutter reserved below. */
	flex: 1 1 auto;
	/* The height of the chosen number of options, on the element that
	 * scrolls — a definite limit every browser honours, Safari included. */
	max-height: var(--space-events-facet-height, calc(var(--space-events-facet-visible) * var(--space-events-facet-row)));
	min-height: 0;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Options measure their place from the top of the list. */
	position: relative;
	/* Without the script: the browser's own bar, asked to stay visible and
	 * coloured to match. */
	scrollbar-color: var(--space-events-scrollbar-thumb) var(--space-events-scrollbar-track);
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

/* With the script, its own bar takes the reserved column, and the native one —
 * which iPadOS and macOS hide at rest — is not drawn as well. */
.space-events-facet__box.is-enhanced .space-events-facet__options {
	flex: 1 1 0%;
	scrollbar-gutter: auto;
	scrollbar-width: none;
}

/* The script's bar: the reserved column, as tall as the options beside it. */
.space-events-facet__box > .space-events-scrollbar {
	flex: 0 0 var(--space-events-scrollbar-width);
	width: var(--space-events-scrollbar-width);
}

.space-events-facet__box.is-enhanced .space-events-facet__options::-webkit-scrollbar {
	display: none;
	height: 0;
	width: 0;
}

.space-events-facet__options:focus-visible {
	outline: 2px solid var(--space-events-accent);
	outline-offset: -2px;
}

/* A column of options, each as tall as its label. Not a grid: WebKit (iPad
 * Safari) sized grid rows for a label wrapped at another width, so a long
 * organizer name ran over the options above and below it. */
.space-events-facet__list {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0 0.25rem 0 0;
}

.space-events-facet__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
	/* A theme's fixed list-item height would clip a wrapped label. */
	height: auto;
	max-height: none;
	min-height: 40px;
	/* Without this a long label widens the list and breaks the box. */
	min-width: 0;
}

.space-events-facet__item[hidden] {
	display: none;
}

.space-events-facet__item input {
	flex: 0 0 auto;
	height: 1.1rem;
	margin: 0;
	width: 1.1rem;
}

.space-events-facet__item label {
	flex: 1 1 auto;
	/* The theme's label size is set for article forms; in a box of options it
	 * left room for three. */
	font-size: 0.9rem;
	height: auto;
	line-height: 1.3;
	min-width: 0;
	/* break-word, not anywhere: it wraps a long word the same way without
	 * changing the label's measured size, which is what the rows were sized
	 * from. */
	overflow-wrap: break-word;
	padding: 0.35rem 0;
	white-space: normal;
	word-break: normal;
}

.space-events-facet__empty {
	color: var(--space-events-muted);
	font-size: 0.85rem;
	margin: 0.25rem 0;
}

/* The scrollbar the script draws. The track is the whole reserved column,
 * wide enough to hit with a finger; the rail and thumb inside it are drawn
 * narrower. */
.space-events {
	--space-events-scrollbar-track: color-mix(in srgb, currentColor 12%, transparent);
	--space-events-scrollbar-thumb: color-mix(in srgb, currentColor 58%, transparent);
	--space-events-scrollbar-thumb-active: var(--space-events-accent);
}

.space-events--theme-light {
	--space-events-scrollbar-track: #dcdcde;
	--space-events-scrollbar-thumb: #646970;
}

.space-events--theme-dark {
	--space-events-scrollbar-track: #2c3238;
	--space-events-scrollbar-thumb: #a7aeb8;
}

.space-events-scrollbar {
	border-radius: 999px;
	cursor: pointer;
	grid-column: 2;
	grid-row: 1;
	position: relative;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.space-events-scrollbar::before {
	background: var(--space-events-scrollbar-track);
	border-radius: 999px;
	bottom: 0;
	content: "";
	left: 3px;
	position: absolute;
	right: 3px;
	top: 0;
}

.space-events-scrollbar__thumb {
	background: var(--space-events-scrollbar-thumb);
	border-radius: 999px;
	left: 2px;
	min-height: 24px;
	position: absolute;
	right: 2px;
	top: 0;
	will-change: transform;
}

.space-events-scrollbar:hover .space-events-scrollbar__thumb,
.space-events-scrollbar.is-dragging .space-events-scrollbar__thumb {
	background: var(--space-events-scrollbar-thumb-active);
}

.space-events-scrollbar:focus-visible {
	outline: 2px solid var(--space-events-accent);
	outline-offset: 1px;
}

/* A list that fits shows no scrollbar. Its column stays reserved, so nothing
 * shifts when a search or a resize makes the list overflow again. */
.space-events-scrollbar.is-inactive {
	cursor: default;
	visibility: hidden;
}

@media (forced-colors: active) {
	.space-events-scrollbar::before {
		border: 1px solid CanvasText;
	}

	.space-events-scrollbar__thumb {
		background: CanvasText;
		forced-color-adjust: none;
	}
}

.space-events-facet__count {
	color: var(--space-events-muted);
}

.space-events-filters__locked {
	background: var(--space-events-surface);
	border-radius: var(--space-events-radius);
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------- */
/* Cards                                                             */
/* ---------------------------------------------------------------- */

.space-events-results__list {
	display: grid;
	gap: var(--space-events-gap);
}

/*
 * The item stretches to its grid row and the card fills the item.
 *
 * The card used to take `height: 100%` of an item whose height was worked out
 * from the card, which resolved short: every card spilled about 30px past its
 * row and sat on top of the next one, and the gap between results vanished.
 */
.space-events-results__item {
	display: flex;
	min-width: 0;
}

.space-events-card {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.9rem;
}

.space-events-card--canceled .space-events-card__title {
	text-decoration: line-through;
}

.space-events-card__title {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0;
}

.space-events-card__link {
	color: inherit;
}

.space-events-card__meta {
	display: grid;
	/* The value column may shrink below its longest word, so a long organizer
	 * wraps inside it instead of widening the card. */
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.15rem 0.6rem;
	margin: 0;
	font-size: 0.9rem;
}

.space-events-card__meta dt {
	color: var(--space-events-muted);
	font-weight: 500;
}

.space-events-card__meta dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A theme sizes paragraphs for articles; in a card that made the one-line
 * summary the largest text in it, larger than the event's own name. */
.space-events-card__summary {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

.space-events-card__note {
	color: var(--space-events-muted);
	font-style: italic;
}

.space-events-card__image img {
	border-radius: var(--space-events-radius);
	display: block;
	height: auto;
	max-width: 100%;
}

/*
 * An event's controls wrap.
 *
 * They used to be pinned to one line at every width, with a phone scrolling
 * that line sideways. Two things were wrong with that. A horizontal scroll
 * region inside a vertically scrolling page is hard to discover and harder to
 * operate — it cannot be reached by keyboard at all without a tab stop, a
 * switch user cannot reach it, and on a touch screen the gesture that scrolls
 * it is the gesture that scrolls the page. And what it hid was not decoration:
 * Save and Add to calendar sat off the right-hand edge of a phone, so the two
 * things a reader most often does with an event were the two they could not
 * see. Wrapping shows everything; the row keeps its gaps, so two lines still
 * read as one group.
 */
.space-events-card__actions {
	/* Every control is 44px tall on its own; stretching them to the row's
	 * tallest item is what made Event website and Save grow when a
	 * calendar menu opened beside them. */
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: auto 0 0;
}

.space-events-card__actions > * {
	/* Controls keep their natural width. Squeezing them until the labels
	 * ellipsise would hide what each one does. */
	flex: 0 1 auto;
}

/*
 * An open calendar disclosure has to escape the row and the card it sits in,
 * and sit above the cards after it.
 */
.space-events-card__actions:has(.space-events-calendar-menu[open]) {
	overflow: visible;
}

.space-events-card:has(.space-events-calendar-menu[open]),
.space-events-results__item:has(.space-events-calendar-menu[open]) {
	overflow: visible;
	position: relative;
	z-index: 5;
}

/* Form controls do not inherit the page's font by default, so every button
 * in the directory was in the browser's face while the links beside it were in
 * the theme's. */
.space-events button,
.space-events input,
.space-events select,
.space-events textarea {
	font-family: inherit;
}

.space-events-action {
	/* Links, buttons and the calendar summary are one height: with the
	 * theme's content-box sizing the links came out 57px tall beside 44px
	 * buttons in the same row. */
	box-sizing: border-box;
	line-height: 1.25;
	color: inherit;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
	align-items: center;
	background: transparent;
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.85rem;
	min-height: 44px;
	padding: 0.35rem 0.7rem;
}

/* Status is carried by text; colour only reinforces it. */
.space-events-badge {
	border: 1px solid currentColor;
	border-radius: var(--space-events-radius);
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-right: 0.35rem;
	padding: 0.1rem 0.45rem;
	text-transform: uppercase;
}

.space-events-badge--critical { color: var(--space-events-critical); }
.space-events-badge--warning  { color: var(--space-events-warning); }
.space-events-badge--notice   { color: var(--space-events-notice); }
.space-events-badge--sponsored { color: var(--space-events-muted); }

/* The Editor's pick bubble: fluorescent orange. */
.space-events-badge--featured {
	background: var(--space-events-pick-badge);
	border-color: var(--space-events-pick-badge);
	color: var(--space-events-pick-badge-text);
}

.space-events-badge--now {
	background: var(--space-events-now-badge);
	border-color: var(--space-events-now-badge);
	color: var(--space-events-now-badge-text);
}

/* Added to the directory in the last few days (red by default). */
.space-events-badge--new {
	background: var(--space-events-new-badge);
	border-color: var(--space-events-new-badge);
	color: var(--space-events-new-badge-text);
}

/* Its details changed in the last few days (purple by default). */
.space-events-badge--updated {
	background: var(--space-events-updated-badge);
	border-color: var(--space-events-updated-badge);
	color: var(--space-events-updated-badge-text);
}

/*
 * A Top Event, in the colours chosen under Promotions → Top Events → Pill
 * Configuration (the Editor's pick colours until then). Scoped to its own
 * class: nothing here reaches another pill. A long label wraps inside the
 * card instead of running past it.
 */
.space-events-badge--top-event {
	background: var(--space-events-top-badge, #ff5f1f);
	border-color: var(--space-events-top-badge, #ff5f1f);
	color: var(--space-events-top-badge-text, #111111);
	margin-bottom: 0.2rem;
	max-width: 100%;
	overflow-wrap: anywhere;
	vertical-align: top;
	white-space: normal;
}

/*
 * Tinted cards. An event taking place today is light yellow; an editor's pick
 * is light green, and the green wins when an editor's pick is also on today.
 * The tint states nothing on its own: the "Happening now" and "Editor's pick"
 * badges say it in words.
 */
.space-events-card--in-progress,
.space-events-card--editors-pick {
	color: var(--space-events-tint-text);
}

.space-events-card--in-progress {
	background: var(--space-events-in-progress);
}

.space-events-card--editors-pick {
	background: var(--space-events-editors-pick);
}

.space-events-card--in-progress :where(h3, p, dt, dd, li, span:not(.space-events-badge)),
.space-events-card--editors-pick :where(h3, p, dt, dd, li, span:not(.space-events-badge)) {
	color: inherit;
}

.space-events-card--in-progress a:not(.space-events-button),
.space-events-card--editors-pick a:not(.space-events-button) {
	color: var(--space-events-tint-link);
}

.space-events-card--in-progress .space-events-card__meta dt,
.space-events-card--editors-pick .space-events-card__meta dt {
	color: var(--space-events-tint-muted);
}

/* ---------------------------------------------------------------- */
/* Strips, ticker, table, calendar                                   */
/* ---------------------------------------------------------------- */

.space-events-strip__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

.space-events-strip__viewport .space-events-results__list {
	display: flex;
	flex-wrap: nowrap;
}

.space-events-strip__viewport .space-events-results__item {
	flex: 0 0 min(20rem, 80cqw);
	scroll-snap-align: start;
}

.space-events-ticker {
	border-block: 1px solid var(--space-events-border);
	padding: 0.4rem 0;
}

.space-events-ticker__track {
	flex-wrap: wrap;
}

.space-events-ticker--moving {
	overflow: hidden;
}

.space-events-ticker--moving .space-events-ticker__track {
	flex-wrap: nowrap;
	will-change: transform;
}

.space-events-ticker__toggle {
	background: transparent;
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
}

.space-events-ticker__toggle [data-se-label="pause"] { display: inline; }
.space-events-ticker__toggle [data-se-label="play"]  { display: none; }
.space-events-ticker__toggle[aria-pressed="true"] [data-se-label="pause"] { display: none; }
.space-events-ticker__toggle[aria-pressed="true"] [data-se-label="play"]  { display: inline; }

/* A reduced-motion preference renders the ticker as a static list. */
@media (prefers-reduced-motion: reduce) {
	.space-events-ticker--moving {
		overflow: visible;
	}

	.space-events-ticker--moving .space-events-ticker__track {
		flex-wrap: wrap;
		transform: none !important;
	}
}

.space-events-table__scroller {
	max-width: 100%;
	overflow-x: auto;
}

.space-events-table {
	border-collapse: collapse;
	/* At the theme's article size the last column ran off the edge of a
	 * 640px content column, clipped mid-word inside its scroller. */
	font-size: 0.9rem;
	line-height: 1.4;
	width: 100%;
}

.space-events-table__caption {
	font-weight: 600;
	padding-bottom: 0.5rem;
	text-align: left;
}

.space-events-table th,
.space-events-table td {
	border-bottom: 1px solid var(--space-events-border);
	padding: 0.5rem;
	text-align: left;
	vertical-align: top;
}

/* A month grid narrower than seven readable days scrolls sideways inside its
 * own labelled region instead of squeezing, or widening the page. */
.space-events-calendar__scroller {
	margin-bottom: var(--space-events-gap);
	max-width: 100%;
	overflow-x: auto;
	/* The containing block for the visually hidden text in the cells, which
	 * would otherwise be placed against the page and widen it. */
	position: relative;
}

.space-events-calendar__scroller .space-events-calendar__month {
	margin-bottom: 0;
	min-width: 36rem;
}

.space-events-calendar__month {
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-bottom: var(--space-events-gap);
	/* Seven equal days, rather than columns as wide as their longest title. */
	table-layout: fixed;
	width: 100%;
}

.space-events-calendar__events li {
	margin: 0 0 0.2rem;
	overflow-wrap: anywhere;
}

.space-events-calendar__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.space-events-calendar__step {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.space-events-calendar__step--next {
	margin-left: auto;
}

.space-events-calendar__more a {
	font-weight: 600;
}

.space-events-calendar__month th,
.space-events-calendar__month td {
	border: 1px solid var(--space-events-border);
	padding: 0.35rem;
	vertical-align: top;
}

.space-events-calendar__day--has-events {
	background: var(--space-events-surface);
}

.space-events-calendar__events {
	font-size: 0.8rem;
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

/* The month grid is decorative on a narrow screen; the agenda carries it. */
@container space-events (max-width: 34rem) {
	.space-events-calendar__month,
	.space-events-calendar__scroller {
		display: none;
	}
}

.space-events-notice {
	background: var(--space-events-surface);
	border-left: 4px solid var(--space-events-accent);
	padding: 0.75rem 1rem;
}

.space-events-notice--error {
	border-left-color: var(--space-events-critical);
}

.space-events-empty {
	background: var(--space-events-surface);
	border-radius: var(--space-events-radius);
	padding: 1rem;
}

.space-events-diagnostics {
	background: #fff8e1;
	border: 1px dashed #8a5300;
	color: #3c2a00;
	font-size: 0.85rem;
	margin-bottom: var(--space-events-gap);
	padding: 0.75rem 1rem;
}

.space-events-pagination__item--current span {
	font-weight: 700;
	text-decoration: underline;
}

@media (forced-colors: active) {
	.space-events-card,
	.space-events-badge,
	.space-events-button {
		border: 1px solid CanvasText;
	}
}

/* ------------------------------------------------------------------ */
/* Event detail pages and edition comparison                           */
/* ------------------------------------------------------------------ */

.space-events-detail {
	container-type: inline-size;
}

.space-events-detail__acronym {
	color: var(--space-events-muted);
	font-weight: 600;
	margin-top: 0;
}

.space-events-detail__status {
	border-radius: 4px;
	font-weight: 700;
	padding: 0.5rem 0.75rem;
}

.space-events-detail__status.is-critical {
	background: #fbeaea;
	color: #8a2424;
}

.space-events-detail__status.is-warning {
	background: #fff8e1;
	color: #3c2a00;
}

.space-events-detail__status.is-notice {
	background: #eef4fb;
	color: #1d3557;
}

.space-events-detail__facts,
.space-events-detail__terms {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: max-content minmax(0, 1fr);
}

@container (max-width: 30rem) {
	.space-events-detail__facts,
	.space-events-detail__terms {
		grid-template-columns: minmax(0, 1fr);
	}
}

.space-events-detail__facts dt,
.space-events-detail__terms dt {
	font-weight: 600;
}

.space-events-detail__facts dd,
.space-events-detail__terms dd {
	margin: 0;
}

/* A summary written with formatting: headings stay modest under the title. */
.space-events-detail__summary :is(h2, h3, h4) {
	margin: 1em 0 0.4em;
	line-height: 1.3;
}

.space-events-detail__summary h2 { font-size: 1.25rem; }
.space-events-detail__summary h3 { font-size: 1.1rem; }
.space-events-detail__summary h4 { font-size: 1rem; }

.space-events-detail__summary :is(ul, ol) {
	margin: 0 0 1em;
	padding-inline-start: 1.5em;
}

.space-events-detail__note,
.space-events-detail__freshness {
	color: var(--space-events-muted);
	font-size: 0.9rem;
}

.space-events-detail__actions a,
.space-events-detail__submit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
}

.space-events-detail__form label {
	display: block;
	font-weight: 600;
	margin-top: 0.75rem;
}

.space-events-detail__form input,
.space-events-detail__form textarea {
	width: 100%;
	min-height: 44px;
}

/*
 * The comparison table is the one element allowed to scroll sideways. It is
 * a focusable region with an accessible name so a keyboard user can reach the
 * scroll, and the page body still never scrolls horizontally.
 */
/* Positioned, so the visually hidden text inside a scrolling table is
 * contained by the scroller rather than widening the whole page. */
.space-events-compare,
.space-events-table__scroller {
	overflow-x: auto;
	position: relative;
}

.space-events-compare__table {
	border-collapse: collapse;
	min-width: 32rem;
	width: 100%;
}

.space-events-compare__table th,
.space-events-compare__table td {
	border: 1px solid #c3c4c7;
	padding: 0.5rem 0.75rem;
	text-align: start;
	vertical-align: top;
}

.space-events-compare__table caption {
	caption-side: bottom;
	color: var(--space-events-muted);
	font-size: 0.85rem;
	padding-top: 0.5rem;
	text-align: start;
}

/* Difference is carried by a visible mark, not by colour alone: a heavy
 * leading rule and bold text. It used to be an arrowhead glyph in front of the value,
 * which made every differing cell read as an item in a bulleted list; the
 * comparison is a table of values and nothing in it is a list. */
.space-events-compare__table td.is-different {
	background: #fff8e1;
	box-shadow: inset 4px 0 0 #b26200;
	font-weight: 600;
}

.space-events-compare__table,
.space-events-compare__table ul,
.space-events-compare__table ol,
.space-events-compare__table li {
	list-style: none;
}

.space-events-compare__table li::marker {
	content: "";
}

@media (forced-colors: active) {
	.space-events-compare__table td.is-different {
		border: 2px solid CanvasText;
	}
}

/*
 * Front-end form fields.
 *
 * The same rule as the workspace: a field shows what is in it, and fills the
 * width it is given. A correction form whose text area is four rows tall and
 * scrolls internally hides the reader's own words back from them while they
 * are still writing, which is the worst moment to do it.
 */
.space-events-detail__form input,
.space-events-detail__form select,
.space-events-detail__form textarea,
.space-events input[type="text"],
.space-events input[type="search"],
.space-events input[type="url"],
.space-events input[type="email"],
.space-events input[type="tel"],
.space-events input[type="password"],
.space-events input[type="number"],
.space-events input:not([type]),
.space-events textarea,
.space-events-input,
.space-events-select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Every text area in the plugin, not only the correction form's, grows to
 * show what it holds. */
.space-events-detail__form textarea,
.space-events textarea {
	overflow-x: auto;
	overflow-y: hidden;
	resize: vertical;
}

@supports (field-sizing: content) {
	/* Not date and time fields: their "content" is the browser's own
	 * day/month/year editor plus its calendar button, which WebKit sizes
	 * wider than a filter column. With `min-width: 100%` beside it, From and
	 * To were at least as wide as the column and at most as wide as that
	 * editor — past the right-hand border on an iPad. */
	.space-events-detail__form input:not([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
	.space-events-input:not([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
		field-sizing: content;
		min-width: 100%;
	}

	.space-events-detail__form textarea,
	.space-events textarea {
		field-sizing: content;
	}
}

/* ---------------------------------------------------------------- */
/* Add-to-calendar menu                                              */
/* ---------------------------------------------------------------- */

/*
 * A disclosure rather than a scripted menu, so every calendar destination is
 * reachable with this plugin's JavaScript switched off.
 */
.space-events-calendar-menu {
	display: inline-block;
	position: relative;
}

.space-events-calendar-menu > summary {
	cursor: pointer;
	list-style: none;
}

.space-events-calendar-menu > summary::-webkit-details-marker {
	display: none;
}

/*
 * The open menu floats: its list and note are one panel positioned against
 * the button, outside the flow of the action row. Nothing in the row moves or
 * changes size when it opens or closes.
 */
.space-events-calendar-menu__panel {
	background: var(--space-events-menu-background, Canvas);
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	color: var(--space-events-menu-text, CanvasText);
	left: 0;
	margin-left: var(--space-events-menu-shift, 0px);
	/*
	 * Never wider than the space it has. `min-width: 16rem` made the open menu
	 * stick out past the right-hand edge of a 390px screen, so the last thing
	 * in it — the .ics download, the one option for Apple Calendar — sat where
	 * nobody could reach it.
	 */
	max-width: calc(100vw - 1rem);
	padding: 0.25rem 0.25rem 0.6rem;
	position: absolute;
	top: calc(100% + 0.25rem);
	width: min(20rem, calc(100vw - 1rem));
	/* Above the cards that follow it and the sticky Apply bar. */
	z-index: 30;
}

.space-events-calendar-menu.is-end .space-events-calendar-menu__panel {
	left: auto;
	right: 0;
}

.space-events-calendar-menu.is-up .space-events-calendar-menu__panel {
	bottom: calc(100% + 0.25rem);
	top: auto;
}

.space-events--theme-dark .space-events-calendar-menu__panel,
.space-events--theme-light .space-events-calendar-menu__panel {
	--space-events-menu-background: var(--space-events-background);
	--space-events-menu-text: var(--space-events-text);
}

.space-events-calendar-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-calendar-menu__note {
	padding: 0 0.75rem;
}

.space-events-calendar-menu__list > li {
	margin: 0;
}

.space-events-calendar-menu__link {
	box-sizing: border-box;
	display: block;
	/* Sized like the button that opened it, not like an article paragraph. */
	font-size: 0.9rem;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	text-decoration: none;
}

.space-events-calendar-menu__link:hover,
.space-events-calendar-menu__link:focus-visible {
	background: var(--space-events-surface);
}

/* In a narrow container the menu has nowhere to overhang, so it spans the card
 * instead of being clipped by its edge. It stays positioned rather than going
 * back into the flow, because the actions row it belongs to is a single line
 * and an in-flow panel would stretch that line sideways. */

/* ---------------------------------------------------------------- */
/* Saved events and comparison                                      */
/* ---------------------------------------------------------------- */

.space-events-action.is-saved {
	border-color: var(--space-events-accent);
	font-weight: 600;
}

/* The button carries both labels and shows the one that matches its state, so
 * the change needs no script to write text into the page. */
/*
 * One label at a time, chosen by the state the button is actually in. The
 * button used to show "Saved" for a write that had been attempted, a write
 * that had been refused, and a write still in flight alike.
 */
.space-events-action [data-se-label] { display: none; }
.space-events-action [data-se-label="idle"] { display: inline; }
.space-events-action.is-saved [data-se-label="idle"] { display: none; }
.space-events-action.is-saved [data-se-label="saved"] { display: inline; }
.space-events-action.is-pending [data-se-label] { display: none; }
.space-events-action.is-pending [data-se-label="pending"] { display: inline; }
.space-events-action.is-failed [data-se-label] { display: none; }
.space-events-action.is-failed [data-se-label="failed"] { display: inline; }

.space-events-action.is-failed {
	border-color: var(--space-events-error, #a4111d);
	color: var(--space-events-error, #a4111d);
}

.space-events-action.is-pending {
	opacity: 0.85;
}

/*
 * The `hidden` attribute hides, whatever the element's own display is.
 *
 * The browser's own `[hidden] { display: none }` loses to any class that sets
 * a display. `.space-events-results__item` is `flex` and
 * `.space-events-button` is `inline-flex`. So after "Remove all saved events"
 * the script hid every card and the Remove button, and every one of them
 * stayed on the screen under the Undo button.
 *
 * The id inside `:not()` matches every element and only raises the rule's
 * specificity above any class-based display in this file. An important
 * flag would do the same and stop a theme from overriding it.
 */
.space-events [hidden]:not(#space-events-hidden-guard) {
	display: none;
}

.space-events-saved__header {
	margin-bottom: var(--space-events-gap);
}

.space-events-saved__clear[aria-busy="true"],
.space-events-saved__undo button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

.space-events-saved__heading {
	margin: 0 0 0.25rem;
}

.space-events-saved__note {
	color: var(--space-events-muted);
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.space-events-saved__message {
	margin: 0 0 0.5rem;
}

.space-events-saved__message:empty {
	/* Kept in the page rather than hidden, so a screen reader announces
	 * the first message written into it. */
	margin: 0;
}

.space-events-views__count {
	color: var(--space-events-muted);
}

.space-events-saved__heading:focus {
	outline: none;
}

.space-events-saved__heading:focus-visible {
	outline: 2px solid var(--space-events-accent);
	outline-offset: 2px;
}

/* Loading, nothing saved, storage switched off, or a failure: one line, and
 * the one action that fits it. */
.space-events-saved__status {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.space-events-saved--empty[aria-busy="true"] .space-events-saved__status::before {
	animation: space-events-spin 0.9s linear infinite;
	border: 2px solid var(--space-events-border);
	border-radius: 50%;
	border-top-color: var(--space-events-accent);
	content: "";
	display: inline-block;
	height: 0.9em;
	margin-right: 0.5em;
	vertical-align: -0.1em;
	width: 0.9em;
}

@keyframes space-events-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.space-events-saved--empty[aria-busy="true"] .space-events-saved__status::before {
		animation: none;
	}
}

.space-events-saved__next,
.space-events-saved__none p {
	margin: 0 0 0.75rem;
}

.space-events-saved__unavailable {
	color: var(--space-events-muted);
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

.space-events-compare-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ---------------------------------------------------------------- */
/* Submission form                                                   */
/* ---------------------------------------------------------------- */

/* The form takes the full width it is given, so its text fields do: a
 * narrow column hid most of a long web address or description behind the
 * field's own edge. */
.space-events-submit__form {
	display: grid;
	gap: var(--space-events-gap);
	max-width: none;
}

.space-events-submit__group {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	padding: 0.75rem 1rem 1rem;
}

.space-events-submit__group > legend {
	font-weight: 600;
	padding-inline: 0.35rem;
}

.space-events-submit__hint,
.space-events-submit__note {
	color: var(--space-events-muted);
	font-size: 0.9rem;
}

.space-events-field__required {
	color: var(--space-events-muted);
	font-weight: 400;
}

/* A required marker the script has withdrawn, because the field it belongs to
 * is only required while the event has a physical venue. */
.space-events-field__required[hidden] {
	display: none;
}

/*
 * The way through to the queue, offered above the form and again below it, so
 * a reviewer who has read the whole page does not scroll back to act on it.
 */
.space-events-submit__queue {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-events-gap) 0;
}

.space-events-submit__switch {
	color: var(--space-events-muted);
	margin: 0 0 var(--space-events-gap);
}

/*
 * A refused field is marked by its border, its label and a message. Colour
 * alone would leave the reason invisible to a reader who cannot distinguish
 * the border from the others.
 */
.space-events-field--invalid > label {
	font-weight: 600;
}

.space-events-field--invalid .space-events-input,
.space-events-field--invalid .space-events-select {
	border-color: #a3161b;
	border-width: 2px;
}

.space-events-field__error {
	color: #a3161b;
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- */
/* Banner positions                                                  */
/* ---------------------------------------------------------------- */

.space-events-banners {
	display: grid;
	gap: 0.5rem;
	margin-bottom: var(--space-events-gap);
}

.space-events-banner-slot {
	display: grid;
	gap: 0.25rem;
}

/*
 * Labelled as an advertisement, quietly but never invisibly. A paid placement
 * that reads as editorial content is a lie about who is speaking.
 */
.space-events-banner-slot__label {
	color: var(--space-events-muted);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

/*
 * The track is the stage the banners change on. Its height comes from the one
 * that is showing, so a slot does not reserve space for a banner that is not
 * there, and the images that are waiting are stacked on top of it rather than
 * adding to the page height.
 */
.space-events-banner-slot__track {
	display: grid;
	position: relative;
}

.space-events-banner {
	grid-area: 1 / 1;
}

.space-events-banner__image {
	display: block;
	height: auto;
	max-width: 100%;
	/* A wide banner in a narrow container scales down rather than making the
	 * page scroll sideways. */
	width: 100%;
}

.space-events-banner-slot__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.space-events-banner-slot__pause {
	background: transparent;
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	cursor: pointer;
	font-size: 0.8rem;
	min-height: 44px;
	padding: 0.25rem 0.6rem;
}

.space-events-banner-slot__pause [data-se-label="play"] { display: none; }
.space-events-banner-slot__pause[aria-pressed="true"] [data-se-label="pause"] { display: none; }
.space-events-banner-slot__pause[aria-pressed="true"] [data-se-label="play"] { display: inline; }

.space-events-banner-slot__position {
	color: var(--space-events-muted);
	font-size: 0.8rem;
}

/*
 * The transitions. Each is declared on the slot and applies to the banner
 * arriving, so the configuration chooses the effect without any of it being
 * written as inline style.
 */
.space-events-banner-slot--effect-fade .space-events-banner.is-current,
.space-events-banner-slot--effect-dissolve .space-events-banner.is-current {
	animation: space-events-banner-fade var(--space-events-banner-transition, 600ms) ease-in-out;
}

.space-events-banner-slot--effect-dissolve .space-events-banner.is-current {
	animation-timing-function: linear;
}

.space-events-banner-slot--effect-slide-left .space-events-banner.is-current {
	animation: space-events-banner-slide-left var(--space-events-banner-transition, 600ms) ease-out;
}

.space-events-banner-slot--effect-slide-right .space-events-banner.is-current {
	animation: space-events-banner-slide-right var(--space-events-banner-transition, 600ms) ease-out;
}

.space-events-banner-slot--effect-slide-up .space-events-banner.is-current {
	animation: space-events-banner-slide-up var(--space-events-banner-transition, 600ms) ease-out;
}

.space-events-banner-slot--effect-slide-down .space-events-banner.is-current {
	animation: space-events-banner-slide-down var(--space-events-banner-transition, 600ms) ease-out;
}

.space-events-banner-slot--effect-zoom .space-events-banner.is-current {
	animation: space-events-banner-zoom var(--space-events-banner-transition, 600ms) ease-out;
}

.space-events-banner-slot--effect-flip .space-events-banner.is-current {
	animation: space-events-banner-flip var(--space-events-banner-transition, 600ms) ease-in-out;
}

@keyframes space-events-banner-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes space-events-banner-slide-left {
	from { opacity: 0; transform: translateX(12%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes space-events-banner-slide-right {
	from { opacity: 0; transform: translateX(-12%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes space-events-banner-slide-up {
	from { opacity: 0; transform: translateY(20%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes space-events-banner-slide-down {
	from { opacity: 0; transform: translateY(-20%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes space-events-banner-zoom {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes space-events-banner-flip {
	from { opacity: 0; transform: rotateY(90deg); }
	to   { opacity: 1; transform: rotateY(0); }
}

/*
 * A reader who has asked their system for less motion gets the first banner
 * and no movement at all. An advertisement is not worth overriding a stated
 * accessibility preference for, so this cancels every effect above rather than
 * shortening it.
 */
@media (prefers-reduced-motion: reduce) {
	.space-events-banner.is-current {
		animation: none !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* The discovery workspace                                             */
/* ------------------------------------------------------------------ */

/*
 * Searching, narrowing and reading the results are one view. The controls sit
 * beside the results when the *embed* is wide enough for two columns, which is
 * a different question from whether the window is: a directory in a 320px
 * sidebar of a 1440px page has a phone's width to work with, and laying it out
 * from the viewport put a filter column and a results column into a space
 * narrower than either. Container queries ask the element itself.
 */
.space-events__workspace {
	container-name: space-events-workspace;
	container-type: inline-size;
	display: block;
}

.space-events__controls {
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	margin-bottom: 1rem;
	padding: 0.85rem 1rem 1rem;
}

.space-events__controls-heading {
	font-size: 1.05rem;
	margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------------ */
/* Hiding and restoring the filter column                               */
/* ------------------------------------------------------------------ */

.space-events__controls-top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 0 0 0.6rem;
}

.space-events__controls-top .space-events__controls-heading {
	margin: 0;
}

.space-events-card__filter {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.space-events-card__filter:hover,
.space-events-card__filter:focus-visible {
	color: var(--space-events-accent);
	text-decoration-thickness: 2px;
}

.space-events__controls-heading:focus {
	outline: none;
}

/* "Hide" and "Expand"/"Shrink", side by side at the right of the heading. */
.space-events__controls-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-left: auto;
}

.space-events .space-events-filters-toggle {
	align-items: center;
	border-radius: var(--space-events-radius);
	display: inline-flex;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	min-width: 5.5rem;
	padding: 0.4rem 0.8rem;
}

/*
 * "Hide", "Expand" and "Shrink" are drawn in light yellow with dark text, in
 * every scheme, so they read as the controls that change the layout rather
 * than as more outlined links. Two classes plus this one outrank the quiet-button colours
 * of the chosen schemes (declared earlier at the same weight) and a theme's
 * `button` and `button:hover` rules; nothing outside the directory is touched.
 * #1d2327 on #fff4b8 is 14.3:1; on hover #ffec8f, 13.4:1; pressed #ffdf6b, 12.1:1.
 */
.space-events.space-events .space-events-filters-toggle {
	background: #fff4b8;
	border: 1px solid #8a6d00;
	color: #1d2327;
	text-shadow: none;
}

.space-events.space-events .space-events-filters-toggle:hover {
	background: #ffec8f;
	border-color: #6b5400;
	color: #1d2327;
}

.space-events.space-events .space-events-filters-toggle:active {
	background: #ffdf6b;
	border-color: #5c4800;
	box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.2);
	color: #1d2327;
}

/* The ring sits outside the button, on the page, so it takes the scheme's
 * accent like every other focus ring here; the dark inner edge keeps the
 * focused state visible against the yellow itself. */
.space-events.space-events .space-events-filters-toggle:focus-visible {
	box-shadow: inset 0 0 0 2px #1d2327;
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.space-events.space-events .space-events-filters-toggle {
		border: 2px solid ButtonText;
		forced-color-adjust: auto;
	}
}

.space-events .space-events-filters-toggle[hidden],
button.space-events-filters-tab[hidden] {
	display: none;
}

/* The column slides out to the left before it is taken out of the layout. */
.space-events__controls {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.space-events__workspace.is-filters-leaving .space-events__controls {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-110%);
}

.space-events__workspace.is-filters-entering .space-events__controls {
	animation: space-events-filters-in 0.22s ease;
}

@keyframes space-events-filters-in {
	from { opacity: 0; transform: translateX(-110%); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Nothing slides sideways past the page while it moves. */
.space-events__workspace:is(.is-filters-leaving, .is-filters-entering) {
	overflow-x: clip;
}

/*
 * "Show filters": a tab on the left edge of the window, available wherever
 * the reader has scrolled to within the directory, and only while the
 * directory is on screen. Mid-height, clear of a site header at the top and
 * of the advertising and help bubbles themes put in the corners.
 *
 * The script moves it to the end of the body: the directory is a size
 * container, and a container is the containing block of anything fixed inside
 * it, so left there the tab would have been fixed to the directory, not to the
 * window. Its colour comes with it as an inline custom property.
 */
button.space-events-filters-tab {
	align-items: center;
	background: var(--space-events-accent, #1f5f9b);
	border: 2px solid #fff;
	border-left: 0;
	border-radius: 0 var(--space-events-radius) var(--space-events-radius) 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	gap: 0.4rem;
	left: 0;
	min-height: 44px;
	min-width: 44px;
	padding: 0.9rem 0.55rem;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
}

.space-events-filters-tab__label {
	transform: rotate(180deg);
	white-space: nowrap;
	writing-mode: vertical-rl;
}

.space-events-filters-tab__count {
	background: #fff;
	border-radius: 999px;
	color: var(--space-events-accent, #1f5f9b);
	font-size: 0.8rem;
	line-height: 1;
	min-width: 1.4em;
	padding: 0.2em 0.35em;
	text-align: center;
}

button.space-events-filters-tab:hover {
	filter: brightness(1.1);
}

button.space-events-filters-tab:focus-visible {
	outline: 3px solid var(--space-events-accent, #1f5f9b);
	outline-offset: 3px;
}

button.space-events-filters-tab.is-offscreen {
	visibility: hidden;
}

@media (forced-colors: active) {
	button.space-events-filters-tab {
		border: 2px solid ButtonText;
		forced-color-adjust: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.space-events__controls {
		transition: none;
	}

	.space-events__workspace.is-filters-entering .space-events__controls {
		animation: none;
	}
}

/*
 * The filters sit beside the results whenever the directory has room for both
 * columns — on a desktop, and on an iPad held either way, which therefore gets
 * the desktop arrangement rather than a phone's. The width asked about is the
 * directory's own, not the device's or the window's.
 *
 * This used to be written as a query on `.space-events__workspace` from inside
 * that element's own container, and a container query cannot style its own
 * container: the grid never applied, while the sticky, height-capped panel
 * below did. On a wide screen the filters stuck to the top of the window with
 * the results scrolling over them and over their Apply button. Asked of the
 * directory's root container, both halves apply together.
 */
@container space-events (min-width: 42rem) {
	.space-events__workspace {
		align-items: start;
		display: grid;
		gap: 1.5rem;
		grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
	}

	/*
	 * The column is as tall as its filters. It used to be capped at the
	 * window's height, sticky, and scrolled inside itself: a second scrolling
	 * region beside the page's, with the lower groups — Attendance mode,
	 * Country and every further group — below its fold where the
	 * page's own scrolling never reached them. The page scrolls it now, like
	 * everything else, and the grid grows to whichever column is taller.
	 */
	.space-events__controls {
		box-sizing: border-box;
		margin-bottom: 0;
		min-width: 0;
	}

	.space-events__workspace.is-filters-hidden,
	.space-events__workspace--saved {
		grid-template-columns: minmax(0, 1fr);
	}

	/* In the filter column there is room for one box across. */
	.space-events__controls .space-events-filters__matrix {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Expanded: the panel takes the directory's whole width, above the
	 * results in the normal flow, and its groups go back to the matrix they
	 * use outside the column — as many 13rem tracks as fit, fewer as the
	 * directory narrows. The panel grows to its contents; nothing in it
	 * scrolls on its own, so every group stays reachable.
	 */
	.space-events__workspace.is-filters-expanded {
		grid-template-columns: minmax(0, 1fr);
	}

	.space-events__workspace.is-filters-expanded .space-events__controls .space-events-filters__matrix {
		grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	}

	/* The search and date rows spread out too, without outgrowing a track. */
	.space-events__workspace.is-filters-expanded .space-events__controls .space-events-filters__search-row .space-events-input {
		flex-basis: 16rem;
	}
}

/*
 * Where the directory is too narrow for a filter column there is no sidebar
 * to widen: the panel is already full width with its groups reflowed, so
 * "Expand" would do nothing and is not offered.
 */
@container space-events (max-width: 41.99rem) {
	.space-events .space-events-filters-expand {
		display: none;
	}
}

/* Browsers without container queries get the single column, which is the
 * layout that works everywhere rather than a degraded version of one. */

.space-events__main:focus {
	outline: none;
}

.space-events-filters__search {
	display: block;
	margin: 0 0 0.75rem;
}

.space-events-filters__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.space-events-filters__search-row .space-events-input {
	field-sizing: fixed;
	flex: 1 1 10rem;
	min-width: 0;
}

.space-events-filters__search-row .space-events-button {
	flex: 0 0 auto;
	max-width: 100%;
}

/*
 * A one-line field in the filter column keeps the column's width, whatever it
 * holds.
 *
 * The front-end field rule grows a field to its contents. That suits a
 * correction form, but in the 19rem filter column it did the opposite of what
 * a filter should: searching for "NASA Marshall Space Flight Center (MSFC)"
 * made the search box as wide as the organizer's name, the column's content
 * followed it, and the Search button, From and To and every filter group
 * crossed the sidebar's right-hand border and ran under the results. A long
 * query scrolls inside its box here, as it does in every search box.
 */
.space-events.space-events .space-events__controls :is(input, select) {
	field-sizing: fixed;
}

.space-events.space-events .space-events__controls :is(.space-events-input, .space-events-select) {
	min-width: 0;
	width: 100%;
}

.space-events.space-events .space-events-filters__search-row .space-events-input {
	width: auto;
}

.space-events__controls,
.space-events__controls .space-events-filters__search,
.space-events__controls .space-events-filters__search-row {
	max-width: 100%;
	min-width: 0;
}

.space-events-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.space-events-filters__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

/*
 * From and To sit side by side only when both fit at a usable width, and
 * stack otherwise. As two flex items in a 19rem column they overlapped: a
 * date input will not shrink below the width its own controls need.
 */
.space-events-filters__range {
	display: grid;
	flex: 1 1 100%;
	gap: 0.5rem 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	min-width: 0;
}

.space-events-filters__range .space-events-field__error {
	grid-column: 1 / -1;
}

.space-events-field--date {
	display: block;
	min-width: 0;
}

/*
 * Every control stays inside its panel. With the theme's content-box sizing a
 * `width: 100%` field was its panel's width plus its own padding and border,
 * so the Event type and Topic "Find" boxes ran past the right-hand edge.
 */
.space-events__controls,
.space-events__controls :is(input, select, textarea, button, .space-events-facet, .space-events-facet__box, .space-events-filters__panel) {
	box-sizing: border-box;
}

.space-events__controls :is(.space-events-input, .space-events-select) {
	max-width: 100%;
	min-width: 0;
}

.space-events__controls input[type="date"] {
	width: 100%;
}

/*
 * From and To fill their column and no more, on every engine.
 *
 * A native date field has a minimum width of its own — the day, month and
 * year segments and the calendar button — and on iPad (Safari, and Chrome,
 * which uses the same engine there) that minimum was wider than the filter
 * column: the fields crossed the sidebar's right-hand border. `width: 100%`
 * and `min-width: 0` on the field were not enough, because WebKit's field
 * keeps its intrinsic size unless its own appearance is switched off, and
 * the content-sizing rule further down asked it to grow to that size.
 *
 * So the field is a block at the column's width, sized from the column and
 * not from its content, with padding and border inside that width; the
 * segments inside it may shrink. Two classes plus the element outrank a
 * theme's `input[type="date"]` rule.
 */
.space-events.space-events input[type="date"] {
	box-sizing: border-box;
	display: block;
	field-sizing: fixed;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.space-events.space-events input[type="date"]::-webkit-date-and-time-value {
	min-width: 0;
	text-align: start;
}

.space-events.space-events input[type="date"]::-webkit-datetime-edit {
	min-width: 0;
}

/*
 * Touch WebKit only (iPad and iPhone: `-webkit-touch-callout` is supported
 * nowhere else). Its native appearance is what holds the field at its
 * intrinsic width and paints it as a grey pill unlike every other field here.
 * Without it the field takes the width and border it is given; tapping it
 * still opens the system date picker, which is not part of the appearance.
 * Desktop browsers keep their own field and calendar button.
 */
@supports (-webkit-touch-callout: none) {
	.space-events.space-events input[type="date"] {
		-webkit-appearance: none;
		appearance: none;
		background-color: var(--space-events-field-background, transparent);
		color: inherit;
		line-height: 1.5;
		min-height: 44px;
	}
}

.space-events-filters__dates > * {
	min-width: 0;
}

.space-events-field__error {
	color: var(--space-events-error, #a4111d);
	flex-basis: 100%;
	font-size: 0.9rem;
	margin: 0.25rem 0 0;
}

.space-events-field--switch {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
}

/* Both switches line up: the box at the same offset, the label taking the
   rest of the row and wrapping within it. Nothing is reserved beside them. */
.space-events-field--switch input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
}

.space-events-field--switch label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.space-events-filters__inclusions-heading {
	font-weight: 600;
	margin: 0 0 0.4rem;
}

/* Apply stays within reach however many groups there are: it sticks to the
 * foot of the form while the groups scroll past. The button stands on its
 * own — no tinted bar or rule behind it — and only the button itself takes
 * clicks, so the filters showing around it stay usable. */
.space-events-filters__actions {
	background: none;
	border: 0;
	bottom: 0;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0;
	position: sticky;
	z-index: 2;
}

.space-events-filters__actions > * {
	pointer-events: auto;
}

/* A control brought into view — by Tab, by Voice Control, by a script — stops
 * above the sticky Apply bar instead of underneath it. */
.space-events-filters__form :is(input, select, textarea, .space-events-scrollbar, .space-events-facet__heading) {
	scroll-margin-bottom: 4.5rem;
}

/* The further groups follow the first ones with the form's own spacing, as
 * every row of the form does: no heading and no rule between them. The
 * switches after them keep the same distance. */
.space-events-filters__advanced {
	display: grid;
	gap: var(--space-events-gap);
}

/* The toolbar: how many, in what order, in which view. */
.space-events-toolbar {
	align-items: baseline;
	border-bottom: 1px solid var(--space-events-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin-bottom: 0.85rem;
	padding-bottom: 0.5rem;
}

.space-events-toolbar__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.space-events-toolbar .space-events-count {
	margin: 0;
}

/*
 * The Space Events navigation's entries: links (each goes somewhere), drawn
 * as outlined buttons in the accent colour.
 */
.space-events :is(a, button).space-events-quick__link {
	align-items: center;
	background: transparent;
	border: 1px solid var(--space-events-accent);
	border-radius: var(--space-events-radius);
	box-sizing: border-box;
	color: var(--space-events-accent);
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 600;
	/* The count is a flex item, which drops its leading space: "Saved events(2)". */
	gap: 0.3em;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-height: 44px;
	min-width: 44px;
	padding: 0.45rem 0.9rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: normal;
}

/* What a theme gives every <button> and a link never has. */
.space-events button.space-events-quick__link {
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	margin: 0;
	text-transform: none;
}

.space-events :is(a, button).space-events-quick__link:hover {
	background: color-mix(in srgb, var(--space-events-accent) 10%, transparent);
	text-decoration: none;
}

.space-events :is(a, button).space-events-quick__link:active {
	background: color-mix(in srgb, var(--space-events-accent) 20%, transparent);
}

.space-events :is(a, button).space-events-quick__link:focus-visible {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

/* The section being shown (Statistics): filled, like a current tab, and
 * named as current to assistive technology by aria-current. */
/* The section being shown: filled, heavier, and underlined — not told by
 * colour alone — and named as current to assistive technology by
 * aria-current ("page" for the section itself, "true" for a page inside
 * it, such as an event under Browse events). */
.space-events :is(a, button).space-events-quick__link[aria-current] {
	background: var(--space-events-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.space-events :is(a, button).space-events-quick__link .space-events-tabs__count {
	color: inherit;
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.space-events :is(a, button).space-events-quick__link {
		transition: none;
	}
}

.space-events.space-events--theme-dark :is(a, button).space-events-quick__link {
	border-color: currentColor;
	color: inherit;
}

.space-events__preferences {
	border-top: 1px solid var(--space-events-border);
	margin-top: 1rem;
	padding-top: 0.5rem;
}

.space-events__preferences-summary {
	box-sizing: border-box;
	cursor: pointer;
	display: list-item;
	font-weight: 600;
	min-height: 44px;
	padding: 0.6rem 0;
}

.space-events-empty__action {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.space-events-diagnostics__counts {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: auto auto;
	justify-content: start;
	margin: 0.5rem 0 0;
}

.space-events-diagnostics__counts dd {
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/*
 * Typography for the controls, scoped to the plugin.
 *
 * A newspaper theme sizes headings and form labels for articles, and the
 * directory's own controls inherited that: "Search events" came out larger
 * than the heading above it, and "From" and "To" beside a date field read as
 * section titles. These are labels on controls, so they are sized like labels
 * on controls — and only inside the directory, so nothing else on the page
 * changes.
 */
.space-events__controls-heading {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.space-events .space-events-field__label,
.space-events .space-events-field > label {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.25rem;
}

.space-events-filters__dates {
	align-items: end;
}

.space-events-field--period,
.space-events-field--date {
	margin: 0;
}

.space-events__preferences-summary {
	font-size: 0.95rem;
}

.space-events-toolbar .space-events-count {
	font-size: 1rem;
	font-weight: 600;
}

.space-events-sort {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.space-events-sort label {
	font-size: 0.95rem;
	font-weight: 600;
}

/* Full width pushed the Sort button onto a line of its own, away from the
 * choice it applies. */
.space-events-sort .space-events-select {
	width: auto;
}

.space-events-sort .space-events-button {
	font-size: 0.95rem;
}

/* The Viewing mode dropdown: label, choice and (without script, or after
 * a keyboard choice) the Show button, on one line that wraps rather than
 * overflowing a narrow screen. */
.space-events-viewmode {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	max-width: 100%;
}

.space-events-viewmode__label {
	font-weight: 600;
}

.space-events-viewmode .space-events-select {
	max-width: 100%;
	min-height: 44px;
	width: auto;
}

.space-events-viewmode .space-events-button {
	font-size: 0.95rem;
}

.space-events-viewmode [hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Directory tools row                                                  */
/* ------------------------------------------------------------------ */

/*
 * In the page flow, not fixed: a floating bar covers content, collides with
 * advertising overlays and sits outside the keyboard order it appears in.
 * The same block heads every Space Events page: the navigation, the way back
 * to the results, then — on lists of events — the display preferences.
 */
.space-events-quick,
.space-events-shell {
	display: grid;
	gap: 0.75rem;
	margin-bottom: var(--space-events-gap);
	min-width: 0;
}

/*
 * Space Events navigation. Two deliberate rows: what a reader does with
 * events, then the pages about the directory. Without the script both rows
 * show and may wrap; with it, each row stays on one line. When a row would
 * not fit, the first three entries take their short labels (is-short, a
 * tablet); when it still would not, the navigation turns compact
 * (is-compact, a phone): Browse, Saved and Compare in view, everything else
 * under "More".
 */
.space-events-appnav {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
	position: relative;
}

.space-events-appnav__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-appnav.is-enhanced:not(.is-compact) .space-events-appnav__row {
	flex-wrap: nowrap;
}

.space-events-appnav__item {
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

.space-events-appnav.is-enhanced:not(.is-compact) .space-events-appnav__item {
	flex: 0 0 auto;
}

.space-events-appnav__more {
	margin: 0;
	min-width: 0;
}

/* Wide: the second row is simply there; "More" is not a control. */
.space-events-appnav:not(.is-compact) .space-events-appnav__more-toggle {
	display: none;
}

.space-events-appnav.is-compact {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
}

.space-events-appnav.is-compact .space-events-appnav__row--primary {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	min-width: 0;
}

.space-events-appnav.is-compact .space-events-appnav__row--primary > .space-events-appnav__item {
	flex: 1 1 0;
}

.space-events .space-events-appnav.is-compact .space-events-appnav__link {
	padding-inline: 0.45rem;
	width: 100%;
}

/* "Browse", "Saved", "Compare": the short labels a tablet or phone has room for. */
.space-events-appnav:is(.is-short, .is-compact) .space-events-appnav__extra {
	display: none;
}

.space-events-appnav.is-compact .space-events-appnav__more {
	flex: 0 0 auto;
}

.space-events-appnav__more-toggle {
	align-items: center;
	border: 1px solid var(--space-events-accent);
	border-radius: var(--space-events-radius);
	box-sizing: border-box;
	color: var(--space-events-accent);
	cursor: pointer;
	display: flex;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 0.35em;
	list-style: none;
	min-height: 44px;
	min-width: 44px;
	padding: 0.45rem 0.75rem;
	user-select: none;
}

.space-events-appnav__more-toggle::-webkit-details-marker {
	display: none;
}

.space-events-appnav__more-toggle::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 0.4em;
	margin-top: -0.2em;
	transform: rotate(45deg);
	width: 0.4em;
}

.space-events-appnav__more[open] > .space-events-appnav__more-toggle::after {
	margin-top: 0.2em;
	transform: rotate(-135deg);
}

.space-events-appnav__more-toggle:focus-visible {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

/* The open menu: under the navigation, inside its width, above the page. */
.space-events.space-events--theme-light .space-events-appnav.is-compact .space-events-appnav__row--secondary,
.space-events.space-events--theme-dark .space-events-appnav.is-compact .space-events-appnav__row--secondary {
	background: var(--space-events-background);
}

.space-events-appnav.is-compact .space-events-appnav__row--secondary {
	/* Opaque whatever the theme: the automatic palette's background is
	 * transparent, and a menu over the page must not let it show through. */
	background: Canvas;
	color: CanvasText;
	border: 1px solid var(--space-events-border);
	border-radius: var(--space-events-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	flex-direction: column;
	flex-wrap: nowrap;
	left: 0;
	padding: 0.5rem;
	position: absolute;
	right: 0;
	top: calc(100% + 0.25rem);
	z-index: 30;
}

.space-events .space-events-appnav.is-compact .space-events-appnav__row--secondary .space-events-appnav__link {
	justify-content: flex-start;
	width: 100%;
}

/* "← Back to results" / "← Browse all events" / "← Back to the blog": one, under the navigation. */
.space-events-return {
	margin: 0;
}

.space-events-return--end {
	margin-top: 1.5rem;
}

.space-events .space-events-return__link {
	align-items: center;
	color: var(--space-events-accent);
	display: inline-flex;
	font-weight: 600;
	min-height: 44px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.space-events .space-events-return__link:focus-visible {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 2px;
}

.space-events-saved__prune {
	margin-left: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Calendar: month controls, empty months, day lists, date warnings     */
/* ------------------------------------------------------------------ */

.space-events-calendar__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.space-events-calendar__picker {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.space-events-calendar__picker .space-events-select {
	width: auto;
}

.space-events-calendar__opening,
.space-events-agenda__back {
	color: var(--space-events-muted);
	font-size: 0.9rem;
}

.space-events-calendar__empty {
	background: var(--space-events-surface);
	border-radius: var(--space-events-radius);
	margin: var(--space-events-gap) 0;
	padding: 0.75rem 1rem;
}

.space-events-calendar__warning {
	color: var(--space-events-warning);
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
}

.space-events-agenda__list .space-events-calendar__warning {
	display: inline;
}

.space-events-agenda__day {
	scroll-margin-top: 4rem;
}

.space-events-agenda__day:target,
.space-events-agenda__day:focus {
	outline: 3px solid var(--space-events-accent);
	outline-offset: 4px;
}

.space-events-calendar__day[id] {
	scroll-margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* Comparison, facets, calendar menu, pending input                     */
/* ------------------------------------------------------------------ */

.space-events-compare__remove {
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	margin-top: 0.25rem;
}

.space-events-facet__item--empty label {
	font-style: italic;
}

.space-events-calendar-menu__note {
	color: var(--space-events-muted);
	font-size: 0.8rem;
	margin: 0.5rem 0 0;
	max-width: 22rem;
}

.space-events-pending {
	border-left: 4px solid var(--space-events-warning);
}


/* ------------------------------------------------------------------ */
/* Promotion                                                           */
/* ------------------------------------------------------------------ */

/* An event's Promote button sits with its other actions and looks like
 * them; in a table it follows the event's name without widening the row. */
.space-events-table__promote {
	font-size: 0.85rem;
	margin-inline-start: 0.35rem;
	white-space: nowrap;
}

.space-events-compare__promote {
	display: inline-block;
	font-size: 0.85rem;
	margin-inline-start: 0.5rem;
}

.space-events-featured {
	border: 1px solid var(--space-events-border);
	border-radius: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.space-events-featured__heading {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

/* A paid banner is drawn at 6:1 at every width: scaled to fit, never
 * stretched, never cropped. */
.space-events-banner--paid .space-events-banner__image--paid {
	aspect-ratio: 6 / 1;
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

.space-events-promote__offer {
	border-top: 1px solid var(--space-events-border);
	padding-top: 0.75rem;
}

.space-events-promote__offer:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.space-events-promote__schedule[hidden] {
	display: none;
}

.space-events-promote__choices {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}

.space-events-promote__choice {
	align-items: center;
	border-bottom: 1px solid var(--space-events-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding: 0.5rem 0;
}

.space-events-promote__choice-title {
	flex: 1 1 14rem;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.space-events-promote__choice-meta {
	color: var(--space-events-muted);
	flex: 1 1 12rem;
}

.space-events-promote__summary {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
}

.space-events-promote__summary dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.space-events-promote__review-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.space-events-promote__total th,
.space-events-promote__total td {
	font-weight: 700;
}

/* Pressed with fields still missing: the button turns red, and what is
   missing is listed above it. The same red in both themes, with white
   text, so the contrast holds either way. */
.space-events .space-events-button.space-events-button--attention {
	background: #b3261e;
	border-color: #8c1d18;
	color: #fff;
}

.space-events-promote__missing {
	border: 2px solid #b3261e;
	border-radius: var(--space-events-radius);
	margin: 1rem 0 0.5rem;
	padding: 0.5rem 1rem;
}

.space-events-promote__missing[hidden] {
	display: none;
}

.space-events-promote__missing p {
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.space-events-promote__missing ul {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.space-events-promote__missing a {
	color: var(--space-events-error);
	overflow-wrap: anywhere;
}

/* The days the chosen dates cover, and their price. */
.space-events-promote__days {
	font-weight: 600;
	margin: 0.25rem 0 0.75rem;
}

.space-events-promote__days:empty {
	display: none;
}

.space-events-promote__days.is-short {
	color: var(--space-events-error);
}

.space-events-promote__availability {
	margin: 0.25rem 0 0.75rem;
	padding-inline-start: 1.25rem;
}

.space-events-promote__availability [data-se-slots-free="0"] {
	color: var(--space-events-error);
}

@media (max-width: 30rem) {
	.space-events-promote__summary {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* Event content licence (CC BY)                                       */
/* ------------------------------------------------------------------ */

.space-events-license {
	max-width: 68ch;
}

.space-events-license__attribution {
	border-inline-start: 4px solid var(--space-events-accent);
	margin: 0.75rem 0;
	padding: 0.25rem 1rem;
}

.space-events-license__copy {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.space-events-license__plain {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

.space-events-license__plain-label {
	display: block;
	font-weight: 600;
	margin-top: 0.5rem;
}

.space-events-license__button {
	font-size: 1.05rem;
	min-height: 44px;
	padding-inline: 1.25rem;
}

.space-events-license__notice {
	color: var(--space-events-muted);
	font-size: 0.95rem;
	margin-top: 0.5rem;
}

/*
 * Share icon. Hidden until the script is running (it adds
 * `space-events-share-ready` to the root element), so a page without script
 * never shows a control that does nothing. With script it always works: the
 * native share sheet where the browser has one, a copy-link panel where it
 * does not. An icon, not a button-styled control: the theme's button
 * styling is reset, and the 44px target keeps it easy to hit on a phone.
 */
.space-events.space-events .space-events-share {
	display: none;
}

html.space-events-share-ready .space-events.space-events .space-events-share,
html.space-events-can-share .space-events.space-events .space-events-share {
	display: inline-flex;
}

.space-events.space-events .space-events-share {
	position: relative;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--space-events-radius, 4px);
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
	text-transform: none;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
}

.space-events.space-events .space-events-share:hover {
	color: var(--space-events-accent, currentColor);
	background: transparent;
}

.space-events.space-events .space-events-share[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.6;
}

.space-events-share__icon {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* A short tooltip on hover and on keyboard focus; the accessible name is the
 * button's label, so the tooltip is not read twice. */
.space-events-share__tip {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	z-index: 5;
	padding: 4px 8px;
	font-size: 0.8125rem;
	line-height: 1.3;
	white-space: nowrap;
	color: #fff;
	background: #1d2327;
	border-radius: 3px;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.space-events-share:hover .space-events-share__tip,
.space-events-share:focus-visible .space-events-share__tip {
	opacity: 1;
	visibility: visible;
}

/* On touch screens a tap leaves :hover behind; the tooltip stays for
 * keyboard focus only. */
@media (hover: none) {
	.space-events-share:hover:not(:focus-visible) .space-events-share__tip {
		opacity: 0;
		visibility: hidden;
	}
}

/*
 * Event boxes and detail pages: classification bubbles, the title, and the
 * sourced ratings and audience section.
 */

/* The event type and its topics, above the title. Each is a link to every
 * event with that type or topic: the whole pill is the target, underlined on
 * hover and focus, with a visible focus ring. */
.space-events-bubbles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-bubble {
	background: var(--space-events-surface);
	border: 1px solid var(--space-events-border);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	padding: 0.15rem 0.6rem;
	overflow-wrap: anywhere;
}

.space-events-bubble--linked {
	padding: 0;
}

.space-events .space-events-bubble__link {
	border-radius: 999px;
	color: inherit;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0.15rem 0.6rem;
	text-decoration: none;
}

.space-events .space-events-bubble__link:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.space-events .space-events-bubble__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	text-decoration: underline;
}

/* The approved title: bold, left-aligned, about 25px, line height 1.3, in
 * Arial or the nearest sans-serif, wrapping in full rather than truncating.
 * Doubled class for weight over a theme's heading rules. */
.space-events .space-events-card__title,
.space-events .space-events-detail__title {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	overflow-wrap: anywhere;
	white-space: normal;
}

.space-events .space-events-card__title {
	font-size: 1.5625rem;
	margin: 0;
}

.space-events .space-events-card--minimal .space-events-card__title,
.space-events .space-events-card--featured .space-events-card__title {
	font-size: 1.15rem;
}

.space-events .space-events-detail__title {
	font-size: clamp(1.5625rem, 1.3rem + 1.1vw, 2rem);
	margin: 0.4rem 0 0.5rem;
}

.space-events-detail__bubbles {
	margin-top: 0.75rem;
}

/* Ratings and audience on an event box: two columns where there is room,
 * one where there is not, and one column only when there is one figure. */
.space-events-card__ratings {
	border-top: 1px solid var(--space-events-border);
	padding-top: 0.6rem;
}

.space-events-ratings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.5rem 1.25rem;
}

.space-events-ratings__item {
	min-width: 0;
}

.space-events-ratings__label {
	color: var(--space-events-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

.space-events-ratings__value {
	font-size: 1rem;
	margin: 0.1rem 0;
}

.space-events-ratings__value strong {
	font-size: 1.15rem;
}

.space-events-ratings__count {
	color: var(--space-events-muted);
	font-size: 0.9rem;
}

.space-events-ratings__meta {
	color: var(--space-events-muted);
	font-size: 0.85rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.space-events-ratings__more {
	font-size: 0.9rem;
	margin: 0.4rem 0 0;
}

.space-events-ratings__link,
.space-events-ratings__more a {
	color: var(--space-events-link, inherit);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.space-events-ratings a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The detail view's section: restrained and lightly shaded. */
.space-events-detail__ratings {
	background: var(--space-events-surface);
	border: 1px solid var(--space-events-border);
	border-radius: 8px;
	margin: 1.25rem 0;
	padding: 1rem 1.1rem;
}

.space-events-detail__ratings h2 {
	margin-top: 0;
}

.space-events-detail__ratings h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}

.space-events-ratings__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem 2rem;
}

.space-events-ratings__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.space-events-ratings__row {
	border-top: 1px solid var(--space-events-border);
	display: grid;
	gap: 0.1rem;
	padding: 0.5rem 0;
}

.space-events-ratings__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.space-events-ratings__source {
	font-weight: 600;
}

.space-events-ratings__rankings {
	margin-top: 1rem;
}

.space-events-ratings__note,
.space-events-ratings__none {
	color: var(--space-events-muted);
	margin: 0.75rem 0 0;
}

.space-events-ratings--empty .space-events-ratings__none {
	margin-top: 0;
}

.space-events-ratings__about {
	margin-top: 0.9rem;
}

.space-events-ratings__about summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.space-events-ratings__about p {
	font-size: 0.9rem;
	margin: 0.4rem 0;
}

/* Details is a navigation link that looks like the buttons beside it. */
.space-events-action--details {
	text-decoration: none;
}

/* The detail view's action row wraps like an event box's. */
.space-events-detail__actions {
	margin: 1.25rem 0;
}

/*
 * The public Statistics view.
 *
 * Part of the directory stylesheet rather than a file of its own: a separate
 * stylesheet asked for while the view was being drawn never reached pages
 * served from the page cache, or sites whose optimiser drops late styles,
 * and the charts were drawn at the full width of the page. Everything is
 * scoped to .space-events-stats. The charts are the dashboard's own inline
 * SVG; these rules size them to the page and draw their text in the
 * directory's colours.
 */

.space-events-stats {
	--se-es-ink: currentColor;
	--se-es-muted: #50575e;
	container: space-events-stats / inline-size;
	margin: 0 0 2rem;
	max-width: 100%;
	min-width: 0;
}

.space-events-stats__title {
	margin: 0.5rem 0 0.75rem;
}

.space-events-stats__title:focus {
	outline: none;
}

.space-events-stats__scope {
	border-left: 4px solid var(--space-events-accent, #1f5f9b);
	margin: 0 0 1.5rem;
	padding: 0.25rem 0 0.25rem 1rem;
}

.space-events-stats__scope p {
	margin: 0.25rem 0;
}

.space-events-stats__computed {
	color: #50575e;
	font-size: 0.9em;
}

/* One column on a phone; two side by side once the view has room for two
   readable cards. Sized by the view's own width, not the window's, so a
   directory in a narrow content column stays single. */
.space-events-stats__charts {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@container space-events-stats (min-width: 40rem) {
	.space-events-stats__charts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A timeline needs the whole width to keep its labels readable. */
.space-events-stats__chart--line {
	grid-column: 1 / -1;
}

.space-events-stats__chart {
	border: 1px solid var(--space-events-border, #dcdcde);
	border-radius: var(--space-events-radius, 6px);
	box-sizing: border-box;
	min-width: 0;
	padding: 1rem;
}

.space-events-stats__chart-title {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.space-events-stats__about,
.space-events-stats__range {
	margin: 0 0 0.5rem;
}

.space-events-stats__range {
	color: #50575e;
	font-size: 0.9em;
}

.space-events-stats__graph {
	margin: 0.75rem 0;
	min-width: 0;
}

.space-events-stats .se-es-chart {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.space-events-stats .se-es-chart--doughnut {
	flex: 0 0 auto;
	max-width: 180px;
	min-width: 140px;
	width: 45%;
}

/* Bar charts keep a readable size on wide pages; rankings are wider. */
.space-events-stats .se-es-chart--bar {
	max-width: 720px;
}

.space-events-stats .se-es-chart--hbar {
	max-width: 760px;
}

.space-events-stats .se-es-note {
	color: var(--se-es-muted);
	font-size: 0.875em;
	margin: 0.25rem 0 0;
}

.space-events-stats .se-es-chart text {
	fill: var(--se-es-ink);
	font-size: 12px;
}

.space-events-stats .se-es-chart .se-es-axis {
	fill: var(--se-es-muted);
}

.space-events-stats .se-es-chart .se-es-axis-title {
	fill: var(--se-es-ink);
	font-size: 12px;
	font-weight: 600;
}

.space-events-stats .se-es-chart .se-es-value,
.space-events-stats .se-es-chart .se-es-total {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.space-events-stats .se-es-chart .se-es-total {
	font-size: 22px;
}

.space-events-stats .se-es-chart .se-es-grid {
	stroke: #ececec;
	stroke-width: 1;
}

.space-events-stats .se-es-chart .se-es-baseline {
	stroke: #a7aaad;
	stroke-width: 1;
}

.space-events-stats .se-es-doughnut {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.space-events-stats .se-es-legend {
	flex: 1 1 12rem;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.space-events-stats .se-es-legend li {
	align-items: center;
	display: flex;
	gap: 8px;
	min-height: 28px;
	overflow-wrap: anywhere;
}

.space-events-stats .se-es-swatch {
	border-radius: 2px;
	display: inline-block;
	flex: none;
	height: 12px;
	width: 12px;
}

.space-events-stats__notes {
	color: #50575e;
	font-size: 0.9em;
	margin: 0.5rem 0;
	padding-left: 1.25rem;
}

.space-events-stats__details > summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.space-events-stats__tablewrap {
	max-width: 100%;
	overflow-x: auto;
}

.space-events-stats__tablewrap:focus-visible {
	outline: 3px solid var(--space-events-accent, #1f5f9b);
	outline-offset: 2px;
}

.space-events-stats__table {
	border-collapse: collapse;
	margin: 0.5rem 0 0;
	width: 100%;
}

.space-events-stats__table caption {
	font-size: 0.9em;
	font-weight: 600;
	padding: 0 0 0.35rem;
	text-align: left;
}

.space-events-stats__table :is(th, td) {
	border-bottom: 1px solid var(--space-events-border, #dcdcde);
	padding: 0.35rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.space-events-stats__table .is-number {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.space-events-stats__total :is(th, td) {
	border-bottom: 0;
	border-top: 2px solid var(--space-events-border, #dcdcde);
	font-weight: 600;
}

.space-events-stats__state {
	background: #f6f7f7;
	border-left: 4px solid #8c8f94;
	margin: 0.5rem 0;
	padding: 0.75rem 1rem;
}

.space-events-stats__state--error {
	background: #fcf0f1;
	border-left-color: #d63638;
}

@media (forced-colors: active) {
	.space-events-stats .se-es-swatch {
		forced-color-adjust: none;
	}
}

/*
 * Public appearance → Page layout → Wide: the directory page across the
 * window (or up to the maximum width), with padding that keeps the title
 * clear of a sticky theme menu and the content off the window's edges.
 */
.se-page-wide {
	box-sizing: border-box;
	clear: both;
	display: block;
	float: none;
	margin: 0;
	max-width: none;
	position: relative;
	width: 100%;
}

.se-page-wide__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--se-page-max, none);
	padding: var(--se-page-pad-top, 40px) var(--se-page-pad-x, 32px) var(--se-page-pad-bottom, 48px);
	width: 100%;
}

.se-page-wide__title {
	line-height: 1.25;
	margin: 0 0 1.25rem;
	overflow: visible;
	overflow-wrap: anywhere;
	scroll-margin-top: var(--se-page-pad-top, 40px);
}

.se-page-wide__content {
	max-width: none;
	width: 100%;
}

.se-page-wide__content > .space-events,
.se-page-wide__content > .alignwide,
.se-page-wide__content > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

@media (max-width: 782px) {
	.se-page-wide__inner {
		padding: var(--se-page-pad-top-mobile, 24px) var(--se-page-pad-x-mobile, 16px) var(--se-page-pad-bottom, 48px);
	}
}

/*
 * Page profiles (Public appearance → Page layout → Page profiles). Every
 * view's content, below the navigation, is either across the page
 * ("directory") or in the Events Blog article's reading column ("article"),
 * whose width, padding and alignment are the Blog article settings.
 */
.se-profile {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

.se-profile--directory {
	max-width: none;
}

.se-profile--article {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--se-article-width, 820px);
	padding-left: var(--se-article-pad-mobile, 16px);
	padding-right: var(--se-article-pad-mobile, 16px);
}

.se-profile--article.se-profile--left {
	margin-left: 0;
}

@media (min-width: 600px) {
	.se-profile--article {
		padding-left: var(--se-article-pad, 24px);
		padding-right: var(--se-article-pad, 24px);
	}
}

/* The column is the profile's; an article or listing inside it does not
   narrow and pad itself a second time. */
.se-profile > .se-blog-article,
.se-profile > .se-blog-article-comments {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.se-profile--article > .se-blog-listing {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.se-profile--article > .space-events,
.se-profile--article > .space-events__panel {
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* October 2026 review                                                 */
/* ------------------------------------------------------------------ */

/* Copy-link panel, where the browser has no share sheet. */
.space-events.space-events .space-events-share-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	flex-basis: 100%;
	max-width: 100%;
	margin: 0.5rem 0;
	padding: 0.75rem;
	border: 1px solid var(--space-events-border, #c3c4c7);
	border-radius: 6px;
	background: var(--space-events-surface, #fff);
	box-sizing: border-box;
}

.space-events.space-events .space-events-share-panel label {
	flex-basis: 100%;
	font-weight: 600;
}

.space-events.space-events .space-events-share-panel input {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 44px;
}

.space-events.space-events .space-events-share-panel__status {
	flex-basis: 100%;
	margin: 0;
}

/* Compact visitor actions in a table row or an agenda entry. */
.space-events.space-events .space-events-row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.375rem;
}

.space-events.space-events .space-events-row-actions .space-events-action,
.space-events.space-events .space-events-row-actions summary {
	min-height: 44px;
	min-width: 44px;
	box-sizing: border-box;
}

.space-events.space-events .space-events-row-actions__more {
	position: relative;
}

.space-events.space-events .space-events-row-actions__more > summary {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
}

.space-events.space-events .space-events-row-actions__more > summary::-webkit-details-marker {
	display: none;
}

.space-events.space-events .space-events-row-actions__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.375rem;
}

.space-events.space-events .space-events-table__actions {
	min-width: 12rem;
}

.space-events.space-events .space-events-table__organizer,
.space-events.space-events .space-events-agenda__organizer {
	display: block;
	font-size: 0.9em;
	color: var(--space-events-muted);
}

/* Why a result is above the chosen order. */
.space-events.space-events .space-events-placement-note {
	margin: 0 0 0.75rem;
	font-size: 0.95em;
	color: var(--space-events-muted);
}

.space-events.space-events .space-events-card__placement {
	display: inline-block;
	margin-inline-start: 0.375rem;
	font-size: 0.85em;
	font-style: italic;
	color: var(--space-events-muted);
}

.space-events.space-events .space-events-detail__badges {
	margin: 0.25rem 0 0.75rem;
}

/* Submission dates: only the fields the chosen precision needs. */
.space-events.space-events.space-events [data-se-when][hidden] {
	display: none;
}

.space-events.space-events .space-events-submit__precision .space-events-choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
}

.space-events.space-events .space-events-submit__precision input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}