/* ABOUTME: Front-end styles for TD EventRail — cards, grid, list, single details, calendar.
   ABOUTME: Editorial and calm. Font sizes use em (theme text size), never rem — some themes
   set a 62.5% root, which would shrink rem-based type to ~10px. */

/* Design tokens, on :root so ONE line retunes the whole plugin:
 *
 *     :root { --tder-accent: #49174a; }
 *
 * These used to be declared on every top-level component instead, out of a worry that a
 * single-event block — a sibling injected around the_content, not a child of one wrapper —
 * would be left off the list and resolve var(--tder-…) to nothing. :root removes the worry
 * entirely (every element in the document inherits from it) and, more importantly, made the
 * plugin themeable: an element's OWN declaration beats an inherited one, so while these sat
 * on the components, a site's `:root { --tder-accent: … }` silently did nothing. A
 * component-level override still wins if a site wants to scope one, so nothing regresses.
 *
 * Everything tinted derives from --tder-accent through color-mix(), so setting that alone
 * recolours buttons, date badges, the view switcher, featured stripes, links and focus rings
 * together. The two derived tokens below exist because a brand colour can break assumptions
 * a single hue cannot express. */
:root {
	--tder-accent: var(--wp--preset--color--primary, #2b6cb0);
	/* Text ON an accent-filled surface. Was a hardcoded #fff, which is only right for a
	   mid-to-dark brand colour — a pale accent gives white-on-pale buttons. */
	--tder-accent-contrast: #ffffff;
	/* The soft accent wash behind date badges. Derived, so it follows the accent by
	   default; settable on its own when a brand colour tints unpleasantly at 10%. */
	--tder-accent-soft: color-mix(in srgb, var(--tder-accent) 10%, transparent);
	--tder-ink: var(--wp--preset--color--foreground, #1a202c);
	--tder-muted: #5a6472;
	--tder-line: #e4e7ec;
	--tder-surface: #ffffff;
	--tder-radius: 12px;
	--tder-gap: clamp(1rem, 2vw, 1.75rem);
}

/* A single-event card embed renders outside a grid — keep it card-shaped, not full-width. */
.wp-block-tder-single-event .tder-event-card { max-width: 400px; }
.wp-block-tder-single-event.alignwide .tder-event-card,
.wp-block-tder-single-event.alignfull .tder-event-card { max-width: none; }

/* ---------- List resets (kill theme bullets/indents inside our components) ---------- */
.tder-events-list,
.tder-cal__events,
.tder-meta-list,
.tder-all-dates__list {
	list-style: none !important;
	margin-left: 0 !important;
	padding-inline-start: 0;
	padding-left: 0;
}
/* The details box is flush-left; its inner padding is re-applied in the Single section. */
.tder-single-details { margin-left: 0; }
.tder-cal__events li,
.tder-meta-list__item,
.tder-all-dates__list li {
	list-style: none !important;
}
.tder-cal__events li::before,
.tder-all-dates__list li::before,
.tder-meta-list__item::before {
	content: none !important;
	display: none !important;
}

/* ---------- Grid ---------- */
.tder-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--tder-gap);
	margin: 1.5em 0;
}

/* ---------- Card ---------- */
.tder-event-card {
	display: flex;
	flex-direction: column;
	background: var(--tder-surface);
	border: 1px solid var(--tder-line);
	border-radius: var(--tder-radius);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
	transform: translateZ(0);
}
.tder-event-card:hover {
	box-shadow: 0 8px 26px rgba(16, 24, 40, .10);
	transform: translateY(-2px);
}
/* Whole-card click: the title link stretches over the entire card. */
.tder-event-card__title a.tder-event-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.tder-event-card:hover .tder-event-card__title a { color: var(--tder-accent); }
/* Keep genuinely separate links (categories) clickable above the stretched link. */
.tder-event-card__cats a { position: relative; z-index: 2; }

/* Visible keyboard focus on the stretched-link card/row. The default outline lands on the
   clipped inline link; draw it on the whole container instead (WCAG 2.4.7). */
.tder-event-card:focus-within,
.tder-event-row:focus-within {
	outline: 2px solid var(--tder-accent);
	outline-offset: 2px;
}
/* Don't double-outline the inner link itself. */
.tder-event-card__title a:focus,
.tder-event-row__title a:focus { outline: none; }

/* Featured treatment — a top ribbon strip (in flow, never overlaps content). */
.tder-event-card.is-featured {
	border-color: color-mix(in srgb, var(--tder-accent) 45%, var(--tder-line));
	box-shadow: 0 6px 22px color-mix(in srgb, var(--tder-accent) 16%, transparent);
}
.tder-event-card__featured {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .4em;
	background: var(--tder-accent);
	color: var(--tder-accent-contrast);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .5em .9em;
	line-height: 1;
}
.tder-event-card__featured .dashicons { font-size: 1.15em; width: 1.15em; height: 1.15em; }

.tder-event-card__media {
	display: block;
	line-height: 0;
	/* A mat, not a hole: portrait artwork centred on a tinted ground reads as deliberate,
	   the way a gallery grid does. Also covers the decode gap on a slow connection. */
	background: color-mix(in srgb, var(--tder-line) 45%, transparent);
}
.tder-event-card__img { display: block; width: 100%; height: var(--tder-card-img-height, 220px); object-fit: cover; }
/* Portrait or square artwork is a composition, not a backdrop — a flyer cropped to a
   letterbox loses its headline and stops being recognisable. Show all of it, at the same
   height as every other card so the titles below still line up across the row. */
.tder-event-card__media--tall .tder-event-card__img { object-fit: contain; }
.tder-event-card__body { padding: 1.1em 1.2em 1.3em; display: flex; flex-direction: column; gap: .55em; }

