/**
 * ICC Core — front-end styles.
 *
 * Every colour and measure resolves from a theme.json custom property, with a
 * fallback so the plugin still renders correctly under a different theme.
 *
 * Typography follows the theme: reading copy is serif, headings are small and
 * sans. Nothing in this file should reintroduce a large serif heading.
 */

:root {
	--icc-ink: var(--wp--preset--color--ink, #1c1c1a);
	--icc-ink-soft: var(--wp--preset--color--ink-soft, #3d3d38);
	--icc-muted: var(--wp--preset--color--muted, #72736c);
	--icc-line: var(--wp--preset--color--line, #e4e1d8);
	--icc-ground: var(--wp--preset--color--ground, #ffffff);
	--icc-ground-soft: var(--wp--preset--color--ground-soft, #f7f5ef);
	--icc-deep: var(--wp--preset--color--deep, #194657);
	--icc-teal: var(--wp--preset--color--teal, #286478);
	--icc-sky: var(--wp--preset--color--sky, #99d2e7);
	--icc-sky-soft: var(--wp--preset--color--sky-soft, #e9f5fa);
	--icc-gold: var(--wp--preset--color--gold, #ecb913);
	--icc-accent: var(--wp--preset--color--accent, #8a6a10);
	--icc-ember: var(--wp--preset--color--ember, #c42b00);

	--icc-radius: 3px;
	--icc-gap: clamp(1rem, 2.5vw, 1.75rem);

	/* One height for every control on the site -- buttons, inputs, selects
	   (2026-09-15). Before this a button was whatever its padding made it, so
	   the same row could hold a 32px button, a 42px one and a 44px field, and
	   the filter bar's Filter button stood 2px proud of the box beside it. */
	--icc-control-h: 2.75rem;
	--icc-serif: var(--wp--preset--font-family--serif, "Source Serif 4", Georgia, serif);
	--icc-sans: var(--wp--preset--font-family--sans, Inter, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ---------------------------------------------------------------- primitives */

.icc-icon {
	flex: none;
	vertical-align: -0.18em;
}

.icc-sep {
	color: var(--icc-line);
	margin: 0 0.15em;
}

.icc-muted {
	color: var(--icc-muted);
}

.icc-eyebrow {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--icc-accent);
	margin: 0 0 0.6rem;
	line-height: 1.5;
}

.icc-meta {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0.2rem 0 0;
}

/* Section headings are small and sans throughout — this is the single rule that
   most defines the look, so it is deliberately not overridden anywhere. */
.icc-h3 {
	font-family: var(--icc-sans);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0 0 0.9rem;
	color: var(--icc-ink);
}

.icc-lede {
	font-size: 1.0625rem;
	color: var(--icc-ink-soft);
	margin: 0 0 1.25rem;
}

.icc-empty {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	color: var(--icc-muted);
	padding: 1rem 0;
	margin: 0;
}

.icc-badge {
	display: inline-block;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--icc-gold);
	color: var(--icc-ink);
}

.icc-back {
	display: inline-block;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	text-decoration: none;
	margin-bottom: 1.1rem;
}

.icc-back:hover {
	color: var(--icc-ink);
}

.icc-link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--icc-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--icc-deep);
	text-decoration: none;
	margin-top: 0.9rem;
}

.icc-link-more:hover {
	color: var(--icc-accent);
}

.icc-link-more .icc-icon {
	transition: transform 0.18s ease;
}

.icc-link-more:hover .icc-icon {
	transform: translateX(3px);
}

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

/* box-sizing on purpose: without it the 1px border is added to the height, and
   a button told to be 2.75rem comes out 2px taller than the 2.75rem field
   beside it -- which is exactly how the Filter button ended up sitting proud of
   the search box. min-height rather than height, so a long label in a narrow
   side panel wraps to two lines instead of overflowing. */
.icc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 0.5em;
	min-height: var(--icc-control-h);
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.01em;
	padding: 0.5em 1.5em;
	border: 1px solid var(--icc-ink);
	border-radius: var(--icc-radius);
	background: var(--icc-ink);
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.icc-btn:hover,
.icc-btn:focus-visible {
	background: var(--icc-deep);
	border-color: var(--icc-deep);
	color: #fff;
}

.icc-btn--ghost {
	background: transparent;
	color: var(--icc-ink);
	border-color: var(--icc-line);
}

.icc-btn--ghost:hover,
.icc-btn--ghost:focus-visible {
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
	border-color: var(--icc-ink);
}

/* Not a smaller button any more, just a narrower one. The church asked for one
   button size (2026-09-15); --sm survives because thirty places use it, and
   because a 1.5em gutter either side is too much for a 17rem side panel. */
.icc-btn--sm {
	padding-inline: 1rem;
}

/* A button that fills its column: the side panel's, mostly, where two buttons
   of different label lengths otherwise make a ragged edge. */
.icc-btn--block {
	display: flex;
	width: 100%;
}

/* -------------------------------------------------------------------- notices */

.icc-notice {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	border-radius: var(--icc-radius);
	padding: 0.85rem 1.1rem;
	margin: 0 0 1.5rem;
	border-left: 3px solid var(--icc-gold);
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
}

.icc-notice p {
	margin: 0 0 0.5rem;
}

.icc-notice p:last-child {
	margin-bottom: 0;
}

.icc-notice--ok {
	border-left-color: #2f7a4f;
}

.icc-notice--error {
	border-left-color: var(--icc-ember);
}

.icc-notice--nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* align-items centres each item's *margin* box, and .icc-notice p carries
   0.5rem underneath it -- which put the sentence 4px above the middle of the
   button beside it (2026-09-16). The gap above does the spacing here. */
.icc-notice--nudge p {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------- login gate */

.icc-gate {
	text-align: center;
	max-width: 28rem;
	margin: 2.5rem auto;
	padding: 2.25rem 2rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
}

.icc-gate .icc-icon {
	color: var(--icc-accent);
}

.icc-gate__title {
	font-family: var(--icc-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0.7rem 0 0.4rem;
}

.icc-gate__body {
	font-size: 0.9375rem;
	color: var(--icc-muted);
	margin: 0 0 1.35rem;
}

/* --------------------------------------------------------------------- fields */

.icc-field {
	margin-bottom: 1.15rem;
	min-width: 0;
}

.icc-field__label {
	display: block;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--icc-ink-soft);
	margin-bottom: 0.35rem;
}

.icc-field__req {
	color: var(--icc-ember);
	margin-left: 0.2em;
}

.icc-field__num {
	display: inline-block;
	min-width: 1.4em;
	color: var(--icc-accent);
	font-variant-numeric: tabular-nums;
}

.icc-field__input {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--icc-ink);
	background: var(--icc-ground);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	padding: 0.55rem 0.7rem;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.icc-field__input:focus {
	outline: none;
	border-color: var(--icc-deep);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--icc-deep) 14%, transparent);
}

textarea.icc-field__input {
	resize: vertical;
	font-family: var(--icc-serif);
	font-size: 1rem;
	line-height: 1.6;
}

.icc-field__desc {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0.35rem 0 0;
	line-height: 1.5;
}

.icc-field__check,
.icc-radio {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	line-height: 1.45;
	cursor: pointer;
}

.icc-field__check input,
.icc-radio input {
	margin-top: 0.2em;
	flex: none;
}

.icc-field__vis {
	margin-top: 0.35rem;
}

.icc-field__vis-select {
	font-family: var(--icc-sans);
	font-size: 0.75rem;
	color: var(--icc-muted);
	background: transparent;
	border: 0;
	border-bottom: 1px dotted var(--icc-line);
	padding: 0.1rem 0;
	cursor: pointer;
	max-width: 100%;
}

.icc-field__vis-select:hover,
.icc-field__vis-select:focus {
	color: var(--icc-ink);
}

.icc-fieldset {
	border: 0;
	border-top: 1px solid var(--icc-line);
	padding: 1.75rem 0 0;
	margin: 0 0 1.75rem;
}

.icc-fieldset__legend {
	font-family: var(--icc-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--icc-ink);
	padding: 0;
	margin-bottom: 0.3rem;
}

.icc-fieldset__desc {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0 0 1.1rem;
}

.icc-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	padding-top: 0.5rem;
}

.icc-grid {
	display: grid;
	gap: 0 var(--icc-gap);
}

@media (min-width: 40em) {
	.icc-grid--2 {
		grid-template-columns: 1fr 1fr;
	}

	.icc-field--repeater,
	.icc-field--textarea {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ repeaters */

.icc-repeater__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)) auto;
	gap: 0.7rem;
	align-items: end;
	padding: 0.8rem;
	margin-bottom: 0.55rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-repeater__cell-label {
	display: block;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--icc-muted);
	margin-bottom: 0.25rem;
}

.icc-repeater__remove {
	border: 1px solid var(--icc-line);
	background: var(--icc-ground);
	color: var(--icc-muted);
	border-radius: var(--icc-radius);
	width: 2rem;
	height: 2.15rem;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.icc-repeater__remove:hover {
	color: var(--icc-ember);
	border-color: var(--icc-ember);
}

/* ---------------------------------------------------------------------- cards */

.icc-cards {
	display: grid;
	gap: var(--icc-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 34em) {
	.icc-cards--3,
	.icc-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 56em) {
	.icc-cards--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.icc-cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.icc-card {
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	padding: 1.35rem;
	background: var(--icc-ground);
}

.icc-card__title {
	font-family: var(--icc-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.3rem;
	color: var(--icc-ink);
}

.icc-card__title a {
	color: inherit;
	text-decoration: none;
}

.icc-card__title a:hover {
	color: var(--icc-deep);
}

.icc-card__body {
	font-size: 0.9375rem;
	color: var(--icc-ink-soft);
	margin: 0;
	line-height: 1.6;
}

.icc-card__tags {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--icc-accent);
	margin: 0.75rem 0 0;
}

.icc-card__avatar {
	border-radius: 50%;
	margin-bottom: 0.8rem;
	display: block;
}

.icc-card__meta {
	list-style: none;
	padding: 0;
	margin: 0.8rem 0 0;
	font-family: var(--icc-sans);
	font-size: 0.875rem;
	color: var(--icc-ink-soft);
}

.icc-card__meta li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.18rem 0;
}

.icc-card__meta a {
	color: inherit;
}

.icc-card--tile {
	display: block;
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.icc-card--tile:hover {
	border-color: var(--icc-ink);
	transform: translateY(-2px);
}

.icc-card__icon {
	display: inline-flex;
	color: var(--icc-accent);
	margin-bottom: 0.6rem;
}

.icc-card--ministry {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.icc-card--ministry .icc-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* One padding on every side. It used to be 1.2 / 1.3 / 1.35rem, which is three
   numbers where the eye is looking for one (2026-09-15). */
.icc-card--ministry .icc-card__inner {
	padding: 1.3rem;
}

/* ------------------------------------------------------------------- calendar */

.icc-calendar__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.9rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid var(--icc-line);
}

.icc-tabs {
	display: flex;
	gap: 0.2rem;
	flex-wrap: wrap;
}

.icc-tabs__tab {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--icc-muted);
	text-decoration: none;
	padding: 0.45em 0.85em;
	border-radius: var(--icc-radius);
}

.icc-tabs__tab:hover {
	color: var(--icc-ink);
	background: var(--icc-ground-soft);
}

.icc-tabs__tab.is-active {
	color: #fff;
	background: var(--icc-deep);
}

.icc-calendar__nav {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* The site's one control height (2026-09-15): the arrows share a row with two
   dropdowns, and at 1.85rem they were 15px shorter than what they sit beside.
   box-sizing, or the border adds to it -- the same 2px that had the Filter
   button standing proud of its search box. */
.icc-calendar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--icc-control-h);
	min-height: var(--icc-control-h);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	color: var(--icc-ink);
	text-decoration: none;
	line-height: 1;
}

.icc-calendar__arrow:hover {
	border-color: var(--icc-ink);
	background: var(--icc-ground-soft);
}

.icc-calendar__month {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	min-width: 9ch;
	text-align: center;
	color: var(--icc-ink);
}

.icc-month {
	display: none;
}

.icc-month__head,
.icc-month__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.icc-month__dayname {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--icc-muted);
	padding: 0 0 0.5rem;
	text-align: center;
}

.icc-month__grid {
	border-top: 1px solid var(--icc-line);
	border-left: 1px solid var(--icc-line);
}

.icc-month__cell {
	min-height: 7rem;
	padding: 0.35rem;
	border-right: 1px solid var(--icc-line);
	border-bottom: 1px solid var(--icc-line);
	font-family: var(--icc-sans);
	font-size: 0.75rem;
}

.icc-month__cell.is-outside {
	background: var(--icc-ground-soft);
	opacity: 0.55;
}

.icc-month__cell.is-today .icc-month__date {
	background: var(--icc-deep);
	color: #fff;
}

.icc-month__date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--icc-ink-soft);
	margin-bottom: 0.25rem;
}

.icc-month__event {
	display: block;
	padding: 0.18rem 0.3rem;
	margin-bottom: 0.18rem;
	border-left: 2px solid var(--icc-gold);
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
	text-decoration: none;
	line-height: 1.3;
	overflow: hidden;
}

.icc-month__event:hover {
	background: var(--icc-sky-soft);
}

.icc-month__time {
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--icc-accent);
}

.icc-month__label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.icc-month__more {
	display: block;
	font-size: 0.68rem;
	color: var(--icc-muted);
}

/* The grid is a desktop luxury; on a phone the agenda list below it is the
   calendar, so the grid is not rendered at all rather than squashed. */
@media (min-width: 52em) {
	.icc-month {
		display: block;
		margin-bottom: 2.25rem;
	}
}


/* Click a day to add an event (people with edit rights only). */
.icc-month__cell {
	position: relative;
}

.icc-month__add {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	display: none;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 1px solid var(--icc-line);
	border-radius: 50%;
	background: var(--icc-ground);
	color: var(--icc-deep);
	cursor: pointer;
}

.icc-month__cell.is-addable:hover .icc-month__add,
.icc-month__cell.is-addable:focus-within .icc-month__add {
	display: grid;
}

.icc-month__add:hover {
	background: var(--icc-deep);
	border-color: var(--icc-deep);
	color: #fff;
}

.icc-month__pencil,
.icc-pencil {
	display: inline-grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
	margin-left: 0.25rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--icc-muted);
	cursor: pointer;
	vertical-align: middle;
}

.icc-month__pencil:hover,
.icc-pencil:hover {
	background: var(--icc-sky-soft);
	color: var(--icc-deep);
}

.icc-month__pencil {
	position: absolute;
	right: 0.2rem;
	margin-top: -1.55rem;
	opacity: 0;
}

.icc-month__cell:hover .icc-month__pencil,
.icc-month__pencil:focus {
	opacity: 1;
}

/* The Calendar / List switch, the year picker and the "Today" escape hatch. */

/* The two views are a segmented control built out of the site's one button:
   the same height, border, radius and type as every other control on the page
   (2026-09-15). They used to be borderless pills, which was the only pair of
   buttons on the site that did not look like the buttons on the site. */
.icc-tabs--views {
	gap: 0;
}

.icc-tabs--views .icc-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	box-sizing: border-box;
	min-height: var(--icc-control-h);
	padding: 0.5em 1.1em;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid var(--icc-line);
	border-radius: 0;
	color: var(--icc-ink);
	background: transparent;
}

.icc-tabs--views .icc-tabs__tab:first-child {
	border-radius: var(--icc-radius) 0 0 var(--icc-radius);
}

.icc-tabs--views .icc-tabs__tab:last-child {
	border-radius: 0 var(--icc-radius) var(--icc-radius) 0;
}

/* One border between them rather than two. */
.icc-tabs--views .icc-tabs__tab + .icc-tabs__tab {
	margin-left: -1px;
}

.icc-tabs--views .icc-tabs__tab:hover {
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
}

.icc-tabs--views .icc-tabs__tab.is-active {
	position: relative;
	background: var(--icc-ink);
	border-color: var(--icc-ink);
	color: #fff;
}

.icc-calendar__nav {
	flex-wrap: wrap;
}

.icc-calendar__jump {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.icc-calendar__jump select {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	padding: 0.35em 0.5em;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground);
	color: var(--icc-ink);
}

.icc-calendar__today {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-deep);
}

/* Two absolutely-positioned buttons in one cell; the trash sits inboard of
 * the pencil rather than on top of it. */
.icc-month__pencil--trash {
	right: 1.75rem;
}

.icc-month__cell:hover .icc-month__pencil--trash,
.icc-month__pencil--trash:focus {
	opacity: 1;
}

.icc-month__pencil--trash:hover,
.icc-pencil--trash:hover {
	background: color-mix(in srgb, var(--icc-ember) 12%, transparent);
	color: var(--icc-ember);
}

/* ------------------------------------------------------- calendar list view */

.icc-yearlist {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	/* stretch, not start: the rule between the columns should run the height of
	   the longer one rather than stopping where the shorter one ends. */
	align-items: stretch;
}

.icc-yearlist__col--birthdays {
	border-left: 1px solid var(--icc-line);
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
}

.icc-yearlist__head {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--icc-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--icc-ink);
	margin: 0 0 1.1rem;
}

.icc-yearlist__head .icc-icon {
	color: var(--icc-accent);
}

.icc-yearlist .icc-agenda__item.is-today .icc-agenda__date {
	color: var(--icc-deep);
	font-weight: 700;
}

.icc-yearlist .icc-celebrants {
	margin-bottom: 0;
}

@media (max-width: 52em) {
	.icc-yearlist {
		grid-template-columns: 1fr;
	}

	.icc-yearlist__col--birthdays {
		border-left: 0;
		border-top: 1px solid var(--icc-line);
		padding-left: 0;
		padding-top: 1.75rem;
	}
}

.icc-month__hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0 0 0.9rem;
}

