/*
 * EP Calendar: front-end view.
 *
 * Phone first (390px), comfortable at 1280px. No web fonts: the theme's font family
 * is inherited, but sizes, weights, line heights, alignment and link decoration are
 * the calendar's own (build step 7b, the theme hardening block at the end), so a
 * theme's h2/h3/a rules cannot resize, centre or underline it. Modern CSS only: grid
 * and flex for layout, no floats, no !important.
 *
 * Type scale: every size is a multiple of one rem value, --ep-cal-text-size (default
 * 1.125rem, 18px at a 16px root). A theme can set it on :root to scale the calendar
 * and the subscribe block together.
 *
 * Colours are custom properties a theme can override anywhere up the tree, for
 * example on :root:
 *   --ep-cal-event     EP Events
 *   --ep-cal-booking   EP Booking appointments
 *   --ep-cal-entry     plain calendar entries
 *   --ep-cal-external  mirrored external feeds (the default feed colour, purple)
 *   --ep-cal-teal, --ep-cal-rose, --ep-cal-slate, --ep-cal-olive
 *                      the other colours a mirrored feed can be given (build step 5)
 * Each is read through var(--name, default), so the defaults below never shadow a
 * theme's value. Neutrals derive from the inherited text colour, so the view reads
 * on light and dark themes alike.
 *
 * Build step 3 adds the view script's controls. More overridable properties:
 *   --ep-cal-primary     filled buttons (Save, Add); default: the entry colour
 *   --ep-cal-on-primary  text on filled buttons
 *   --ep-cal-danger      Delete and error text
 *   --ep-cal-surface     the dialog's background
 *   --ep-cal-ink         the dialog's text
 *   --ep-cal-backdrop    the veil behind the dialog
 */

.ep-cal {
	--ep-cal-rule: color-mix(in srgb, currentColor 14%, transparent);
	--ep-cal-tint: color-mix(in srgb, currentColor 4%, transparent);
	--ep-cal-muted: color-mix(in srgb, currentColor 68%, transparent);
	--ep-cal-radius: 0.625rem;
	--ep-cal-space: 0.75rem;
	--ep-cal-accent: var(--ep-cal-entry, #2b5c8a);
	display: grid;
	gap: var(--ep-cal-space);
	margin-block: 1.5rem;
	font: inherit;
	line-height: 1.45;
	min-inline-size: 0;
}

.ep-cal *,
.ep-cal *::before,
.ep-cal *::after {
	box-sizing: border-box;
}

/* ── Header ───────────────────────────────────────── */

.ep-cal__header {
	display: grid;
	gap: 0.125rem;
}

.ep-cal__title {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.2;
}

.ep-cal__range,
.ep-cal__note,
.ep-cal__empty {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: 0.875em;
}

.ep-cal__stale {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: 0.8125em;
	font-style: italic;
	overflow-wrap: anywhere;
}

.ep-cal__note {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ep-cal-rule);
	border-radius: var(--ep-cal-radius);
	background: var(--ep-cal-tint);
}

.ep-cal__empty {
	padding: 1.25rem 1rem;
	border: 1px dashed var(--ep-cal-rule);
	border-radius: var(--ep-cal-radius);
	text-align: center;
	font-size: 1em;
}

/* ── Days ─────────────────────────────────────────── */

.ep-cal__days,
.ep-cal__entries {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ep-cal__days {
	display: grid;
	gap: 1.25rem;
}

.ep-cal__day {
	display: grid;
	gap: 0.5rem;
	min-inline-size: 0;
}

.ep-cal__day-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	padding-block-end: 0.375rem;
	border-block-end: 1px solid var(--ep-cal-rule);
	font-size: 1em;
	line-height: 1.3;
}

.ep-cal__today {
	padding: 0.0625rem 0.5rem;
	border: 1px solid var(--ep-cal-rule);
	border-radius: 999px;
	background: var(--ep-cal-tint);
	color: inherit;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ep-cal__entries {
	display: grid;
	gap: 0.5rem;
}

/* ── Entries ──────────────────────────────────────── */

.ep-cal__entry {
	display: grid;
	grid-template-columns: 5.75rem minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	align-items: start;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--ep-cal-rule);
	border-inline-start: 0.25rem solid var(--ep-cal-accent);
	border-radius: var(--ep-cal-radius);
	background: var(--ep-cal-tint);
}

