/*
 * Styling for API-rendered events and insights.
 *
 * Everything here reads from the theme's own custom properties, with the
 * current values as fallbacks. Retune the theme and this follows; drop this
 * plugin into a different theme and it degrades to sane defaults rather than
 * to the wrong brand colour.
 *
 * Specificity is kept to a single class throughout so the theme can override
 * any of it without resorting to !important.
 *
 * Note on the green: the theme documents --color-primary (#7CB342) as a fill
 * colour only -- it measures 2.50:1 on white, which fails WCAG AA for text.
 * --color-primary-on-light (#4A7326) is the same hue darkened to pass. Text
 * and icons here use the latter; fills use the former with dark text on top.
 */

.ecc-hero,
.ecc-section,
.ecc-events,
.ecc-insights,
.ecc-event-single,
.ecc-insight-single,
.ecc-comments,
.ecc-form,
.ecc-editor,
.ecc-account,
.ecc-eventform,
.ecc-recorded,
.ecc-recorded-hero {
	--ecc-surface: var(--color-surface, #ffffff);
	--ecc-ink: var(--color-text-main, #111111);
	--ecc-muted: var(--color-text-muted, #5A5A54);
	/* Body prose in an article. Darker than --ecc-muted; see the note on the
	   single-item body rule. */
	--ecc-prose: #2A2A26;
	--ecc-accent: var(--color-primary-on-light, #4A7326);
	--ecc-fill: var(--color-primary, #7CB342);
	--ecc-fill-ink: var(--color-dark-teal, #0A1312);
	--ecc-soft: #E6F4EA;
	--ecc-line: rgba(10, 19, 18, 0.10);
	/* Stronger than --ecc-line. These cards sit inside the theme's own white
	   page panel, so a hairline at 8% simply disappears and the grid reads as
	   loose text rather than as objects. */
	--ecc-card-line: rgba(17, 17, 17, 0.07);
	/* 24px and 40px are what .webinar-next and the course cards use. At 16/24
	   these read as a denser, tighter component from somewhere else. */
	--ecc-radius: 24px;
	/* 6.4:1 on white, so it passes AA as text rather than only as a border. */
	--ecc-danger: #B3261E;

	color: var(--ecc-muted);
}


/* --- page furniture -------------------------------------------------------
 * Values taken from archive-webinar.php's hero and sections, so an events page
 * and a webinars page are recognisably the same site. The theme's page.php is
 * a 900px centred white panel -- its fallback for a plain text page -- and
 * every designed page on the site avoids it. These pages do too, via
 * page-events.php and page-insights.php.
 */

.ecc-hero {
	background-color: var(--color-dark-teal, #0A1312);
	padding: 80px 0 72px;
}

.ecc-hero__inner {
	max-width: 780px;
}

.ecc-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.ecc-hero__back::before {
	content: "\2190";
}

.ecc-hero__back:hover {
	color: #fff;
}

.ecc-hero .ecc-hero__title {
	margin: 0 0 24px;
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1.5px;
	color: #fff;
}

.ecc-hero .ecc-hero__lead {
	margin: 0 0 16px;
	font-size: 19px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
}

/* Meta on the dark band. Nothing here inherits the light-surface palette, so
   the accent green would be 2.1:1 and is replaced by the brand lime, which is
   6.9:1 on this background. */
.ecc-hero .ecc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 20px 0 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
}

.ecc-hero .ecc-hero__meta .ecc-byline__author,
.ecc-hero .ecc-hero__meta .ecc-byline__date {
	color: rgba(255, 255, 255, 0.72);
}

.ecc-hero .ecc-hero__meta .ecc-byline__author {
	font-weight: 600;
	color: #fff;
}

.ecc-hero .ecc-icon {
	color: var(--color-primary, #7CB342);
}

/* On the hero, the site's lime with a dark tick, as its other icons are. */
.ecc-hero .ecc-verified {
	--ecc-verified-tick: var(--color-dark-teal, #0A1312);
	color: var(--color-primary, #7CB342);
}

.ecc-section {
	padding: 72px 0;
	background: var(--color-background, #F4F0E6);
}

/* Long-form goes on a white surface, as it does everywhere else on the site.
   Prose directly on the cream page background reads as an unfinished section
   rather than as an article. */
.ecc-section--light {
	background: var(--color-surface, #ffffff);
}

/* The community feed has no hero above it, so it needs less air under the
   header than a section that follows one. */
.ecc-section--feed {
	padding-top: 40px;
}

@media (max-width: 767px) {
	.ecc-section--feed {
		padding-top: 20px;
	}
}

/* The page wrapper has no background of its own, so the band below the last
   section would otherwise be the browser's white. */
.ecc-page {
	background: var(--color-background, #F4F0E6);
}

/* Why :is(...) prefixes so many rules below
 * -----------------------------------------
 * The theme styles .entry-content p at 18px in the main ink colour, which
 * scores 0,1,1. Most components here are paragraphs, and a bare class scores
 * 0,1,0 -- so every byline, excerpt, badge row and date rail was being
 * repainted to full black at body size, which is exactly the contrast a card
 * needs in order to have a hierarchy at all.
 *
 * :is() takes the specificity of its most specific argument, so this scores
 * 0,2,0: enough to win, and not so much that the theme cannot override it in
 * turn with a rule of its own.
 *
 * --- lists ---------------------------------------------------------------
 * Cards, not bullets. A bulleted list of headlines reads as an afterthought
 * on a page that is otherwise made of cards.
 */

.ecc-events__list,
.ecc-insights__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

/* The theme's own .grid--3-col pattern, so a row of insights sits on the same
   rhythm as every other card grid on the site. auto-fill, not auto-fit: with
   auto-fit the empty tracks collapse, so one or two published pieces were
   stretched across the whole row and the index read as a list of banners.
   A card keeps its width however few there are, and a sort that narrows the
   index to one card does not change how that card looks.

   360px rather than the theme's 320px, which is the one deliberate deviation:
   320 fits four columns in a 1400px container and a 23px title then wraps onto
   three lines in every card. 360 fits three, at about 437px each, which is a
   sensible measure for a heading and a two-line standfirst. min() so a phone
   narrower than 360px plus its gutters gets one full-width column rather than
   a card that runs off the screen. */
.ecc-insights__list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: 24px;
}

.ecc-events__list {
	gap: 24px;
}

.ecc-card {
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-card-line);
	border-radius: var(--ecc-radius);
	padding: 32px;
	height: 100%;
	box-sizing: border-box;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

	/* A column, so the stats row can be pushed to the bottom edge. Without it
	   two cards of different text lengths put their footers at different
	   heights and the row looks misaligned rather than varied. */
	display: flex;
	flex-direction: column;
}

.ecc-card:hover {
	transform: translateY(-4px);
	border-color: rgba(124, 179, 66, 0.35);
	box-shadow: 0 2px 4px rgba(10, 19, 18, 0.05), 0 18px 34px rgba(10, 19, 18, 0.09);
}

/* Someone navigating by keyboard gets the same affordance as a mouse, and the
   ring lands on the card rather than on a link outline inside it. */
.ecc-card:focus-within {
	border-color: var(--ecc-fill);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.28);
}

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

/* --- titles --------------------------------------------------------------
 * A card title is a heading that happens to be clickable. Underlined green
 * link text makes a grid of cards look like a directory listing.
 */

.ecc-event__title,
.ecc-insight__title {
	margin: 0 0 12px;
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	font-weight: 800;
}

/* Three classes deliberately. The theme sets .entry-content
   a:not(.wp-block-button__link) to underlined green, which is correct for a
   link inside a sentence and wrong for a card title -- a grid of underlined
   green headings reads as a directory listing. That selector scores 0,2,1, so
   anything less than this loses, and losing quietly depends on enqueue order. */
.ecc-events .ecc-event__card .ecc-event__title a,
.ecc-insights .ecc-insight__card .ecc-insight__title a {
	color: var(--ecc-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--ecc-accent), var(--ecc-accent));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.25s ease, color 0.2s ease;
}

.ecc-events .ecc-event__card .ecc-event__title a:hover,
.ecc-events .ecc-event__card .ecc-event__title a:focus-visible,
.ecc-insights .ecc-insight__card .ecc-insight__title a:hover,
.ecc-insights .ecc-insight__card .ecc-insight__title a:focus-visible {
	color: var(--ecc-accent);
	background-size: 100% 2px;
}

/* --- byline and meta ---------------------------------------------------- */

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-byline,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__meta,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ecc-muted);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-byline__author {
	font-weight: 600;
	color: var(--ecc-ink);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-byline__date,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__meta time {
	color: var(--ecc-muted);
}

.ecc-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* A label and a date wrap as words, not squeeze into columns. */
	flex-wrap: wrap;
	row-gap: 2px;
}

/* --- icons --------------------------------------------------------------- */

.ecc-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	vertical-align: -3px;
}

/* The tick belongs to the name, not to the row: wrapped together so the
 * byline's wider gap only separates the name from the date. */

.ecc-byline__who {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* --- the verified tick ---------------------------------------------------
 * A filled disc, so it reads as a credential rather than as a stray tick
 * sitting between the author's name and the date.
 */

/* The disc and tick are one SVG (ECC_UI::verified_mark), in the accent
   green: white on the lime fill measures 2.5:1, on this green 5.2:1. Never
   squeezed by the name beside it. */
.ecc-verified {
	display: inline-flex;
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--ecc-accent, #4A7326);
	vertical-align: -0.2em;
}

.ecc-verified__mark {
	display: block;
	width: 100%;
	height: 100%;
}

.ecc-verified__mark path {
	stroke: var(--ecc-verified-tick, #ffffff);
}

/* --- excerpts ------------------------------------------------------------
 * Clamped, so one long excerpt cannot make its card twice the height of the
 * one beside it and pull the grid out of alignment.
 */

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__excerpt,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-insight__excerpt {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ecc-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- stats --------------------------------------------------------------- */

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ecc-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--ecc-muted);
}

.ecc-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ecc-stat--score .ecc-icon {
	color: var(--ecc-accent);
}

/* --- badges --------------------------------------------------------------
 * Matches the theme's .badge-pill, so an API badge and a theme badge on the
 * same page are the same object.
 */

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__status,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event-single__status {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__excerpt {
	margin-bottom: 14px;
}

.ecc-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 30px;
	background: var(--color-pill-bg, #EFEBE0);
	color: var(--ecc-ink);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
}

.ecc-badge--free {
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

/* Fully booked is the one badge that has to stop someone, so it is the one
   badge that is not beige. */
.ecc-badge--full {
	background: #FBE9E7;
	color: #A0341F;
}

/* --- the date block on an event card ------------------------------------- */

/* A row, against the column .ecc-card sets. The date rail belongs beside the
   event, not stacked above it. */
.ecc-event__card {
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-datemark {
	flex: 0 0 auto;
	width: 62px;
	margin: 0;
	padding: 10px 0;
	border-radius: 12px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	text-align: center;
	line-height: 1.1;
}

/* A date that has gone by stops competing with the ones still to come. Same
   rule as .ecc-sessions__item--past: past once it has started. */
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-datemark--past {
	background: #EEEEEC;
	color: var(--ecc-muted);
}

.ecc-datemark__day {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ecc-datemark__month {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ecc-event__main {
	min-width: 0; /* lets long titles wrap instead of stretching the flex row */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* The badges sit on the bottom edge, so a row of cards lines up however long
   each excerpt happens to be. */
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event__status {
	margin-top: auto;
	padding-top: 4px;
}

/* Events stay one per row, unlike insights. The date rail plus a title in half
   a container wraps every heading onto three lines; full width lets the date,
   the title and the badges each sit on one, which is what makes a dated list
   scannable in the first place. */

/* --- filters -------------------------------------------------------------- */

.ecc-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin: 0 0 28px;
	padding: 18px 20px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
}

.ecc-filters__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 150px;
	flex: 1 1 150px;
}

.ecc-filters__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ecc-muted);
}

.ecc-filters select,
.ecc-filters input[type="text"],
.ecc-filters input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
	background: var(--ecc-surface);
	color: var(--ecc-ink);
	font: inherit;
	/* 16px, not 15: iOS Safari zooms the whole page into any field smaller
	   than that when it is tapped, and leaves it zoomed afterwards. */
	font-size: 16px;
}

.ecc-filters select:focus,
.ecc-filters input[type="text"]:focus,
.ecc-filters input[type="date"]:focus {
	outline: none;
	border-color: var(--ecc-fill);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.25);
}

.ecc-filters__toggle {
	font-size: 14px;
	font-weight: 600;
	color: var(--ecc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-bottom: 12px;
}

/* All / Upcoming / Past. A fieldset of radios drawn as one segmented
   control, the height of the fields beside it. */
.ecc-filters__when {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ecc-filters__when > .ecc-filters__label {
	padding: 0;
	margin: 0 0 6px;
}

.ecc-segmented {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
	background: var(--ecc-surface);
}

.ecc-segmented__option {
	position: relative;
	cursor: pointer;
}

/* Hidden but still focusable and announced; the span shows its state. */
.ecc-segmented__option input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ecc-segmented__option span {
	display: block;
	padding: 8px 14px;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ecc-muted);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecc-segmented__option:hover span {
	color: var(--ecc-ink);
}

.ecc-segmented__option input:checked + span {
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
}

.ecc-segmented__option input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.ecc-segmented__option span {
		transition: none;
	}
}

/* Upcoming and past, when both are on the page. */
.ecc-events__group {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ecc-ink);
}

.ecc-events__list + .ecc-events__group {
	margin-top: 40px;
}

/* --- buttons -------------------------------------------------------------- */

.ecc-events .ecc-button,
.ecc-event-single .ecc-button,
.ecc-insight-single .ecc-button,
.ecc-button {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Dark text on the lime fill, matching the theme: white measures 2.50:1 on it
   and dark teal measures 7.54:1. */
.ecc-event-single .ecc-event-single__actions .ecc-button--primary,
.ecc-events .ecc-filters .ecc-button--primary,
.ecc-button--primary {
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
	text-decoration: none;
}

.ecc-button--primary:hover {
	background: var(--color-primary-hover, #6CA034);
	color: var(--ecc-fill-ink);
}

/* Three classes. .entry-content a:not(.wp-block-button__link) scores 0,2,1 and
   would otherwise repaint this button as an underlined green text link. */
.ecc-event-single .ecc-event-single__actions .ecc-button--ghost,
.ecc-events .ecc-filters .ecc-button--ghost,
.ecc-button--ghost {
	background: transparent;
	border-color: var(--color-pill-border, #D9D6CC);
	color: var(--ecc-ink);
	text-decoration: none;
}

.ecc-event-single .ecc-event-single__actions .ecc-button--ghost:hover,
.ecc-button--ghost:hover {
	border-color: var(--ecc-fill);
	color: var(--ecc-accent);
}

/* --- single pages --------------------------------------------------------
 * Constrained to a comfortable measure. Full-bleed body text across a 1400px
 * container is unreadable however good the typography is.
 */

/* Article geometry, taken from the theme's own long-form template.
 *
 * single-blog.php puts both its hero and its body inside .container--article
 * (1120px, centred) and left-aligns the text column within it, beside a 260px
 * table of contents. These pages have no table of contents, but they keep the
 * same container and the same left edge, so an insight and a blog post are
 * laid out on the same grid rather than one being full-width and the other
 * not. Without this the column pinned itself to the left of a 1400px
 * container and left roughly a third of the page empty.
 */
.ecc-hero--article .container,
.ecc-section--light .container {
	max-width: 1120px;
}

.ecc-article {
	/* 68ch is .blog-article__body's measure. */
	max-width: 68ch;
}

/* The heading and byline now live in the hero, so the header is only the badge
   row and needs none of the space a title block wanted. */
.ecc-article__header:empty {
	display: none;
}

.ecc-article__header {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-article__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--ecc-ink);
}

.ecc-event-single__body,
.ecc-insight-single__body {
	/* 18px on #2A2A26 is .blog-article__body. The muted grey used elsewhere in
	   these components is for metadata; running a whole article in it reads as
	   noticeably lighter than the rest of the site's prose. */
	font-size: 18px;
	line-height: 1.75;
	color: var(--ecc-prose, #2A2A26);
}

.ecc-event-single__body > :first-child,
.ecc-insight-single__body > :first-child {
	margin-top: 0;
}

.ecc-event-single__body h2,
.ecc-insight-single__body h2 {
	margin: 36px 0 12px;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: var(--ecc-ink);
}

.ecc-event-single__body h3,
.ecc-insight-single__body h3 {
	margin: 28px 0 10px;
	font-size: 19px;
	color: var(--ecc-ink);
}

.ecc-event-single__body ul,
.ecc-event-single__body ol,
.ecc-insight-single__body ul,
.ecc-insight-single__body ol {
	padding-left: 1.3em;
}

.ecc-event-single__body li,
.ecc-insight-single__body li {
	margin-bottom: 8px;
}

.ecc-insight-single__body blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--ecc-fill);
	font-size: 19px;
	line-height: 1.6;
	color: var(--ecc-ink);
}

.ecc-insight-single__body blockquote p {
	margin: 0;
}

.ecc-insight-single__body a {
	color: var(--ecc-accent);
	text-underline-offset: 2px;
}

.ecc-insight-single__body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.ecc-insight-single__body pre {
	padding: 16px;
	border-radius: 12px;
	background: var(--color-pill-bg, #EFEBE0);
	overflow-x: auto;
}

/* Tables, figures, rules and inline code.
 *
 * The sanitiser permits all of these, so an author can produce them, but no
 * seeded fixture did until there was a long one -- and these pages are not
 * inside .entry-content, so the theme's own rules for them never apply here.
 * Left alone they render as browser defaults in the middle of styled prose.
 *
 * Values are the theme's, from its second .entry-content table block (the one
 * that actually wins) and .wp-block-separator, so a table in an insight and a
 * table in a page look like the same site.
 */

/* A figure is the scroll container, the way .wp-block-table is in the theme:
   a wide table scrolls inside its own box rather than widening the page. */
.ecc-insight-single__body figure {
	margin: 32px 0;
	max-width: 100%;
	overflow-x: auto;
}

.ecc-insight-single__body figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ecc-muted);
}

.ecc-insight-single__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ecc-insight-single__body th,
.ecc-insight-single__body td {
	padding: 12px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	text-align: left;
}

.ecc-insight-single__body th {
	font-weight: 700;
	color: var(--ecc-ink);
	background: var(--color-pill-bg, #EFEBE0);
}

.ecc-insight-single__body hr {
	border: 0;
	border-top: 1px solid var(--color-pill-border, #D9D6CC);
	margin: 48px 0;
}

/* The theme sets inline code on --color-surface, which is white. These bodies
   sit on a white panel, so that would be an invisible chip; the pill beige is
   what pre already uses here. */
.ecc-insight-single__body code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--color-pill-bg, #EFEBE0);
	font-size: 0.9em;
}

/* Inside pre the block already carries the background and padding, so the
   chip would be drawn a second time on every line. */
.ecc-insight-single__body pre code {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
}

.ecc-article__footer {
	margin-top: 32px;
}

/* --- agenda --------------------------------------------------------------- */

.ecc-agenda {
	margin: 36px 0;
}

.ecc-agenda h2 {
	margin: 0 0 14px;
	font-size: 22px;
	color: var(--ecc-ink);
}

.ecc-agenda__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	overflow: hidden;
	background: var(--ecc-surface);
}

.ecc-agenda__item {
	display: flex;
	gap: 18px;
	align-items: baseline;
	padding: 14px 20px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-agenda__item:last-child {
	border-bottom: 0;
}

.ecc-agenda__time {
	flex: 0 0 62px;
	font-weight: 700;
	color: var(--ecc-accent);
}

.ecc-agenda__title {
	color: var(--ecc-ink);
}

/* --- a webinar's sessions, and an event's webinar ------------------------ */

/* The events announcing a webinar, on its page: the agenda's list, with a
   booking button on each row. */
.ecc-sessions {
	margin: 36px 0;
}

.ecc-sessions h2 {
	margin: 0 0 14px;
	font-size: 22px;
	color: var(--ecc-ink);
}

/* An event that is the release of a recording, not a session to attend. */
.ecc-badge--release {
	background: #EEF3FB;
	color: #2B4C7E;
}

.ecc-sessions__note {
	margin: 0 0 14px;
	color: var(--ecc-muted);
}

.ecc-sessions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	overflow: hidden;
	background: var(--ecc-surface);
}

.ecc-sessions__item {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-sessions__item:last-child {
	border-bottom: 0;
}

.ecc-sessions__when {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	row-gap: 2px;
	align-items: center;
	flex: 1 1 240px;
	font-weight: 700;
	color: var(--ecc-ink);
}

.ecc-sessions__item--past .ecc-sessions__when {
	color: var(--ecc-muted);
	font-weight: 400;
}

/* On an event page: the webinar it is a session of. */
.ecc-webinar-link {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0;
	padding: 16px 20px;
	border-radius: var(--ecc-radius);
	background: var(--ecc-soft);
}

.ecc-webinar-link__text {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	color: var(--ecc-ink);
}

/* --- actions and joining link -------------------------------------------- */

.ecc-event-single__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 28px 0;
	padding: 20px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
}

/* The notice after applying or withdrawing sits on its own line above the
   buttons. As a flex item beside them, its bottom margin lifted it off their
   centre line. Border-box, or the padding and border overflow the full-width
   basis. */
.ecc-event-single__actions .ecc-notice {
	flex: 1 0 100%;
	box-sizing: border-box;
	margin: 0;
}

/* The status line ("You will be notified...", "on the waiting list") also takes
   its own line, so the buttons sit together beneath it instead of one of
   them wrapping alone. */
.ecc-event-single__actions > :is(.ecc-attending, .ecc-signin-prompt) {
	flex: 1 0 100%;
}

/* --- event and webinar layout ---------------------------------------------
 * With something to apply to, or to be notified about, the page has two
 * columns: the event on the left, and a card on the right with the date, the
 * badges and the button, which stays in view while the description is read.
 * With nothing left to do (a past event without a recording) there is no
 * card, and the page takes the full width of the container instead of
 * leaving a third of it empty. Below 992px the card sits between the event
 * and its comments, where the button is found after reading about it.
 */
.ecc-event-single--wide .ecc-article {
	max-width: none;
}

.ecc-event-single--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas:
		"main     side"
		"comments side";
	column-gap: 56px;
	align-items: start;
}

.ecc-event-single--split > .ecc-article {
	grid-area: main;
	max-width: none;
}

.ecc-event-single--split > .ecc-event-single__side {
	grid-area: side;
	position: sticky;
	/* As the feed's sidebar: clear of the sticky header and the admin bar. */
	top: calc(118px + var(--wp-admin--admin-bar--height, 0px));
}

.ecc-event-single--split > .ecc-event-single__comments {
	grid-area: comments;
}

@media (max-width: 991px) {
	.ecc-event-single--split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"side"
			"comments";
	}

	.ecc-event-single--split > .ecc-event-single__side {
		position: static;
		margin-top: 8px;
	}
}

.ecc-event-card {
	padding: 22px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-line);
	border-radius: var(--ecc-radius);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.ecc-event-card__when {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ecc-ink);
}

.ecc-event-card__when svg {
	flex: none;
	margin-top: 2px;
}

.ecc-event-card .ecc-event-single__status {
	margin: 0 0 18px;
}

/* The card is the box: the actions inside it lose their own, and stack. */
.ecc-event-card .ecc-event-single__actions {
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.ecc-event-card .ecc-inline-form,
.ecc-event-card .ecc-event-single__actions .ecc-button,
.ecc-event-card .ecc-sessions .ecc-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.ecc-event-card .ecc-event-single__joining {
	margin: 16px 0 0;
	overflow-wrap: anywhere;
}

/* A webinar's sessions, in the card: one under another, each with its button
   under its date. */
.ecc-event-card .ecc-sessions {
	margin: 0;
}

.ecc-event-card .ecc-sessions h2 {
	margin: 0 0 10px;
	font-size: 17px;
}

.ecc-event-card .ecc-sessions__list {
	border: 0;
	border-radius: 0;
	background: none;
}

.ecc-event-card .ecc-sessions__item {
	padding: 14px 0;
}

.ecc-event-card .ecc-sessions__item:first-child {
	padding-top: 4px;
}

.ecc-event-card .ecc-sessions__item:last-child {
	padding-bottom: 0;
}

.ecc-event-card .ecc-sessions__when {
	flex-basis: 100%;
}

.ecc-event-card .ecc-sessions .ecc-signin-prompt {
	margin-top: 16px;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-attending,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-signin-prompt {
	margin: 0;
	font-size: 15px;
	color: var(--ecc-muted);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-signin-prompt a {
	color: var(--ecc-accent);
	font-weight: 600;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event-single__joining {
	margin: 0 0 28px;
	padding: 16px 20px;
	border-radius: var(--ecc-radius);
	background: var(--ecc-soft);
	color: var(--ecc-ink);
	font-size: 15px;
	word-break: break-word;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-event-single__joining a {
	color: var(--ecc-accent);
	font-weight: 600;
}

/* --- comments ------------------------------------------------------------- */

.ecc-comments {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--ecc-line);
}

.ecc-comments__heading {
	margin: 0 0 20px;
	font-size: 20px;
	color: var(--ecc-ink);
}

.ecc-comments__list,
.ecc-comments__replies {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.ecc-comments__replies {
	margin-top: 16px;
	padding-left: 20px;
	border-left: 2px solid var(--ecc-line);
}

.ecc-comment {
	padding: 16px 18px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-line);
	border-radius: 12px;
	/* "replying to" links jump here; keep the byline clear of a sticky header. */
	scroll-margin-top: 96px;
}

/* The reply a "replying to" link points at, briefly obvious. */
.ecc-comment:target {
	border-color: var(--ecc-accent);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-comment__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--ecc-muted);
}

.ecc-comment__author {
	font-weight: 600;
	color: var(--ecc-ink);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-comment__replyto a {
	color: var(--ecc-accent);
	font-weight: 600;
	text-decoration: none;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-comment__replyto a:hover,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-comment__replyto a:focus-visible {
	text-decoration: underline;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-comment__body {
	font-size: 15px;
	line-height: 1.6;
}

/* --- empty and error states ----------------------------------------------
 * Given real presence, because these are what a visitor sees on the day the
 * API is unwell, and an unstyled sentence on a blank page reads as broken.
 */

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-empty,
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-error {
	margin: 0;
	padding: 28px 24px;
	border-radius: var(--ecc-radius);
	background: var(--ecc-surface);
	border: 1px dashed var(--color-pill-border, #D9D6CC);
	text-align: center;
	color: var(--ecc-muted);
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-error {
	border-style: solid;
	border-color: #F0D5CE;
	background: #FDF4F2;
	color: #A0341F;
}

/* The way out of an empty state sits below the box, not pressed against it. */
:is(.ecc-empty, .ecc-error) + .ecc-actions {
	margin-top: 16px;
}

/* --- utilities ------------------------------------------------------------ */

.ecc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- narrow screens ------------------------------------------------------- */

@media (max-width: 600px) {
	.ecc-card {
		padding: 20px;
	}

	.ecc-event__card {
		gap: 14px;
	}

	:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-comments, .ecc-form, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-datemark {
		width: 52px;
		padding: 8px 0;
	}

	.ecc-datemark__day {
		font-size: 20px;
	}

	.ecc-filters {
		padding: 16px;
	}

	.ecc-event-single__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ecc-button {
		width: 100%;
		box-sizing: border-box;
	}
}


/* --- the write layer ------------------------------------------------------
 *
 * Forms, notices and the controls that post them. None of this existed while
 * these pages were read-only: there was no textarea rule, no field error, no
 * notice, and the only input styling was scoped to .ecc-filters.
 *
 * Note the three-class selectors on anything that is an <a>. The theme sets
 * .entry-content a:not(.wp-block-button__link) at (0,2,1) and this stylesheet
 * is printed before style.css, so a tie loses and links come out as green
 * underlined text. Buttons are unaffected -- the theme does not style them --
 * which is why the vote and save controls are <button> and get away with one
 * class.
 */

.ecc-form {
	margin: 24px 0 0;
}

.ecc-field {
	margin: 0 0 18px;
}

.ecc-field__label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--ecc-ink);
	margin-bottom: 7px;
}

.ecc-field__help {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ecc-muted);
	margin-top: 6px;
}

/* Mirrors the .ecc-filters controls, which were scoped to that class and so
   could not be reused. Same geometry, so a form and a filter bar look like the
   same site. */
.ecc-field input[type="text"],
.ecc-field input[type="email"],
.ecc-field input[type="url"],
.ecc-field input[type="number"],
.ecc-field input[type="datetime-local"],
.ecc-field input[type="file"],
.ecc-field select,
.ecc-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	/* 16px: iOS Safari zooms the page into any smaller field when tapped. */
	font-size: 16px;
	color: var(--ecc-ink);
	background: var(--ecc-surface);
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
}

.ecc-field textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

.ecc-field input:focus,
.ecc-field select:focus,
.ecc-field textarea:focus {
	outline: 3px solid var(--ecc-accent);
	outline-offset: 2px;
	border-color: var(--ecc-accent);
}

.ecc-field--error input,
.ecc-field--error textarea,
.ecc-field--error select {
	border-color: var(--ecc-danger);
}

.ecc-field-error {
	display: block;
	font-size: 13px;
	color: var(--ecc-danger);
	margin-top: 6px;
}

.ecc-form-errors {
	background: #FCEEEA;
	border: 1px solid #E9C3B8;
	border-left: 4px solid var(--ecc-danger);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
	color: #6d2415;
	font-size: 14px;
}

.ecc-form-errors p {
	margin: 0 0 6px;
}

.ecc-form-errors ul {
	margin: 0;
	padding-left: 20px;
}

.ecc-notice {
	border-radius: 10px;
	padding: 12px 16px;
	margin: 0 0 20px;
	font-size: 14px;
}

.ecc-notice--success {
	background: var(--ecc-soft);
	border: 1px solid rgba(74, 115, 38, 0.25);
	color: #2F4D18;
}

.ecc-notice--warning {
	background: #FCF3E6;
	border: 1px solid #E6D2AE;
	color: #6B4A12;
}

.ecc-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

/* Each vote and save control is its own form, so they have to sit on one line
   rather than stacking as blocks. */
.ecc-inline-form {
	display: inline-block;
	margin: 0;
}

/* A button that reads as a link: Delete on a comment, and similar. Not an <a>,
   because it performs an action rather than going somewhere -- and because an
   <a> here would need three classes to survive the theme. */
.ecc-linkbutton {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--ecc-muted);
	text-decoration: underline;
	cursor: pointer;
}

.ecc-linkbutton:hover,
.ecc-linkbutton:focus-visible {
	color: var(--ecc-danger);
}

.ecc-comment__actions {
	margin: 8px 0 0;
	display: flex;
	gap: 14px;
	align-items: center;
}

/* <details> rather than a script, so replying works with JavaScript off. */
.ecc-reply {
	margin: 10px 0 0;
}

.ecc-reply__toggle {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ecc-accent);
	cursor: pointer;
	list-style: none;
}

.ecc-reply__toggle::-webkit-details-marker {
	display: none;
}

.ecc-reply__toggle:hover,
.ecc-reply__toggle:focus-visible {
	text-decoration: underline;
}

.ecc-reply[open] .ecc-reply__toggle {
	margin-bottom: 4px;
}

.ecc-comment-form {
	margin-top: 20px;
}

@media (max-width: 600px) {
	.ecc-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ecc-actions .ecc-button {
		width: 100%;
		text-align: center;
	}
}


/* Vote and save controls.
 *
 * These reuse .ecc-stat so a control and a label sit on the same baseline in
 * the same row -- the score is a button and the comment count is a span, and
 * the difference should not be a change of alignment. Buttons need no
 * specificity work: the theme styles links inside .entry-content, not buttons.
 */
.ecc-vote,
.ecc-savebtn {
	appearance: none;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 4px 10px;
	margin: -4px 0;
	font: inherit;
	cursor: pointer;
	color: inherit;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ecc-vote:hover,
.ecc-savebtn:hover,
.ecc-vote:focus-visible,
.ecc-savebtn:focus-visible {
	border-color: var(--ecc-line);
	background: var(--ecc-soft);
}

/* Pressed is the state, so it carries the accent and the fill. aria-pressed is
   the source of truth rather than a modifier class, because it is the thing a
   screen reader announces and a second copy could disagree with it. */
.ecc-vote[aria-pressed="true"],
.ecc-savebtn[aria-pressed="true"] {
	color: var(--ecc-accent);
	border-color: var(--ecc-accent);
	background: var(--ecc-soft);
	font-weight: 600;
}

/* The signed-out score, which links to sign-in rather than voting. Three
   classes, because it is an <a> and the theme would otherwise repaint it. */
:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-stats .ecc-stat--link {
	text-decoration: none;
	color: inherit;
}

:is(.ecc-events, .ecc-insights, .ecc-event-single, .ecc-insight-single, .ecc-editor, .ecc-account, .ecc-eventform) .ecc-stats .ecc-stat--link:hover {
	color: var(--ecc-accent);
	text-decoration: underline;
}


/* --- the insight editor --------------------------------------------------
 * /write/: the list of what a member has written, and the form for one post.
 *
 * The <a> rules below all carry three ecc- classes. This stylesheet prints
 * before style.css, so .entry-content a:not(.wp-block-button__link) at 0,2,1
 * wins any tie and would repaint every one of them as underlined green text.
 */

.ecc-editor {
	max-width: 780px;
}

.ecc-editor .ecc-actions .ecc-button--primary,
.ecc-editor .ecc-actions .ecc-button--ghost {
	text-decoration: none;
}

/* Two submit buttons side by side, and the archive control kept away from
   them: "save" and "throw away" next to each other is a misclick waiting to
   happen. */
.ecc-actions--secondary {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ecc-line);
}

/* --- the list of your own posts --- */

.ecc-worklist {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ecc-worklist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-card-line);
	border-radius: 16px;
}

.ecc-worklist__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
}

:is(.ecc-editor, .ecc-eventform) .ecc-worklist .ecc-worklist__link {
	color: var(--ecc-ink);
	text-decoration: none;
	font-weight: 700;
}

:is(.ecc-editor, .ecc-eventform) .ecc-worklist .ecc-worklist__link:hover,
:is(.ecc-editor, .ecc-eventform) .ecc-worklist .ecc-worklist__link:focus-visible {
	color: var(--ecc-accent);
	text-decoration: underline;
}

:is(.ecc-editor, .ecc-eventform) .ecc-worklist__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ecc-muted);
}

:is(.ecc-editor, .ecc-eventform) .ecc-worklist .ecc-worklist__view {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--ecc-accent);
	text-decoration: none;
}

:is(.ecc-editor, .ecc-eventform) .ecc-worklist .ecc-worklist__view:hover {
	text-decoration: underline;
}

/* --- status badges -------------------------------------------------------
 * Colour is not the only signal: each badge carries its own words, so these
 * read the same to somebody who cannot tell the green from the amber.
 */

.ecc-badge--draft {
	background: rgba(17, 17, 17, 0.06);
	color: var(--ecc-muted);
}

.ecc-badge--pending-review {
	background: #FFF4E5;
	/* 5.9:1 on that ground. */
	color: #8A4B00;
}

.ecc-badge--published {
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-badge--rejected {
	background: #FCECEA;
	color: var(--ecc-danger);
}

.ecc-badge--archived {
	background: rgba(17, 17, 17, 0.06);
	color: var(--ecc-muted);
	text-decoration: line-through;
}

/* --- the form ------------------------------------------------------------ */

/* A reviewer's note is the reason a post came back, so it is given the weight
   of a callout rather than being dropped in beside the status. */
.ecc-reviewnote {
	margin: 20px 0 0;
	padding: 16px 18px;
	background: #FCECEA;
	border-left: 3px solid var(--ecc-danger);
	border-radius: 0 10px 10px 0;
}

:is(.ecc-editor) .ecc-reviewnote p {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ecc-prose);
}

:is(.ecc-editor) .ecc-reviewnote p:last-child {
	margin-bottom: 0;
}

:is(.ecc-editor) .ecc-editor__note {
	margin: 20px 0 0;
	padding: 14px 16px;
	background: var(--ecc-soft);
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ecc-prose);
}