.tder-event-card__date {
	display: flex;
	align-items: center;
	gap: .6em;
	color: var(--tder-muted);
	font-size: .95em;
}
.tder-date-badge {
	display: inline-grid;
	place-items: center;
	width: 3em;
	min-width: 3em;
	padding: .25em 0;
	border-radius: 8px;
	background: var(--tder-accent-soft);
	color: var(--tder-accent);
	line-height: 1.1;
}
.tder-date-badge__month { font-size: .7em; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tder-date-badge__day { font-size: 1.4em; font-weight: 800; }
.tder-event-card__when { font-weight: 400; font-size: .95em; color: var(--tder-muted); }

.tder-event-card__title { margin: 0; font-size: 1.25em; line-height: 1.25; font-weight: 500; }
.tder-event-card__title a { color: var(--tder-ink); text-decoration: none; }
.tder-event-card__title a:hover { color: var(--tder-accent); }
.tder-event-card__venue,
.tder-event-card__cats,
.tder-event-card__excerpt { margin: 0; font-size: .95em; color: var(--tder-muted); }
.tder-event-card__venue .dashicons { font-size: 1.1em; width: 1.1em; height: 1.1em; vertical-align: -2px; }

/* ---------- List view ---------- */
.tder-events-list {
	display: flex;
	flex-direction: column;
	margin: 1.25em 0;
}
.tder-event-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em .25em;
	transition: background .15s ease;
}
/* Dividers BETWEEN rows only — no bracketing lines top/bottom. */
.tder-event-row + .tder-event-row { border-top: 1px solid var(--tder-line); }
.tder-event-row:hover { background: color-mix(in srgb, var(--tder-accent) 5%, transparent); }
.tder-event-row__date { flex: none; }
.tder-event-row__main { flex: 1 1 auto; min-width: 0; }
/* Hierarchy: title loudest, badge = scannable date, meta line a whisper. Weight 500 on
   the title guards against themes whose h3 is a thin 300 — without it the bold meta
   line below used to read as the heading. */
.tder-event-row__title { margin: 0 0 .15em; font-size: 1.2em; line-height: 1.3; font-weight: 500; }
.tder-event-row__title a { color: var(--tder-ink); text-decoration: none; }
.tder-event-row__title a:hover { color: var(--tder-accent); }
/* Whole-row click. */
.tder-event-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tder-event-row__meta { margin: 0; color: var(--tder-muted); font-size: .9em; font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.tder-event-row__venue .dashicons { font-size: 1.1em; width: 1.1em; height: 1.1em; vertical-align: -2px; }
.tder-event-row__sep { color: var(--tder-line); }

/* Featured rows: left accent stripe + filled date badge + starred label. */
.tder-event-row.is-featured {
	padding-left: 1em;
	background: color-mix(in srgb, var(--tder-accent) 4%, transparent);
}
.tder-event-row.is-featured::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	border-radius: 0 3px 3px 0;
	background: var(--tder-accent);
}
.tder-event-row.is-featured:hover { background: color-mix(in srgb, var(--tder-accent) 8%, transparent); }
.tder-event-row.is-featured .tder-date-badge {
	background: var(--tder-accent);
	color: var(--tder-accent-contrast);
}
.tder-event-row__flag {
	flex: none;
	/* Inset from the row's right edge only when nothing follows. With a thumbnail after it
	   the flex gap already does the spacing, and .9em on top reads as a misalignment. */
	margin-right: 0;
	display: inline-flex;
	align-items: center;
	gap: .25em;
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tder-accent);
}
.tder-event-row__flag .dashicons { font-size: 1.15em; width: 1.15em; height: 1.15em; }
.tder-event-row__flag:last-child { margin-right: .9em; }
@media (max-width: 560px) {
	.tder-event-row__flag { display: none; }
}

/* Featured image on a list row (Settings → Display → Show featured images on list rows).
   Always LAST in the row and only rendered when the event has one, so a mixed list —
   some events with an image, some without — simply closes up. A placeholder would be
   worse: it draws the eye to what's missing on exactly the events that are text-only.

   The image keeps its OWN shape. Client artwork is not one thing: much of it is a flyer —
   a portrait or square composition with the title, date, venue and a QR code set into the
   picture — and cropping that to a house ratio decapitates the headline and hands back an
   unrecognisable slice. At this size no flyer is legible anyway, so the goal is not
   readability but recognition ("that's the one I saw on Instagram"), which is exactly what
   a crop destroys. The constant that gives a list its rhythm is HEIGHT; width can vary, and
   the rail is uneven either way because half the events carry no image at all. */
.tder-event-row__media { flex: none; line-height: 0; }
.tder-event-row__img {
	display: block;
	/* One fluid value rather than breakpoints: it has to shrink smoothly beside a title that
	   is already wrapping, and a width set in a media query would silently beat a theme's own
	   token at small sizes — exactly where a theme most wants to intervene. */
	height: var(--tder-row-img-height, clamp(64px, 9vw, 92px));
	width: auto;
	/* A panorama would otherwise run past 240px and crowd the title. When this bites, the
	   explicit height means the BOX is squashed rather than the picture — object-fit keeps
	   the image itself undistorted inside it. */
	max-width: var(--tder-row-img-max-width, min(160px, 34vw));
	object-fit: contain;
	border-radius: 6px;
	/* Tinted while the image decodes. On the img, not the wrapper: width:auto resolves from
	   core's width/height attributes, so the tint reserves the eventual footprint exactly. */
	background: color-mix(in srgb, var(--tder-line) 60%, transparent);
}
/* Past rows already mute their text; the image has to come along or it shouts over them. */
.tder-event-row.is-past-row .tder-event-row__img { filter: grayscale(1); opacity: .75; }

/* "Uniform" (Settings → Display): one house ratio, cropped to fill, for a site whose images
   are ALL landscape photos and that would rather have a flush rail than intact artwork.
   This is what 1.9.4 did by default — it decapitates a flyer, so it is opt-in only. */
