/* Every custom property below can be overridden by a theme, either on
   .memml-calendar or on any ancestor, to match the surrounding design. */
:where(.memml-calendar) {
	--memml-accent: #2563eb;
	--memml-accent-contrast: #fff;
	--memml-border: #d7dce2;
	--memml-card-background: #fff;
	--memml-cancelled: #8a1c1c;
	--memml-cancelled-background: #fdeaea;
	--memml-focus: #1d4ed8;
	--memml-muted: #5d6673;
	--memml-radius: 0.5rem;
	--memml-shadow: 0 1px 3px rgb(0 0 0 / 10%);
	--memml-spacing: 1rem;
	--memml-text: #1f2430;
	--memml-warning: #6b4f00;
	--memml-warning-background: #fff4cc;
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

/* Headings inside the calendar are compact labels, not article headings.
   Themes size h3/h4 through element and content-area selectors that beat
   zero-specificity rules, so these sizes are deliberately not wrapped in
   :where() -- otherwise card titles render at article-heading scale. */
.memml-calendar .memml-calendar__title,
.memml-calendar .memml-calendar__details-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 650;
	line-height: 1.3;
}

.memml-calendar .memml-calendar__month-label {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
}

.memml-calendar .memml-calendar__month-title {
	margin: 0;
	font-size: 1em;
	font-weight: 650;
	line-height: 1.25;
}

/* The rules below set `display` at zero specificity, which still beats
   the user-agent [hidden] rule. Restore it so panels toggled by script
   stay hidden. */
:where(.memml-calendar) [hidden] {
	display: none;
}

:where(.memml-calendar) :is(button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--memml-focus);
	outline-offset: 2px;
}

:where(.memml-calendar__toolbar) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem var(--memml-spacing);
	margin-block-end: calc(var(--memml-spacing) * 1.5);
}

:where(.memml-calendar__filter) {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: color-mix(in srgb, var(--memml-border) 35%, transparent);
	border-radius: var(--memml-radius);
}

:where(.memml-calendar__layout-filter) {
	margin-inline-start: auto;
}

/* The period filter sits in the toolbar with the other pills; when the
   month layout hides it, the toolbar simply closes the gap. */
:where(.memml-calendar__period-filter[hidden]) {
	display: none;
}

:where(.memml-calendar__filter-button) {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.55rem 0.85rem;
	border: 0;
	border-radius: calc(var(--memml-radius) * 0.75);
	background: transparent;
	cursor: pointer;
	font: inherit;
	text-align: center;
}

:where(.memml-calendar__filter-button:hover) {
	background: color-mix(in srgb, var(--memml-card-background) 60%, transparent);
}

:where(.memml-calendar__filter-button[aria-current="true"]) {
	background: var(--memml-card-background);
	box-shadow: var(--memml-shadow);
	font-weight: 650;
}

:where(.memml-calendar__grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--memml-spacing);
}

/* The rows list style stacks compact full-width items, memml.com-style. */
:where(.memml-calendar__grid--rows) {
	grid-template-columns: 1fr;
	gap: calc(var(--memml-spacing) * 0.75);
}

/* The count caption is a paragraph, so the margin must out-rank theme `p`
   rules; hence no :where(). */
.memml-calendar .memml-calendar__count {
	margin: 0 0 calc(var(--memml-spacing) * 0.75);
	color: var(--memml-muted);
	font-size: 0.8em;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

:where(.memml-calendar__subscribe) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem var(--memml-spacing);
	margin-block-end: var(--memml-spacing);
	padding: 0.6rem var(--memml-spacing);
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: color-mix(in srgb, var(--memml-border) 18%, transparent);
}

:where(.memml-calendar__subscribe-label) {
	color: var(--memml-muted);
	font-size: 0.85em;
	font-weight: 650;
}

:where(.memml-calendar__subscribe .memml-calendar__actions) {
	margin-block-start: 0;
	margin-inline-start: auto;
}

:where(.memml-calendar__card) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: var(--memml-card-background);
	box-shadow: var(--memml-shadow);
	color: var(--memml-text);
}

/* Cancelled events stay fully legible; the badge and strikethrough carry the
   meaning instead of a blanket opacity that would fail contrast. */
:where(.memml-calendar__card--cancelled) {
	border-style: dashed;
}

:where(.memml-calendar__card--cancelled .memml-calendar__image) {
	filter: grayscale(1);
}

:where(.memml-calendar__card--cancelled .memml-calendar__title) {
	text-decoration: line-through;
}