/* TinyMCE draws itself after the page has laid out, so without a floor here
   everything below the editor jumps down the moment it initialises. */
.ecc-field--editor {
	margin: 0 0 18px;
}

.ecc-field--editor .wp-editor-container {
	min-height: 420px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
	overflow: hidden;
}

/* With JavaScript off, wp_editor() degrades to this bare textarea. It should
   still look like the rest of the form rather than like a browser default. */
.ecc-field--editor textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 420px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ecc-ink);
	border: 0;
}

/* --- a post that cannot be edited yet --- */

.ecc-editor__title {
	margin: 24px 0 6px;
	font-size: 28px;
	line-height: 1.25;
	color: var(--ecc-ink);
}

:is(.ecc-editor) .ecc-editor__excerpt {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ecc-muted);
}

.ecc-editor__preview {
	padding: 20px 22px;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-card-line);
	border-radius: 16px;
}

:is(.ecc-editor) .ecc-editor__preview p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ecc-prose);
}

:is(.ecc-editor) .ecc-editor__preview > :first-child {
	margin-top: 0;
}

:is(.ecc-editor) .ecc-editor__preview > :last-child {
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.ecc-worklist__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* The one route a member has to /write/, above the insights list. */
.ecc-actions--lead {
	margin: 0 0 24px;
}

.ecc-insights .ecc-actions--lead .ecc-button--primary {
	text-decoration: none;
}


/* --- the account page ----------------------------------------------------
 * /account/: details, upvoted, saved, and events booked.
 */

.ecc-account {
	max-width: 780px;
}

/* --- tabs ----------------------------------------------------------------
 * Links, not buttons, because each view has its own URL that can be
 * bookmarked and shared. Three ecc- classes on the <a> rules so the theme's
 * .entry-content a:not(.wp-block-button__link) does not repaint them.
 */

.ecc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-account .ecc-tabs .ecc-tabs__tab {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ecc-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	/* Sit on top of the container's rule rather than above it. */
	margin-bottom: -1px;
}

.ecc-account .ecc-tabs .ecc-tabs__tab:hover,
.ecc-account .ecc-tabs .ecc-tabs__tab:focus-visible {
	color: var(--ecc-ink);
}

/* Weight and an underline, not colour alone: the current tab has to be
   obvious to somebody who cannot tell the green from the grey. */
.ecc-account .ecc-tabs .ecc-tabs__tab--current {
	color: var(--ecc-ink);
	border-bottom-color: var(--ecc-fill);
}

/* --- profile picture ----------------------------------------------------- */

.ecc-avatar {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 0 0 32px;
	padding: 0 0 28px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-avatar__image,
.ecc-avatar__initials {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

/* Initials rather than a stock silhouette: a grey outline of a person reads
   as an image that failed to load. */
.ecc-avatar__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 1px;
}

.ecc-avatar__controls {
	flex: 1 1 auto;
	min-width: 0;
}

.ecc-avatar__form {
	margin: 0;
}

.ecc-avatar__field {
	margin: 0;
}

/* The picker. Without JavaScript the native input and Save show, and the
   pieces that need a script to mean anything -- the button label, Cancel,
   the file name -- stay hidden. */
.ecc-avatar__pick,
.ecc-avatar__cancel,
.ecc-avatar__name {
	display: none;
}

.ecc-avatar__actions {
	margin-top: 4px;
}

/* Clipped rather than display:none, so the input is still what Tab reaches
   and what a screen reader announces; the label is only its visible face. */
.ecc-avatar__form.is-enhanced .ecc-avatar__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ecc-avatar__form.is-enhanced .ecc-avatar__pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ecc-avatar__form.is-enhanced .ecc-avatar__pick::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The hidden input has the focus; the button it hides behind shows it. */
.ecc-avatar__form.is-enhanced .ecc-avatar__file:focus-visible ~ .ecc-avatar__actions .ecc-avatar__pick {
	outline: 3px solid var(--ecc-accent);
	outline-offset: 2px;
	border-color: var(--ecc-accent);
}

/* At rest the row is the picker. With a photo chosen it is Save / Cancel:
   one decision at a time, rather than Save beside a second picker. */
.ecc-avatar__form.is-enhanced:not(.has-file) .ecc-avatar__submit,
.ecc-avatar__form.has-file .ecc-avatar__pick,
.ecc-avatar__form.has-file .ecc-avatar__remove {
	display: none;
}

.ecc-avatar__form.has-file .ecc-avatar__cancel {
	display: inline;
}

.ecc-avatar__form.is-saving .ecc-avatar__cancel {
	visibility: hidden;
}

.ecc-avatar__form.has-file .ecc-avatar__name {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	color: var(--ecc-ink);
	overflow-wrap: anywhere;
}

/* .ecc-avatar__initials and .ecc-field-error both set display, which would
   otherwise beat the hidden attribute the picker toggles. */
.ecc-avatar [hidden] {
	display: none;
}

/* A chosen photo previewed in the circle, ringed so it reads as not yet saved. */
.ecc-avatar.is-previewing .ecc-avatar__image {
	box-shadow: 0 0 0 3px var(--ecc-surface), 0 0 0 5px var(--ecc-fill);
}

/* The no-JS fallback, and every other file input these forms draw: the
   browser's grey system button inside a rounded field looks unfinished. */
.ecc-field input[type="file"] {
	padding: 8px;
	font-size: 14px;
	color: var(--ecc-muted);
	cursor: pointer;
}

.ecc-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 18px;
	font: inherit;
	font-weight: 600;
	color: var(--ecc-ink);
	background: transparent;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ecc-field input[type="file"]:hover::file-selector-button {
	border-color: var(--ecc-fill);
	color: var(--ecc-accent);
}

/* --- read-only account facts --------------------------------------------- */

.ecc-factlist {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 10px 24px;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--ecc-line);
}

:is(.ecc-account) .ecc-factlist dt {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ecc-ink);
}