.tder-event-row__media--fill {
	width: var(--tder-row-img-width, clamp(96px, 22vw, 160px));
	aspect-ratio: var(--tder-row-img-ratio, 16 / 9);
	overflow: hidden;
	border-radius: 6px;
}
.tder-event-row__media--fill .tder-event-row__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--tder-row-img-position, center);
	border-radius: 0;
}

/* ---------- Archive header / toggle / pager ---------- */
/* Fill the (often flex) theme content area and re-inset to the site's normal content
   column — some themes strip .content padding and/or flex-lay-out archives. */
.tder-archive {
	flex: 1 1 100%;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding-inline: 60px;
}
@media (max-width: 782px) { .tder-archive { padding-inline: 24px; } }
@media (max-width: 480px) { .tder-archive { padding-inline: 16px; } }

.tder-archive__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em 1.5em;
	border-bottom: 1px solid var(--tder-line);
	padding-bottom: 1em;
	margin-bottom: 1.25em;
}
.tder-archive__title { margin: 0; line-height: 1.1; }
.tder-archive__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em 1.25em;
	/* Claim the rest of the header row so the switcher below can reach the far edge.
	   The header's space-between only positions the header's own children, and on the
	   events page there is no heading — the tools row is the sole child, so it would
	   otherwise sit hard left with the switcher tucked against the search box. */
	flex: 1 1 auto;
	min-width: 0;
}
.tder-archive__toggle { display: inline-flex; gap: .25em; }
.tder-archive__toggle a {
	padding: .4em .9em;
	border-radius: 999px;
	text-decoration: none;
	color: var(--tder-muted);
	font-weight: 600;
}
.tder-archive__toggle a.is-active {
	background: var(--tder-accent);
	color: var(--tder-accent-contrast);
}
.tder-archive__pager { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.5em; }
/* Page 1: only "Load more" exists, and a lone button hard against the left edge reads as a
   stray element rather than the end of the list. */
.tder-archive__pager--next-only { justify-content: center; }

/* ---------- Single ----------
   Typography inherits the theme: sizes use em, line-height inherits, no font-family. */

/* Event titles run long ("Pediatrics SIG Meeting: Measurement Based Care") and many themes
   size h1 for four-word marketing pages — 60px+ wraps to three shouty lines, centered over a
   left-aligned page. Clamp to a calm editorial range, commit to the page's left axis, and
   pull in the oversized gap beneath. px bounds on purpose: rem is untrustworthy here
   (62.5%-root themes) and em would compound the theme's own h1 size. */
body.single-td_event h1.entry-title,
body.single-td_event h1.tder-single-title {
	font-size: clamp(30px, 22px + 1.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-block-end: 10px;
	text-align: left;
	text-wrap: balance;
}
/* EventRail's own title (Settings → Display → "Print the event title"), for themes that hide
   page titles. It prints inside the content, under the "« All Events" link, which already gives
   it room above, so it drops any top margin and keeps a little more below to set it off from
   the image and details. Not .entry-title: the themes it exists for hide titles by that class. */
body.single-td_event h1.tder-single-title { margin-block: 0 .6em; }

/* Featured image on a single event. Natural ratio inside an envelope: never wider than the
   text column, never taller than a comfortable half-screen. A portrait flyer lands as a
   poster on the page's left axis; a landscape photo fills the column. Neither is cropped —
   on a flyer the picture IS the announcement. Plain image, no link: a full-size flyer
   belongs in the post body, not behind a bare .png in a new tab. */
.tder-single-image { margin: 0 0 1.75em; }
.tder-single-image__img {
	display: block;
	border-radius: var(--tder-radius);
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--tder-single-img-max-height, min(58vh, 520px));
	/* Floor the width. Past about 1:2 the height cap alone binds first and a long infographic
	   flyer renders as a ~170px sliver stranded in a 700px column, which reads as broken.
	   min-width outranks max-height in CSS's replaced-element sizing, so beyond that ratio
	   the image gets taller instead of narrower — the honest trade, since such an image is
	   something the visitor wants to READ. */
	min-width: min(var(--tder-single-img-min-width, 260px), 100%);
}
.tder-single-image__caption { margin: .5em 0 0; font-size: .88em; color: var(--tder-muted); }

/* Placement modifiers for that image (Settings → Display → "Featured image placement").
   The envelope above is unchanged in every mode — these only decide what happens to the
   column space the image does not use. */
.tder-single-image--center .tder-single-image__img { margin-inline: auto; }
.tder-single-image--center .tder-single-image__caption { text-align: center; }
/* Full width: the column IS the envelope, so the height cap and the sliver floor both stop
   applying — the image is being asked to span the measure whatever its shape. */
.tder-single-image--full .tder-single-image__img {
	width: 100%;
	max-height: none;
	min-width: 0;
}

/* Portrait/square artwork shares a row with the details band — see tder_single_event_hero_html().
   flex-wrap with real bases rather than a media query: the breakpoint that matters is the
   CONTENT COLUMN's width, which varies by theme and by template, so a viewport query would be
   wrong on any narrow-column layout. Below ~610px of column the two simply stack. */
.tder-single-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.75em;
	margin: 0 0 2.25em;
}
.tder-single-hero > .tder-single-image { flex: 1 1 260px; max-width: 340px; margin: 0; }
.tder-single-hero > .tder-single-details { flex: 3 1 320px; margin: 0; }
/* The band's own facts/CTA split assumes a full-width column and only collapses on a small
   VIEWPORT — inside the hero it is ~390px wide at any viewport size, so collapse it here too
   or the Register button gets squeezed against the facts. */
.tder-single-hero .tder-single-details__card { grid-template-columns: 1fr; }
.tder-single-hero .tder-single-details__card .tder-single-cta .tder-btn {
	display: flex;
	width: 100%;
	justify-content: center;
}
/* Once stacked on a phone, a poster at 58vh owns the whole screen before any fact is visible. */
@media (max-width: 600px) { .tder-single-image { --tder-single-img-max-height: min(44vh, 380px); } }