.icc-month__hint .icc-icon {
	color: var(--icc-accent);
}

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

.icc-agenda {
	list-style: none;
	padding: 0;
	margin: 0;
}

.icc-agenda__item {
	display: flex;
	gap: 1rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-agenda--compact .icc-agenda__item {
	padding: 0.75rem 0;
}

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

.icc-agenda__date {
	flex: none;
	width: 2.9rem;
	text-align: center;
	line-height: 1.1;
	font-family: var(--icc-sans);
}

.icc-agenda__dow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--icc-accent);
}

.icc-agenda__day {
	display: block;
	font-family: var(--icc-serif);
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--icc-ink);
	font-variant-numeric: tabular-nums;
}

.icc-agenda__body {
	min-width: 0;
}

.icc-agenda__title {
	font-family: var(--icc-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.icc-agenda__title a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-agenda__title a:hover {
	color: var(--icc-deep);
}

.icc-agenda__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0.2rem 0 0;
}

.icc-agenda__sep {
	color: var(--icc-line);
}

/* ----------------------------------------------------------------- celebrants */

.icc-celebrants {
	list-style: none;
	padding: 0;
	margin: 0;
}

.icc-celebrants__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-celebrants__item.is-today {
	background: var(--icc-sky-soft);
	margin: 0 -0.9rem;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
	border-radius: var(--icc-radius);
}

.icc-celebrants__day {
	flex: none;
	width: 2.9rem;
	text-align: center;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--icc-accent);
	line-height: 1.1;
}