:is(.ecc-account) .ecc-factlist dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ecc-muted);
}

/* --- application status on an event card --------------------------------- */

.ecc-badge--confirmed {
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-badge--waitlisted {
	background: #FFF4E5;
	color: #8A4B00;
}

.ecc-badge--cancelled {
	background: rgba(17, 17, 17, 0.06);
	color: var(--ecc-muted);
}

@media (max-width: 560px) {
	.ecc-avatar {
		flex-direction: column;
	}

	.ecc-factlist {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px 0;
	}

	:is(.ecc-account) .ecc-factlist dd {
		margin-bottom: 14px;
	}
}


/* --- the event form ------------------------------------------------------
 * /new-event/: nineteen fields, so they are grouped rather than listed.
 */

.ecc-eventform {
	max-width: 780px;
}

.ecc-fieldset {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--ecc-line);
	padding-top: 24px;
}

.ecc-fieldset:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.ecc-fieldset__legend {
	padding: 0;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ecc-muted);
}

/* A time and what happens, on one line, because that is how an agenda reads.
   The time column is fixed so the titles align down the page. */
.ecc-agendarow {
	display: flex;
	gap: 10px;
	margin: 0 0 8px;
}

.ecc-eventform .ecc-agendarow .ecc-agendarow__time {
	flex: 0 0 110px;
	width: 110px;
}