.tder-single-details { margin: 0 0 2.25em; }
/* Placed after the description, the band needs air above it — at the top of the page the
   page title supplies that, here there is only the last paragraph of prose. */
.tder-single-details--below { margin-top: 2.75em; }

/* The facts band: date / cost / venue on the left, the action button beside them.
   Hairlines, not a box — a bordered rounded card floating in a text column reads
   as wireframe; a band belongs to the page. */
.tder-single-details__card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .6em 1.5em;
	align-items: center;
	border-block: 1px solid var(--tder-line);
	padding: 1.4em 0;
}
.tder-single-details__card .tder-meta-list {
	border: 0;
	padding: 0;
	margin: 0;
}
.tder-single-details__card .tder-single-cta { margin: 0; }
@media (max-width: 640px) {
	.tder-single-details__card { grid-template-columns: 1fr; padding: 1.1em 0; }
	.tder-single-details__card .tder-single-cta .tder-btn { display: flex; width: 100%; justify-content: center; }
}

/* Time ranges never wrap mid-range ("2:00 pm – 3:00 / pm"). */
.tder-nowrap { white-space: nowrap; }
.tder-single-details.is-past { opacity: 1; }
/* Past marker: the same quiet chip the archive uses for "Ended" — old news is not an
   alarm, and an amber banner argues with warm theme headers. Spans the band's grid. */
.tder-single-details__pastflag {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0;
	display: inline-flex;
	align-items: center;
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #5a6472;
	background: #eef0f3;
	border: 1px solid #e0e3e8;
	padding: .32em .7em;
	border-radius: 999px;
}
.tder-meta-list { margin: 1em 0; display: grid; gap: .9em; line-height: 1.5; }
/* Micro-label over value — the facts explain themselves, no clip-art icons. */
.tder-meta-list__item { display: block; }
.tder-meta-list__label {
	display: block;
	font-size: .72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tder-muted);
	margin-bottom: .15em;
}
.tder-meta-list__value { display: block; color: var(--tder-muted); }
/* The date is what people came for — it wins. */
.tder-meta-list__item--when .tder-meta-list__value { font-weight: 600; font-size: 1.05em; color: var(--tder-ink); }
.tder-meta-list__item--where .tder-meta-list__value strong { color: var(--tder-ink); font-weight: 600; }
.tder-venue-address, .tder-map-link { font-size: .92em; color: var(--tder-muted); }
/* ---------- Single: all dates in the series (collapsible, foot of page) ----------
   Collapsed by default — a long recurring series used to sit above the description
   and dwarf the event itself. */
.tder-all-dates {
	margin: 2em 0 0;
	border: 1px solid var(--tder-line);
	border-radius: var(--tder-radius);
	background: var(--tder-surface);
	overflow: hidden;
}
.tder-all-dates__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25em 1em;
	padding: .9em 1.1em;
	cursor: pointer;
	list-style: none;
}
/* Hide the native disclosure triangle in favour of the chevron below. */
.tder-all-dates__summary::-webkit-details-marker { display: none; }
.tder-all-dates__summary::marker { content: ""; }
.tder-all-dates__summary:hover { background: color-mix(in srgb, var(--tder-accent) 4%, transparent); }
.tder-all-dates__summary:focus-visible { outline: 2px solid var(--tder-accent); outline-offset: -2px; }
.tder-all-dates__title { margin: 0; font-size: 1.1em; line-height: 1.3; }
.tder-all-dates__count { color: var(--tder-muted); font-size: .92em; }
.tder-all-dates__summary::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: .5em;
	height: .5em;
	border-right: 2px solid var(--tder-muted);
	border-bottom: 2px solid var(--tder-muted);
	transform: rotate(45deg) translate(-.1em, -.1em);
	transition: transform .15s ease;
}
.tder-all-dates[open] > .tder-all-dates__summary::after { transform: rotate(-135deg); }
.tder-all-dates[open] > .tder-all-dates__summary { border-bottom: 1px solid var(--tder-line); }
@media (prefers-reduced-motion: reduce) { .tder-all-dates__summary::after { transition: none; } }

.tder-all-dates__body { padding: .2em 1.1em 1.1em; }
.tder-all-dates__group + .tder-all-dates__group { margin-top: 1.4em; }
.tder-all-dates__grouptitle {
	margin: .9em 0 .45em;
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tder-muted);
}
.tder-all-dates__group--now .tder-all-dates__grouptitle { color: var(--tder-accent); }
.tder-all-dates__list { display: grid; gap: .3em; }
.tder-all-dates__list li { padding: .35em .6em; border-left: 3px solid var(--tder-accent); background: color-mix(in srgb, var(--tder-accent) 5%, transparent); }
.tder-all-dates__list li.is-past { border-left-color: var(--tder-line); opacity: .6; }
/* "Now" is the one row that should win the eye — filled, not tinted. */
.tder-all-dates__list li.is-now {
	border-left-color: var(--tder-accent);
	background: color-mix(in srgb, var(--tder-accent) 16%, transparent);
	font-weight: 600;
}

/* Overflow of a long past run — a second, quieter disclosure. */
.tder-all-dates__more { margin-top: .5em; }
.tder-all-dates__more > summary {
	cursor: pointer;
	padding: .35em 0;
	font-size: .9em;
	font-weight: 600;
	color: var(--tder-accent);
}
.tder-all-dates__more > summary:focus-visible { outline: 2px solid var(--tder-accent); outline-offset: 2px; }
.tder-all-dates__more .tder-all-dates__list { margin-top: .4em; }

/* Dated view (1.4.0): selected date, per-date add-to-calendar, date links.
   List-scoped selectors out-rank broad theme `.entry-content a` rules. */