.ep-cal__entry--event { --ep-cal-accent: var(--ep-cal-event, #2f6f4f); }
.ep-cal__entry--booking { --ep-cal-accent: var(--ep-cal-booking, #9a5b00); }
.ep-cal__entry--entry { --ep-cal-accent: var(--ep-cal-entry, #2b5c8a); }
.ep-cal__entry--external { --ep-cal-accent: var(--ep-cal-external, #6b4f8a); }
.ep-cal__entry--teal { --ep-cal-accent: var(--ep-cal-teal, #1f6f78); }
.ep-cal__entry--rose { --ep-cal-accent: var(--ep-cal-rose, #a23b5b); }
.ep-cal__entry--slate { --ep-cal-accent: var(--ep-cal-slate, #4a5568); }
.ep-cal__entry--olive { --ep-cal-accent: var(--ep-cal-olive, #5f6b1f); }

.ep-cal__time {
	font-variant-numeric: tabular-nums;
	font-size: 0.875em;
	font-weight: 600;
	white-space: nowrap;
	padding-block-start: 0.0625rem;
}

.ep-cal__body {
	display: grid;
	gap: 0.25rem;
	min-inline-size: 0;
}

.ep-cal__entry-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ep-cal__entry-title a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ep-cal__entry-title a:hover {
	text-decoration-thickness: 2px;
}

.ep-cal__entry-title a:focus-visible {
	outline: 2px solid var(--ep-cal-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.ep-cal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	color: var(--ep-cal-muted);
	font-size: 0.8125em;
}

.ep-cal__location {
	overflow-wrap: anywhere;
}

.ep-cal__badge,
.ep-cal__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0 0.45em;
	border: 1px solid var(--ep-cal-rule);
	border-radius: 999px;
	color: inherit;
	font-size: 0.9em;
	line-height: 1.6;
	white-space: nowrap;
}

.ep-cal__badge::before {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background: var(--ep-cal-accent);
}

.ep-cal__flag--private {
	border-style: dashed;
}

.ep-cal__entry--tentative {
	border-style: dashed;
	border-inline-start-style: solid;
}

.ep-cal__entry--cancelled .ep-cal__entry-title {
	text-decoration: line-through;
	opacity: 0.75;
}

/* ── View script (build step 3) ───────────────────── */

.ep-cal--js {
	--ep-cal-pressed: color-mix(in srgb, currentColor 12%, transparent);
	--ep-cal-tap: 2.75rem;
}

.ep-cal [hidden] {
	display: none;
}

/* Themes space list items (the rig theme gives every li a 12px bottom margin); the
   calendar's lists set their own rhythm with gap. Two classes outrank a theme's
   element-and-class rule without !important. */
.ep-cal .ep-cal__day,
.ep-cal .ep-cal__entry,
.ep-cal .ep-cal__wday,
.ep-cal .ep-cal__chip {
	margin: 0;
}

.ep-cal__sr,
.ep-cal__chip-badge,
.ep-cal__chip-flag {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Buttons */

.ep-cal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-block-size: var(--ep-cal-tap);
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--ep-cal-rule);
	border-radius: var(--ep-cal-radius);
	background: var(--ep-cal-tint);
	color: inherit;
	font: inherit;
	font-size: 0.9375em;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
}

.ep-cal__btn:hover {
	background: var(--ep-cal-pressed);
}

.ep-cal__btn:focus-visible,
.ep-cal__more:focus-visible,
.ep-cal__chip-link:focus-visible,
.ep-cal__view:focus-visible,
.ep-cal__day-heading:focus-visible {
	outline: 2px solid var(--ep-cal-accent);
	outline-offset: 2px;
}

.ep-cal__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.ep-cal__btn[aria-pressed="true"] {
	background: var(--ep-cal-pressed);
	border-color: currentColor;
	font-weight: 600;
}

.ep-cal__btn--primary,
.ep-cal__btn--add {
	border-color: var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
	background: var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
	color: var(--ep-cal-on-primary, #fff);
	font-weight: 600;
}

.ep-cal__btn--primary:hover,
.ep-cal__btn--add:hover {
	background: var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
	box-shadow: inset 0 0 0 100vmax var(--ep-cal-pressed);
}

.ep-cal__btn--danger {
	color: var(--ep-cal-danger, #a3261b);
	border-color: color-mix(in srgb, var(--ep-cal-danger, #a3261b) 45%, transparent);
}

.ep-cal__btn--small {
	min-block-size: 2.25rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.8125em;
}

.ep-cal__arrow {
	font-size: 1.25em;
	line-height: 1;
}

/* Toolbar */

.ep-cal__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.ep-cal__views,
.ep-cal__nav {
	display: flex;
	flex: 1 1 100%;
	min-inline-size: 0;
}

.ep-cal__views .ep-cal__btn,
.ep-cal__nav .ep-cal__btn {
	flex: 1 1 0;
	min-inline-size: 0;
	border-radius: 0;
}

.ep-cal__views .ep-cal__btn + .ep-cal__btn,
.ep-cal__nav .ep-cal__btn + .ep-cal__btn {
	margin-inline-start: -1px;
}

.ep-cal__views .ep-cal__btn:first-child,
.ep-cal__nav .ep-cal__btn:first-child {
	border-start-start-radius: var(--ep-cal-radius);
	border-end-start-radius: var(--ep-cal-radius);
}

.ep-cal__views .ep-cal__btn:last-child,
.ep-cal__nav .ep-cal__btn:last-child {
	border-start-end-radius: var(--ep-cal-radius);
	border-end-end-radius: var(--ep-cal-radius);
}

/* Source chips (build step 6): visible toggle buttons that wrap, never a menu. Each
   carries an ep-cal__entry--<colour> class, which only sets --ep-cal-accent (the
   modifier rules above), so its dot takes the source's colour. */
.ep-cal__filters {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: 0.375rem;
	min-inline-size: 0;
}

.ep-cal__filter {
	min-block-size: 2.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875em;
}

.ep-cal__filter-dot {
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border: 2px solid var(--ep-cal-accent);
	border-radius: 50%;
	flex: 0 0 auto;
}

.ep-cal__filter[aria-pressed="true"] .ep-cal__filter-dot {
	background: var(--ep-cal-accent);
}

.ep-cal__filter[aria-pressed="false"] {
	color: var(--ep-cal-muted);
	background: transparent;
	font-weight: 400;
}

.ep-cal__filter[aria-pressed="false"] .ep-cal__filter-label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ep-cal__filter-label {
	overflow-wrap: anywhere;
}

.ep-cal__range-label {
	flex: 1 1 auto;
	margin: 0;
	font-weight: 600;
	font-size: 1.0625em;
}

.ep-cal__btn--add {
	flex: 0 0 auto;
}

.ep-cal__status {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ep-cal-rule);
	border-radius: var(--ep-cal-radius);
	background: var(--ep-cal-tint);
	font-size: 0.875em;
}

.ep-cal__status:empty {
	display: none;
}

.ep-cal__status--error {
	color: var(--ep-cal-danger, #a3261b);
	border-color: color-mix(in srgb, var(--ep-cal-danger, #a3261b) 45%, transparent);
}

.ep-cal[aria-busy="true"] .ep-cal__view {
	opacity: 0.6;
}

.ep-cal__view {
	min-inline-size: 0;
	/* The week's seven columns are decided by the calendar's own width as well as the
	   screen's: a theme column beside a sidebar can be under 500px on a 1280 screen.
	   The container is this region, not the root, so the dialog is never inside it. */
	container: ep-cal-view / inline-size;
}

.ep-cal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-block-start: 0.25rem;
}

/* Week: a list of seven days on phones, seven columns from 900px */

.ep-cal__week {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.ep-cal__wday {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	min-inline-size: 0;
}

.ep-cal__wday .ep-cal__day-heading {
	position: static;
	flex-direction: row;
	align-items: baseline;
	padding-block: 0 0.375rem;
	border-block-end: 1px solid var(--ep-cal-rule);
}

.ep-cal__wday--today .ep-cal__day-heading {
	border-block-end-color: var(--ep-cal-accent);
	border-block-end-width: 2px;
}

.ep-cal__day-empty {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: 0.875em;
}

/* Month */

.ep-cal__month-wrap {
	min-inline-size: 0;
}

.ep-cal__month {
	inline-size: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.875em;
}

.ep-cal__month th {
	padding: 0.25rem 0.125rem;
	font-size: 0.8125em;
	font-weight: 600;
	text-align: center;
	color: var(--ep-cal-muted);
}

.ep-cal__month abbr {
	text-decoration: none;
}

.ep-cal__mday {
	position: relative;
	block-size: 4.5rem;
	padding: 0.1875rem;
	border: 1px solid var(--ep-cal-rule);
	vertical-align: top;
	overflow: hidden;
}

.ep-cal__mday--other {
	background: var(--ep-cal-tint);
	color: var(--ep-cal-muted);
}

.ep-cal__mday-num {
	display: flex;
	justify-content: flex-end;
	font-variant-numeric: tabular-nums;
	font-size: 0.875em;
	line-height: 1.6;
}

.ep-cal__mday-num > span[aria-hidden] {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.6em;
	border-radius: 999px;
}

.ep-cal__mday--today {
	box-shadow: inset 0 0 0 2px var(--ep-cal-entry, #2b5c8a);
}

.ep-cal__mday--today .ep-cal__mday-num > span[aria-hidden] {
	background: var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
	color: var(--ep-cal-on-primary, #fff);
	font-weight: 700;
}

.ep-cal__chips {
	list-style: none;
	margin: 0.125rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.125rem;
}

.ep-cal__chip {
	min-inline-size: 0;
	border-inline-start: 0.1875rem solid var(--ep-cal-accent);
	border-radius: 0.25rem;
	background: var(--ep-cal-tint);
}

.ep-cal__chip.ep-cal__entry--event { --ep-cal-accent: var(--ep-cal-event, #2f6f4f); }
.ep-cal__chip.ep-cal__entry--booking { --ep-cal-accent: var(--ep-cal-booking, #9a5b00); }
.ep-cal__chip.ep-cal__entry--entry { --ep-cal-accent: var(--ep-cal-entry, #2b5c8a); }
.ep-cal__chip.ep-cal__entry--external { --ep-cal-accent: var(--ep-cal-external, #6b4f8a); }
.ep-cal__chip.ep-cal__entry--teal { --ep-cal-accent: var(--ep-cal-teal, #1f6f78); }
.ep-cal__chip.ep-cal__entry--rose { --ep-cal-accent: var(--ep-cal-rose, #a23b5b); }
.ep-cal__chip.ep-cal__entry--slate { --ep-cal-accent: var(--ep-cal-slate, #4a5568); }
.ep-cal__chip.ep-cal__entry--olive { --ep-cal-accent: var(--ep-cal-olive, #5f6b1f); }

.ep-cal__chip.ep-cal__entry--private {
	outline: 1px dashed var(--ep-cal-rule);
	outline-offset: -1px;
}

.ep-cal__chip.ep-cal__entry--tentative {
	background: transparent;
	outline: 1px dashed var(--ep-cal-accent);
	outline-offset: -1px;
}

.ep-cal__chip.ep-cal__entry--cancelled .ep-cal__chip-title {
	text-decoration: line-through;
}

.ep-cal__chip-link {
	/* Contains the visually hidden badge and marks, which are absolutely positioned:
	   without this they escape the clip and widen the page on a phone. */
	position: relative;
	display: block;
	padding: 0 0.25rem;
	overflow: hidden;
	color: inherit;
	font-size: 0.75rem;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
}

a.ep-cal__chip-link:hover .ep-cal__chip-title {
	text-decoration: underline;
}

.ep-cal__chip-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.ep-cal__more {
	display: block;
	inline-size: 100%;
	margin-block-start: 0.125rem;
	padding: 0.125rem 0.25rem;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: start;
	cursor: pointer;
}

/* A phone cell is about 50px wide: the title matters more than the time there. */
@media (max-width: 39.99rem) {
	.ep-cal__chip-time {
		display: none;
	}

	.ep-cal__chip-link {
		padding-inline: 0.1875rem;
		font-size: 0.6875rem;
	}
}

.ep-cal__more:hover {
	background: var(--ep-cal-pressed);
}

/* Dialog */

.ep-cal__dialog {
	inline-size: min(36rem, 100vw - 1.5rem);
	max-inline-size: none;
	max-block-size: calc(100dvh - 1.5rem);
	margin: auto;
	padding: 0;
	border: 1px solid var(--ep-cal-rule);
	border-radius: var(--ep-cal-radius);
	background: var(--ep-cal-surface, Canvas);
	color: var(--ep-cal-ink, CanvasText);
	overflow: auto;
	overscroll-behavior: contain;
}

.ep-cal__dialog::backdrop {
	background: var(--ep-cal-backdrop, rgb(0 0 0 / 0.45));
}

.ep-cal__form,
.ep-cal__confirm,
.ep-cal__scope {
	display: grid;
	gap: 0.875rem;
	padding: 1rem;
}

.ep-cal__dialog-title {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.2;
}

.ep-cal__field {
	display: grid;
	gap: 0.25rem;
	min-inline-size: 0;
}

.ep-cal__field > label,
.ep-cal__field legend {
	font-weight: 600;
	font-size: 0.875em;
}

.ep-cal__field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 0.875rem;
}

.ep-cal__form input:not([type="checkbox"]):not([type="radio"]),
.ep-cal__form select,
.ep-cal__form textarea {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--ep-cal-tap);
	padding: 0.5rem 0.625rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0.5rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: max(1rem, 1em);
}

.ep-cal__form textarea {
	resize: vertical;
}

.ep-cal__form input:focus-visible,
.ep-cal__form select:focus-visible,
.ep-cal__form textarea:focus-visible {
	outline: 2px solid var(--ep-cal-accent);
	outline-offset: 1px;
}

.ep-cal__field--visibility {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.ep-cal__field--visibility legend {
	padding: 0;
	margin-block-end: 0.25rem;
	inline-size: 100%;
}

/* 0.3.0: the monthly "Repeat on" choices, one per line. */
.ep-cal__field--monthly-by {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 0.125rem;
}

.ep-cal__field--monthly-by legend {
	padding: 0;
	margin-block-end: 0.25rem;
	inline-size: 100%;
}

.ep-cal__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: var(--ep-cal-tap);
	cursor: pointer;
}

.ep-cal__choice input {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	accent-color: var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
}

.ep-cal__hint,
.ep-cal__series-note,
.ep-cal__confirm-series {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: 0.8125em;
}

.ep-cal__confirm-text,
.ep-cal__scope-text {
	margin: 0;
	overflow-wrap: anywhere;
}

.ep-cal__form-error {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-inline-start: 0.25rem solid var(--ep-cal-danger, #a3261b);
	color: var(--ep-cal-danger, #a3261b);
	font-size: 0.875em;
	font-weight: 600;
}

.ep-cal__form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-block-start: 0.25rem;
}

.ep-cal__spacer {
	flex: 1 1 auto;
}

/* ── Wider screens ────────────────────────────────── */

@media (min-width: 48rem) {
	.ep-cal {
		gap: 1rem;
	}

	.ep-cal__day {
		grid-template-columns: 11rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
	}

	.ep-cal__day-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.375rem;
		padding-block: 0.625rem 0;
		border-block-end: 0;
		position: sticky;
		inset-block-start: 1rem;
	}

	.ep-cal__entry {
		grid-template-columns: 7rem minmax(0, 1fr);
		padding: 0.75rem 1rem;
	}
}

@media (min-width: 40rem) {
	.ep-cal__views,
	.ep-cal__nav {
		flex: 0 1 auto;
	}

	.ep-cal__views .ep-cal__btn,
	.ep-cal__nav .ep-cal__btn {
		flex: 0 0 auto;
	}

	.ep-cal__range-label {
		flex-basis: 100%;
		order: 3;
	}

	.ep-cal__filters {
		order: 4;
	}

	.ep-cal__btn--add {
		margin-inline-start: auto;
	}

	.ep-cal__mday {
		block-size: 6.5rem;
		padding: 0.25rem;
	}

	.ep-cal__chip-link {
		font-size: 0.8125rem;
	}

	.ep-cal__form,
	.ep-cal__confirm,
	.ep-cal__scope {
		padding: 1.25rem 1.5rem;
	}
}

/* Seven columns from a 900px screen, as the brief sets it, when the calendar itself
   has room for them (44rem, about 100px a day); each column a stacked list. Below
   that, the seven days stay a list, which reads better than words broken mid-way. */
@media (min-width: 900px) {
	@container ep-cal-view (min-width: 44rem) {
	.ep-cal__week {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.ep-cal__wday .ep-cal__day-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		font-size: 0.875em;
	}

	.ep-cal__wday .ep-cal__entry {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
		padding: 0.5rem;
		font-size: 0.875em;
	}

	.ep-cal__wday .ep-cal__time {
		white-space: normal;
	}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ep-cal__entry-title a {
		transition: text-decoration-thickness 120ms ease;
	}

	.ep-cal__btn,
	.ep-cal__more {
		transition: background-color 120ms ease;
	}

	.ep-cal__view {
		transition: opacity 120ms ease;
	}
}

@media print {
	.ep-cal-subscribe,
	.ep-cal__toolbar,
	.ep-cal__status,
	.ep-cal__actions,
	.ep-cal__dialog {
		display: none;
	}

	.ep-cal__entry {
		break-inside: avoid;
		background: none;
	}

	.ep-cal__day-heading {
		position: static;
	}
}

/* [ep-calendar-feed-link]: the site feed as a subscribe link and a file link. */
.ep-cal-feed-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.5em;
}

.ep-cal-feed-link__subscribe {
	font-weight: 600;
}

/* [ep-calendar-subscribe] (build step 6): a row of visible buttons that wraps. */
.ep-cal-subscribe {
	--ep-cal-rule: color-mix(in srgb, currentColor 14%, transparent);
	--ep-cal-tint: color-mix(in srgb, currentColor 4%, transparent);
	--ep-cal-muted: color-mix(in srgb, currentColor 68%, transparent);
	display: grid;
	gap: 0.625rem;
	margin-block: 1.5rem;
	min-inline-size: 0;
}

.ep-cal-subscribe [hidden] {
	display: none;
}

/* Build step 7b: without this the link buttons took min-block-size as content-box
   (44px + padding + border = 58px) while the Copy link <button> is border-box by
   default, so the links stood 14px taller than the button beside them. */
.ep-cal-subscribe *,
.ep-cal-subscribe *::before,
.ep-cal-subscribe *::after {
	box-sizing: border-box;
}

.ep-cal-subscribe__heading {
	margin: 0;
	font-size: 1.125em;
	line-height: 1.25;
}

.ep-cal-subscribe .ep-cal-subscribe__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-cal-subscribe .ep-cal-subscribe__buttons li {
	margin: 0;
}

.ep-cal-subscribe__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.375rem 1rem;
	border: 1px solid var(--ep-cal-rule);
	border-radius: 0.625rem;
	background: var(--ep-cal-tint);
	color: inherit;
	font: inherit;
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

.ep-cal-subscribe__btn:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.ep-cal-subscribe__btn:focus-visible,
.ep-cal-subscribe__settings:focus-visible {
	outline: 2px solid var(--ep-cal-primary, var(--ep-cal-entry, #2b5c8a));
	outline-offset: 2px;
}

.ep-cal-subscribe__address {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	max-inline-size: 40rem;
	font-size: 0.875em;
}

.ep-cal-subscribe__input {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0.5rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: max(1rem, 0.875em);
}

.ep-cal-subscribe__status {
	margin: 0;
	font-size: 0.875em;
}

.ep-cal-subscribe__status:empty {
	display: none;
}

/* The signed-in editor's line: one quiet button that opens the calendar's settings. */
.ep-cal-subscribe__personal {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: 0.8125em;
}

.ep-cal-subscribe__settings {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

/* ── Theme hardening (build step 7b) ─────────────────
 *
 * Measured on dev11b under core's Attention theme at 1280: `body:not(.has-sidebar)
 * h2/h3` (specificity 0,1,2) set the view title to 37px and the day headings to 29px
 * with 58px / 47px line heights, `.focus .text h2, .focus .text h3` (0,2,1) centred
 * them, and `p a, .page-content a` (0,1,1) underlined the subscribe link buttons. The
 * theme's sheet loads after this one, so an equal specificity loses too.
 *
 * Every rule below is anchored on the root AND its marker attribute
 * (.ep-cal[data-ep-calendar], .ep-cal-subscribe[data-ep-cal-subscribe]): two class
 * levels before the element's own class, so 0,3,0, which outranks a theme's
 * `.content h3`, `article a` and `.focus .text h3` without !important. Only type,
 * alignment, decoration, margins and colour are set here; layout (grid, flex,
 * padding, borders, the 48rem and container-query changes) stays in the rules above,
 * so the phone layout is unchanged. Sizes are multiples of --ep-cal-fs, a rem value
 * (a theme's font-size on an ancestor cannot move it); spans that size themselves in
 * em (time, meta, location) follow their row, which is anchored here.
 */

.ep-cal[data-ep-calendar],
.ep-cal-subscribe[data-ep-cal-subscribe] {
	--ep-cal-fs: var(--ep-cal-text-size, 1.125rem);
	font-size: var(--ep-cal-fs);
	line-height: 1.45;
	text-align: start;
}

/* Headings */

.ep-cal[data-ep-calendar] .ep-cal__title,
.ep-cal[data-ep-calendar] .ep-cal__dialog-title {
	margin: 0;
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 1.25);
	font-weight: 700;
	line-height: 1.2;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
}

.ep-cal[data-ep-calendar] .ep-cal__day-heading {
	margin: 0;
	color: inherit;
	font-size: var(--ep-cal-fs);
	font-weight: 700;
	line-height: 1.3;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
}

.ep-cal[data-ep-calendar] .ep-cal__today {
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.75);
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0.02em;
}

/* Paragraphs */

.ep-cal[data-ep-calendar] .ep-cal__header,
.ep-cal[data-ep-calendar] .ep-cal__toolbar,
.ep-cal[data-ep-calendar] .ep-cal__view {
	text-align: start;
}

.ep-cal[data-ep-calendar] .ep-cal__range,
.ep-cal[data-ep-calendar] .ep-cal__note,
.ep-cal[data-ep-calendar] .ep-cal__stale,
.ep-cal[data-ep-calendar] .ep-cal__status,
.ep-cal[data-ep-calendar] .ep-cal__range-label,
.ep-cal[data-ep-calendar] .ep-cal__day-empty,
.ep-cal[data-ep-calendar] .ep-cal__hint,
.ep-cal[data-ep-calendar] .ep-cal__series-note,
.ep-cal[data-ep-calendar] .ep-cal__one-note,
.ep-cal[data-ep-calendar] .ep-cal__confirm-series,
.ep-cal[data-ep-calendar] .ep-cal__confirm-text,
.ep-cal[data-ep-calendar] .ep-cal__scope-text,
.ep-cal[data-ep-calendar] .ep-cal__form-error {
	margin: 0;
	line-height: 1.45;
	text-align: start;
	text-transform: none;
}

.ep-cal[data-ep-calendar] .ep-cal__empty {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: var(--ep-cal-fs);
	line-height: 1.45;
	text-align: center;
}

.ep-cal[data-ep-calendar] .ep-cal__range,
.ep-cal[data-ep-calendar] .ep-cal__note,
.ep-cal[data-ep-calendar] .ep-cal__day-empty {
	color: var(--ep-cal-muted);
	font-size: calc(var(--ep-cal-fs) * 0.875);
	font-weight: 400;
}

.ep-cal[data-ep-calendar] .ep-cal__stale {
	color: var(--ep-cal-muted);
	font-size: calc(var(--ep-cal-fs) * 0.8125);
}

.ep-cal[data-ep-calendar] .ep-cal__status {
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.875);
}

.ep-cal[data-ep-calendar] .ep-cal__status--error,
.ep-cal[data-ep-calendar] .ep-cal__form-error {
	color: var(--ep-cal-danger, #a3261b);
}

.ep-cal[data-ep-calendar] .ep-cal__form-error {
	font-size: calc(var(--ep-cal-fs) * 0.875);
	font-weight: 600;
}

.ep-cal[data-ep-calendar] .ep-cal__range-label {
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 1.0625);
	font-weight: 600;
}

.ep-cal[data-ep-calendar] .ep-cal__hint,
.ep-cal[data-ep-calendar] .ep-cal__series-note,
.ep-cal[data-ep-calendar] .ep-cal__confirm-series {
	color: var(--ep-cal-muted);
	font-size: calc(var(--ep-cal-fs) * 0.8125);
}

.ep-cal[data-ep-calendar] .ep-cal__confirm-text,
.ep-cal[data-ep-calendar] .ep-cal__scope-text {
	color: inherit;
	font-size: var(--ep-cal-fs);
}

/* Lists: no theme bullets, indents or item spacing; the calendar sets its own gaps. */

.ep-cal[data-ep-calendar] .ep-cal__days,
.ep-cal[data-ep-calendar] .ep-cal__entries,
.ep-cal[data-ep-calendar] .ep-cal__week {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-cal[data-ep-calendar] .ep-cal__chips {
	margin: 0.125rem 0 0;
	padding: 0;
	list-style: none;
}

.ep-cal[data-ep-calendar] .ep-cal__day,
.ep-cal[data-ep-calendar] .ep-cal__wday,
.ep-cal[data-ep-calendar] .ep-cal__entry {
	margin: 0;
	color: inherit;
	font-size: var(--ep-cal-fs);
	line-height: 1.45;
	text-align: start;
}

.ep-cal[data-ep-calendar] .ep-cal__chip {
	margin: 0;
	line-height: 1.5;
	text-align: start;
}

/* Rows: the entry title link keeps an underline in every view (agenda and week rows);
   month chips are compact and underline their title on hover only. */

.ep-cal[data-ep-calendar] .ep-cal__entry-title {
	font-weight: 600;
}

.ep-cal[data-ep-calendar] .ep-cal__entry-title a,
.ep-cal[data-ep-calendar] .ep-cal__entry-title a:hover,
.ep-cal[data-ep-calendar] .ep-cal__entry-title a:visited {
	color: inherit;
	font-weight: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ep-cal[data-ep-calendar] .ep-cal__entry-title a:hover {
	text-decoration-thickness: 2px;
}

.ep-cal[data-ep-calendar] .ep-cal__badge,
.ep-cal[data-ep-calendar] .ep-cal__flag {
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.73125);
	font-weight: 400;
	line-height: 1.6;
}

.ep-cal[data-ep-calendar] .ep-cal__chip-link,
.ep-cal[data-ep-calendar] .ep-cal__chip-link:hover,
.ep-cal[data-ep-calendar] .ep-cal__chip-link:visited {
	color: inherit;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
	text-decoration: none;
}

.ep-cal[data-ep-calendar] a.ep-cal__chip-link:hover .ep-cal__chip-title {
	text-decoration-line: underline;
}

.ep-cal[data-ep-calendar] .ep-cal__month {
	margin: 0;
	font-size: calc(var(--ep-cal-fs) * 0.875);
	line-height: 1.45;
}

.ep-cal[data-ep-calendar] .ep-cal__month th {
	color: var(--ep-cal-muted);
	font-size: calc(var(--ep-cal-fs) * 0.875 * 0.8125);
	font-weight: 600;
	text-align: center;
	text-transform: none;
}

.ep-cal[data-ep-calendar] .ep-cal__month abbr {
	text-decoration: none;
}

/* Buttons: the theme's button type, margins and decoration never reach them. Only the
   block margins are reset, so the joined view and navigation groups keep their -1px
   inline overlap. Weight and colour variants are repeated at the same anchor so they
   still win over the base. */

.ep-cal[data-ep-calendar] .ep-cal__btn {
	margin-block: 0;
	color: inherit;
	font-family: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.9375);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

.ep-cal[data-ep-calendar] .ep-cal__btn--small {
	font-size: calc(var(--ep-cal-fs) * 0.8125);
}

.ep-cal[data-ep-calendar] .ep-cal__filter {
	font-size: calc(var(--ep-cal-fs) * 0.875);
}

.ep-cal[data-ep-calendar] .ep-cal__btn[aria-pressed="true"],
.ep-cal[data-ep-calendar] .ep-cal__btn--primary,
.ep-cal[data-ep-calendar] .ep-cal__btn--add {
	font-weight: 600;
}

.ep-cal[data-ep-calendar] .ep-cal__btn--primary,
.ep-cal[data-ep-calendar] .ep-cal__btn--add {
	color: var(--ep-cal-on-primary, #fff);
}

.ep-cal[data-ep-calendar] .ep-cal__btn--danger {
	color: var(--ep-cal-danger, #a3261b);
}

.ep-cal[data-ep-calendar] .ep-cal__filter[aria-pressed="false"] {
	color: var(--ep-cal-muted);
	font-weight: 400;
}

.ep-cal[data-ep-calendar] .ep-cal__more {
	margin: 0.125rem 0 0;
	color: inherit;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: start;
	text-decoration: none;
	text-transform: none;
}

/* The editor dialog's labels (a theme's `label` is often bold and block). */

.ep-cal[data-ep-calendar] .ep-cal__field > label,
.ep-cal[data-ep-calendar] .ep-cal__field legend {
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.875);
	font-weight: 600;
	line-height: 1.45;
	text-align: start;
}

.ep-cal[data-ep-calendar] .ep-cal__choice {
	margin: 0;
	color: inherit;
	font-size: var(--ep-cal-fs);
	font-weight: 400;
	line-height: 1.45;
}

/* The same size changes the rules above make, at the anchor. */

@media (max-width: 39.99rem) {
	.ep-cal[data-ep-calendar] .ep-cal__chip-link {
		font-size: 0.6875rem;
	}
}

@media (min-width: 40rem) {
	.ep-cal[data-ep-calendar] .ep-cal__chip-link {
		font-size: 0.8125rem;
	}
}

@media (min-width: 900px) {
	@container ep-cal-view (min-width: 44rem) {
	.ep-cal[data-ep-calendar] .ep-cal__wday .ep-cal__day-heading,
	.ep-cal[data-ep-calendar] .ep-cal__wday .ep-cal__entry {
		font-size: calc(var(--ep-cal-fs) * 0.875);
	}

	.ep-cal[data-ep-calendar] .ep-cal__wday .ep-cal__badge,
	.ep-cal[data-ep-calendar] .ep-cal__wday .ep-cal__flag {
		font-size: calc(var(--ep-cal-fs) * 0.875 * 0.73125);
	}
	}
}

/* Subscribe block. The link buttons never carry the theme's underline or colour. */

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__heading {
	margin: 0;
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 1.125);
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__buttons {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__buttons > li {
	margin: 0;
	padding: 0;
	font-size: var(--ep-cal-fs);
	line-height: 1.45;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__btn,
.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__btn:hover,
.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__btn:visited {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.9375);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__address,
.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__status {
	margin: 0;
	color: inherit;
	font-size: calc(var(--ep-cal-fs) * 0.875);
	line-height: 1.45;
	text-align: start;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__address label {
	margin: 0;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__input {
	margin: 0;
	line-height: 1.45;
	text-align: start;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__personal {
	margin: 0;
	color: var(--ep-cal-muted);
	font-size: calc(var(--ep-cal-fs) * 0.8125);
	line-height: 1.45;
	text-align: start;
}

.ep-cal-subscribe[data-ep-cal-subscribe] .ep-cal-subscribe__settings {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: start;
	text-decoration-line: underline;
}

/* 0.1.1: the clash marker, editors only. Words carry the meaning; the solid outline and
   the "!" mark in a month chip only repeat it. Titles can be long, so it wraps. */
.ep-cal[data-ep-calendar] .ep-cal__flag--clash {
	border-style: solid;
	border-color: currentColor;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: start;
}

.ep-cal[data-ep-calendar] .ep-cal__flag--clash:not(.ep-cal__chip-flag)::before {
	content: "!";
	font-weight: 700;
}

.ep-cal[data-ep-calendar] .ep-cal__chip-clash {
	display: inline-block;
	min-inline-size: 1.1em;
	padding: 0 0.2em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}