.icc-celebrants__day strong {
	display: block;
	font-family: var(--icc-serif);
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--icc-ink);
}

.icc-celebrants__avatar {
	border-radius: 50%;
	flex: none;
}

.icc-celebrants__name {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--icc-ink);
}

.icc-celebrants__years {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin-left: auto;
}

/* -------------------------------------------------------------------- sermons */

.icc-directory__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--icc-line);
}

.icc-directory__filters .icc-field {
	margin-bottom: 0;
	flex: 1 1 9rem;
}

.icc-directory__filters .icc-field--search {
	flex: 2 1 15rem;
}

/* The sermon filter bar is a grid so the search box, the three selects and the
   two buttons share one baseline and one height. The group block around it
   adds a top margin to every child it contains; that is cancelled here or the
   fields stagger. */
.icc-sermon-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	align-items: end;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--icc-line);
}

.icc-sermon-filters > * {
	margin: 0 !important;
}

.icc-sermon-filters .icc-field {
	margin-bottom: 0;
}

.icc-sermon-filters .icc-field__input,
.icc-sermon-filters__actions .icc-btn {
	height: var(--icc-control-h);
	min-height: var(--icc-control-h);
	padding-top: 0;
	padding-bottom: 0;
}

.icc-sermon-filters select.icc-field__input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2372736c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
}

.icc-sermon-filters select.icc-field__input:disabled {
	color: var(--icc-muted);
	background-color: var(--icc-ground-soft);
}

.icc-sermon-filters__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.icc-sermon-filters__actions .icc-btn {
	flex: 1 1 auto;
	white-space: nowrap;
}

@media (min-width: 40em) {
	.icc-sermon-filters {
		grid-template-columns: 1fr 1fr;
	}

	.icc-sermon-filters .icc-field--search,
	.icc-sermon-filters__actions {
		grid-column: 1 / -1;
	}

	.icc-sermon-filters__actions .icc-btn {
		flex: 0 0 auto;
	}
}

@media (min-width: 64em) {
	.icc-sermon-filters {
		grid-template-columns: minmax(15rem, 1.5fr) 1fr 1fr 1fr auto;
	}

	.icc-sermon-filters .icc-field--search,
	.icc-sermon-filters__actions {
		grid-column: auto;
	}
}

.icc-directory__count {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0 0 1.35rem;
}

.icc-embed {
	position: relative;
	width: 100%;
	background: var(--icc-ink);
	border-radius: var(--icc-radius);
	overflow: hidden;
}

.icc-embed--16x9 {
	aspect-ratio: 16 / 9;
}

.icc-embed iframe,
.icc-embed video,
.icc-embed > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.icc-audio {
	display: block;
	width: 100%;
	margin-top: 0.9rem;
}

.icc-latest-sermon {
	display: grid;
	gap: var(--icc-gap);
}

@media (min-width: 52em) {
	.icc-latest-sermon {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: clamp(1.75rem, 4vw, 3.25rem);
	}
}

.icc-latest-sermon__title {
	font-family: var(--icc-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.008em;
	margin: 0 0 0.4rem;
}

.icc-latest-sermon__title a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-latest-sermon__title a:hover {
	color: var(--icc-deep);
}

.icc-latest-sermon__excerpt {
	color: var(--icc-ink-soft);
	margin: 0.9rem 0 0;
	font-size: 1rem;
}

/* The sermon library: a grid of cards, each led by the recording's thumbnail.
   The Query Loop prints a <ul>, so the list styling is undone here. */
.icc-sermon-grid .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--icc-gap);
	grid-template-columns: 1fr;
}

.icc-sermon-grid .wp-block-post-template > li {
	margin: 0;
	padding: 0;
	display: flex;
}

@media (min-width: 34em) {
	.icc-sermon-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 56em) {
	.icc-sermon-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

.icc-sermon-grid:has(.icc-card--sermon.is-plain) .wp-block-post-template {
	grid-template-columns: 1fr;
}

.icc-sermon-grid .wp-block-query-pagination {
	margin-top: 2.25rem;
}

.icc-card--sermon {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: border-color 0.16s ease;
}

.icc-card--sermon:hover {
	border-color: var(--icc-ink);
}

.icc-card__media--video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--icc-ink);
	overflow: hidden;
}

/* hqdefault is 4:3 with black bars on a widescreen video; cover crops them. */
.icc-card__media--video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.icc-card--sermon:hover .icc-card__media--video img {
	transform: scale(1.03);
}

.icc-card__nomedia {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--icc-sky);
	background: linear-gradient(160deg, var(--icc-deep), var(--icc-teal));
}

.icc-card__play {
	position: absolute;
	left: 0.85rem;
	bottom: 0.8rem;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	color: var(--icc-ink);
	background: rgba(255, 255, 255, 0.92);
}

.icc-card__vcount {
	position: absolute;
	right: 0.85rem;
	bottom: 0.9rem;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(28, 28, 26, 0.7);
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
}

.icc-card--sermon .icc-card__inner {
	padding: 1.15rem 1.3rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.icc-card--sermon .icc-card__tags {
	margin: 0;
}

.icc-card--sermon .icc-card__title {
	font-family: var(--icc-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0;
}

.icc-card--sermon .icc-meta {
	margin: 0;
}

.icc-card--sermon .icc-card__body {
	margin-top: 0.45rem;
	font-size: 0.9375rem;
}


/* The leadership page's ministry-head cards. */
.icc-card--head .icc-card__inner {
	padding: 1.2rem 1.3rem 1.3rem;
}

.icc-heads__people {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
}

/* A headshot, a name and a title -- the same three things the pastors and the
   board of trustees get further up the page (2026-09-15). */
.icc-heads__people li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0;
}

.icc-heads__photo {
	flex: none;
	display: block;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--icc-ground-soft);
}

/* The empty frame is the placeholder at portrait-badge size: it names whose
   photograph is still wanted, which an icon cannot do. */
.icc-heads__photo--empty .icc-ph {
	width: 3rem;
	height: 3rem;
	padding: 0;
	gap: 0;
	max-height: none;
}

.icc-heads__photo--empty .icc-ph__caption {
	display: none;
}

.icc-heads__photo--empty .icc-ph__mark svg {
	width: 18px;
	height: 18px;
}

.icc-heads__who {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.icc-heads__people .icc-icon {
	color: var(--icc-accent);
}

.icc-heads__name {
	color: var(--icc-ink);
	font-weight: 500;
}

.icc-heads__role {
	color: var(--icc-muted);
	font-size: 0.8125rem;
}

.icc-heads__gap {
	margin: 0.6rem 0 0;
	font-family: var(--icc-sans);
	font-size: 0.875rem;
	color: var(--icc-muted);
	font-style: italic;
}

/* ------------------------------------------------------------------ dashboard */

.icc-dashboard__head {
	margin-bottom: 1.75rem;
}

.icc-dashboard__title {
	font-family: var(--icc-serif);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.16;
	margin: 0;
	color: var(--icc-ink);
}

.icc-dashboard__tiles {
	margin-bottom: 2.5rem;
}

.icc-dashboard__cols {
	display: grid;
	gap: 2.25rem;
}

@media (min-width: 52em) {
	.icc-dashboard__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--icc-gap);
	}
}

.icc-simple-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
}

.icc-simple-list li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-simple-list a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-simple-list a:hover {
	color: var(--icc-deep);
}

.icc-dashboard__signout {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--icc-line);
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
}

.icc-dashboard__signout a {
	color: var(--icc-muted);
}

/* ------------------------------------------------------------------- journals */

.icc-journals {
	list-style: none;
	padding: 0;
	margin: 0;
}

.icc-journals__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-journals__title {
	font-family: var(--icc-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.icc-journals__title a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-journals__title a:hover {
	color: var(--icc-deep);
}

.icc-journals__status {
	flex: none;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--icc-muted);
	white-space: nowrap;
}

.icc-journals__status.is-done {
	color: #2f7a4f;
}

.icc-journal__title {
	font-family: var(--icc-serif);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.16;
	margin: 0;
	color: var(--icc-ink);
}

.icc-journal__summary {
	padding: 1.25rem 0 2rem;
	border-bottom: 1px solid var(--icc-line);
	margin-bottom: 2rem;
}

.icc-journal__qhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--icc-sans);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1.35rem;
	color: var(--icc-ink);
}

.icc-journal__private {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--icc-muted);
}

.icc-journal__form .icc-field__label {
	font-family: var(--icc-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--icc-ink);
	line-height: 1.55;
	margin-bottom: 0.55rem;
	display: flex;
	gap: 0.2rem;
}

/* -------------------------------------------------------------------- serving */

.icc-serving__section {
	padding-bottom: 2.25rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid var(--icc-line);
}