:where(.memml-calendar__image) {
	aspect-ratio: 16 / 9;
	background: var(--memml-border);
}

:where(.memml-calendar__image img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.memml-calendar__card-body) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: calc(var(--memml-spacing) * 0.75);
	padding: var(--memml-spacing);
}

:where(.memml-calendar__title, .memml-calendar__description) {
	margin: 0;
}

/* Long descriptions are clamped on cards; the details dialog shows the
   full text. Not :where()-wrapped so theme `p` rules cannot undo the
   clamp's display mode. */
.memml-calendar .memml-calendar__card-body > .memml-calendar__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

:where(.memml-calendar__meta) {
	display: grid;
	gap: 0.25rem;
	color: var(--memml-muted);
	font-size: 0.925em;
}

/* Structured venues are a richer display variant than the legacy location
   string. The nested layout keeps the name, address, links, and optional
   arrival details readable in both cards and dialogs. */
:where(.memml-calendar__venue-list, .memml-calendar__venue) {
	display: grid;
	gap: 0.2rem;
}

:where(.memml-calendar__venue-list) {
	gap: 0.6rem;
}

:where(.memml-calendar__venue-name) {
	color: var(--memml-text);
	font-weight: 650;
}

:where(.memml-calendar__venue-address) {
	font-style: normal;
}

.memml-calendar a.memml-calendar__venue-link {
	justify-self: start;
	font-size: 0.9em;
}

:where(.memml-calendar__venue-description) {
	margin-block-start: 0.2rem;
	color: var(--memml-text);
}

:where(.memml-calendar__venue-detail strong) {
	color: var(--memml-text);
}

:where(.memml-calendar__date) {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 650;
}

:where(.memml-calendar__date-chip) {
	display: grid;
	min-width: 2.8rem;
	overflow: hidden;
	border: 1px solid var(--memml-border);
	border-radius: calc(var(--memml-radius) * 0.75);
	background: var(--memml-card-background);
	text-align: center;
	line-height: 1.1;
}

:where(.memml-calendar__date-chip span) {
	padding: 0.2rem 0.3rem;
	background: var(--memml-accent);
	color: var(--memml-accent-contrast);
	font-size: 0.72em;
	text-transform: uppercase;
}

:where(.memml-calendar__date-chip strong) {
	padding: 0.25rem;
	font-size: 1.2em;
}

:where(.memml-calendar__status) {
	align-self: start;
	justify-self: start;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: var(--memml-border);
	font-size: 0.8em;
	font-weight: 700;
}

:where(.memml-calendar__status--postponed, .memml-calendar__status--needed) {
	background: var(--memml-warning-background);
	color: var(--memml-warning);
}

:where(.memml-calendar__status--cancelled) {
	background: var(--memml-cancelled-background);
	color: var(--memml-cancelled);
}

:where(.memml-calendar__actions) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.25rem;
}

/* Cards in one grid row share a height, so pinning the actions to the
   bottom edge lines the buttons up across neighbouring cards. Declared
   after the base actions rule so the auto margin wins the cascade. */
:where(.memml-calendar__card-body > .memml-calendar__actions) {
	margin-block-start: auto;
	padding-block-start: 0.25rem;
}

:where(.memml-calendar__button) {
	display: inline-flex;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--memml-border);
	border-radius: calc(var(--memml-radius) * 0.75);
}

/* The controls below are anchors so they work without JavaScript. Themes
   colour and underline bare `a` elements through global styles at (0,1,0),
   printed after plugin styles, so these rules are deliberately not wrapped in
   :where() and must out-rank that tie -- otherwise the calendar's controls
   render as ordinary body links, and the primary button loses its contrast
   against the accent fill. "Add to calendar" is intentionally left alone so it
   keeps the theme's link styling. */
.memml-calendar a.memml-calendar__button,
.memml-calendar a.memml-calendar__filter-button,
.memml-calendar a.memml-calendar__month-button {
	color: inherit;
	text-decoration: none;
}

.memml-calendar a.memml-calendar__filter-button[aria-current="true"] {
	color: var(--memml-text);
}

.memml-calendar a.memml-calendar__button:hover {
	color: var(--memml-accent);
}

.memml-calendar a.memml-calendar__button--primary,
.memml-calendar a.memml-calendar__button--primary:hover {
	color: var(--memml-accent-contrast);
}

:where(.memml-calendar__button:hover) {
	border-color: var(--memml-accent);
}