.tder-all-dates__list .tder-all-dates__link { color: inherit; text-decoration: none; }
.tder-all-dates__list .tder-all-dates__link:hover { color: var(--tder-accent); text-decoration: underline; }
.tder-all-dates__list li.is-selected {
	border-left-color: var(--tder-accent);
	background: color-mix(in srgb, var(--tder-accent) 14%, transparent);
	font-weight: 600;
}
.tder-all-dates__list li.is-past.is-selected { opacity: .85; }
.tder-all-dates__flag {
	margin-left: .5em;
	font-size: .68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tder-accent);
}
.tder-all-dates__flag--now {
	background: var(--tder-accent);
	color: var(--tder-accent-contrast);
	border-radius: 999px;
	padding: .25em .6em;
	white-space: nowrap;
}
.tder-all-dates__cal { margin-left: .6em; font-size: .82em; white-space: nowrap; }
.tder-all-dates__list .tder-all-dates__calbtn {
	color: var(--tder-muted);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.tder-all-dates__list .tder-all-dates__calbtn:hover { color: var(--tder-accent); }
.tder-all-dates__calbtn + .tder-all-dates__calbtn { margin-left: .5em; }
.tder-single-details__seriesnote {
	display: block;
	font-size: .88em;
	font-weight: 400;
	color: var(--tder-muted);
	margin-top: .15em;
}
.tder-single-details__datenote {
	background: color-mix(in srgb, var(--tder-accent) 8%, transparent);
	border: 1px solid var(--tder-line);
	color: var(--tder-muted);
	padding: .6em .9em;
	border-radius: 8px;
	font-weight: 600;
}

.tder-single-cta { margin: 1.4em 0 0; }
/* On phones a half-width action button reads as secondary — go full bleed. */
@media (max-width: 560px) {
	.tder-single-cta .tder-btn { display: flex; width: 100%; justify-content: center; }
}

/* ---------- Single: back to the events archive ----------
   Mirrors The Events Calendar's "« All Events": above the details block, and
   repeated after the description so a long event page doesn't dead-end.
   Top = quiet breadcrumb (tried right-aligned: it floats, disconnected from the
   reading flow); bottom = pill button, a deliberate action affordance. */
.tder-backlink { margin: 0 0 1.25em; }
.tder-backlink--top { margin: 0 0 1.75em; }
/* Doubled class outranks the pill rules below (same file, later source order). */
.tder-backlink--top.tder-backlink--top .tder-backlink__link {
	border: 0;
	padding: .3em .1em;
	background: transparent;
	font-size: .85em;
	font-weight: 500;
	color: var(--tder-muted);
}
.tder-backlink--top.tder-backlink--top .tder-backlink__link:hover {
	background: transparent;
	border: 0;
	color: var(--tder-accent);
}
.tder-backlink--bottom {
	margin: 2em 0 0;
	padding-top: 1.25em;
	border-top: 1px solid var(--tder-line);
}
.tder-backlink .tder-backlink__link {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .5em .95em;
	border: 1px solid var(--tder-line);
	border-radius: 999px;
	background: var(--tder-surface);
	color: var(--tder-accent);
	font-weight: 700;
	font-size: .95em;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease;
}
.tder-backlink .tder-backlink__link:hover {
	border-color: var(--tder-accent);
	background: color-mix(in srgb, var(--tder-accent) 7%, transparent);
	color: var(--tder-accent);
}
.tder-backlink .tder-backlink__link:focus-visible { outline: 2px solid var(--tder-accent); outline-offset: 2px; }
.tder-backlink .dashicons { font-size: 1.05em; width: 1.05em; height: 1.05em; }
@media (prefers-reduced-motion: reduce) { .tder-backlink .tder-backlink__link { transition: none; } }

.tder-single-addcal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
	margin: 1.75em 0 0;
	padding-top: 1.25em;
	border-top: 1px solid var(--tder-line);
}
.tder-single-addcal__label { font-weight: 600; color: var(--tder-muted); }

.tder-btn {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .55em .95em;
	border-radius: 8px;
	font-weight: 700;
	font-size: .95em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
}
.tder-btn .dashicons { font-size: 1.1em; width: 1.1em; height: 1.1em; }
.tder-btn--primary { background: var(--tder-accent); color: var(--tder-accent-contrast); }
.tder-btn--primary:hover { filter: brightness(.94); color: var(--tder-accent-contrast); }
/* The single-event action button — obvious because it's the page's only filled
   element, not because it shouts. */
.tder-btn--lg { padding: .65em 1.3em; font-size: 1em; font-weight: 600; border-radius: 8px; }
.tder-btn--ghost { background: transparent; color: var(--tder-accent); border-color: var(--tder-line); }
.tder-btn--ghost:hover { border-color: var(--tder-accent); }

.tder-empty { color: var(--tder-muted); font-style: italic; padding: 1.5em 0; }

@media (prefers-reduced-motion: reduce) {
	.tder-event-card { transition: none; }
	.tder-event-card:hover { transform: none; }
}

/* ---------- Screen-reader-only ---------- */
.tder-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---------- Calendar ---------- */
.tder-calendar {
	/* No token re-declaration here. It used to repeat accent/line/muted, which meant a site
	   overriding one component selector got a calendar that stayed the old colour — a
	   second place to miss, and it read as a caching bug. Tokens live on :root now. */
	font-size: 1em; /* anchor: children scale from the theme's content text size */
}
/* Header: prev hugs left, next hugs right, month label + Today centered between. */
.tder-cal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	margin-bottom: .75em;
}
.tder-cal__heading { display: flex; align-items: center; gap: .6em; }
.tder-cal__title { margin: 0; font-size: 1.5em; text-align: center; line-height: 1.1; }
/* A theme rule that styles every `button` with !important (Additional CSS on many Elementor
   sites) repaints the calendar's buttons, the search × and "Clear search". Outranking it takes
   !important, which would also shut out every site's ordinary overrides of these controls, so
   the fix is the site's: README → "Theme button styles". That snippet restates the values
   below; tests/test-frontend-css.php fails if the two drift apart. */