.icc-serving__section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.icc-availability {
	list-style: none;
	padding: 0;
	margin: 0 0 1.35rem;
}

.icc-availability__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-availability__date {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--icc-ink);
}

.icc-availability__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---------------------------------------------------------- scripture popover */

.icc-ref {
	color: var(--icc-deep);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	white-space: nowrap;
}

.icc-ref:hover {
	color: var(--icc-accent);
}

.icc-ref-pop {
	position: absolute;
	z-index: 90;
	max-width: min(25rem, calc(100vw - 2rem));
	padding: 0.95rem 1.1rem;
	background: var(--icc-ink);
	color: #f4f2ec;
	border-radius: var(--icc-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.icc-ref-pop__ref {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--icc-gold);
	margin: 0 0 0.45rem;
}

.icc-ref-pop__body {
	font-family: var(--icc-serif);
	margin: 0;
	white-space: pre-wrap;
	max-height: 17rem;
	overflow-y: auto;
}

.icc-ref-pop__credit {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	color: rgba(244, 242, 236, 0.55);
	margin: 0.7rem 0 0;
}

/* ----------------------------------------------------------------------- misc */

.icc-list {
	margin: 0;
	padding-left: 1.1rem;
}

.icc-prose > *:first-child {
	margin-top: 0;
}

.icc-prose > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.icc-card--tile,
	.icc-link-more .icc-icon {
		transition: none;
	}

	.icc-card--tile:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------ video carousel */

.icc-carousel__slide[hidden] {
	display: none;
}

.icc-carousel__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 0.9rem;
	margin-top: 0.9rem;
}

.icc-carousel__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.6em 1em;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: transparent;
	color: var(--icc-ink);
	cursor: pointer;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.icc-carousel__btn:hover,
.icc-carousel__btn:focus-visible {
	border-color: var(--icc-ink);
	background: var(--icc-ground-soft);
}

.icc-carousel__parts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-carousel__part {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	padding: 0.5em 0.9em;
	border: 1px solid var(--icc-line);
	border-radius: 999px;
	background: transparent;
	color: var(--icc-ink-soft);
	cursor: pointer;
	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.icc-carousel__part:hover,
.icc-carousel__part:focus-visible {
	border-color: var(--icc-ink);
	color: var(--icc-ink);
}

.icc-carousel__part.is-active {
	background: var(--icc-deep);
	border-color: var(--icc-deep);
	color: #fff;
}

.icc-carousel__status {
	text-align: center;
	margin-top: 0.55rem;
}

/* On a phone the part switcher takes the first row and the two arrows share
   the second, instead of "Next" dropping alone onto a line of its own. */
@media (max-width: 40em) {
	.icc-carousel__parts {
		order: -1;
		flex-basis: 100%;
	}

	.icc-carousel__btn {
		flex: 1 1 0;
		justify-content: center;
	}
}

/* --------------------------------------------------------------- sermon body */

.icc-sermon__summary-head {
	margin-top: 0 !important;
}

.icc-sermon__section {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--icc-line);
}

.icc-truths__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: icc-truths;
}

.icc-truths__list li {
	counter-increment: icc-truths;
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 0.9rem;
}

.icc-truths__list li::before {
	content: counter(icc-truths);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.65rem;
	height: 1.65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--icc-sky-soft);
	color: var(--icc-deep);
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.icc-challenge {
	border-top: 0;
	border-left: 3px solid var(--icc-gold);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
	padding: 1.35rem 1.5rem;
}

.icc-challenge h2 {
	margin-bottom: 0.6rem;
}

.icc-challenge p {
	margin: 0 0 0.9rem;
}

.icc-challenge p:last-child {
	margin-bottom: 0;
}

.icc-verses {
	list-style: none;
	margin: 0 0 1.35rem;
	padding: 0;
	font-family: var(--icc-serif);
	font-size: 1rem;
}

.icc-verses li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-verses li:last-child {
	border-bottom: 0;
}

.icc-sermon__aside-head {
	margin-top: 1.1rem !important;
}

/* ---------------------------------------------------- ministry members area */

.icc-ministry-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-top: 2.25rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-sky-soft);
}

.icc-ministry-cta .icc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.3rem;
}

.icc-ministry-cta__text {
	margin: 0;
	font-size: 1rem;
	color: var(--icc-ink-soft);
}

.icc-area__section {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--icc-line);
}

.icc-resources {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-resources__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--icc-line);
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
}

.icc-resources__item:last-child {
	border-bottom: 0;
}

/* The icon sits in a tinted disc rather than floating loose beside the text:
   at 18px on its own it read as a stray mark next to the link. */
.icc-resources__item .icc-icon {
	color: var(--icc-deep);
	flex: 0 0 auto;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 0.4rem;
	border-radius: 50%;
	background: var(--icc-sky-soft);
}

.icc-resources__item > div {
	min-width: 0;
}

.icc-resources__link {
	overflow-wrap: anywhere;
}

.icc-resources__link {
	font-weight: 500;
	color: var(--icc-deep);
	text-decoration: none;
}

.icc-resources__link:hover {
	text-decoration: underline;
}

.icc-resources__note {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

/* ----------------------------------------------------------------------- FAQ */

/* Each question already closes with a rule, so the topic heading carries none
   of its own -- two rules in a row read as a mistake. */
.icc-faq__topic {
	margin-top: 2.75rem;
	margin-bottom: 0.4rem;
}

.icc-faq__body > .icc-faq__topic:first-child {
	margin-top: 0;
}

.icc-faq__answer > p:first-child {
	margin-top: 0;
}


/* =========================================================== round 4 additions */

/* --------------------------------------------- hidden pending a deletion */

.icc-notice--hidden {
	display: flex;
	align-items: center;
	gap: 0.5em;
	border-left-color: var(--icc-ember);
}

/* ---------------------------------------------- ministry programme cards */

.icc-programs {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.icc-programs__grid {
	margin-top: 1.25rem;
}

.icc-programs__card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.icc-programs__media {
	margin: 0;
}

.icc-programs__media .icc-ph {
	margin: 0;
}

.icc-programs__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.icc-programs__card .icc-card__title {
	margin: 1rem 1.1rem 0.15rem;
}

.icc-programs__when {
	margin: 0 1.1rem 0.5rem;
}

.icc-programs__card .icc-card__body {
	margin: 0 1.1rem 1.25rem;
}

/* ------------------------------------------------ write to the ministry head */

.icc-mform {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-mform__lede {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	color: var(--icc-ink-soft);
	margin: 0 0 1.25rem;
	max-width: 60ch;
}

.icc-mform .icc-field {
	max-width: 42rem;
}

.icc-mform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.icc-mform__note {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

.icc-notices__tools {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.icc-notices__tools form {
	margin: 0;
}

.icc-notices__tools-note {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

/* ------------------------------------------------------------ the bell */

/* The menu and the bell are one group on the right of the header, so the
   header's space-between still has exactly two children. */
/* The gap is smaller than the menu's own because the bell brings its own: the
   button is a 2.25rem disc around a 1.3rem glyph, so ~7px of it is empty on
   each side. Matching the menu's gap number left the bell looking adrift from
   the last menu item until you hovered it and the disc appeared (2026-09-15).
   This lands the glyph at about the menu's own spacing. */
.icc-header__end {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 1.2vw, 1.1rem);
}

.icc-bell {
	position: relative;
	flex: 0 0 auto;
}

.icc-bell__button {
	display: grid;
	place-items: center;
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--icc-ink);
	text-decoration: none;
	cursor: pointer;
}

.icc-bell__button:hover,
.icc-bell.is-open .icc-bell__button {
	background: var(--icc-ground-soft);
	color: var(--icc-deep);
}

.icc-bell__button:focus-visible {
	outline: 2px solid var(--icc-deep);
	outline-offset: 2px;
}

/* Which ministry a notice came from. Several ministries run a book club, a
   journal and a roster, so the kind of thing on its own does not say whose. */
.icc-bell__ministry,
.icc-notices__ministry {
	color: var(--icc-accent);
}

/* The count. Top-right of the bell, in the flame red, because unread is the one
   thing on this page that is asking for attention. */
.icc-bell__count {
	position: absolute;
	top: -0.1rem;
	right: -0.1rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--icc-ember);
	color: #fff;
	font-family: var(--icc-sans);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
}

.icc-bell__panel {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 60;
	width: min(23rem, calc(100vw - 2rem));
	max-height: min(30rem, 70vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--icc-ground);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	box-shadow: 0 12px 32px rgba(28, 28, 26, 0.13);
	font-family: var(--icc-sans);
}

.icc-bell__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--icc-line);
	position: sticky;
	top: 0;
	background: var(--icc-ground);
}

.icc-bell__title {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
}

.icc-bell__actions {
	display: flex;
	gap: 0.75rem;
}

.icc-bell__actions form {
	margin: 0;
}

.icc-bell__action {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.75rem;
	color: var(--icc-deep);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.icc-bell__action:hover {
	color: var(--icc-accent);
}

.icc-bell__action--clear {
	color: var(--icc-muted);
}

.icc-bell__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-bell__item {
	border-bottom: 1px solid var(--icc-line);
}

/* Unread is a tint plus a dot, not bold text alone: a list where half the rows
   are bold is hard to read, and the tint survives being glanced at. */
.icc-bell__item.is-unread {
	background: var(--icc-sky-soft);
}

/* A notice is two or three lines of real sentence, so the rows are given the
   air to read as sentences (2026-09-15): more padding, a real leading on every
   line, and the same numbers as the full notices list so the bell and the page
   look like one thing seen twice. */
.icc-bell__link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	text-decoration: none;
	color: var(--icc-ink);
}

.icc-bell__link:hover {
	background: var(--icc-ground-soft);
}

.icc-bell__item.is-unread .icc-bell__link:hover {
	background: #dceef6;
}

.icc-bell__item-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--icc-ground-soft);
	color: var(--icc-deep);
}