.ecc-eventform .ecc-agendarow .ecc-agendarow__title {
	flex: 1 1 auto;
	min-width: 0;
}

/* The agenda inputs are outside .ecc-field, which is where the shared input
   styling is scoped, so they need it restating. */
.ecc-agendarow input[type="text"] {
	box-sizing: border-box;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--ecc-ink);
	background: var(--ecc-surface);
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
}

.ecc-agendarow input[type="text"]:focus {
	background: var(--ecc-soft);
}

@media (max-width: 560px) {
	.ecc-agendarow {
		flex-direction: column;
		gap: 6px;
		margin-bottom: 16px;
	}

	.ecc-eventform .ecc-agendarow .ecc-agendarow__time {
		flex: none;
		width: 100%;
	}
}


/* --- the access gate -----------------------------------------------------
 * Drawn only for somebody who can already see the item. Restricted content is
 * filtered out in SQL, so nothing here tells a reader about something they
 * cannot reach -- it tells the people who *can* reach it that not everyone
 * can, which is otherwise invisible.
 */

/* Amber rather than the brand green: this is a caution, not a feature, and it
   has to be distinguishable from the "Free" badge sitting beside it on an
   event card. 5.9:1 on that ground. */
.ecc-badge--gated {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #FFF4E5;
	color: #8A4B00;
}

.ecc-badge--gated .ecc-icon {
	width: 12px;
	height: 12px;
}

/* The insight card has no badge row of its own; this is it, and it only
   exists when there is a gate to report. */
.ecc-insight__status {
	margin: 10px 0 0;
}

/* --- the note above a restricted article --- */

:is(.ecc-insight-single, .ecc-event-single) .ecc-gatenote {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 12px 16px;
	background: #FFF4E5;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: #8A4B00;
}

.ecc-gatenote .ecc-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

/* --- the one line on an index for a signed-out reader --- */

:is(.ecc-events, .ecc-insights) .ecc-gatehint {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--ecc-soft);
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ecc-prose);
}

/* Three classes plus the element, for 0,3,1. These shortcodes can be placed on
   any page, including one rendered by page.php, where the theme's
   .entry-content a:not(.wp-block-button__link) scores 0,2,1 -- and this
   stylesheet prints first, so a tie loses and the link comes out as plain
   green underlined body text. */
.ecc-section :is(.ecc-events, .ecc-insights) .ecc-gatehint a {
	color: var(--ecc-accent);
	font-weight: 600;
}


/* Inline error shown by ecc-interactions.js when an AJAX action fails. */
.ecc-ajax-note {
	margin: 0 0 10px;
	color: var(--ecc-danger);
	font-size: 14px;
	font-weight: 600;
}


/* --- the filter box: folded on a phone ---------------------------------- */

/* Invisible on a desktop: the summary is not drawn and the form carries its
   own box, exactly as before. */
.ecc-filterbox {
	margin: 0 0 28px;
}

.ecc-filterbox > .ecc-filterbox__summary {
	display: none;
}

.ecc-filterbox > .ecc-filters {
	margin-bottom: 0;
}

@media (max-width: 720px) {
	.ecc-filterbox {
		border: 1px solid var(--ecc-line);
		border-radius: var(--ecc-radius);
		background: var(--ecc-surface);
		overflow: hidden;
	}

	.ecc-filterbox > .ecc-filterbox__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		min-height: 56px;
		padding: 12px 18px;
		list-style: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.ecc-filterbox > .ecc-filterbox__summary::-webkit-details-marker {
		display: none;
	}

	/* A chevron, turned when the box is open. Drawn with borders so it
	   follows the text colour with no icon to load. */
	.ecc-filterbox > .ecc-filterbox__summary::after {
		content: '';
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-right: 2px solid var(--ecc-ink);
		border-bottom: 2px solid var(--ecc-ink);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.ecc-filterbox[open] > .ecc-filterbox__summary::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.ecc-filterbox__title {
		flex: 0 0 auto;
		font-size: 16px;
		font-weight: 700;
		color: var(--ecc-ink);
	}

	/* What is applied, in words, so a folded box still says why the list
	   below is the list it is. */
	.ecc-filterbox__active {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		font-weight: 600;
		color: var(--ecc-accent);
	}

	.ecc-filterbox > .ecc-filters {
		margin: 0;
		border: 0;
		border-top: 1px solid var(--ecc-line);
		border-radius: 0;
	}

	/* Two fields to a row where two fit, from about 360px up; one below. */
	.ecc-filters__field:not(.ecc-filters__when) {
		min-width: 130px;
		flex-basis: 130px;
	}

	.ecc-filters__when {
		flex: 1 1 100%;
	}

	.ecc-segmented__option {
		flex: 1 1 0;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecc-filterbox > .ecc-filterbox__summary::after {
		transition: none;
	}
}

/* --- the insights toolbar -----------------------------------------------
 * Directly above the grid: the topics as tabs on the left, the sort on the
 * right, on one rule, so it reads as one control over the list. The write
 * button is not here; it is the page's action and sits in the hero.
 */

.ecc-insights__bar {
	display: flex;
	align-items: flex-end;
	gap: 12px 32px;
	margin: 0 0 32px;
	border-bottom: 1px solid var(--ecc-line);
}

/* Right-aligned even when there are no topics to push it there. The bottom
   padding lifts it off the rule the tabs sit on. */
.ecc-insights__bar > .ecc-filters--sort {
	flex: 0 0 auto;
	margin-left: auto;
	padding-bottom: 10px;
}

/* One dropdown with its label beside it, not a filter box: the box and the
   stacked label are for a form of several fields. */
.ecc-filters--sort {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	gap: 10px;
	align-items: center;
}

.ecc-filters--sort .ecc-filters__sort {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ecc-filters--sort .ecc-filters__label {
	white-space: nowrap;
}

/* Wide enough for the longest order, so the button does not change width
   when the choice does. */
.ecc-filters--sort select,
.ecc-filters--sort .ecc-select {
	width: 220px;
}

/* On a phone the sort gets its own line above the tabs, and the tabs keep
   the rule. */
@media (max-width: 720px) {
	.ecc-insights__bar {
		flex-wrap: wrap;
	}

	.ecc-insights__bar > .ecc-filters--sort,
	.ecc-filters--sort .ecc-filters__sort {
		flex: 1 1 100%;
	}

	.ecc-insights__bar > .ecc-filters--sort {
		order: -1;
		padding-bottom: 4px;
	}

	.ecc-filters--sort {
		padding: 0;
	}

	.ecc-filters--sort select,
	.ecc-filters--sort .ecc-select {
		width: auto;
		flex: 1 1 auto;
	}
}

/* --- event posters ----------------------------------------------------- */

/* The link round a card's poster (ECC_UI::event_poster). display: contents
   so the image, not the link, is the card's layout child: the event card
   orders and sizes its poster as a flex item, and a wrapper box would take
   that away. */
.ecc-posterlink {
	display: contents;
}

/* On a card the poster sits at the far end of the row, after the date and the
   text, so the date rail still leads and a list with and without posters
   keeps its left edge. A fixed 16:9 crop rather than the image's own shape:
   a column of thumbnails in mixed ratios reads as broken, and object-fit
   keeps the middle of the image, which is where a poster puts its subject.
   The width and height attributes are still worth sending; they reserve the
   box before this stylesheet has been applied. */
.ecc-event__poster {
	order: 3;
	flex: 0 0 240px;
	width: 240px;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	background: var(--ecc-soft);
}

/* Narrow screens: the poster goes above everything, full width, because a
   240px image beside a 62px date rail leaves the title about 30px. */
@media (max-width: 720px) {
	.ecc-event__card--poster {
		flex-wrap: wrap;
	}
	.ecc-event__card--poster .ecc-event__poster {
		order: -1;
		flex-basis: 100%;
		width: 100%;
	}
	/* A zero basis keeps the text beside the date once the row is allowed
	   to wrap. At its default auto basis it measures its own content, finds
	   no room next to the date, and drops onto a line of its own. */
	.ecc-event__card--poster .ecc-event__main {
		flex-basis: 0;
	}
}

/* On the event page, the image at its own shape, capped in height so a
   portrait poster does not push the whole event below the fold. Centred, so
   a portrait one sits in the column instead of hugging its left edge. */
.ecc-event-single__poster,
.ecc-insight-single__poster {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(70vh, 640px);
	margin: 0 auto 28px;
	border-radius: var(--ecc-radius);
}

/* A recording, in place of the poster on a past event. The frame holds 16:9
   before the player loads, so the page does not jump when it arrives. */
.ecc-recordings {
	margin: 0 0 28px;
	scroll-margin-top: 96px;
}

.ecc-recording {
	margin: 0 0 20px;
}

.ecc-recording__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ecc-radius);
}

.ecc-recording__frame iframe,
.ecc-recording__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	/* Transparent rather than black: against a light poster, a dark
	   background shows as a hairline arc at every rounded corner. */
	background: transparent;
}

/* A recording in another shape (portrait, 4:3) is letterboxed inside the
   16:9 frame rather than cropped. */
.ecc-recording__frame video {
	object-fit: contain;
}

.ecc-recording__caption {
	margin-top: 8px;
	font-size: 15px;
	color: var(--ecc-muted);
}

.ecc-recording-control__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ecc-recording-control__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-recording-control__what {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.ecc-recording-control__state {
	font-size: 14px;
	color: var(--ecc-muted);
	overflow-wrap: anywhere;
}

.ecc-recording-control__heading {
	margin: 22px 0 6px;
	font-size: 16px;
}

.ecc-upload-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 12px;
}

.ecc-upload-progress progress {
	width: 100%;
	height: 10px;
	accent-color: var(--ecc-accent);
}

.ecc-upload-progress__text {
	font-size: 14px;
	color: var(--ecc-muted);
}

/* The administrators' poster control. Closed by default, so the page an
   administrator sees stays the page everybody else sees until they ask. */
.ecc-poster-control {
	margin: 0 0 28px;
	padding: 14px 18px;
	border: 1px dashed var(--ecc-line);
	border-radius: var(--ecc-radius);
	background: var(--ecc-surface);
}

.ecc-poster-control__summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ecc-accent);
}

.ecc-poster-control__who {
	margin-left: 8px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ecc-muted);
}