.tder-cal__nav {
	flex: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em; height: 2em;
	padding: 0;
	border: 1px solid var(--tder-line);
	background: #fff;
	border-radius: 7px;
	font-size: 1.05em;
	line-height: 1;
	cursor: pointer;
	color: var(--tder-accent);
}
.tder-cal__nav:hover { background: var(--tder-accent); color: var(--tder-accent-contrast); border-color: var(--tder-accent); }
.tder-cal__today {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: .3em .6em;
	border: 1px solid var(--tder-line);
	background: #fff;
	border-radius: 6px;
	font-size: .72em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	color: var(--tder-accent);
}
.tder-cal__today:hover { background: var(--tder-accent); color: var(--tder-accent-contrast); border-color: var(--tder-accent); }
.tder-cal__loading { text-align: center; color: var(--tder-muted); padding: 2em 0; }

/* Defensive resets so the host theme's table/link styles can't break the grid. */
.tder-cal__table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0; border: 1px solid var(--tder-line); }
.tder-cal__table tr, .tder-cal__table td, .tder-cal__table th { background: none; }
.tder-cal__table th {
	padding: .5em .25em;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tder-muted);
	border-bottom: 2px solid var(--tder-line);
	text-align: center;
}
.tder-cal__day {
	vertical-align: top !important;
	width: 14.285%;
	border: 1px solid var(--tder-line);
	padding: 0;
	box-sizing: border-box;
}
/* A floor, not a fixed height. Every day box still starts the same size, and a row still
   lines up (a table row is as tall as its tallest cell), but a busy day now grows its week to
   fit three labels and the "+N more" line. The fixed 7em this replaced clipped both. */
.tder-cal__cell {
	min-height: 7em;
	box-sizing: border-box;
	padding: .35em;
	overflow: hidden;
}
.tder-cal__day.is-outside { background: #fafafa; }
.tder-cal__day.is-outside .tder-cal__num { color: #b8bfc9; }
.tder-cal__day.is-today { outline: 2px solid var(--tder-accent); outline-offset: -2px; }
.tder-cal__num { display: block; font-size: 1em; font-weight: 700; color: var(--tder-muted); margin: 0 0 .3em; }
.tder-cal__events { display: block; margin: 0; padding: 0; list-style: none; }
.tder-cal__events li { margin: 0 0 3px; padding: 0; list-style: none; }
.tder-cal__event {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 100%;
	box-sizing: border-box;
	font-size: .56em;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.012em;
	/* The vertical inset is a transparent border, not padding. The clamp hides lines past the
	   second by clipping at the padding edge, so .3em of bottom padding was room for the top of
	   a third line to show. A border sits outside that edge and the background still paints
	   beneath it, so the label looks the same and shows whole lines only. */
	padding: 0 .5em;
	border: solid transparent;
	border-width: .3em 0;
	border-radius: 4px;
	background: color-mix(in srgb, var(--tder-accent) 12%, transparent);
	color: var(--tder-accent);
	text-decoration: none;
	box-shadow: none !important;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
}
.tder-cal__event:hover { background: var(--tder-accent); color: var(--tder-accent-contrast); }
/* Distinguish featured without bold — a slightly deeper fill. */
.tder-cal__event.is-featured { background: color-mix(in srgb, var(--tder-accent) 24%, transparent); }
.tder-cal__more { font-size: .82em; color: var(--tder-muted); padding: 0 4px; }
/* Forced colours (Windows High Contrast) paint every border in a system colour, transparent
   ones included, which would rule a line above and below each label. Canvas keeps the inset
   as invisible as the padding was. */
@media (forced-colors: active) {
	.tder-cal__event { border-color: Canvas; }
}

@media (max-width: 640px) {
	.tder-cal__cell { min-height: 5.5em; }
	.tder-cal__event { font-size: .52em; }
}
/* Day-number link inside calendar cells (Day-view jump) inherits the number styling. */
.tder-cal__numlink { color: inherit; text-decoration: none; }
.tder-cal__numlink:hover { color: var(--tder-accent); text-decoration: underline; }

/* ---------- Snappy archive: AJAX body + loading state ---------- */
.tder-archive__body { position: relative; min-height: 4em; transition: opacity .12s ease; }
/* The results region is a programmatic focus target (tabindex="-1"), not a control: focus
   moves there after each AJAX swap so keyboard and screen-reader users stay oriented. The
   UA focus ring then draws a box around the ENTIRE list, which looks like a rendering fault
   to everyone who navigated by mouse. Suppress the ring only — focus still moves, and the
   polite status node still announces the new result count.
   Both selectors carry the data attribute purely for specificity (0,3,0) — plenty of themes
   style focus rings broadly, and this has to win. box-shadow too: some themes ring with that
   instead of outline. */
.tder-archive__body[data-tder-archive-body]:focus,
.tder-archive__body[data-tder-archive-body]:focus-visible { outline: none; box-shadow: none; }
.tder-archive__body.is-loading { opacity: .45; pointer-events: none; }
.tder-archive__body.is-loading::after {
	content: "";
	position: absolute;
	top: 1.5em; left: 50%;
	width: 1.6em; height: 1.6em;
	margin-left: -.8em;
	border-radius: 50%;
	border: 2px solid var(--tder-line);
	border-top-color: var(--tder-accent);
	animation: tder-spin .7s linear infinite;
}
@keyframes tder-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tder-archive__body.is-loading::after { animation: none; } }

/* Empty state */
.tder-empty-state { text-align: center; padding: 2.5em 1em; color: var(--tder-muted); }
.tder-empty-state__msg { font-size: 1.1em; margin: 0 0 1em; }

/* Search results (matches across all time; past clearly separated) */
.tder-search-results__past {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--tder-muted);
	margin: 2.25em 0 .25em;
	padding-top: 1.25em;
	border-top: 1px solid var(--tder-line);
}
/* Past event rows — best practice: de-emphasise (muted/grayscale) AND label ("Ended").
   Per-row (data-driven), so it's correct in the Past tab, search results, anywhere. */