.icc-bell__item.is-unread .icc-bell__item-icon {
	background: #fff;
}

.icc-bell__item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	gap: 0.3rem;
}

.icc-bell__kind {
	font-size: 0.6875rem;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--icc-muted);
}

.icc-bell__item-title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.icc-bell__item-text {
	font-size: 0.8125rem;
	color: var(--icc-ink-soft);
	line-height: 1.6;
}

.icc-bell__dot {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.55rem;
	border-radius: 50%;
	background: var(--icc-deep);
}

.icc-bell__empty {
	margin: 0;
	padding: 1.5rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--icc-muted);
}

.icc-bell__all {
	display: block;
	padding: 0.75rem 1rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--icc-deep);
	text-decoration: none;
	border-top: 1px solid var(--icc-line);
	position: sticky;
	bottom: 0;
	background: var(--icc-ground);
}

.icc-bell__all:hover {
	background: var(--icc-ground-soft);
}

/* On a phone the header is narrow enough that a panel anchored to the bell
   would hang off the edge; pin it to the viewport instead. */
@media (max-width: 30em) {
	.icc-bell__panel {
		position: fixed;
		top: auto;
		left: 1rem;
		right: 1rem;
		width: auto;
	}
}

/* ------------------------------------------------------- book reading club */

/* The progress bar. One component, drawn at two sizes: a member's own progress
   in the side panel, and one row per reader in the head's table. */
.icc-bar {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 12rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--icc-line);
	overflow: hidden;
}

.icc-bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--icc-deep);
	transition: width 0.3s ease;
}

.icc-clubs {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.icc-club-card {
	display: flex;
	flex-direction: column;
}

.icc-club-card__media img {
	width: 100%;
	height: auto;
	border-radius: var(--icc-radius) var(--icc-radius) 0 0;
}

/* No padding of its own: .icc-card already pads all four sides, and adding
   1rem on top of that put 2.35rem above the book title against 1.35rem under
   the button (2026-09-15). The cover, when there is one, carries the gap. */
.icc-club-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0;
}

.icc-club-card__media {
	margin-bottom: 1rem;
}

.icc-club-card__meta,
.icc-club-card__progress {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.icc-club-card__actions {
	margin: 0.6rem 0 0;
}

.icc-club__head {
	margin-bottom: 1rem;
}

.icc-club__title {
	font-family: var(--icc-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 0.2rem 0 0.2rem;
}

.icc-club__author {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	color: var(--icc-muted);
	margin: 0;
}

.icc-club__cover img {
	max-width: 15rem;
	height: auto;
	border-radius: var(--icc-radius);
}

.icc-club__material {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-club__material .icc-icon {
	color: var(--icc-accent);
}

.icc-club__h,
.icc-club__h3 {
	font-family: var(--icc-sans);
	font-weight: 600;
	margin: 2rem 0 0.85rem;
}

.icc-club__h {
	font-size: 1.125rem;
}

.icc-club__h3 {
	font-size: 0.875rem;
	margin-top: 1.75rem;
}

/* The chapter list. Numbered, because a book is read in order. */
.icc-chapters {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.icc-chapters__item {
	border-bottom: 1px solid var(--icc-line);
}

.icc-chapters__item:last-child {
	border-bottom: 0;
}

.icc-chapters__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 0.5rem;
	font-family: var(--icc-sans);
	text-decoration: none;
	color: var(--icc-ink);
}

.icc-chapters__link:hover {
	background: var(--icc-ground-soft);
}

.icc-chapters__item.is-current .icc-chapters__link {
	background: var(--icc-sky-soft);
}

.icc-chapters__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--icc-ground-soft);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--icc-deep);
}

.icc-chapters__item.is-current .icc-chapters__num {
	background: var(--icc-deep);
	color: #fff;
}

.icc-chapters__body {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	gap: 0.1rem;
}

.icc-chapters__title {
	font-size: 0.9375rem;
	font-weight: 500;
}

.icc-chapters__meta {
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

.icc-badge--complete {
	background: #e7f3e9;
	color: #2c5f35;
}

.icc-badge--progress {
	background: var(--icc-sky-soft);
	color: var(--icc-deep);
}

.icc-badge--none,
.icc-badge--read {
	background: var(--icc-ground-soft);
	color: var(--icc-muted);
}

.icc-club__pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--icc-line);
}


/* The side panel. */
.icc-club__myprogress {
	margin: 0 0 0.3rem;
}

.icc-club__myprogress-label,
.icc-club__privacy,
.icc-club__nudge-note {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	margin: 0;
}

.icc-club__privacy,
.icc-club__nudge-note {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	margin-top: 0.75rem;
}

/* The icon beside three lines of text belongs against the first of them, not
   floating in the middle of the block (2026-09-16). The nudge is the
   difference between the icon box and the line's cap height -- the same
   correction .icc-btn--lead-icon makes. */
.icc-club__privacy > svg,
.icc-club__nudge-note > svg {
	flex: none;
	margin-top: 0.2em;
}

.icc-club__nudge {
	margin: 1.25rem 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--icc-gold);
	background: var(--icc-ground-soft);
	font-family: var(--icc-sans);
}

.icc-club__nudge-head {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
}

.icc-club__nudge-text {
	font-size: 0.875rem;
	margin: 0.35rem 0 0;
}

.icc-club__nudge-when {
	font-size: 0.75rem;
	color: var(--icc-muted);
	margin: 0.35rem 0 0;
}

.icc-club__readers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-club__reader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.15rem 0.6rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--icc-line);
	font-family: var(--icc-sans);
	font-size: 0.875rem;
}

.icc-club__reader-name {
	grid-column: 1 / -1;
	font-weight: 500;
}

.icc-club__reader-count {
	font-size: 0.75rem;
	color: var(--icc-muted);
	white-space: nowrap;
}

.icc-club__assign {
	margin-top: 1.25rem;
	font-family: var(--icc-sans);
	font-size: 0.875rem;
}

.icc-club__assign summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.4rem 0;
}

.icc-club__assign-head {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icc-muted);
	margin: 0.9rem 0 0.35rem;
}

.icc-club__assign-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.15rem 0;
}

.icc-club__leave {
	margin-top: 1.25rem;
}

.icc-club__nudge-form {
	margin-bottom: 1rem;
}

/* -------------------------------------------------------- the roster builder */

.icc-roster {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground);
}

.icc-roster > h2 {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0;
}

.icc-roster > h2 .icc-icon {
	color: var(--icc-accent);
}

.icc-roster__lede {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--icc-ink-soft);
	margin: 0 0 1.5rem;
	max-width: 62ch;
}

/* The strip of dates. It scrolls sideways on a phone rather than wrapping into
   a block of rows: the order is the point, and a wrapped grid loses it. */
/* Eight dates never fit the main column, so the strip scrolls. A card cut off
   at the edge with nothing to say so looks like a rendering fault rather than
   an invitation, hence the fade and the always-visible thin scrollbar. */