.ecc-poster-control__form {
	margin-top: 14px;
}

/* The administrators' way from an event page into its edit form. */
.ecc-admin-edit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

/* --- editing an event --- */

.ecc-eventform__switch {
	margin: 0 0 20px;
	font-size: 14px;
}

.ecc-eventform__switch a {
	color: var(--ecc-accent);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   An event with a recording we host: the course page's layout. The structure
   comes from the theme's course classes (course-hero, course-main-layout,
   curriculum-box); these rules add only what a recording needs on top.
   -------------------------------------------------------------------------- */

.ecc-recorded-hero .course-hero-meta .ecc-icon,
.ecc-recorded .lesson-time .ecc-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.ecc-recorded-hero .course-hero-meta .meta-badge-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Doubled class: the theme's .btn sets inline-block at the same weight and
   loads later, which left the icon on the text baseline, above centre. */
.ecc-watch-button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ecc-watch-button svg {
	flex: none;
	display: block;
}

/* The theme's .btn-green paints white text and hovers to #05663b, a green
   from the old palette. Keep the primary button's own pair: dark text on
   the lime (white on it is 2.5:1), and its lighter hover. */
.ecc-watch-button.btn,
.ecc-watch-button.btn:hover,
.ecc-watch-button.btn:focus-visible {
	color: var(--color-dark-teal, #0A1312);
}

.ecc-watch-button.btn:hover,
.ecc-watch-button.btn:focus-visible {
	background-color: var(--color-primary-hover, #6CA034);
}

/* The still beside the title, dressed like the course cover: a badge top
   left, the length bottom right, and a play button that starts the video. */
.ecc-hero-still {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(124, 179, 66, 0.25);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.ecc-hero-still img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ecc-hero-still__badge,
.ecc-hero-still__stat {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(18, 24, 18, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ecc-hero-still__badge {
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	border: 1px solid rgba(124, 179, 66, 0.35);
	border-radius: 30px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.ecc-hero-still__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7cb342;
	box-shadow: 0 0 10px #7cb342;
}

.ecc-hero-still__stat {
	right: 16px;
	bottom: 16px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #e2e8f0;
}

.ecc-hero-still__stat .ecc-icon {
	width: 15px;
	height: 15px;
	color: #7cb342;
}

.ecc-hero-still__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: var(--ecc-accent);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}

.ecc-hero-still:hover .ecc-hero-still__play,
.ecc-hero-still:focus-visible .ecc-hero-still__play {
	transform: scale(1.08);
}

.ecc-recording--main .ecc-recording__frame {
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ecc-recorded__about {
	margin-top: 40px;
}

.ecc-recorded__about .section-tag {
	margin-bottom: 12px;
}

/* Chapters, in the course curriculum's box. */
.ecc-chapters__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecc-chapters__list > li {
	margin: 0;
}

.ecc-chapters__list > li:last-child .curriculum-item {
	border-bottom: none;
}

.ecc-chapter .curriculum-item-icon .ecc-icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary-on-light, #11693e);
}

.ecc-chapter.active {
	background: #f0fdf4;
	box-shadow: inset 3px 0 0 var(--ecc-accent);
}

.ecc-chapter.active .curriculum-item-title {
	font-weight: 700;
}

.ecc-chapter:focus-visible {
	outline: 2px solid var(--ecc-accent);
	outline-offset: -2px;
}

.ecc-chapters__empty {
	margin: 0;
	padding: 20px 24px;
	font-size: 15px;
	color: var(--ecc-muted);
}

/* Phones get the chapters under the player instead of in the sidebar,
 * which would stack below the description and the comments. That copy is a
 * <details>, open to start with, so it can be folded away. Only one of the
 * two is shown; 991px is where the theme's course layout goes to one column. */
.ecc-chapters--inline {
	display: none;
	margin-top: 20px;
}

.ecc-chapters--inline > summary {
	position: relative;
	padding: 16px 52px 16px 20px;
	cursor: pointer;
	list-style: none;
}

.ecc-chapters--inline > summary::-webkit-details-marker {
	display: none;
}

.ecc-chapters--inline > summary h3 {
	font-size: 16px;
}

.ecc-chapters--inline:not([open]) > summary {
	border-bottom: none;
}

.ecc-chapters--inline > summary:focus-visible {
	outline: 2px solid var(--ecc-accent);
	outline-offset: -2px;
}

.ecc-chapters__chevron {
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -10px;
	color: var(--color-primary-on-light, #11693e);
	transition: transform 0.2s ease;
}

.ecc-chapters--inline[open] .ecc-chapters__chevron {
	transform: rotate(180deg);
}

/* A long list scrolls inside the box, so the page below stays in reach. */
.ecc-chapters--inline .ecc-chapters__list {
	max-height: min(60vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ecc-chapters--inline .curriculum-item {
	padding: 14px 20px;
}

@media (max-width: 991px) {
	.ecc-chapters--inline {
		display: block;
	}

	.ecc-recorded__side--chapters {
		display: none;
	}
}

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

/* The administrator's chapters box, inside the recordings control. */
.ecc-chapter-editor {
	flex-basis: 100%;
	margin-top: 4px;
}

.ecc-chapter-editor > summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--ecc-accent);
}

.ecc-chapter-editor textarea {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.6;
}

/* --- insight review bar --------------------------------------------------
 * Above an administrator's preview of an unpublished insight. Tinted so it
 * cannot be mistaken for part of the article.
 */

.ecc-reviewbar {
	background: var(--ecc-soft);
	border-bottom: 1px solid var(--ecc-line);
	padding: 14px 0;
	color: var(--ecc-ink);
}

.ecc-reviewbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 24px;
}

.ecc-reviewbar__status {
	margin: 0;
	padding: 10px 0;
}

.ecc-reviewbar__status a {
	color: var(--ecc-accent);
}

.ecc-reviewbar__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

.ecc-reviewbar .ecc-button {
	padding: 10px 20px;
}

.ecc-reviewbar__reject > summary {
	list-style: none;
}

.ecc-reviewbar__reject > summary::-webkit-details-marker {
	display: none;
}

.ecc-reviewbar__panel {
	display: grid;
	gap: 8px;
	width: min(420px, 80vw);
	margin-top: 10px;
}

.ecc-reviewbar__panel textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 12px;
	background: var(--ecc-surface);
	font: inherit;
}

.ecc-reviewbar__panel .ecc-button {
	justify-self: start;
}

.ecc-reviewbar__error {
	flex-basis: 100%;
	margin: 0;
	color: var(--ecc-danger);
	font-weight: 600;
}

/* --- posters on insights -------------------------------------------------- */

/* On a card, above the title: 2:1 whatever the image's own shape, so a row
   of cards lines up. 2:1 because that is the shape the insight
   posters are made in (1600x800); 16:9 cut the sides off their text. Inside the card's padding rather than bled to its edge,
   which would tie it to a padding that changes with the screen. */
.ecc-insight__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin: 0 0 20px;
	border-radius: 14px;
	background: var(--ecc-soft);
}

/* --- the poster field, on the event form and the insight editor ----------- */

.ecc-posterfield__frame {
	position: relative;
	display: grid;
	place-items: center;
	max-width: 480px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 6px 0 12px;
	border-radius: 14px;
	background: var(--ecc-soft);
	box-shadow: inset 0 0 0 1px var(--ecc-line);
}

.ecc-posterfield__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecc-posterfield__img[hidden],
.ecc-posterfield__frame.is-empty .ecc-posterfield__img,
.ecc-posterfield__frame.is-empty .ecc-posterfield__remove {
	display: none;
}

.ecc-posterfield__empty {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--ecc-muted);
	font-size: 14px;
}

.ecc-posterfield__empty .ecc-icon {
	width: 28px;
	height: 28px;
}

.ecc-posterfield__frame.is-empty .ecc-posterfield__empty {
	display: flex;
}

.ecc-posterfield__remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 19, 18, 0.72);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.ecc-posterfield__remove:hover {
	background: #B3261E;
}

.ecc-posterfield__remove:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.ecc-posterfield__remove .ecc-icon {
	width: 15px;
	height: 15px;
}

/* The label is the button; the input stays in the page for the keyboard and
   for the form, out of sight. */
.ecc-posterfield__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ecc-posterfield:has(.ecc-posterfield__file:focus-visible) .ecc-posterfield__pick {
	outline: 2px solid var(--ecc-accent);
	outline-offset: 2px;
}

.ecc-posterfield__pick {
	display: inline-flex;
	margin-bottom: 8px;
	cursor: pointer;
}

.ecc-posterfield .ecc-field__help {
	display: block;
}

/* --- topics and tags ------------------------------------------------------
 * Topics are the site's own subjects (GET /v1/topics); tags are the
 * author's words. A topic is an eyebrow on a card, a pill on the article's
 * dark band and a row of pills above the grid; tags close the article. All
 * of them are links to the index narrowed to that topic or tag.
 *
 * Three classes on every link, for the reason given at the card titles: the
 * theme's .entry-content a:not(.wp-block-button__link) is 0,2,1 and paints
 * links underlined green.
 */

/* The topics: tabs that sit on the bar's rule, the current one underlined.
   One line always; when there are more than fit, the row scrolls sideways
   and fades at its right edge to say so. The fade covers only the last
   32px, which is empty space whenever the tabs fit. */
.ecc-insights .ecc-topics {
	display: flex;
	flex: 1 1 auto;
	gap: 28px;
	min-width: 0;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.ecc-insights .ecc-topics::-webkit-scrollbar {
	display: none;
}

.ecc-insights .ecc-topics .ecc-topics__tab {
	flex: 0 0 auto;
	padding: 14px 0 12px;
	border-bottom: 3px solid transparent;
	color: var(--ecc-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ecc-insights .ecc-topics .ecc-topics__tab:hover {
	color: var(--ecc-ink);
	border-bottom-color: var(--ecc-line);
}

/* Inside the scrolling row, so an outer offset would be clipped. */
.ecc-insights .ecc-topics .ecc-topics__tab:focus-visible {
	outline: 2px solid var(--ecc-accent);
	outline-offset: -2px;
	border-radius: 4px;
}

/* Ink and an underline, not colour alone. The weight stays the same, so
   choosing a tab does not nudge its neighbours. */
.ecc-insights .ecc-topics .ecc-topics__tab--current {
	color: var(--ecc-ink);
	border-bottom-color: var(--ecc-fill);
}

/* "Tagged [ai overviews ×]": the filter and the way out of it in one chip. */
.ecc-insights .ecc-insights__scope {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: -12px 0 28px;
	font-size: 15px;
	color: var(--ecc-muted);
}

.ecc-insights .ecc-insights__scope .ecc-insights__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 7px 5px 14px;
	border-radius: 30px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecc-insights__chip-x {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(74, 115, 38, 0.14);
	font-size: 15px;
	line-height: 1;
}

.ecc-insights .ecc-insights__scope .ecc-insights__chip:hover,
.ecc-insights .ecc-insights__scope .ecc-insights__chip:focus-visible {
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
}

/* The index's one action, in the hero under the lead. */
.ecc-hero .ecc-hero__actions {
	margin: 28px 0 0;
}

.ecc-hero .ecc-hero__actions .ecc-button--primary {
	color: var(--ecc-fill-ink);
	text-decoration: none;
}

/* On a card: an eyebrow above the title. */
.ecc-insights .ecc-insight__topic {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ecc-insights .ecc-insight__topic .ecc-topic__link {
	color: var(--ecc-accent);
	text-decoration: none;
}

.ecc-insights .ecc-insight__topic .ecc-topic__link:hover,
.ecc-insights .ecc-insight__topic .ecc-topic__link:focus-visible {
	text-decoration: underline;
}

/* On the article's dark band, under the byline. The lime, which is 6.9:1
   there where the accent green would be 2.1:1. */
.ecc-hero .ecc-hero__topic {
	margin: 16px 0 0;
}

.ecc-hero .ecc-hero__topic .ecc-topic__link {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid rgba(124, 179, 66, 0.55);
	border-radius: 30px;
	color: var(--color-primary, #7CB342);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecc-hero .ecc-hero__topic .ecc-topic__link:hover,
.ecc-hero .ecc-hero__topic .ecc-topic__link:focus-visible {
	background: var(--color-primary, #7CB342);
	color: var(--color-dark-teal, #0A1312);
}

/* At the end of the article, before the votes. */
.ecc-insight-single .ecc-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 36px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--ecc-line);
}

.ecc-insight-single .ecc-tags .ecc-tags__label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecc-ink);
}

.ecc-insight-single .ecc-tags .ecc-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecc-insight-single .ecc-tags__list li {
	margin: 0;
	padding: 0;
}

.ecc-insight-single .ecc-tags .ecc-tags__tag {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 30px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecc-insight-single .ecc-tags .ecc-tags__tag:hover,
.ecc-insight-single .ecc-tags .ecc-tags__tag:focus-visible {
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
}

@media (prefers-reduced-motion: reduce) {
	.ecc-insights .ecc-topics .ecc-topics__tab,
	.ecc-insights .ecc-insights__scope .ecc-insights__chip,
	.ecc-hero .ecc-hero__topic .ecc-topic__link,
	.ecc-insight-single .ecc-tags .ecc-tags__tag {
		transition: none;
	}
}

/* --- the community feed ---------------------------------------------------
 * /community/ and /community/<slug>/ (ECC_Community). The feed sits inside
 * .ecc-insights, so the topic tabs, the sort and the tag chip are the insight
 * index's own; a post's page sits inside .ecc-insight-single for the article
 * measure and the comment thread. What is here is the feed's own: a column
 * of posts with trending beside it, the composer, and up and down votes.
 * Two classes throughout, for the reason the :is() note above gives.
 */

/* 1120px, the article container, so the column of posts and the panel
   beside it stay together on a wide screen instead of drifting apart. */
.ecc-community .ecc-community__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

.ecc-community .ecc-community__main {
	min-width: 0;
}

.ecc-community .ecc-community__side {
	position: sticky;
	/* Clear of the theme's sticky header (94px) with room to breathe, and of
	   WordPress's admin bar when it is showing: WordPress sets the variable
	   on <html> then, 32px, 46px on a phone. */
	top: calc(118px + var(--wp-admin--admin-bar--height, 0px));
}

.ecc-community .ecc-community__side:empty {
	display: none;
}

@media (max-width: 980px) {
	.ecc-community .ecc-community__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ecc-community .ecc-community__side {
		position: static;
	}
}

/* The feed's headings are paragraphs with role="heading": under 991px the
   theme sets every h2 to 22-26px with !important, which would turn these
   small labels into headlines on a phone. */
.ecc-community .ecc-community__heading {
	margin: 0 0 12px;
	line-height: 1.4;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecc-ink);
}

/* minmax(0, 1fr), not the default auto track: an auto track grows to the
   longest unbreakable line in a card -- a pasted link -- and on a phone
   that pushed every card off the side of the screen. */
.ecc-community .ecc-community__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.ecc-community .ecc-community__more {
	margin: 0;
	text-align: center;
}

/* A feed is read top to bottom, not browsed as a grid: the lift the insight
   cards have on hover would make the whole column twitch under the pointer. */
.ecc-community .ecc-post__card,
.ecc-community .ecc-composer {
	height: auto;
	padding: 24px 28px;
}

.ecc-community .ecc-post__card:hover,
.ecc-community .ecc-composer:hover {
	transform: none;
}

.ecc-community .ecc-community__list--pinned .ecc-post__card {
	border-color: rgba(124, 179, 66, 0.45);
}

@media (max-width: 600px) {
	.ecc-community .ecc-post__card {
		padding: 20px;
	}
}

/* --- one post --- */

.ecc-community .ecc-post__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.ecc-community .ecc-post__avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.ecc-community .ecc-post__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ecc-soft, #E6F4EA);
	color: var(--ecc-accent, #4A7326);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

.ecc-community .ecc-post__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	margin: 0;
	line-height: 1.35;
}

.ecc-community .ecc-post__author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ecc-ink);
}

.ecc-community .ecc-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	font-size: 13px;
	color: var(--ecc-muted);
}

.ecc-community .ecc-post__topic {
	color: var(--ecc-accent);
	font-weight: 600;
	text-decoration: none;
}

.ecc-community .ecc-post__topic:hover,
.ecc-community .ecc-post__topic:focus-visible {
	text-decoration: underline;
}

.ecc-community .ecc-post__pinned {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 11px;
	border-radius: 30px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.ecc-community .ecc-post__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.3px;
	font-weight: 800;
	color: var(--ecc-ink);
	overflow-wrap: anywhere;
}

.ecc-community .ecc-post__title a {
	color: inherit;
	text-decoration: none;
}

.ecc-community .ecc-post__title a:hover,
.ecc-community .ecc-post__title a:focus-visible {
	color: var(--ecc-accent);
}

.ecc-community .ecc-post__body {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ecc-prose);
	overflow-wrap: anywhere;
}