.tder-event-row.is-past-row .tder-event-row__title a { color: var(--tder-muted); }
.tder-event-row.is-past-row .tder-event-row__title a:hover { color: var(--tder-ink); }
/* Muted but still WCAG AA (≥4.5:1): #6b7280 on white, #5a6472 on the #eef0f3 chip. */
.tder-event-row.is-past-row .tder-event-row__when,
.tder-event-row.is-past-row .tder-event-row__venue { color: #6b7280; }
.tder-event-row.is-past-row .tder-date-badge { background: #eef0f3; color: #5a6472; }
.tder-event-row__status {
	flex: none;
	align-self: center;
	margin-left: auto;
	font-size: .68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #5a6472;
	background: #eef0f3;
	border: 1px solid #e0e3e8;
	padding: .32em .7em;
	border-radius: 999px;
	white-space: nowrap;
}
/* Keep the (non-color) "Ended" signal visible on mobile — just shrink it, don't hide it. */
@media (max-width: 480px) { .tder-event-row__status { font-size: .6em; padding: .28em .55em; } }

/* ---------- Archive: search + view switcher + dated-view nav ---------- */
.tder-archive__search { display: flex; align-items: center; margin: 0; }
.tder-archive__search-field { position: relative; display: inline-flex; align-items: center; }
.tder-archive__search-icon {
	position: absolute; left: .6em;
	color: var(--tder-muted);
	font-size: 1.05em; width: 1.05em; height: 1.05em;
	pointer-events: none;
}
.tder-archive__search input[type="search"] {
	box-sizing: border-box;
	width: 15em;
	max-width: 100%;
	padding: .55em 2em .55em 2.2em;
	border: 1px solid var(--tder-line);
	border-radius: 999px;
	font-size: .95em;
	line-height: 1.3;
	background: var(--tder-surface);
	-webkit-appearance: none;
	appearance: none;
}
.tder-archive__search input[type="search"]::-webkit-search-cancel-button { display: none; }
.tder-archive__search input[type="search"]:focus {
	outline: none;
	border-color: var(--tder-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tder-accent) 18%, transparent);
}
.tder-archive__search-clear {
	position: absolute; right: .35em;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.5em; height: 1.5em;
	padding: 0; border: 0;
	background: transparent; color: var(--tder-muted);
	font-size: 1.1em; line-height: 1; cursor: pointer; border-radius: 50%;
}
.tder-archive__search-clear:hover { background: var(--tder-line); color: var(--tder-ink); }
/* Hidden while the box is empty: the server prints [hidden] for a blank search and archive.js
   toggles it as you type. The display rule above outranks the browser's own [hidden] rule, so
   the × used to show on an empty box. !important also holds it against a theme's
   `button { display: … !important }`. */
.tder-archive__search-clear[hidden] { display: none !important; }

/* Segmented view switcher */
.tder-archive__views {
	display: inline-flex;
	gap: 2px;
	background: color-mix(in srgb, var(--tder-line) 45%, transparent);
	padding: 3px;
	border-radius: 999px;
	/* Pin to the right edge of the content width, with or without a heading and with or
	   without the search box (which is optional via Settings → Display). */
	margin-left: auto;
}
@media (max-width: 640px) {
	/* Once the tools stack, a lone right-aligned switcher under a left-aligned search
	   reads as a misalignment rather than a deliberate edge. */
	.tder-archive__views { margin-left: 0; }
}
.tder-archive__views a {
	padding: .42em 1em;
	border-radius: 999px;
	text-decoration: none;
	color: var(--tder-muted);
	font-weight: 600;
	font-size: .95em;
	line-height: 1.3;
	transition: background .12s ease, color .12s ease;
}
.tder-archive__views a:hover { color: var(--tder-ink); }
.tder-archive__views a.is-active { background: var(--tder-accent); color: var(--tder-accent-contrast); box-shadow: 0 1px 2px rgba(16,24,40,.12); }

/* Search results bar (count + clear) + clearly separated past matches */
.tder-search-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1em; margin: .25em 0 1.5em; }
.tder-search-results__count { margin: 0; color: var(--tder-muted); }
.tder-archive__clear {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	border: 1px solid var(--tder-line);
	background: var(--tder-surface);
	cursor: pointer;
	color: var(--tder-muted);
	font-weight: 600;
	font-size: .85em;
	line-height: 1;
	padding: .5em .9em;
	border-radius: 999px;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tder-archive__clear:hover { border-color: var(--tder-accent); color: var(--tder-accent); background: color-mix(in srgb, var(--tder-accent) 6%, transparent); }
.tder-archive__clear-x { font-size: 1.25em; line-height: 0; }

/* Genesis entry wrapper for the archive — strip article chrome, keep the content inset. */
.tder-archive-entry { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; }

.tder-view-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 1.25em 0;
}
.tder-view-nav__label { font-weight: 700; font-size: 1.1em; text-align: center; flex: 1 1 auto; }
@media (max-width: 560px) {
	.tder-view-nav__label { font-size: 1em; }
	.tder-view-nav .tder-btn { padding: .45em .6em; }
}

/* ---------- Summary / agenda view ---------- */
.tder-summary { margin: 1.25em 0; }
.tder-summary__group + .tder-summary__group { margin-top: 1.5em; }
.tder-summary__date {
	margin: 0 0 .25em;
	font-size: 1.1em;
	color: var(--tder-accent);
	border-bottom: 2px solid var(--tder-line);
	padding-bottom: .2em;
}
.tder-summary .tder-events-list { margin: 0; border-top: 0; }

.tder-view-notice {
	background: color-mix(in srgb, var(--tder-accent) 8%, transparent);
	border: 1px solid var(--tder-line);
	border-radius: 8px;
	padding: .7em 1em;
	color: var(--tder-muted);
	margin: 1em 0;
}