:where(.memml-calendar__button--primary) {
	border-color: var(--memml-accent);
	background: var(--memml-accent);
}

:where(.memml-calendar__button--primary:hover) {
	background: color-mix(in srgb, var(--memml-accent) 85%, #000);
}

:where(.memml-calendar__calendar-link) {
	font-size: 0.9em;
}

:where(.memml-calendar__add-links) {
	display: inline-flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 0.5rem;
	line-height: 1.25;
}

/* Keep the calendar choices visually attached to their label, while leaving
   a clearer break between this secondary action group and any primary CTA. */
:where(.memml-calendar__button + .memml-calendar__add-links) {
	margin-block-start: 0.35rem;
}

:where(.memml-calendar__add-label) {
	flex-basis: 100%;
	color: var(--memml-muted);
	font-size: 0.9em;
}

/* The month arrows sit next to the centred label instead of at the far
   edges of the container, so both controls stay near the pointer. The
   label keeps a minimum width so the arrows do not shift between months. */
:where(.memml-calendar__month-header) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--memml-spacing);
	margin-block-end: var(--memml-spacing);
}

:where(.memml-calendar__month-label) {
	min-width: 12ch;
	margin: 0;
	text-align: center;
}

:where(.memml-calendar__month-button) {
	display: inline-grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: var(--memml-card-background);
	cursor: pointer;
	font: inherit;
	font-size: 1.5rem;
	text-decoration: none;
}

:where(.memml-calendar__month-button[aria-disabled="true"]) {
	cursor: default;
	opacity: 0.4;
}

/* Focusable so the grid can be scrolled by keyboard on narrow screens. */
:where(.memml-calendar__month-scroll) {
	overflow-x: auto;
}

:where(.memml-calendar__month-table) {
	width: 100%;
	min-width: 38rem;
	border-spacing: 0;
	border-collapse: separate;
	table-layout: fixed;
}

:where(.memml-calendar__month-table th) {
	padding: 0.5rem;
	color: var(--memml-muted);
	font-size: 0.8em;
	font-weight: 650;
	text-align: center;
}

:where(.memml-calendar__month-day) {
	height: 8rem;
	padding: 0.4rem;
	border-block-start: 1px solid var(--memml-border);
	border-inline-start: 1px solid var(--memml-border);
	background: var(--memml-card-background);
	color: var(--memml-text);
	vertical-align: top;
}

:where(.memml-calendar__month-day.is-today) {
	background: color-mix(in srgb, var(--memml-accent) 10%, var(--memml-card-background));
}

:where(.memml-calendar__month-day:nth-child(7)) {
	border-inline-end: 1px solid var(--memml-border);
}

:where(.memml-calendar__month-table tbody tr:last-child .memml-calendar__month-day) {
	border-block-end: 1px solid var(--memml-border);
}

:where(.memml-calendar__month-day.is-empty) {
	background: color-mix(in srgb, var(--memml-border) 20%, transparent);
}

:where(.memml-calendar__day-number) {
	display: block;
	margin-block-end: 0.3rem;
	color: var(--memml-muted);
	font-size: 0.8em;
	font-weight: 700;
}

:where(.memml-calendar__month-day.is-today .memml-calendar__day-number) {
	display: inline-grid;
	min-width: 1.6rem;
	min-height: 1.6rem;
	place-items: center;
	border-radius: 999px;
	background: var(--memml-accent);
	color: var(--memml-accent-contrast);
}

:where(.memml-calendar__month-entry) {
	display: grid;
	gap: 0.2rem;
	margin-block-start: 0.35rem;
	padding: 0.4rem;
	border-inline-start: 0.2rem solid var(--memml-accent);
	border-radius: 0.2rem;
	background: color-mix(in srgb, var(--memml-accent) 8%, var(--memml-card-background));
	font-size: 0.78em;
}

:where(.memml-calendar__month-title) {
	margin: 0;
	font-size: 1em;
	line-height: 1.25;
}

:where(.memml-calendar__month-time, .memml-calendar__month-spots) {
	color: var(--memml-muted);
}

:where(.memml-calendar__month-status) {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
}

:where(.memml-calendar__month-status--cancelled) {
	color: var(--memml-muted);
}

:where(.memml-calendar__month-status--postponed) {
	color: var(--memml-warning);
}

/* Crowded days collapse extra items behind a native disclosure. */
:where(.memml-calendar__month-more) {
	margin-block-start: 0.35rem;
}

:where(.memml-calendar__month-more > summary) {
	color: var(--memml-accent);
	cursor: pointer;
	font-size: 0.78em;
	font-weight: 650;
}