.icc-roster__dates {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	padding-bottom: 0.6rem;
	margin-bottom: 2rem;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.icc-roster__dates::-webkit-scrollbar {
	height: 6px;
}

.icc-roster__dates::-webkit-scrollbar-thumb {
	background: var(--icc-line);
	border-radius: 999px;
}

.icc-roster__date {
	scroll-snap-align: start;
}

.icc-roster__date {
	flex: 0 0 auto;
	display: grid;
	gap: 0.25rem;
	min-width: 9.5rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
	font-family: var(--icc-sans);
	text-decoration: none;
	color: var(--icc-ink);
}

.icc-roster__date:hover {
	border-color: var(--icc-teal);
}

.icc-roster__date.is-active {
	border-color: var(--icc-deep);
	background: var(--icc-sky-soft);
}

.icc-roster__date-day {
	font-size: 0.9375rem;
	font-weight: 600;
}

.icc-roster__date-label {
	font-size: 0.75rem;
	color: var(--icc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.icc-roster__date-count {
	font-size: 0.75rem;
	color: var(--icc-deep);
}

.icc-roster__date-count.is-empty {
	color: var(--icc-muted);
	font-style: italic;
}

.icc-roster__for {
	font-family: var(--icc-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
}

.icc-roster__scroll {
	overflow-x: auto;
	scrollbar-width: thin;
}

.icc-roster__table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
}

/* The church asked for air (2026-09-15): 0.55rem of padding on a row holding a
   checkbox, a name, a badge and a button reads as four things jammed against
   each other. The row is a person, and a person gets a line of their own. */
.icc-roster__table th,
.icc-roster__table td {
	text-align: left;
	padding: 0.85rem 0.9rem;
	border-bottom: 1px solid var(--icc-line);
	vertical-align: middle;
}

.icc-roster__table th:first-child,
.icc-roster__table td:first-child {
	padding-left: 0;
}

.icc-roster__table th:last-child,
.icc-roster__table td:last-child {
	padding-right: 0;
}

.icc-roster__table thead th {
	padding-bottom: 0.6rem;
}

.icc-roster__table thead th {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icc-muted);
	white-space: nowrap;
}

.icc-roster__row.is-rostered {
	background: var(--icc-sky-soft);
}

/* The four columns share the table rather than bunching at its left edge
   (2026-09-16, the church's request). Only the role column had a width, so the
   other three shrank to their contents and left a third of the row empty. */
.icc-roster__cell--tick {
	width: 3rem;
}

.icc-roster__cell--name {
	width: 32%;
	font-weight: 600;
	white-space: nowrap;
}

.icc-roster__cell--said {
	width: 20%;
}

.icc-roster__cell--name label {
	cursor: pointer;
}

/* The role column takes what is left of the row. The held-open multi-select
   and the note field that used to share this space are both gone (2026-09-15):
   a button that says "Song Leader, Producer" answers the question the select
   was asking the head to read four rows of options to answer. */
.icc-roster__cell--role {
	width: 45%;
}

.icc-roster__cell--role .icc-dialog-wrap {
	margin-top: 0;
}

/* A button that is mostly a label. It stays quiet until there is something in
   it, so an unfilled row reads as unfilled. */
.icc-roles__button {
	width: 100%;
	max-width: 100%;
	font-size: 0.875rem;
	text-align: left;
	white-space: normal;
}

.icc-roles__button:not(.is-set) {
	color: var(--icc-muted);
	font-style: italic;
}

.icc-roles__button.is-set {
	border-color: var(--icc-ink);
	font-weight: 500;
}

.icc-roles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.icc-dialog__foot {
	margin: 1.25rem 0 0;
	text-align: right;
}

.icc-roster__excluded {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--icc-muted);
	margin: 1.25rem 0 0;
}

/* Two words inside a sentence that open a popup. The wrapper is a <span> so it
   does not break the line it is in. */
.icc-dialog-wrap--inline {
	margin-top: 0;
}

.icc-linkish {
	color: var(--icc-deep);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.icc-linkish:hover {
	color: var(--icc-accent);
}

.icc-badge--free {
	background: #e7f3e9;
	color: #2c5f35;
}

.icc-badge--busy {
	background: #fbeceb;
	color: #8c2c1f;
}

.icc-badge--quiet {
	background: var(--icc-ground-soft);
	color: var(--icc-muted);
}

/* Below this the table stops being a table: each member becomes a card, which
   is the only honest way to show five columns on a phone. */
@media (max-width: 47.999em) {
	.icc-roster__scroll {
		overflow-x: visible;
	}

	.icc-roster__table {
		min-width: 0;
	}

	.icc-roster__table,
	.icc-roster__table tbody,
	.icc-roster__table tr,
	.icc-roster__table td,
	.icc-roster__table th {
		display: block;
	}

	.icc-roster__table thead {
		display: none;
	}

	.icc-roster__row {
		border: 1px solid var(--icc-line);
		border-radius: var(--icc-radius);
		padding: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.icc-roster__table th,
	.icc-roster__table td {
		border-bottom: 0;
		padding: 0.25rem 0;
	}

	.icc-roster__cell--tick {
		float: right;
		width: auto;
	}

	.icc-roster__table .icc-field__input {
		width: 100%;
	}

	/* Every column is a block in the card layout, so none of them keeps the
	   width it had in the table. */
	.icc-roster__cell--name,
	.icc-roster__cell--said,
	.icc-roster__cell--role {
		width: auto;
	}
}

/* ----------------------------------------------------------- contact form */

/* Same panel as the ministry form, a size up, because on /contact/ it is the
   point of the page rather than a footnote to it. */
.icc-cform {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-cform__lede {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	color: var(--icc-ink-soft);
	margin: 0 0 1.5rem;
	max-width: 60ch;
}

/* Two fields to a row where there is room, one where there is not. */
.icc-cform__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0 1.25rem;
}

.icc-cform .icc-field {
	max-width: 42rem;
}

/* The honeypot. Off-screen rather than display:none, because some scripts skip
   anything that is not rendered -- which is exactly the ones worth catching. */
.icc-cform__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.icc-cform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0.5rem 0 0;
}

.icc-cform__note {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

/* ---------------------------------------- the head's inbox in the side panel */

.icc-mbox {
	margin-top: 1.75rem;
}

.icc-mbox__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-mbox__item {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-mbox__item:last-child {
	border-bottom: 0;
}

.icc-mbox__meta {
	font-family: var(--icc-sans);
	font-size: 0.75rem;
	color: var(--icc-muted);
	margin: 0 0 0.25rem;
}

.icc-mbox__text {
	font-size: 0.875rem;
	margin: 0;
}

/* ------------------------------------------------------------------ notices */

.icc-notices__head {
	margin: 1rem 0 1.5rem;
}

/* Serif, regular weight, like every other page heading on the site. */
.icc-notices__title-main {
	font-family: var(--icc-serif);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.16;
	margin: 0.35rem 0 0;
	color: var(--icc-ink);
}

.icc-notices__lede {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	color: var(--icc-muted);
	margin: 0 0 1.5rem;
}

.icc-notices__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-notices__item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0.9rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-notices__item:first-child {
	border-top: 1px solid var(--icc-line);
}

.icc-notices__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--icc-ground-soft);
	color: var(--icc-muted);
}

.icc-notices__item.is-unread .icc-notices__icon {
	background: var(--icc-sky-soft);
	color: var(--icc-deep);
}

.icc-notices__kind {
	font-family: var(--icc-sans);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--icc-muted);
	margin: 0 0 0.3rem;
}

.icc-notices__title {
	font-family: var(--icc-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 0.3rem;
}

.icc-notices__title a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-notices__title a:hover {
	color: var(--icc-deep);
}

.icc-notices__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--icc-ink-soft);
	margin: 0;
}

.icc-badge--new {
	background: var(--icc-deep);
	color: #fff;
	margin-left: 0.35rem;
}

/* The unread count on the members-area tile. */

.icc-card__icon {
	position: relative;
}

.icc-card__count {
	position: absolute;
	top: -0.35rem;
	left: 1.1rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--icc-ember);
	color: #fff;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

/* ------------------------------------------------------------ announcements */

/* The rule between announcements belongs to the list item the theme already
 * styles (.icc-postlist .wp-block-post-template > li); this is only the
 * thumbnail-beside-the-text layout inside it. */
.icc-announcement {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

/* A notice with neither a picture nor a video is just a notice: it takes the
 * whole row rather than leaving a hole where a thumbnail would be. */
.icc-announcement:has(> .icc-announcement__body:first-child) {
	grid-template-columns: minmax(0, 1fr);
}

.icc-announcement__media {
	display: block;
	position: relative;
	border-radius: var(--icc-radius);
	overflow: hidden;
	background: var(--icc-ground-soft);
}

.icc-announcement__media--video .icc-announcement__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.icc-announcement__img {
	display: block;
	width: 100%;
	height: auto;
}

.icc-announcement__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(25, 70, 87, 0.28);
	transition: background-color 0.16s ease;
}

.icc-announcement__media:hover .icc-announcement__play {
	background: rgba(25, 70, 87, 0.42);
}

.icc-announcement__body > *:first-child {
	margin-top: 0;
}

.icc-announcement__media--single {
	margin: 0 0 var(--icc-gap);
	border-radius: var(--icc-radius);
}

.icc-announcement__caption {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	padding: 0.6rem 0.2rem 0.75rem;
}

@media (max-width: 40em) {
	.icc-announcement {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A ministry card's picture is a link now, placeholder and all (2026-09-15) --
   a thumbnail that does nothing when you click it reads as broken. The frame
   names the photograph that belongs there, and that name is a caption, not a
   link label, so it keeps the frame's own type. */
a.icc-card__media {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.icc-card__media .icc-ph__label,
a.icc-card__media .icc-ph__note {
	text-decoration: none;
}

/* -------------------------------------------------- the calendar's month bar */

/* One row: an arrow, the two dropdowns, an arrow, then Today. The month used to
   be printed between the arrows as well, which said what the dropdowns beside
   it already said (2026-09-15). */
.icc-calendar__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.icc-calendar__month {
	display: none;
}

.icc-calendar__nav .icc-field__input {
	width: auto;
	height: var(--icc-control-h);
	padding-block: 0;
	font-size: 0.875rem;
}

.icc-calendar__nav .icc-calendar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--icc-control-h);
	height: var(--icc-control-h);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	color: var(--icc-ink);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
}

.icc-calendar__nav .icc-calendar__arrow:hover,
.icc-calendar__nav .icc-calendar__arrow:focus-visible {
	border-color: var(--icc-ink);
	background: var(--icc-ground-soft);
}

.icc-calendar__nav .icc-calendar__today {
	margin-left: 0.35rem;
}

/* ==================================================== round 8 (2026-09-15) */

/* ---------------------------------------------------------- the page head */

/* One heading row for every page that has somewhere to go back to: the
   ministry members area, a lesson, the book club, a sermon, an event. The
   heading takes the row and the back link sits hard against the right edge.
   It used to live in lessons.css, which only a signed-in reader loads, so the
   public sermon and event pages could not have it (2026-09-15). */
.icc-area__crumb {
	margin-top: 0;
}

.icc-area__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	margin: 0;
}