/* ---------- Single: embedded venue map ---------- */
.tder-venue-map {
	margin: 1em 0 0;
	border: 1px solid var(--tder-line);
	border-radius: var(--tder-radius);
	overflow: hidden;
	line-height: 0;
}
.tder-venue-map__frame { display: block; width: 100%; height: 320px; border: 0; }
@media (max-width: 560px) { .tder-venue-map__frame { height: 240px; } }

/* ---------- Single: related events ---------- */
.tder-related {
	margin: 2em 0 0;
	padding-top: 1.5em;
	border-top: 1px solid var(--tder-line);
}
.tder-related__title { margin: 0 0 .5em; font-size: 1.3em; }
.tder-related .tder-events-list { margin-top: .5em; }

/* ---------- Archive subscribe footer ---------- */
.tder-archive__subscribe {
	margin: 1.5em 0 0;
	padding-top: 1em;
	border-top: 1px solid var(--tder-line);
	font-size: 0.9em;
	color: var(--tder-muted);
}
.tder-archive__subscribe .dashicons {
	font-size: 1.1em;
	width: 1.1em;
	height: 1.1em;
	vertical-align: text-bottom;
}
.tder-archive__subscribe a { color: var(--tder-accent); text-decoration: none; }
.tder-archive__subscribe a:hover { text-decoration: underline; }
.tder-archive__subscribe-sep { margin: 0 0.35em; }

/* ---------- Event status: canceled / postponed / rescheduled / moved online ----------
   A scheduled event carries no status class, so none of this touches it. Last in the file on
   purpose: these are states, and they must beat the featured and past rules above.

   One label skin wherever a status shows, built from the tokens only. Canceled is an ink
   stamp — outlined, no fill, so it reads on any page ground and nothing in the brand colour
   makes it look like a promotion. The other three take the accent wash the date badge uses.

   Canceled and postponed also stand their entry down, because the date they list is not
   happening: the date badge mutes (featured treatment is already dropped in PHP), and a
   canceled title is struck through. The strike is for the eye only — screen readers get the
   label as text inside each link. */

/* The skin: colours only, so it layers onto whichever shape the component gives it. A list
   row reuses the "Ended" chip's shape (.tder-event-row__status), phone sizing included. */
.tder-status {
	border: 1px solid color-mix(in srgb, var(--tder-accent) 35%, var(--tder-line));
	background: var(--tder-accent-soft);
	color: var(--tder-accent);
}
.tder-status--canceled {
	border-color: currentColor;
	background: transparent;
	color: var(--tder-ink);
}
.tder-status--postponed {
	border-color: var(--tder-line);
	background: color-mix(in srgb, var(--tder-line) 55%, transparent);
	color: var(--tder-ink);
}

/* The pill shape everywhere a status shows outside a list row. */
.tder-event-card__status,
.tder-single-status__label,
.tder-single-event__status,
.tder-countdown__status .tder-status {
	display: inline-flex;
	align-items: center;
	font-size: .68em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: .32em .7em;
	border-radius: 999px;
}
.tder-event-card__status { align-self: flex-start; } /* a flex child of the card body — don't stretch */
.tder-single-event__status { margin: 0 0 .5em; }

/* Rows and cards whose date is off. */
.tder-event-row.is-status-canceled .tder-date-badge,
.tder-event-row.is-status-postponed .tder-date-badge,
.tder-event-card.is-status-canceled .tder-date-badge,
.tder-event-card.is-status-postponed .tder-date-badge {
	background: color-mix(in srgb, var(--tder-line) 60%, transparent);
	color: var(--tder-muted);
}
.tder-event-row.is-status-canceled .tder-event-row__title a,
.tder-event-card.is-status-canceled .tder-event-card__title a,
.tder-single-event.is-status-canceled .tder-single-event__title a {
	color: var(--tder-muted);
	text-decoration: line-through;
}
.tder-event-row.is-status-canceled .tder-event-row__title a:hover,
.tder-event-card.is-status-canceled .tder-event-card__title a:hover,
.tder-single-event.is-status-canceled .tder-single-event__title a:hover { color: var(--tder-ink); }

/* Single event: the banner under the back link, and the struck date on a canceled event. */
.tder-single-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin: 0 0 1.5em;
	padding: .8em 1em;
	border: 1px solid var(--tder-line);
	border-left: 4px solid var(--tder-accent);
	border-radius: 8px;
	background: var(--tder-accent-soft);
}
.tder-single-status--canceled,
.tder-single-status--postponed {
	border-left-color: var(--tder-ink);
	background: color-mix(in srgb, var(--tder-line) 35%, transparent);
}
.tder-single-status__note { margin: 0; color: var(--tder-ink); font-weight: 600; }
.tder-single-details.is-status-canceled .tder-meta-list__item--when .tder-meta-list__value {
	color: var(--tder-muted);
	text-decoration: line-through;
}

/* Month grid: the label leads the pill in words, and canceled or postponed stand down to a
   neutral pill so a date that is off never reads like one that is on. Two classes deep so a
   site's own pill colours (companion CSS on .tder-cal__events .tder-cal__event) don't outrank
   the state. */
.tder-cal__status { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tder-cal__events .tder-cal__event.is-status-canceled,
.tder-cal__events .tder-cal__event.is-status-postponed {
	background: color-mix(in srgb, var(--tder-line) 55%, transparent);
	color: var(--tder-muted);
}
.tder-cal__events .tder-cal__event.is-status-canceled:hover,
.tder-cal__events .tder-cal__event.is-status-postponed:hover {
	background: var(--tder-accent);
	color: var(--tder-accent-contrast);
}
.tder-cal__event.is-status-canceled .tder-cal__name { text-decoration: line-through; }

/* Countdown block: no timer for a date that is off — the label stands in its place. */
.tder-countdown__status { margin: .5em 0 0; }
.tder-countdown.is-status-canceled .tder-countdown__date { text-decoration: line-through; }