.ecc-community .ecc-post__body--full {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.7;
}

.ecc-community .ecc-post__body a,
.ecc-community .ecc-post__more a {
	color: var(--ecc-accent);
	text-decoration: underline;
}

.ecc-community .ecc-post__more {
	margin: -4px 0 12px;
	font-size: 14px;
	font-weight: 600;
}

/* --- links in a post ------------------------------------------------------
 * Where a link goes is always on the page (ECC_Links): the domain beside the
 * words it is under, or as the start of an address written out. The page
 * script adds the full address on hover and asks before leaving the site.
 */
.ecc-community .ecc-post__body .ecc-link {
	color: var(--ecc-accent);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(74, 115, 38, 0.35);
	transition: text-decoration-color 0.2s ease;
}

.ecc-community .ecc-post__body .ecc-link:hover,
.ecc-community .ecc-post__body .ecc-link:focus-visible {
	text-decoration-color: currentColor;
}

/* The domain beside a link's words: a quiet pill with an arrow out, read as
   part of the link but never mistaken for the words. */
.ecc-community .ecc-link__host {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	padding: 1px 8px 1px 6px;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.06);
	color: var(--ecc-muted);
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	vertical-align: 0.08em;
	white-space: nowrap;
}

.ecc-community .ecc-link__host::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* An address written out: the domain in full weight, the rest after it. */
.ecc-community .ecc-link__domain {
	font-weight: 700;
}

.ecc-community .ecc-link__path {
	font-weight: 500;
	opacity: 0.75;
}

/* --- photos and videos on a post -------------------------------------------
 * One on its own at its own shape (kept between 4:5 and 2:1 by the page);
 * two side by side; three as one large and two small; four or more as a
 * square of four with "+N" on the last.
 */
.ecc-community .ecc-gallery {
	display: grid;
	gap: 4px;
	margin: 0 0 14px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--color-background, #F4F0E6);
}

.ecc-community .ecc-gallery--2 {
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 2 / 1.1;
}

.ecc-community .ecc-gallery--3 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 10;
}

.ecc-community .ecc-gallery--3 .ecc-gallery__item:first-child {
	grid-row: span 2;
}

.ecc-community .ecc-gallery--4 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 11;
}

.ecc-community .ecc-gallery__item {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: rgba(17, 17, 17, 0.06);
	color: #ffffff;
	cursor: zoom-in;
	-webkit-tap-highlight-color: transparent;
}

.ecc-community .ecc-gallery--1 .ecc-gallery__item {
	width: 100%;
	max-height: 620px;
}

.ecc-community .ecc-gallery__item[hidden] {
	display: none;
}

.ecc-community .ecc-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1), filter 0.3s ease;
}

.ecc-community .ecc-gallery__item:hover img {
	transform: scale(1.025);
}

.ecc-community .ecc-gallery__item:active img {
	transform: scale(0.99);
	filter: brightness(0.94);
}

.ecc-community .ecc-gallery__item:focus-visible {
	outline: 3px solid var(--ecc-fill);
	outline-offset: -3px;
}

.ecc-community .ecc-gallery__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.5);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s ease;
}

.ecc-community .ecc-gallery__play svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
	fill: #ffffff;
}

.ecc-community .ecc-gallery__item:hover .ecc-gallery__play {
	transform: scale(1.08);
	background: rgba(17, 17, 17, 0.62);
}

.ecc-community .ecc-gallery__time {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.62);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ecc-community .ecc-gallery__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(17, 17, 17, 0.45);
	font-size: clamp(22px, 5vw, 34px);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Its author's only: a video still being processed, or one that failed. */
.ecc-community .ecc-gallery__item--pending {
	display: grid;
	place-items: center;
	min-height: 180px;
	padding: 20px;
	box-sizing: border-box;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 14.5px;
	font-weight: 600;
	text-align: center;
	cursor: default;
}

.ecc-community .ecc-gallery__item--pending.is-failed {
	background: #FCEEEE;
	color: var(--ecc-danger);
}

.ecc-community .ecc-gallery__video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	background: #000000;
	object-fit: contain;
}

.ecc-community .ecc-community__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecc-community .ecc-post__tags {
	margin: 0 0 14px;
}

.ecc-community .ecc-community__tags li {
	margin: 0;
	padding: 0;
}

.ecc-community .ecc-community__tag {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 30px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ecc-community .ecc-community__tag:hover,
.ecc-community .ecc-community__tag:focus-visible {
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
}

/* The stats row: the vote on the left, what the reader may do on the right. */
.ecc-community .ecc-post__stats {
	gap: 12px 18px;
}

.ecc-community .ecc-post__actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.ecc-community .ecc-post__actions:empty {
	display: none;
}

.ecc-community .ecc-post__edit {
	color: var(--ecc-muted);
	font-size: 13px;
	text-decoration: underline;
}

.ecc-community .ecc-post__edit:hover,
.ecc-community .ecc-post__edit:focus-visible,
.ecc-community .ecc-linkbutton--plain:hover,
.ecc-community .ecc-linkbutton--plain:focus-visible {
	color: var(--ecc-accent);
}

/* Up, the score, down. Pressed is the state, as on the insight vote. */
.ecc-community .ecc-updown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: -4px 0;
}

.ecc-community .ecc-updown__score {
	padding: 0 2px;
	color: var(--ecc-ink);
	white-space: nowrap;
}

.ecc-community .ecc-updown__button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: var(--ecc-muted);
	font: inherit;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ecc-community .ecc-updown__button:hover,