:where(.memml-calendar__month-more > summary:hover) {
	text-decoration: underline;
}

:where(.memml-calendar__month-entry .memml-calendar__actions) {
	gap: 0.35rem;
	margin-block-start: 0.15rem;
}

:where(.memml-calendar__month-entry .memml-calendar__button) {
	padding: 0.2rem 0.35rem;
	font-size: 0.9em;
}

/* The rows list style is a memml.com-style item: date chip on the left,
   content beside it, and the status badge and actions in a right-hand
   column. Declared after the base card, meta, status, and actions rules so
   its overrides win the equal-specificity cascade. */
:where(.memml-calendar__row) {
	display: flex;
	align-items: flex-start;
	gap: var(--memml-spacing);
	padding: var(--memml-spacing);
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: var(--memml-card-background);
	box-shadow: var(--memml-shadow);
	color: var(--memml-text);
}

:where(.memml-calendar__row-body) {
	display: grid;
	flex: 1;
	gap: 0.4rem;
	min-width: 0;
}

:where(.memml-calendar__row-aside) {
	display: grid;
	flex-shrink: 0;
	gap: 0.5rem;
	align-content: start;
	justify-items: end;
}

:where(.memml-calendar__row-aside .memml-calendar__status) {
	justify-self: end;
}

:where(.memml-calendar__row-aside .memml-calendar__actions) {
	margin-block-start: 0;
	justify-content: flex-end;
}

:where(.memml-calendar__meta--inline) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
}

/* Rows keep descriptions to two lines; the details dialog shows the rest. */
.memml-calendar .memml-calendar__row-body > .memml-calendar__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 30rem) {

	:where(.memml-calendar__row) {
		flex-wrap: wrap;
	}

	:where(.memml-calendar__row-aside) {
		justify-items: start;
	}

	:where(.memml-calendar__row-aside .memml-calendar__status) {
		justify-self: start;
	}

	:where(.memml-calendar__row-aside .memml-calendar__actions) {
		justify-content: flex-start;
	}
}

/* Items that carry a details panel open it in a modal dialog. The hover
   treatment signals that the whole item is clickable. */
:where(.memml-calendar__item--openable) {
	cursor: pointer;
}

:where(.memml-calendar__card.memml-calendar__item--openable),
:where(.memml-calendar__row.memml-calendar__item--openable) {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(.memml-calendar__card.memml-calendar__item--openable:hover),
:where(.memml-calendar__row.memml-calendar__item--openable:hover) {
	border-color: color-mix(in srgb, var(--memml-accent) 40%, var(--memml-border));
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}

:where(.memml-calendar__month-entry.memml-calendar__item--openable) {
	transition: background-color 0.15s ease;
}

:where(.memml-calendar__month-entry.memml-calendar__item--openable:hover) {
	background: color-mix(in srgb, var(--memml-accent) 16%, var(--memml-card-background));
}

/* The title opener and dialog close are real buttons injected by script.
   Themes style `button` through element selectors, so these rules are not
   :where()-wrapped -- otherwise the titles render as theme-styled buttons. */
.memml-calendar .memml-calendar__title-button {
	display: inline;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-align: inherit;
}

.memml-calendar .memml-calendar__title-button:hover {
	color: var(--memml-accent);
	text-decoration: underline;
}

:where(.memml-calendar__dialog) {
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	padding: calc(var(--memml-spacing) * 1.5);
	overflow-y: auto;
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: var(--memml-card-background);
	box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
	color: var(--memml-text);
}

:where(.memml-calendar__dialog)::backdrop {
	background: rgb(15 18 25 / 55%);
}

:where(.memml-calendar__dialog .memml-calendar__details) {
	display: grid;
	gap: calc(var(--memml-spacing) * 0.75);
}

:where(.memml-calendar__dialog .memml-calendar__status) {
	justify-self: start;
}

.memml-calendar .memml-calendar__dialog-close {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	display: inline-grid;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--memml-muted);
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
}

.memml-calendar .memml-calendar__dialog-close:hover {
	background: color-mix(in srgb, var(--memml-border) 45%, transparent);
	color: var(--memml-text);
}

:where(.memml-calendar .screen-reader-text) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(.memml-calendar__notice) {
	margin: 0;
	padding: var(--memml-spacing);
	border: 1px solid var(--memml-border);
	border-radius: var(--memml-radius);
	background: var(--memml-card-background);
	color: var(--memml-muted);
}