.icc-area__h1 {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.icc-area__back {
	flex: 0 0 auto;
	margin: 0;
	text-align: right;
}

/* A page inside a page has two ways out -- out of the chapter, and out of the
   club -- and the church asked for the second under the first rather than a
   screen below it (2026-09-16). */
.icc-area__backs {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
}

.icc-area__heading .icc-last-changed--title {
	flex: 1 0 100%;
	/* Last, wherever it was inserted. The members area draws the stamp after
	   the back link; the block templates let the editor's script put it
	   straight after the title, and a 100%-wide item in the middle of the row
	   pushed the back link onto a third line at the left margin (round 11). */
	order: 1;
}

/* A back link inside the heading row has the row's own spacing; the 1.1rem
   under a standalone one would push the heading off centre. */
.icc-area__heading .icc-back {
	margin-bottom: 0;
}

/* Below this the back link would be squeezed onto the heading's line at four or
   five words a line; it reads better under it, still on the right. */
@media (max-width: 34em) {
	.icc-area__heading {
		justify-content: flex-start;
	}

	.icc-area__back {
		flex-basis: 100%;
	}
}

/* The block-template version: the same row, built out of a flex group with the
   post title in it, so a sermon's back link looks like the members area's. */
.icc-area__heading > .wp-block-post-title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.icc-area__heading > p {
	margin: 0;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------- the dialog */

/* Two states to style, because a dialog is server-rendered `open` for anyone
   whose script did not run: in the flow, where it is an ordinary panel, and
   modal, where the browser centres it over a backdrop. */
.icc-dialog-wrap {
	margin-top: 1.6rem;
}

.icc-dialog-wrap .icc-btn {
	text-align: left;
	justify-content: flex-start;
}

.icc-dialog {
	box-sizing: border-box;
	width: min(34rem, calc(100vw - 2rem));
	max-width: 100%;
	padding: 0;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground);
	color: var(--icc-ink);
}

/* Wide enough for a table or a long list of letters. */
.icc-dialog--wide {
	width: min(46rem, calc(100vw - 2rem));
}

.icc-dialog:not([open]) {
	display: none;
}

.icc-dialog::backdrop {
	background: rgb(28 28 26 / 45%);
}

.icc-dialog__inner {
	padding: clamp(1.1rem, 3vw, 1.75rem);
}

.icc-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.icc-dialog__head .icc-h3 {
	margin: 0;
}

.icc-dialog__lede {
	margin: 0.5rem 0 1.2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--icc-ink-soft);
}

/* A long list inside a modal scrolls itself rather than the page behind it. */
.icc-dialog__body {
	max-height: min(60vh, 34rem);
	overflow-y: auto;
}

/* In the flow -- the no-script path -- it needs to look like a panel in the
   column rather than a floating card. :not(:modal) matters: a dialog opened
   with showModal() is still [open] and still inside .icc-dialog-wrap, so
   without it this rule also caught the modal and laid it out as a full-width
   block at the top of the page. */
.icc-dialog-wrap .icc-dialog[open]:not(:modal) {
	position: static;
	margin: 1rem 0 0;
	width: 100%;
}

.icc-dialog-wrap .icc-dialog[open]:not(:modal) .icc-dialog__body {
	max-height: none;
	overflow: visible;
}

.icc-dialog__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* The count of things waiting, on the button that opens them. */
.icc-dialog__badge {
	flex: none;
	min-width: 1.35rem;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--icc-ember);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.35rem;
	text-align: center;
}

.icc-btn--ghost .icc-dialog__badge {
	background: var(--icc-deep);
}

/* The rule for every button with an icon, from round 10 on (2026-09-16, the
   church's): **the icon sits on the middle of a one-line label and on the first
   line of a two-line one.**

   Both at once, with no way to ask CSS how many lines a label came out as. The
   trick is to take away the slack rather than to align into it: min-height was
   what made a one-line button taller than its own text, so flex-start left the
   icon and the label floating above the middle. Drop it, and put the same
   height back as padding. A one-line label then fills its content box exactly,
   so "top" and "middle" are the same place; a two-line one grows the button
   instead, and the icon stays on line one.

   The block padding is half of what is left of the control height once the
   border and one 1.25em line are taken out of it -- the same 44px button as
   every other, arrived at from the inside. */
.icc-btn--lead-icon {
	align-items: flex-start;
	min-height: 0;
	padding-block: calc((var(--icc-control-h) - 2px - 1.25em) / 2);
	padding-inline-start: 1rem;
}

/* The nudge is the difference between the 15px icon box and the label's cap
   height, so the icon reads as level with the letters rather than with the
   line box they sit in. */
.icc-btn--lead-icon > svg {
	flex: none;
	margin-top: 0.15em;
}

/* ------------------------------------ the pastors and the board of trustees */

/* Portrait cards with the name and title written on the picture, and a short
   biography that arrives on hover (2026-09-16, round 10, the church's).

   The plate is a gradient rather than a solid bar because the photographs are
   not taken yet: a bar has to be the right height for the type it happens to
   carry, and a gradient carries white type over a bright sky and a dark wall
   alike. */
.icc-leaders {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 1.75rem 0 0;
}

.icc-leaders__card {
	position: relative;
	min-width: 0;
	border-radius: var(--icc-radius);
}

.icc-leaders__card:focus-visible {
	outline: 2px solid var(--icc-deep);
	outline-offset: 3px;
}

.icc-leaders__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-leaders__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.icc-leaders__plate {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	box-sizing: border-box;
	padding: 2.75rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0));
	color: #fff;
	font-family: var(--icc-sans);
	text-align: left;
	/* The photographs are not taken yet, so half of these plates sit on a pale
	   placeholder. A shadow is what keeps white type readable on one. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.icc-leaders__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

.icc-leaders__title {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.86);
}

.icc-leaders__phone {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem;
}

.icc-leaders__phone a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.icc-leaders__phone a:hover {
	border-bottom-color: #fff;
}

/* The half of the card that is not the photograph. Below it by default -- on a
   touchscreen there is no hover to wait for, and a card whose second half only
   a mouse can reach is a card half the congregation never sees. */
.icc-leaders__reveal {
	padding: 0.9rem 0 0;
	font-family: var(--icc-sans);
}

/* Only the hover overlay needs it; under the picture the plate above already
   says whose biography this is. */
.icc-leaders__revealname {
	display: none;
}

.icc-leaders__bio {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--icc-ink-soft);
}

.icc-leaders__write {
	max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
	.icc-leaders__reveal {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 0.25rem;
		box-sizing: border-box;
		padding: 1.15rem;
		border-radius: var(--icc-radius);
		/* Solid, not tinted: the placeholder's own caption showed through a
		   0.95 overlay and made the biography hard to read. */
		background: var(--icc-deep);
		color: #fff;
		opacity: 0;
		visibility: hidden;
		overflow-y: auto;
		transition: opacity 0.18s ease, visibility 0.18s ease;
	}

	.icc-leaders__revealname {
		display: block;
		margin: 0 0 0.35rem;
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.25;
	}

	.icc-leaders__reveal .icc-leaders__bio {
		color: rgba(255, 255, 255, 0.93);
	}

	.icc-leaders__reveal .icc-btn {
		background: #fff;
		border-color: #fff;
		color: var(--icc-ink);
	}

	.icc-leaders__reveal .icc-btn:hover,
	.icc-leaders__reveal .icc-btn:focus-visible {
		background: var(--icc-sky-soft);
		border-color: var(--icc-sky-soft);
		color: var(--icc-ink);
	}

	.icc-leaders__card:hover .icc-leaders__reveal,
	.icc-leaders__card:focus .icc-leaders__reveal,
	.icc-leaders__card:focus-within .icc-leaders__reveal {
		opacity: 1;
		visibility: visible;
	}

	/* The dialog the button opens is a child of the overlay, so it would go with
	   it the moment the pointer left the card. A modal is in the top layer and
	   has to outlive its hover. */
	.icc-leaders__card:has(.icc-dialog[open]) .icc-leaders__reveal {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 900px) {
	.icc-leaders {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.icc-leaders {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------- the calendar list, looking back */

.icc-yearlist__past {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
	font-family: var(--icc-sans);
	font-size: 0.875rem;
}

.icc-yearlist__pastcount {
	color: var(--icc-muted);
}

/* A row that is over is still worth reading -- somebody asked for it -- but it
   should not compete with what is still to come. The dow and the day carry
   their own colours, so muting the block they sit in is not enough. */
.icc-agenda__item.is-past .icc-agenda__date,
.icc-agenda__item.is-past .icc-agenda__dow,
.icc-agenda__item.is-past .icc-agenda__day,
.icc-agenda__item.is-past .icc-agenda__meta {
	color: var(--icc-muted);
}

.icc-agenda__item.is-past .icc-agenda__title a {
	color: var(--icc-ink-soft);
}

/* The row of tools a role brings to the members dashboard: the church-wide
   export, the messages written to a pastor by name, the servants-on-call
   roster. Nothing for a plain member, so the row is not drawn at all. */
.icc-dashboard__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}

/* A popup's button is wrapped in .icc-dialog-wrap and a plain link is not, and
   the wrapper carries the 1.6rem top margin that spaces the side panel's
   buttons apart. In a row of its own that margin is 25px of stagger, so it goes
   here; display:flex makes the button inside stretch to the row like its
   neighbour rather than sitting on a baseline. */
.icc-dashboard__tools > .icc-dialog-wrap {
	display: flex;
	margin-top: 0;
}

/* ------------------------------------- a head's message, marked and answered */

.icc-mbox__reply {
	margin: 0.6rem 0 0 1rem;
	padding: 0.55rem 0 0.55rem 0.9rem;
	border-left: 2px solid var(--icc-line);
}

.icc-mbox__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.7rem;
}

/* Closed it is a button beside "Mark as read"; open it is a form under that
   button, in the same column. Round 10 gave the open one the whole row, which
   put the button the reader had just clicked on the line *below* its
   neighbour -- see the grid in the round-11 block at the foot of this file. */
.icc-mbox__replytoggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--icc-control-h);
	padding: 0.5em 1rem;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	box-sizing: border-box;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
}