.ecc-community .ecc-updown__button:focus-visible {
	border-color: var(--ecc-line);
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-community .ecc-updown__button--up[aria-pressed="true"] {
	border-color: var(--ecc-accent);
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-community .ecc-updown__button--down[aria-pressed="true"],
.ecc-community .ecc-updown__button--down:hover,
.ecc-community .ecc-updown__button--down:focus-visible {
	border-color: rgba(179, 38, 30, 0.35);
	background: #FCEEEA;
	color: var(--ecc-danger);
}

/* --- the composer: "Write something", opening into the form --- */

.ecc-community .ecc-composer {
	margin: 0 0 28px;
	padding: 0;
}

.ecc-community .ecc-composer__prompt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	list-style: none;
	cursor: pointer;
}

.ecc-community .ecc-composer__prompt::-webkit-details-marker {
	display: none;
}

.ecc-community .ecc-composer__placeholder {
	flex: 1 1 auto;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--color-background, #F4F0E6);
	color: var(--ecc-muted);
	font-size: 15px;
	transition: background-color 0.2s ease;
}

.ecc-community .ecc-composer__prompt:hover .ecc-composer__placeholder {
	background: #ECE7DA;
}

.ecc-community .ecc-composer__prompt:focus-visible {
	outline: 3px solid var(--ecc-accent);
	outline-offset: -3px;
	border-radius: var(--ecc-radius);
}

.ecc-community .ecc-composer[open] .ecc-composer__prompt {
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-community .ecc-composer__form {
	margin: 0;
	padding: 20px 24px 24px;
}

.ecc-post-single .ecc-composer__form {
	padding: 0;
}

.ecc-community .ecc-composer__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

@media (max-width: 640px) {
	.ecc-community .ecc-composer__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ecc-community .ecc-composer__remove {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
	color: var(--ecc-ink);
}

.ecc-community .ecc-composer--guest {
	padding: 18px 24px;
}

.ecc-community .ecc-composer--guest .ecc-signin-prompt {
	margin: 0;
}

/* --- trending, beside the feed --- */

.ecc-community .ecc-community__panel {
	padding: 24px;
	border: 1px solid var(--ecc-card-line);
	border-radius: var(--ecc-radius);
	background: var(--ecc-surface);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.ecc-community .ecc-community__panel-title {
	margin: 0 0 16px;
	line-height: 1.3;
	font-size: 16px;
	font-weight: 800;
	color: var(--ecc-ink);
}

.ecc-community .ecc-trending {
	display: grid;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.ecc-community .ecc-trending li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
}

.ecc-community .ecc-trending__topic {
	color: var(--ecc-ink);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.ecc-community .ecc-trending__topic:hover,
.ecc-community .ecc-trending__topic:focus-visible {
	color: var(--ecc-accent);
	text-decoration: underline;
}

.ecc-community .ecc-trending__count {
	font-size: 13px;
	color: var(--ecc-muted);
}

/* --- a post's own page: the feed's card, opened up ---------------------
 * No hero: the author leads, the title is a feed title a size up, and the
 * thread sits inside the card as a conversation -- faces, bubbles, "2 hours
 * ago · Reply" -- rather than as boxed letters under an article.
 */

.ecc-community .ecc-community__back {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
}

.ecc-community .ecc-community__back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ecc-muted);
	text-decoration: none;
}

.ecc-community .ecc-community__back a:hover,
.ecc-community .ecc-community__back a:focus-visible {
	color: var(--ecc-accent);
}

.ecc-community .ecc-community__back .ecc-icon {
	width: 16px;
	height: 16px;
}

.ecc-community .ecc-post__title--full {
	margin: 0 0 12px;
	font-size: 26px;
	letter-spacing: -0.4px;
}

.ecc-community .ecc-post-full .ecc-post__body--full {
	font-size: 17px;
	line-height: 1.65;
}

/* The action bar: vote, comments, share, as buttons rather than a footnote. */
.ecc-community .ecc-post-full .ecc-post__stats {
	margin-top: 18px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ecc-line);
	font-size: 14px;
}

.ecc-community .ecc-post__stats .ecc-stat--link {
	padding: 6px 12px;
	margin: -6px 0;
	border-radius: 999px;
	color: var(--ecc-muted);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.ecc-community .ecc-post__stats > .ecc-stat--link:first-child {
	margin-left: -12px;
}

.ecc-community .ecc-post__stats .ecc-stat--link:hover,
.ecc-community .ecc-post__stats .ecc-stat--link:focus-visible {
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-community .ecc-post__share .ecc-icon {
	width: 16px;
	height: 16px;
}

.ecc-community .ecc-post__share.is-copied {
	color: var(--ecc-accent);
}

/* The thread, inside the card. */
.ecc-community .ecc-post-full .ecc-comments {
	margin-top: 20px;
	padding-top: 0;
	border-top: 0;
}

/* The count is already the Comments button just above; two "4 comments"
   in a row read as a bug. Kept for screen readers, and as the place the
   page script moves focus to once a comment is posted. */
.ecc-community .ecc-post-full .ecc-comments__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ecc-community .ecc-post-full .ecc-comments__list {
	gap: 14px;
}

.ecc-community .ecc-comment--chat {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.ecc-community .ecc-comment--chat > .ecc-post__avatar,
.ecc-community .ecc-chatbox > .ecc-post__avatar {
	flex: none;
	width: 32px;
	height: 32px;
	font-size: 13px;
}

.ecc-community .ecc-comment__main {
	min-width: 0;
}

.ecc-community .ecc-comment__bubble {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 9px 14px 10px;
	border-radius: 18px;
	background: var(--color-background, #F4F0E6);
}

.ecc-community .ecc-comment--chat:target > .ecc-comment__main > .ecc-comment__bubble {
	box-shadow: 0 0 0 2px var(--ecc-accent);
}

.ecc-community .ecc-comment--chat .ecc-comment__byline {
	align-items: center;
	gap: 2px 8px;
	margin: 0 0 2px;
	font-size: 13.5px;
}

.ecc-community .ecc-comment--chat .ecc-comment__author {
	font-weight: 700;
}

.ecc-community .ecc-comment--chat .ecc-verified {
	width: 15px;
	height: 15px;
}

.ecc-community .ecc-comment--chat .ecc-comment__body {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ecc-prose);
	overflow-wrap: anywhere;
}

/* "2h · Reply · Delete" under the bubble. */
.ecc-community .ecc-comment--chat .ecc-comment__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 4px 0 0 14px;
	font-size: 12.5px;
	color: var(--ecc-muted);
}

.ecc-community .ecc-comment__time {
	color: inherit;
	text-decoration: none;
}

.ecc-community .ecc-comment__time:hover,
.ecc-community .ecc-comment__time:focus-visible {
	text-decoration: underline;
}

.ecc-community .ecc-comment--chat .ecc-reply {
	margin: 0;
}

.ecc-community .ecc-comment--chat .ecc-reply__toggle {
	font-size: 12.5px;
	font-weight: 700;
}

.ecc-community .ecc-comment--chat .ecc-reply[open] {
	flex-basis: 100%;
}

/* Reply before Delete, and both the same weight of link. */
.ecc-community .ecc-comment--chat .ecc-comment__actions > .ecc-inline-form {
	order: 1;
}

.ecc-community .ecc-comment--chat .ecc-reply[open] {
	order: 2;
}

.ecc-community .ecc-comment--chat .ecc-linkbutton {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ecc-muted);
	text-decoration: none;
}

.ecc-community .ecc-comment--chat .ecc-linkbutton:hover,
.ecc-community .ecc-comment--chat .ecc-linkbutton:focus-visible {
	color: var(--ecc-danger);
	text-decoration: underline;
}

/* Replies under the face they answer, joined by a thin thread line. */
.ecc-community .ecc-comment--chat .ecc-comments__replies {
	margin-top: 12px;
	padding-left: 14px;
	border-left: 2px solid var(--ecc-line);
	gap: 12px;
}

/* The comment box: a face and a one-line field that grows as it fills. */
.ecc-community .ecc-comment-form--chat {
	margin-top: 18px;
}

.ecc-community .ecc-comment--chat .ecc-comment-form--chat {
	margin: 8px 0 4px;
}

.ecc-community .ecc-chatbox {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: end;
	gap: 10px;
}

.ecc-community .ecc-chatbox > .ecc-post__avatar {
	align-self: start;
	margin-top: 5px;
}

.ecc-community .ecc-chatbox textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 42px;
	max-height: 260px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 21px;
	background: var(--color-background, #F4F0E6);
	color: var(--ecc-ink);
	font: inherit;
	/* 16px: iOS Safari zooms the page into any smaller field when tapped. */
	font-size: 16px;
	line-height: 1.35;
	resize: none;
	field-sizing: content;
	transition: background-color 120ms ease, border-color 120ms ease,
		min-height 380ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-community .ecc-chatbox textarea:focus {
	outline: none;
	border-color: var(--ecc-accent);
	background: var(--ecc-surface);
	min-height: 84px;
	border-radius: 16px;
}

.ecc-community .ecc-chatbox__send {
	padding: 10px 18px;
	min-height: 42px;
	font-size: 14px;
	line-height: 1.2;
}

.ecc-community .ecc-post-full .ecc-comments > .ecc-signin-prompt {
	margin-top: 18px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--color-background, #F4F0E6);
	font-size: 15px;
}

@media (max-width: 600px) {
	.ecc-community .ecc-post__title--full {
		font-size: 22px;
	}

	.ecc-community .ecc-post-full .ecc-post__stats {
		gap: 8px 6px;
	}

	.ecc-community .ecc-post__stats .ecc-stat--link {
		padding: 6px 8px;
	}

	.ecc-community .ecc-post__stats > .ecc-stat--link:first-child {
		margin-left: -8px;
	}

	.ecc-community .ecc-chatbox__send {
		padding: 10px 14px;
	}

	.ecc-community .ecc-chatbox textarea {
		padding: 10px 14px;
	}

	/* No face in the box on a phone: beside the button it leaves too little
	   room to type, and it is plainly your own box without it. */
	.ecc-community .ecc-chatbox {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ecc-community .ecc-chatbox > .ecc-post__avatar {
		display: none;
	}

	.ecc-community .ecc-comment--chat .ecc-comments__replies {
		padding-left: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecc-community .ecc-post__stats .ecc-stat--link,
	.ecc-community .ecc-chatbox textarea {
		transition: none;
	}
}

/* --- press ----------------------------------------------------------------
 * Buttons give a little under the finger and spring back, as iOS controls
 * do. Transform only, so nothing around them moves.
 */
.ecc-button,
.ecc-vote,
.ecc-savebtn,
.ecc-community .ecc-updown__button,
.ecc-community .ecc-post__stats .ecc-stat--link,
.ecc-reply__toggle {
	transition-property: background-color, border-color, color, transform;
	transition-duration: 0.2s, 0.2s, 0.2s, 0.35s;
	transition-timing-function: ease, ease, ease, cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-button:active,
.ecc-vote:active,
.ecc-savebtn:active,
.ecc-community .ecc-updown__button:active,
.ecc-community .ecc-post__stats .ecc-stat--link:active,
.ecc-reply__toggle:active {
	transform: scale(0.94);
	transition-duration: 0.2s, 0.2s, 0.2s, 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	.ecc-button:active,
	.ecc-vote:active,
	.ecc-savebtn:active,
	.ecc-community .ecc-updown__button:active,
	.ecc-community .ecc-post__stats .ecc-stat--link:active,
	.ecc-reply__toggle:active {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecc-community .ecc-post__body .ecc-link,
	.ecc-community .ecc-gallery__item img,
	.ecc-community .ecc-gallery__play,
	.ecc-community .ecc-community__tag,
	.ecc-community .ecc-updown__button,
	.ecc-community .ecc-composer__placeholder {
		transition: none;
	}
}

/* --- the leaderboard ------------------------------------------------------
 * /leaderboard/, and its top five beside the feed (ECC_Community). One row
 * per member: rank, face, name, points. The first three ranks get a medal
 * colour; the reader's own row is tinted so they can find themselves.
 */

.ecc-community .ecc-community__panel + .ecc-community__panel {
	margin-top: 20px;
}

.ecc-community .ecc-community__panel-more {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.ecc-community .ecc-community__panel-more a {
	color: var(--ecc-accent);
	text-decoration: underline;
}

/* On the article container, so it lines up with the hero above it, and a
   readable width within it. */
.ecc-leaderboard {
	max-width: 1120px;
	margin: 0 auto;
}

.ecc-leaderboard > * {
	max-width: 760px;
}

.ecc-community .ecc-board {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 8px 0;
	list-style: none;
}

.ecc-community .ecc-board--compact {
	padding: 0;
}

.ecc-community .ecc-board--you {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--ecc-line);
}

.ecc-community .ecc-board__row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 28px;
	border-bottom: 1px solid var(--ecc-line);
}

.ecc-community .ecc-board__row:last-child {
	border-bottom: 0;
}

.ecc-community .ecc-board--compact .ecc-board__row {
	gap: 10px;
	padding: 7px 0;
	border-bottom: 0;
}

.ecc-community .ecc-board__row--you {
	background: var(--ecc-soft);
}

.ecc-community .ecc-board--compact .ecc-board__row--you {
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: 12px;
}

.ecc-community .ecc-board__rank {
	flex: 0 0 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--ecc-muted);
	font-size: 14px;
	font-weight: 800;
}

.ecc-community .ecc-board__rank--1 {
	background: #F6D878;
	color: #5C4300;
}

.ecc-community .ecc-board__rank--2 {
	background: #DCDFE3;
	color: #3A4048;
}

.ecc-community .ecc-board__rank--3 {
	background: #EBC2A0;
	color: #5E3413;
}

.ecc-community .ecc-board--compact .ecc-board__rank {
	flex-basis: 24px;
	height: 24px;
	font-size: 12.5px;
}

.ecc-community .ecc-board--compact .ecc-post__avatar {
	flex-basis: 32px;
	width: 32px;
	height: 32px;
	font-size: 14px;
}

.ecc-community .ecc-board__who {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.ecc-community .ecc-board__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--ecc-ink);
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.ecc-community .ecc-board--compact .ecc-board__name {
	font-size: 14px;
}

.ecc-community .ecc-board__you {
	padding: 1px 8px;
	border-radius: 30px;
	background: var(--ecc-fill);
	color: var(--ecc-fill-ink);
	font-size: 11.5px;
	font-weight: 700;
}

.ecc-community .ecc-board__detail {
	font-size: 13px;
	color: var(--ecc-muted);
}

.ecc-community .ecc-board__points {
	flex: 0 0 auto;
	color: var(--ecc-accent);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.ecc-community .ecc-board--compact .ecc-board__points {
	font-size: 13px;
}

.ecc-community .ecc-leaderboard__you {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--ecc-muted);
}

.ecc-community .ecc-leaderboard__you a {
	color: var(--ecc-accent);
	text-decoration: underline;
}

.ecc-community .ecc-leaderboard__you--member {
	color: var(--ecc-ink);
	font-weight: 700;
}

@media (max-width: 600px) {
	.ecc-community .ecc-board__row {
		padding: 12px 16px;
	}
}

.ecc-community .ecc-board.ecc-card:hover {
	transform: none;
}

/* --- loading the next page --------------------------------------------------
 * While a tab, the sort or a filter link loads its page (ecc-interactions.js):
 * a thin bar along the top of the window that eases towards the far end and
 * waits there, and the list about to be replaced faded and inert. The fade
 * is delayed 120ms, so a page that arrives quickly never flickers.
 */

.ecc-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 3px;
	background: var(--color-primary, #7CB342);
	box-shadow: 0 0 8px rgba(124, 179, 66, 0.6);
	transform: scaleX(0);
	transform-origin: left center;
	animation: ecc-progress 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
	pointer-events: none;
}

@keyframes ecc-progress {
	0%   { transform: scaleX(0); }
	10%  { transform: scaleX(0.35); }
	100% { transform: scaleX(0.92); }
}

.is-loading :is(.ecc-community__list, .ecc-insights__list, .ecc-events__list, .ecc-board, .ecc-insights__scope, .ecc-empty) {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease 0.12s;
}

@media (prefers-reduced-motion: reduce) {
	/* Still there, so the reader knows it is loading; just not moving. */
	.ecc-progress {
		animation: none;
		transform: scaleX(0.6);
	}

	.is-loading :is(.ecc-community__list, .ecc-insights__list, .ecc-events__list, .ecc-board, .ecc-insights__scope, .ecc-empty) {
		transition: none;
	}
}

/* --- shown before the server answers --------------------------------------
 * A vote, a save or a comment changes the page the moment it is made
 * (ecc-interactions.js). A comment still on its way is drawn a little faint;
 * a refusal is said in a note that slides up from the bottom.
 */

/* inline-block so the number can roll: a transform does nothing on an
   inline box. */
.ecc-count {
	display: inline-block;
}

.ecc-comment.is-pending {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.ecc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 10000;
	transform: translate(-50%, 0);
	box-sizing: border-box;
	max-width: min(92vw, 440px);
	padding: 12px 18px;
	border-radius: 14px;
	background: rgba(17, 17, 17, 0.92);
	color: #ffffff;
	font-size: 14.5px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* "6 upvotes today" on a card in a feed ranked by the upvotes of a window:
   what put it where it is. */
.ecc-community .ecc-post__period {
	color: var(--ecc-accent);
	font-weight: 700;
}

/* --- tags in the post form -------------------------------------------------
 * Suggestions under the field as the author types, and the most used tags as
 * chips to add with one tap (ecc-interactions.js). Without the script it is
 * a plain comma-separated field.
 */
.ecc-community .ecc-tagfield {
	position: relative;
}

.ecc-community .ecc-tagsuggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 6px;
	list-style: none;
	background: var(--ecc-surface);
	border: 1px solid var(--ecc-line);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.ecc-community .ecc-tagsuggest li {
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ecc-ink);
	cursor: pointer;
}

.ecc-community .ecc-tagsuggest li:hover,
.ecc-community .ecc-tagsuggest li.is-active {
	background: var(--ecc-soft);
	color: var(--ecc-accent);
}

.ecc-community .ecc-tagchips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
}

.ecc-community .ecc-tagchips[hidden] {
	display: none;
}

.ecc-community .ecc-tagchips__label {
	font-size: 12.5px;
	color: var(--ecc-muted);
}

.ecc-community .ecc-tagchips__chip {
	appearance: none;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--ecc-soft);
	color: var(--ecc-accent);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-community .ecc-tagchips__chip:hover,
.ecc-community .ecc-tagchips__chip:focus-visible {
	background: #D6EDDC;
}

.ecc-community .ecc-tagchips__chip:active {
	transform: scale(0.94);
	transition-duration: 0.15s, 0.08s;
}

/* The feed has more tabs than the insight index -- a category each -- so
   they get the whole width, and the sort sits above them on the right, as
   the index already arranges it on a phone. */
.ecc-community .ecc-insights__bar {
	flex-wrap: wrap;
}

.ecc-community .ecc-insights__bar > .ecc-topics {
	flex: 1 1 100%;
}

.ecc-community .ecc-insights__bar > .ecc-filters--sort {
	order: -1;
	margin-left: auto;
	padding-bottom: 0;
}

/* --- photos and videos in the post form ------------------------------------
 * Without the script: the post's own with a Keep box each, and a file picker.
 * With it (.is-enhanced): a row of tiles, each uploading as soon as it is
 * picked, with its progress along the bottom; a tile can be removed, or
 * dragged along the row to reorder (ecc-community.js).
 */
.ecc-community .ecc-attach__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.ecc-community .ecc-attach__list:empty {
	display: none;
}

.ecc-community .ecc-attach__item {
	position: relative;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(17, 17, 17, 0.06);
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06);
}

.ecc-community .ecc-attach:not(.is-enhanced) .ecc-attach__item {
	height: auto;
	padding-bottom: 6px;
}

.ecc-community .ecc-attach__thumb {
	display: block;
	width: 100%;
	height: 96px;
	object-fit: cover;
	pointer-events: none;
}

.ecc-community .ecc-attach__thumb--blank {
	display: grid;
	place-items: center;
	color: var(--ecc-muted);
}

.ecc-community .ecc-attach__item--video::after {
	content: "";
	position: absolute;
	left: 8px;
	bottom: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.ecc-community .ecc-attach__keep {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 0;
	font-size: 13px;
}

.ecc-community .ecc-attach.is-enhanced .ecc-attach__keep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	padding: 0;
}

.ecc-community .ecc-attach__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.6);
	color: #ffffff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s ease;
}

.ecc-community .ecc-attach__remove svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
}

.ecc-community .ecc-attach__remove:hover {
	background: rgba(17, 17, 17, 0.8);
}

.ecc-community .ecc-attach__remove:active {
	transform: scale(0.9);
}

.ecc-community .ecc-attach__meter {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ecc-community .ecc-attach__item.is-uploading .ecc-attach__meter {
	opacity: 1;
}

.ecc-community .ecc-attach__bar {
	display: block;
	height: 100%;
	background: var(--ecc-fill);
	transform: scaleX(0.02);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-community .ecc-attach__state {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.ecc-community .ecc-attach__state:empty {
	display: none;
}

.ecc-community .ecc-attach__item.is-uploading .ecc-attach__thumb {
	filter: brightness(0.7);
}

.ecc-community .ecc-attach__item.is-failed {
	box-shadow: inset 0 0 0 2px var(--ecc-danger);
}

.ecc-community .ecc-attach__item.is-failed .ecc-attach__thumb {
	filter: grayscale(1) brightness(0.6);
}

.ecc-community .ecc-attach__item[draggable="true"] {
	cursor: grab;
}

.ecc-community .ecc-attach__item.is-dragging {
	opacity: 0.5;
}

/* --- the writing box --------------------------------------------------------
 * The text, the photos and videos added to it, and a toolbar along its foot,
 * in one bordered box that lights up as a whole when anything in it has the
 * cursor, as a social app's composer does.
 */
.ecc-community .ecc-composer__title {
	font-weight: 600;
}

.ecc-community .ecc-composer__titlefield {
	margin-bottom: 12px;
}

.ecc-community .ecc-composer__editor {
	overflow: hidden;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 14px;
	background: var(--ecc-surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ecc-community .ecc-composer__editor:focus-within,
.ecc-community .ecc-composer__editor.is-drop {
	border-color: var(--ecc-accent);
	box-shadow: 0 0 0 3px rgba(74, 115, 38, 0.16);
}

.ecc-community .ecc-field.ecc-composer__editor textarea {
	display: block;
	min-height: 132px;
	padding: 14px 16px 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	resize: vertical;
}

.ecc-community .ecc-field.ecc-composer__editor textarea:focus {
	outline: none;
}

.ecc-community .ecc-composer__editor .ecc-attach__list {
	margin: 0;
	padding: 4px 14px 14px;
}

.ecc-community .ecc-composer__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	border-top: 1px solid var(--ecc-line);
}

.ecc-community .ecc-composer__tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ecc-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-community .ecc-composer__tool svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--ecc-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ecc-community .ecc-composer__tool:hover,
.ecc-community .ecc-composer__tool:focus-within,
.ecc-community .ecc-composer__tool[aria-expanded="true"] {
	background: var(--ecc-soft);
}

.ecc-community .ecc-composer__tool:focus-visible,
.ecc-community .ecc-composer__tool:has(input:focus-visible) {
	outline: 2px solid var(--ecc-accent);
	outline-offset: 1px;
}

.ecc-community .ecc-composer__tool:active {
	transform: scale(0.96);
}

/* The native picker, over the whole button: a tap anywhere on it opens the
   picker, and a keyboard reaches it as the field it is. Without the script
   the field shows as the browser draws it. */
.ecc-community .ecc-attach.is-enhanced .ecc-attach__add input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ecc-community .ecc-attach:not(.is-enhanced) .ecc-attach__add {
	flex-wrap: wrap;
	cursor: default;
}

.ecc-community .ecc-attach:not(.is-enhanced) .ecc-attach__add input[type="file"] {
	order: 3;
	width: auto;
	padding: 0;
	border: 0;
	font-size: 14px;
}

.ecc-community .ecc-composer__nojs {
	margin: 0;
	padding: 0 16px 12px;
	color: var(--ecc-muted);
	font-size: 13px;
	line-height: 1.5;
}

.ecc-community .ecc-attach.is-enhanced .ecc-composer__nojs {
	display: none;
}

.ecc-community .ecc-composer__editor .ecc-attach__error {
	padding: 0 16px;
}

.ecc-community .ecc-field__optional {
	margin-left: 4px;
	color: var(--ecc-muted);
	font-weight: 500;
}

/* The popular tags on one line that scrolls, fading at its end, rather
   than stacking under the field. */
.ecc-community .ecc-composer__form .ecc-tagchips {
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
	mask-image: linear-gradient(to right, #000 85%, transparent);
}

.ecc-community .ecc-composer__form .ecc-tagchips::-webkit-scrollbar {
	display: none;
}

.ecc-community .ecc-composer__form .ecc-tagchips > * {
	flex: none;
}

.ecc-community .ecc-composer__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 6px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ecc-line);
}

.ecc-community .ecc-composer__actions .ecc-button {
	min-width: 112px;
}

.ecc-community .ecc-attach__error {
	margin: 0 0 10px;
	color: var(--ecc-danger);
	font-size: 14px;
	font-weight: 600;
}

/* --- links while writing ----------------------------------------------------
 * "Add a link" under the text, opening two fields in place.
 */
.ecc-community .ecc-linkpop {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--ecc-card-line);
	border-radius: 16px;
	background: var(--ecc-surface);
	box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
}

.ecc-community .ecc-composer__editor .ecc-linkpop {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ecc-line);
	border-radius: 0;
	background: #FAF8F2;
	box-shadow: none;
}

.ecc-community .ecc-linkpop input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid var(--color-pill-border, #D9D6CC);
	border-radius: 10px;
	background: var(--ecc-surface);
	font: inherit;
	font-size: 16px;
}

.ecc-community .ecc-linkpop input:focus {
	outline: 2px solid var(--ecc-accent);
	outline-offset: 0;
	border-color: var(--ecc-accent);
}

.ecc-community .ecc-linkpop .ecc-button {
	padding: 8px 18px;
}

.ecc-community .ecc-linkpop__tip {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ecc-muted);
	font-size: 12.5px;
}

.ecc-community .ecc-linkpop__note {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ecc-danger);
	font-size: 13.5px;
}