.icc-mbox__replytoggle:hover {
	background: var(--icc-ground-soft);
	border-color: var(--icc-ink);
}

.icc-mbox__replybox[open] .icc-mbox__replytoggle {
	margin-bottom: 0.6rem;
}

.icc-mbox__replyfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0.6rem 0 0;
}

/* --------------------------------------------- a head's messages, in a list */

.icc-mbox__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-mbox__item {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-mbox__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.icc-mbox__item.is-unread {
	border-left: 3px solid var(--icc-gold);
	padding-left: 0.85rem;
}

.icc-mbox__meta {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--icc-muted);
	margin: 0 0 0.35rem;
}

.icc-mbox__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--icc-ink-soft);
	margin: 0;
}

/* ------------------------------------------- the side panel's two halves */

/* What a ministry head can do, and what every member of the ministry gets.
   They used to be interleaved -- resources, calendar, the head's tools, the
   write button, the head's messages -- so the panel read as five unrelated
   things (2026-09-15). The head's half comes first because a head opening
   this page has come to do something. */
.icc-area__aside-group + .icc-area__aside-group {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--icc-line);
}

/* .icc-area__aside-head carries `margin-top: 1.6rem !important` from
   lessons.css, which beat the :first-child rule below and left 45px of nothing
   under the divider. Same weapon, one class more specific. */
.icc-area__aside-group > .icc-area__aside-head:first-child,
.icc-area__aside-group > .icc-area__aside-kicker:first-child {
	margin-top: 0 !important;
}

/* An empty state in the panel is one quiet line, not a paragraph with a
   paragraph's air around it: 1rem top and bottom put 27px above "Nobody has
   written yet." and 42px below it. */
.icc-area__aside .icc-empty {
	padding: 0;
}

.icc-area__aside-kicker {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--icc-accent);
	margin: 0 0 0.9rem;
}

.icc-area__aside-group > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------- the song repository */

.icc-songs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-songs__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-songs__item:last-child {
	border-bottom: 0;
}

.icc-songs__title {
	font-family: var(--icc-sans);
	font-weight: 600;
	line-height: 1.45;
	min-width: 0;
}

.icc-songs__title a {
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-songs__title a:hover {
	color: var(--icc-deep);
	text-decoration: underline;
}

/* The key is what the team looks for first, so it gets the right-hand column
   to itself rather than being third in a run of grey meta. */
.icc-songs__key {
	grid-row: span 2;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.15em 0.5em;
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--icc-ink);
}

.icc-songs__meta {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--icc-muted);
	margin: 0;
}

/* ----------------------------------------------------------------- export */

.icc-export__list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.icc-export__months {
	margin: 0 0 0.5rem;
}

/* ------------------------------------------------------- servants on call */

.icc-servants {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--icc-line);
	border-radius: var(--icc-radius);
	background: var(--icc-ground-soft);
}

.icc-servants > h2 {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0;
}

.icc-servants > h2 .icc-icon {
	color: var(--icc-accent);
}

.icc-servants__when {
	font-family: var(--icc-sans);
	font-size: 0.875rem;
	color: var(--icc-muted);
	margin: 0 0 1.5rem;
}

/* Two columns, because the church asked for the music team beside the rest
   rather than among them (2026-09-15): who is on the door and who is leading
   the singing are two different questions. */
.icc-servants__cols {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46em) {
	.icc-servants__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.icc-servants__head {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--icc-accent);
	margin: 0 0 0.9rem;
}

.icc-servants__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-servants__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--icc-line);
}

.icc-servants__list li:last-child {
	border-bottom: 0;
}

.icc-servants__name {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--icc-ink);
}

.icc-servants__role {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
}

/* The way into the builder sits under the column it fills in (2026-09-16), so
   it is one button per column rather than a row of every ministry in the
   church. */
.icc-servants__tool {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--icc-line);
}

/* A gathering that belongs to one ministry has one column, and one column
   should not be half the width of the page. */
.icc-servants__cols--one {
	grid-template-columns: minmax(0, 1fr);
	max-width: 30rem;
}

/* ----------------------------------------------- questions in a language */

.icc-langs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	margin: 0 0 1.5rem;
}

.icc-langs__label {
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--icc-muted);
}

.icc-langs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.icc-langs__pick {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.35em 0.8em;
	border: 1px solid var(--icc-line);
	border-radius: 999px;
	color: var(--icc-ink);
	text-decoration: none;
}

.icc-langs__pick:hover {
	border-color: var(--icc-ink);
	background: var(--icc-ground-soft);
	color: var(--icc-ink);
}

.icc-langs__pick.is-active {
	background: var(--icc-ink);
	border-color: var(--icc-ink);
	color: #fff;
}

/* Said quietly, on the one question that fell back. */
.icc-field__untranslated {
	display: inline-block;
	margin-left: 0.5em;
	font-family: var(--icc-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.02em;
	color: var(--icc-muted);
}

.icc-translate {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--icc-line);
}

.icc-translate__head {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 0.9rem;
}

.icc-translate__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.icc-translate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

.icc-translate__lang {
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	min-width: 6rem;
}

.icc-translate__state {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	color: var(--icc-muted);
	flex: 1 1 auto;
}

.icc-translate__note {
	font-family: var(--icc-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--icc-muted);
	margin: 1rem 0 0;
	max-width: 62ch;
}

/* ------------------------------------------- details as lines, not a run */

/* The passage, the preacher and the date, one per line (2026-09-16). They were
   a single row separated by middots, which is a list you have to parse before
   you can read -- and on a narrow card it wrapped into two ragged lines with a
   middot stranded at the end of the first. */
.icc-meta--lines {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.icc-meta--lines > span {
	display: block;
}

/* Three lines of details under the title means the status belongs level with
   the title rather than halfway down the block. */
.icc-journals__item {
	align-items: flex-start;
}

/* ==========================================================================
   Round 11 -- 2026-09-16
   ========================================================================== */

/* ------------------------------------------- the passage, said out loud */

/* On a sermon card and on a lesson card the passage is the first of three
   quiet lines, and it is the only one that says what the thing was about.
   The church asked for it to carry the weight the title's byline should. */
.icc-meta__ref {
	font-weight: 600;
	color: var(--icc-ink-soft);
}

/* ------------------------------------------ an event's facts, on one row */

/* When, what time, how often, where -- reading across (round 11). Stacked,
   four short facts pushed the picture below the fold on a phone and left a
   column of white beside them on a desktop. The `li` keeps its own flex so
   the icon still sits against its words. */
.icc-card__meta--row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin-top: 0;
}

.icc-card__meta--row li {
	padding: 0;
}

/* --------------------------------------------- answering a member's letter */

/* Two columns, not a wrapping row. "Reply" is a <details>, and an open one
   asking for 100% of a flex row is put on the line *below* "Mark as read" --
   which is exactly what the church reported: the button it just clicked
   jumped underneath its neighbour. A grid keeps the summary in its own
   column whatever the form under it does. */
.icc-mbox__tools {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.5rem;
	margin-top: 0.7rem;
}

.icc-mbox__replybox {
	min-width: 0;
}

@media (max-width: 34em) {
	.icc-mbox__tools {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------ writing to a leader */

/* .icc-dialog-wrap carries the 1.6rem that spaces the side panel's buttons
   apart; on the hover card it opened a hole between the biography and the
   button under it. The overlay's own `gap` is doing that spacing here. */
.icc-leaders__reveal .icc-dialog-wrap {
	margin-top: 0.15rem;
}

/* ------------------------------------------------- the roster, by role */

/* Servants on Call: a row per part of the service, and a member chosen into
   it. No tick column -- choosing a name is the tick -- and no availability
   column, because the names offered are already only the people who are free. */
.icc-roster__table--byrole .icc-roster__cell--rolename {
	width: 40%;
	font-family: var(--icc-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--icc-ink);
}

.icc-roster__table--byrole .icc-roster__cell--rolename label {
	cursor: pointer;
}

.icc-roster__member {
	width: 100%;
	max-width: 26rem;
}

/* Room to breathe before the one button that commits the lot (round 11). */
.icc-roster__form .icc-form-actions {
	padding-top: 1.75rem;
}

/* ------------------------------------- an aside layout with nothing aside */

/* A ministry whose page draws no "At a glance" panel (Outreach & Missions,
   round 11) leaves one child in a grid that names two tracks -- and a grid
   whose columns are written out keeps the empty one, so the copy stopped 320px
   short of the edge with nothing in the markup to say why. The members area
   solves the same thing with `grid-column: 1 / -1` in lessons.css; this is the
   public half of that rule. */
.icc-cols--aside > :only-child {
	grid-column: 1 / -1;
}