.ecc-community .ecc-linkpop__note:empty {
	display: none;
}

.ecc-community .ecc-linkpop__actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
}

@media (max-width: 560px) {
	.ecc-community .ecc-linkpop {
		grid-template-columns: 1fr;
	}
}

/* --- the full-screen view of a post's photos and videos --------------------
 * On the body, outside the feed's variables, so its colours are its own.
 */
.ecc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	touch-action: none;
}

.ecc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.ecc-lightbox__stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.ecc-lightbox__stage > * {
	grid-area: 1 / 1;
}

.ecc-lightbox__media {
	display: block;
	max-width: 100vw;
	object-fit: contain;
	background: #000000;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

img.ecc-lightbox__media {
	background: transparent;
}

.ecc-lightbox__close,
.ecc-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.ecc-lightbox__close:hover,
.ecc-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}

.ecc-lightbox__close:active,
.ecc-lightbox__nav:active {
	transform: scale(0.92);
}

.ecc-lightbox__close:focus-visible,
.ecc-lightbox__nav:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ecc-lightbox__close svg,
.ecc-lightbox__nav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ecc-lightbox__close {
	top: max(16px, env(safe-area-inset-top));
	right: 16px;
}

.ecc-lightbox__nav {
	top: 50%;
	margin-top: -22px;
}

.ecc-lightbox__nav--prev {
	left: 16px;
}

.ecc-lightbox__nav--next {
	right: 16px;
}

.ecc-lightbox.is-single .ecc-lightbox__nav {
	display: none;
}

.ecc-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: max(20px, env(safe-area-inset-bottom));
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font: 600 13px/1.5 system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

.ecc-lightbox__count:empty {
	display: none;
}

/* On a phone the arrows would sit on the picture; a swipe does their job. */
@media (hover: none) and (pointer: coarse) {
	.ecc-lightbox__nav {
		display: none;
	}
}

/* --- where a link goes, on hover --------------------------------------------- */
.ecc-linktip {
	position: fixed;
	z-index: 100001;
	box-sizing: border-box;
	max-width: min(92vw, 460px);
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(17, 17, 17, 0.94);
	color: rgba(255, 255, 255, 0.72);
	font: 500 13px/1.45 system-ui, -apple-system, sans-serif;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	pointer-events: none;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ecc-linktip__label {
	display: block;
	margin-bottom: 1px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ecc-linktip__url {
	display: block;
	overflow-wrap: anywhere;
}

.ecc-linktip .ecc-addr__host {
	color: #ffffff;
	font-weight: 700;
}

/* --- before leaving the site ------------------------------------------------ */
.ecc-leave {
	/* On the body, outside the scopes that set these for the buttons. */
	--ecc-fill: var(--color-primary, #7CB342);
	--ecc-fill-ink: var(--color-dark-teal, #0A1312);
	--ecc-ink: var(--color-text-main, #111111);
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: grid;
	place-items: center;
	padding: 16px;
	box-sizing: border-box;
}

.ecc-leave__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 19, 18, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ecc-leave__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 28px 24px 22px;
	border-radius: 24px;
	background: var(--color-surface, #ffffff);
	color: var(--color-text-muted, #5A5A54);
	box-shadow: 0 30px 80px rgba(10, 19, 18, 0.25);
	text-align: center;
}

.ecc-leave__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: #E6F4EA;
}

.ecc-leave__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--color-primary-on-light, #4A7326);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ecc-leave__title {
	margin: 0 0 8px;
	color: var(--color-text-main, #111111);
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ecc-leave__lead {
	margin: 0 0 6px;
	font-size: 15px;
}

.ecc-leave__url {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #F4F0E6;
	color: var(--color-text-muted, #5A5A54);
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-align: left;
}

.ecc-leave__url .ecc-addr__host {
	color: var(--color-text-main, #111111);
	font-size: 15.5px;
}

.ecc-leave__note {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.5;
}

.ecc-leave__trust {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-size: 13.5px;
	cursor: pointer;
}

.ecc-leave__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* The domain is never cut short on the button that goes there: a long one
   wraps, and puts the buttons one above the other. */
.ecc-leave__actions > * {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.ecc-community .ecc-attach__remove,
	.ecc-community .ecc-attach__bar,
	.ecc-community .ecc-composer__editor,
	.ecc-community .ecc-composer__tool,
	.ecc-lightbox__close,
	.ecc-lightbox__nav {
		transition: none;
	}
}

/* --- the feed going on as it is scrolled -------------------------------------
 * "Show older posts" is followed in the background as it comes near
 * (ecc-community.js). While that page loads, the button turns into a spinner;
 * at the end of the feed a line says so.
 */
.ecc-community .ecc-community__more.is-loading a {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.ecc-community .ecc-community__more.is-loading a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(17, 17, 17, 0.15);
	border-top-color: var(--ecc-accent);
	border-radius: 50%;
	animation: ecc-spin 0.7s linear infinite;
}

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

.ecc-community .ecc-community__end {
	margin: 24px 0 8px;
	color: var(--ecc-muted);
	font-size: 14px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.ecc-community .ecc-community__more.is-loading a::after {
		animation-duration: 2s;
	}
}