/**
 * The portal's front end.
 *
 * Written against the same tokens the theme defines, with fallbacks, so the
 * blocks look native in St. Luke's theme and merely tidy in anybody else's —
 * which matters, because these plugins are sold to churches running their own.
 */

.cong-roster__list,
.cong-mine__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-roster__person,
.cong-mine__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
}

.cong-roster__person:last-child,
.cong-mine__item:last-child {
	border-bottom: 0;
}

.cong-roster__person.is-leader .cong-roster__name,
.cong-mine__name {
	font-weight: 600;
}

.cong-roster__role,
.cong-mine__role,
.cong-mine__who {
	color: var(--wp--preset--color--ink-muted, #5b6b78);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.cong-mine__name {
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.cong-mine__name:hover {
	color: var(--wp--preset--color--leaf, #4a7c2f);
}

.cong-mine__empty {
	color: var(--wp--preset--color--ink-muted, #5b6b78);
}

/*
 * Shown only to somebody editing a page, to explain why a block they have
 * just placed draws nothing for anybody else.
 */
.cong-portal-note {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid #d6a02a;
	background: #fdf6e6;
	color: #6b5312;
	font-size: 0.8125rem;
}

/* ---------- The feed ------------------------------------------------------ */

.cong-feed__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cong-feed__post {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
}

.cong-feed__post:last-child { border-bottom: 0; }

/* A held post reads as provisional to the one person who can see it. */
.cong-feed__post.is-held {
	padding-left: 0.85rem;
	border-left: 3px solid #d6a02a;
	background: #fdf9f0;
}

.cong-feed__by {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: baseline;
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.cong-feed__name { font-weight: 600; }

.cong-feed__where,
.cong-feed__by time,
.cong-feed__hint,
.cong-feed__empty {
	color: var(--wp--preset--color--ink-muted, #5b6b78);
}

.cong-feed__where::before { content: "· "; }

.cong-feed__held {
	margin: 0 0 0.4rem;
	color: #8a5a00;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.cong-feed__body > :first-child { margin-top: 0; }
.cong-feed__body > :last-child { margin-bottom: 0; }

.cong-feed__actions {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
}

.cong-feed__actions a { color: var(--wp--preset--color--ink-muted, #5b6b78); }

.cong-feed__write {
	margin: 0 0 1.25rem;
}

.cong-feed__write textarea {
	width: 100%;
	padding: 0.65rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: var(--wp--custom--radius--md, 10px);
	font: inherit;
}

.cong-feed__write button {
	margin-top: 0.5rem;
}

.cong-feed__hint {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
}

/* ---------- The portal's own pages ---------------------------------------- *
 *
 * Join, verify and consent. Rendered through the theme, so the chrome is the
 * church's — this is only the form inside it. Written against tokens with
 * fallbacks, because a church that buys this plugin is running its own theme.
 * ------------------------------------------------------------------------- */

.cong-portal__form {
	max-width: 30rem;
	margin: 0;
}

.cong-portal__form p {
	margin: 0 0 1.25rem;
}

.cong-portal__form label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
}

.cong-portal__form input[type="email"],
.cong-portal__form input[type="tel"],
.cong-portal__form input[type="text"],
.cong-portal__form input[type="date"] {
	display: block;
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #c9d8e2);
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
	color: inherit;
}

.cong-portal__form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--leaf, #4a7c2f);
	outline-offset: 1px;
}

/* The two explanations that matter: why we ask for a birthday, and what a
   guardian's address is for. They sit under their field, not beside it. */
.cong-portal__hint {
	display: block;
	margin-top: 0.35rem;
	color: var(--wp--preset--color--ink-muted, #5b6b78);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.5;
}

.cong-portal__form button,
.cong-portal__button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--ink, #0b2a42);
	color: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.cong-portal__form button:hover,
.cong-portal__button:hover {
	background: var(--wp--preset--color--leaf, #4a7c2f);
	color: var(--wp--preset--color--base, #fff);
}

.cong-portal__error,
.cong-portal__done {
	max-width: 34rem;
	margin: 0 0 1.5rem;
	padding: 0.8rem 1rem;
	border-radius: var(--wp--custom--radius--md, 10px);
	border-inline-start: 4px solid;
}

.cong-portal__error {
	border-color: #b3261e;
	background: #fdeaea;
	color: #6b1a15;
}

.cong-portal__done {
	border-color: var(--wp--preset--color--lime, #9bc53d);
	background: var(--wp--preset--color--sky-soft, #eef6fb);
}

/* ---------- The way in --------------------------------------------------

   Shown only to somebody who is not signed in. It is deliberately a panel
   rather than a hero: a member who is already signed in never sees it, so it
   has no business being the biggest thing on the page for the one visit where
   it does appear.                                                            */

.cong-signin {
	max-width: 38rem;
	margin: 0 auto;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--sky-soft, #dbe6ed);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: var(--wp--preset--color--sky-soft, #eef6fb);
	text-align: center;
}

.cong-signin__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
}

.cong-signin__lede {
	margin: 0 auto 1.25rem;
	max-width: 32rem;
	text-wrap: pretty;
}

.cong-signin__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.cong-signin__join {
	margin: 1rem 0 0;
	font-size: 0.92rem;
}

.cong-signin__join a {
	font-weight: 600;
}

/* On the portal's own pages the panel is the only thing a signed-out visitor
   sees, so it spans the three columns and sits in the middle rather than in
   the menu column, which is where the grid would otherwise put it. */
.cong-portal .wp-block-congregation-community-sign-in {
	grid-column: 1 / -1;
	justify-self: center;
	box-sizing: border-box;
	width: min(100%, 30rem);
	margin-block: var(--wp--preset--spacing--40, 2rem);
}

/* The number box set into the panel: the form inside it is not a second
   panel, and reads left to right like the sign-in page. */
.cong-signin .cong-signin {
	max-width: 22rem;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

.cong-signin .cong-signin p:last-child {
	margin-bottom: 0;
}

.cong-signin .cong-signin button {
	width: 100%;
}

/* ---------- Conversations ------------------------------------------------

   A reply is indented and quieter than the post it hangs off, so a thread
   reads as one thing with a conversation under it rather than as a list of
   equal items. The rule down the left is what carries the eye; boxing each
   reply would make five replies look like five posts.                       */

.cong-thread {
	margin: 0.9rem 0 0;
	padding: 0 0 0 1rem;
	border-inline-start: 2px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 14%, #fff);
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.cong-thread__reply.is-held {
	opacity: 0.75;
}

.cong-thread__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	margin: 0 0 0.2rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-thread__name {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #164a6e);
}

.cong-thread__held {
	margin: 0 0 0.25rem;
	font-size: 0.82rem;
	font-style: italic;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-thread__body {
	text-wrap: pretty;
}

.cong-thread__body > :last-child {
	margin-block-end: 0;
}

/* The fold. A <details> rather than a button, so the earlier replies are in
   the page — and findable by search — whether or not it is open. */
.cong-thread__earlier > summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-thread__earlier > summary:hover {
	color: var(--wp--preset--color--navy, #164a6e);
}

.cong-thread__earlier > .cong-thread {
	margin-block-start: 0.85rem;
	border: 0;
	padding-inline-start: 0;
}

/* ---------- Writing a reply ---------------------------------------------- */

.cong-thread__write {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.9rem 0 0;
	padding: 0.9rem 0 0;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 10%, #fff);
}

.cong-thread__write textarea {
	flex: 1 1 auto;
	min-inline-size: 0;
	/* One line until there is something to say. `field-sizing` grows it as
	   they type where it is supported, and the rows="1" fallback is a single
	   line everywhere else — not a four-line box waiting to be filled. */
	field-sizing: content;
	min-block-size: 2.6rem;
	max-block-size: 10rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 20%, #fff);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font: inherit;
	resize: vertical;
}

.cong-thread__write button {
	flex: 0 0 auto;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--navy, #164a6e);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.cong-thread__write button:hover,
.cong-thread__write button:focus-visible {
	background: var(--wp--preset--color--ink, #0b2a42);
}

/* ---------- Reporting ----------------------------------------------------

   Small, grey and out of the way until wanted. It is not an action most
   people take and it should not compete with the reply box underneath it —
   but it turns red on hover, because the one time somebody reaches for it
   they should be in no doubt they have found the right thing.               */

.cong-feed__report {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
	font-size: 0.82rem;
	text-decoration: none;
	opacity: 0.75;
}

.cong-feed__report:hover,
.cong-feed__report:focus-visible {
	color: #b3261e;
	opacity: 1;
}

.cong-feed__flag {
	flex: 0 0 auto;
}

/* ---------- What's happening ---------------------------------------------

   The top of the community page. Conversations in the order they were last
   spoken in, not the order they were started — a question people are still
   answering on Thursday belongs above an announcement from Wednesday that
   nobody replied to.                                                        */

.cong-happening__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin-block-end: 1.1rem;
}

.cong-happening__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
}

.cong-happening__pulse {
	margin: 0;
	color: var(--wp--preset--color--slate, #4a6a7e);
	font-size: 0.9rem;
}

.cong-happening__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-happening__item {
	padding: 1rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 14%, #fff);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: #fff;
}

.cong-happening__where {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.7rem;
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-happening__where > span:first-child {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #164a6e);
}

.cong-happening__said {
	margin: 0 0 0.6rem;
	text-wrap: pretty;
}

/* The last couple of replies, set small and indented — enough to see that a
   conversation is alive and who is in it, not enough to read it all here. */
.cong-happening__replies {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.6rem;
	padding: 0 0 0 0.8rem;
	border-inline-start: 2px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 12%, #fff);
	list-style: none;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-happening__name {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #164a6e);
}

.cong-happening__count {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-happening__empty {
	margin: 0;
	padding: 1.1rem 1.15rem;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 20%, #fff);
	border-radius: var(--wp--custom--radius--md, 12px);
	color: var(--wp--preset--color--slate, #4a6a7e);
	text-wrap: pretty;
}

/* ---------- Faces --------------------------------------------------------

   Initials in a circle. Member records carry no photographs and may never —
   a church putting faces in a members-only directory should decide that
   deliberately — but a feed with no avatars is a wall of text, and you
   recognise the shape of a name before you read it.                         */

.cong-face {
	flex: 0 0 auto;
	display: block;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 10%, #fff);
}

.cong-face.is-small {
	inline-size: 1.9rem;
	block-size: 1.9rem;
}

.cong-face img,
.cong-face .cong-media-placeholder {
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	object-fit: cover;
	aspect-ratio: 1;
}

.cong-face .cong-media-placeholder__initials {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #164a6e);
}

.cong-face.is-small .cong-media-placeholder__initials {
	font-size: 0.7rem;
}

/* ---------- The post card ------------------------------------------------ */

.cong-feed__post {
	padding: 1.1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 13%, #fff);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: #fff;
}

.cong-feed__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-block-end: 0.6rem;
}

.cong-feed__head .cong-feed__by {
	margin: 0;
}

/* ---------- The action row -----------------------------------------------

   One reaction, and it is a heart. Not a row of emoji: a church feed carries
   prayer requests and news of deaths, and a palette of faces to pick from
   turns somebody's grief into a poll. One, which everybody reads as "I am
   here and I saw this", is the only one that is safe on every post.         */

.cong-feed__actions,
.cong-thread__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 0.8rem;
	padding-block-start: 0.7rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 10%, #fff);
}

.cong-thread__actions {
	margin-block-start: 0.4rem;
	padding-block-start: 0;
	border: 0;
}

.cong-react {
	margin: 0;
}

.cong-react__button,
.cong-feed__replies {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset__color--slate, #4a6a7e);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color 160ms ease, scale 160ms ease;
}

.cong-feed__replies {
	cursor: default;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-react__button:hover,
.cong-react__button:focus-visible {
	color: #d1456d;
}

.cong-react__button[aria-pressed="true"] {
	color: #d1456d;
}

.cong-react__button:active {
	scale: 0.92;
}

.cong-react__count:empty {
	display: none;
}

/* The reply shape: face beside what was said. */
.cong-thread__reply {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.cong-thread__said {
	min-inline-size: 0;
	flex: 1 1 auto;
}

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

/* ---------- The app shell ------------------------------------------------

   Three columns: where you can go, what is being said, and what is around it.
   This is the shape every social product uses and the reason the earlier
   version did not feel like one — it was blocks stacked in a 44rem article
   column under a centred page banner, which is a magazine, not a place.

   It is a grid rather than floats or flex so the centre column can be the one
   that grows: on a wide screen the rails stay the width they need and the
   conversation gets the rest.                                                */

.cong-portal {
	--cong-rail: 15rem;
	--cong-aside: 20rem;

	display: grid;
	grid-template-columns: var(--cong-rail) minmax(0, 1fr) var(--cong-aside);
	gap: 2rem;
	align-items: start;
	max-inline-size: 78rem;
	margin-inline: auto;
	padding: 1.75rem var(--wp--preset--spacing--40, 1.5rem) 4rem;
}

/*
 * `post-content` renders its blocks inside a wrapper div, so the grid had one
 * child holding all three columns and everything stacked in the first track.
 * `display: contents` takes that wrapper out of the layout and lets the three
 * groups inside it become the grid's own children.
 */
.cong-portal > .wp-block-post-content,
.cong-portal > .entry-content {
	display: contents;
}

.cong-portal .cong-portal-nav {
	position: sticky;
	inset-block-start: 1.5rem;
}

.cong-portal__main {
	min-inline-size: 0;
	display: grid;
	gap: 1rem;
}

.cong-portal__aside {
	min-inline-size: 0;
	display: grid;
	gap: 1rem;
	position: sticky;
	inset-block-start: 1.5rem;
}

/* Below a laptop the right rail goes under the conversation rather than
   squeezing it; below a tablet the nav becomes a row across the top. */
@media (max-width: 1100px) {
	.cong-portal {
		grid-template-columns: var(--cong-rail) minmax(0, 1fr);
	}

	.cong-portal__aside {
		grid-column: 1 / -1;
		position: static;
	}
}

@media (max-width: 860px) {
	.cong-portal {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		padding-block-start: 1rem;
	}

	.cong-portal .cong-portal-nav {
		position: static;
	}
}

/* ---------- The left rail ------------------------------------------------ */

.cong-portal-nav ul {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-portal-nav__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.8rem;
	border-radius: 999px;
	color: var(--wp--preset--color--navy, #164a6e);
	font-weight: 600;
	text-decoration: none;
	transition: background 150ms ease;
}

.cong-portal-nav__link:hover,
.cong-portal-nav__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 7%, #fff);
}

.cong-portal-nav__link.is-current {
	background: color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 11%, #fff);
}

.cong-portal-nav__badge {
	margin-inline-start: auto;
	min-inline-size: 1.4rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: #b3261e;
	color: #fff;
	font-size: 0.72rem;
	text-align: center;
}

.cong-portal-nav__me {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
	padding-block-start: 1rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 12%, #fff);
	font-weight: 600;
	font-size: 0.9rem;
}

/* On a phone the nav is a scrolling row of pills, not a stacked list that
   pushes the feed off the screen. */
@media (max-width: 860px) {
	.cong-portal-nav ul {
		display: flex;
		gap: 0.4rem;
		overflow-x: auto;
		padding-block-end: 0.3rem;
		scrollbar-width: none;
	}

	.cong-portal-nav ul::-webkit-scrollbar { display: none; }

	.cong-portal-nav__link {
		white-space: nowrap;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 15%, #fff);
	}

	.cong-portal-nav__me { display: none; }
}

/* ---------- The composer -------------------------------------------------

   What every one of these products opens with. Without it the only way to
   post was to already be on a group's page and find the form at the top.     */

.cong-composer {
	padding: 1rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 14%, #fff);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: #fff;
}

.cong-composer__top {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.cong-composer__top textarea {
	flex: 1 1 auto;
	min-inline-size: 0;
	/* One line until there is something to say; `field-sizing` grows it where
	   it is supported. A four-line box waiting to be filled is intimidating in
	   a church, where writing in front of people you see on Sunday is already
	   the hard part. */
	field-sizing: content;
	min-block-size: 2.6rem;
	max-block-size: 14rem;
	padding: 0.6rem 0.2rem;
	border: 0;
	font: inherit;
	font-size: 1.02rem;
	resize: none;
}

.cong-composer__top textarea:focus {
	outline: none;
}

.cong-composer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: 0.6rem;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 10%, #fff);
}

.cong-composer__where,
.cong-composer__only {
	max-inline-size: 60%;
	font-size: 0.85rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-composer__where {
	padding: 0.3rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 16%, #fff);
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
}

.cong-composer__post {
	padding: 0.5rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--navy, #164a6e);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.cong-composer__post:hover,
.cong-composer__post:focus-visible {
	background: var(--wp--preset--color--ink, #0b2a42);
}

.cong-composer__hint {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

/* The feed's own list needs no card of its own inside the shell. */
.cong-portal .cong-feed__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Typography inside the shell ----------------------------------

   The theme sets type for a page of prose, which is right everywhere else and
   wrong in three columns: an h2 sized for an article headline is the biggest
   thing on screen when it is only labelling a list, and underlined nav links
   read as body copy with links in it rather than as navigation.              */

.cong-portal .cong-portal-nav__link,
.cong-portal .cong-portal-nav__link:hover,
.cong-portal .cong-portal-nav__link:focus-visible {
	text-decoration: none;
}

.cong-portal .cong-happening__title {
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}

.cong-portal .cong-happening__head {
	align-items: baseline;
	margin-block-end: 0.75rem;
}

/* The week in the right rail is a summary, not the page it is on. Everything
   in it steps down a size, and the artwork keeps its shape. */
.cong-portal__aside .cong-week__title {
	font-size: 1.25rem;
	line-height: 1.2;
}

.cong-portal__aside .cong-week__card-title {
	font-size: 1rem;
}

.cong-portal__aside .cong-week__meta,
.cong-portal__aside .cong-week__links {
	font-size: 0.82rem;
}

.cong-portal__aside .cong-week__link {
	padding: 0.3rem 0.6rem;
	font-size: 0.78rem;
}

.cong-portal__aside .cong-week__head {
	margin-block-end: 1rem;
}

.cong-portal__aside .cong-week__card {
	padding: 0.9rem 1rem;
}

.cong-portal__aside .cong-week__body {
	font-size: 0.9rem;
}

/* The rail shows the week at a glance. Reading it in full is what the week's
   own page is for, so only the first card is drawn here. */
.cong-portal__aside .cong-week__cards > li:not(:first-child) {
	display: none;
}

.cong-portal__aside .cong-week__cards::after {
	content: "";
	display: block;
}

/* ---------- A card, as a post --------------------------------------------

   Learn, Live, Love and Lead are posts in the feed, not a panel beside it.
   They carry the movement's colour as a stripe and keep everything else the
   feed gives them — reactions, replies, reporting — because they are the same
   kind of thing as every other post.                                         */

.cong-feed__post.is-card {
	border-inline-start: 5px solid var(--cong-card-accent, var(--wp--preset--color--navy, #164a6e));
}

.cong-feed__movement {
	display: inline-block;
	margin: 0 0 0.35rem;
	padding: 0.16rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cong-card-accent, #164a6e) 12%, #fff);
	/* The movement's colour, darkened towards ink so small capitals read
	   (WCAG AA) on its own tint — Live's lime on pale lime did not. */
	color: color-mix(in srgb, var(--cong-card-accent, #164a6e) 55%, #0b2a42);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cong-feed__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.22;
	text-wrap: balance;
}

.cong-feed__video {
	position: relative;
	display: block;
	inline-size: 100%;
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm, 8px);
	overflow: hidden;
	background: var(--wp--preset--color--ink, #0b2a42);
	aspect-ratio: 16 / 9;
	cursor: pointer;
}

.cong-feed__video img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Playing in place: the poster's box, holding the player. */
.cong-feed__video.is-playing {
	cursor: auto;
}

.cong-feed__video.is-playing iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* The play button on a card's video poster — here rather than in the rhythm
   plugin, because the feed shows the same card and needs the same button. */
.cong-week__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	transition: scale 200ms ease;
}

/* The triangle, drawn with a clip-path so it needs no image and inherits the
   button's colour. Nudged right of centre because an optical centre is not a
   geometric one for a triangle. */
.cong-week__play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 54%;
	translate: -50% -50%;
	inline-size: 1.1rem;
	block-size: 1.25rem;
	background: var(--wp--preset--color--navy, #164a6e);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.cong-feed__video:hover .cong-week__play {
	scale: 1.06;
}


/* The questions, as the thing you answer in the box below. */
.cong-feed__asks {
	display: grid;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	padding: 0.8rem 0 0 1.1rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 12%, #fff);
	color: var(--wp--preset--color--slate, #4a6a7e);
	text-wrap: pretty;
}

.cong-feed__asks > li.is-asked {
	color: var(--wp--preset--color--navy, #164a6e);
	font-weight: 600;
}

/* The tick sits in the action row beside the heart, so finishing a card and
   saying something about it are the same gesture in the same place. */
.cong-feed__done {
	margin: 0;
}

.cong-feed__tick {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.38rem 0.9rem 0.38rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 22%, #fff);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--slate, #4a6a7e);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.cong-feed__tick:hover,
.cong-feed__tick:focus-visible {
	border-color: var(--cong-card-accent, var(--wp--preset--color--navy, #164a6e));
	color: color-mix(in srgb, var(--cong-card-accent, #164a6e) 55%, #0b2a42);
}

/* An empty ring that fills, with a tick drawn from two borders of a box:
   no icon font, no SVG, and it takes the card's colour. */
.cong-feed__tick-box {
	position: relative;
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	transition: background 160ms ease, border-color 160ms ease;
}

.cong-feed__tick-box::after {
	content: "";
	position: absolute;
	inset-block-start: 0.08rem;
	inset-inline-start: 0.31rem;
	inline-size: 0.28rem;
	block-size: 0.56rem;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	rotate: 45deg;
	transition: border-color 160ms ease;
}

.cong-feed__tick[aria-pressed="true"] {
	border-color: transparent;
	background: color-mix(in srgb, var(--cong-card-accent, #164a6e) 55%, #0b2a42);
	color: #fff;
}

.cong-feed__tick[aria-pressed="true"] .cong-feed__tick-box {
	border-color: #fff;
	background: #fff;
}

.cong-feed__tick[aria-pressed="true"] .cong-feed__tick-box::after {
	border-color: color-mix(in srgb, var(--cong-card-accent, #164a6e) 55%, #0b2a42);
}

/* Mid-tap, while the server is answering. */
.cong-feed__tick.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * A finished card recedes; it does not disappear.
 *
 * Somebody who did Monday's card still wants to read it on Thursday, so it
 * stays whole — it just takes a wash of its own colour and quieter text, so
 * what is left to do stands out from what is done. Quieter by colour, not by
 * transparency, so the words still pass contrast.
 */
.cong-feed__post.is-card.is-done {
	background: color-mix(in srgb, var(--cong-card-accent, #164a6e) 6%, #fff);
	border-color: color-mix(in srgb, var(--cong-card-accent, #164a6e) 22%, #fff);
}

.cong-feed__post.is-card.is-done .cong-feed__title,
.cong-feed__post.is-card.is-done .cong-feed__body {
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-feed__post.is-card.is-done .cong-feed__video img {
	filter: saturate(0.6);
}

.cong-feed__post.is-card {
	transition: background 200ms ease, border-color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.cong-feed__tick,
	.cong-feed__tick-box,
	.cong-feed__tick-box::after,
	.cong-feed__post.is-card {
		transition: none;
	}
}

/* The church's own posts are signed with its initials, in its own colour, so
   "from St Luke's" reads differently from "from a person". */
.cong-face.is-church {
	background: var(--wp--preset--color--navy, #164a6e);
}

.cong-face.is-church .cong-media-placeholder__initials {
	color: #fff;
}

/*
 * The right rail is a rail. Its headings are labels, not page titles.
 *
 * Two classes deep on purpose: the theme sizes headings for an article and its
 * stylesheet loads after this one, so a single-class selector here loses and
 * "What you're part of" was set at two rems in a twenty-rem column.
 */
.cong-portal .cong-portal__aside h2,
.cong-portal .cong-portal__aside .cong-mine__heading {
	font-size: 1.05rem;
	line-height: 1.25;
	margin-block: 0 0.6rem;
}

/* ---------- Asking for prayer --------------------------------------------

   Two modes in one box rather than two boxes: a separate "prayer request"
   form somewhere else on the page is a form most people never find, and the
   moment to ask is the moment you are already typing.                       */

.cong-composer__modes {
	display: flex;
	gap: 0.4rem;
	margin-block-end: 0.75rem;
}

.cong-composer__mode {
	padding: 0.3rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 16%, #fff);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--slate, #4a6a7e);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.cong-composer__mode.is-on {
	border-color: transparent;
	background: var(--wp--preset--color--navy, #164a6e);
	color: #fff;
}

.cong-composer__audience {
	max-inline-size: 60%;
	padding: 0.3rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 16%, #fff);
	border-radius: 999px;
	background: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy, #164a6e);
}

/* The sentence under the choice. It is doing real work — "Staff" means
   nothing to somebody afraid of being talked about in the office. */
.cong-composer__audience-help {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

/* A prayer request in the feed, so nobody has to guess who can see it. */
.cong-feed__post.is-prayer {
	border-inline-start: 5px solid #7c5cbf;
}

.cong-feed__audience {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0 0.4rem;
	padding: 0.16rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, #7c5cbf 12%, transparent);
	color: #5b3f96;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---------- Somewhere to start -------------------------------------------

   The rail's empty state is the one place on the site where the person
   reading it is, by definition, the one least connected to the church. A
   sentence telling them so and nothing else is the worst placed dead end
   there is.                                                                 */

.cong-mine__empty {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
	font-size: 0.9rem;
}

.cong-mine__discover {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.cong-mine__discover li {
	display: grid;
	gap: 0.1rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 13%, #fff);
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: #fff;
}

.cong-mine__discover a {
	font-weight: 600;
	text-decoration: none;
}

.cong-mine__discover span {
	font-size: 0.82rem;
	color: var(--wp--preset--color--slate, #4a6a7e);
}

.cong-mine__more {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
}

/* ---------- Changing your mind -------------------------------------------

   A <details>, not a scripted menu: it opens without JavaScript, Escape
   closes it because the browser does that for free, and the edit box inside
   is a real form that posts. Nothing here needs a script to work.           */

.cong-owns {
	position: relative;
	margin-inline-start: auto;
}

.cong-owns > summary {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.3rem;
	border-radius: 999px;
	color: var(--wp--preset--color--slate, #4a6a7e);
	cursor: pointer;
	list-style: none;
	opacity: 0.7;
}

.cong-owns > summary::-webkit-details-marker { display: none; }

.cong-owns > summary:hover,
.cong-owns[open] > summary {
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 8%, transparent);
}

.cong-owns__menu {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 0.3rem);
	z-index: 5;
	inline-size: min(22rem, 70vw);
	padding: 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 16%, #fff);
	border-radius: var(--wp--custom--radius--md, 10px);
	background: #fff;
	box-shadow: 0 8px 24px rgb(11 42 66 / 0.12);
}

.cong-owns__edit textarea {
	inline-size: 100%;
	min-block-size: 5rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 18%, #fff);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font: inherit;
	font-size: 0.92rem;
	resize: vertical;
}

.cong-owns__edit button,
.cong-owns__delete button {
	margin-block-start: 0.5rem;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--navy, #164a6e);
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

/* Taking something down is the one action here that cannot be undone, so it
   looks like it — and it is the second button, never the first. */
.cong-owns__danger {
	background: none !important;
	color: #b3261e !important;
	padding-inline: 0 !important;
}

.cong-owns__delete {
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 10%, #fff);
}

.cong-edited {
	margin: 0.3rem 0 0;
	font-size: 0.78rem;
	font-style: italic;
	color: var(--wp--preset--color--slate, #4a6a7e);
	opacity: 0.8;
}

/* The reply's control sits under it rather than in a row of its own. */
.cong-thread__reply .cong-owns {
	margin-inline-start: 0;
	display: inline-block;
}

/* ---------- On a phone ---------------------------------------------------

   The shell was designed at desktop and squeezed down, which is how it came
   to look like a WordPress page rather than an app: a scrolling strip of nav
   pills, then a name and avatar nobody needs, then the composer, before any
   content at all — about a third of the screen before the first post.

   On a phone the nav belongs at the bottom, where a thumb is, and everything
   else gets out of the way.                                                  */

@media (max-width: 860px) {
	.cong-portal {
		gap: 0.9rem;
		padding-inline: 0.75rem;
		padding-block-end: 0;
		/* The bar is sticky inside this grid, so the grid has to be at least
		   as tall as the screen or there is nothing for it to stick to. */
		min-block-size: 100svh;
	}

	/*
	 * The nav becomes a bar at the bottom.
	 *
	 * `sticky`, not `fixed`, and ordered last rather than moved. `fixed` is
	 * only relative to the viewport while no ancestor has a transform, a
	 * filter or a backdrop-filter — and something above this does, so the bar
	 * was laid out against that ancestor instead: it covered the whole page
	 * and its own backdrop-filter blurred everything underneath it. This site
	 * has been caught by that once already, on the header's search panel.
	 *
	 * No backdrop-filter here either. It is what made the failure look like a
	 * rendering bug rather than a positioning one, and an opaque bar is what
	 * is wanted anyway.
	 */
	.cong-portal .cong-portal-nav {
		order: 9;
		position: sticky;
		inset-block-end: 0;
		z-index: 20;
		margin-inline: -0.75rem;
		padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #164a6e) 14%, #fff);
		background: #fff;
	}

	/* Content first, nav last, whatever order they are written in. */
	.cong-portal__main { order: 1; }
	.cong-portal__aside { order: 2; }

	.cong-portal-nav ul {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0;
		overflow: visible;
	}

	/* Icon over label, which is what every app does and what makes four
	   targets fit a narrow screen without truncating any of them. */
	.cong-portal-nav__link {
		flex-direction: column;
		gap: 0.15rem;
		padding: 0.35rem 0.2rem;
		border: 0;
		border-radius: var(--wp--custom--radius--sm, 8px);
		font-size: 0.68rem;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	.cong-portal-nav__link svg {
		inline-size: 22px;
		block-size: 22px;
	}

	.cong-portal-nav__badge {
		position: absolute;
		margin: 0;
		translate: 0.7rem -0.6rem;
	}

	.cong-portal-nav li {
		position: relative;
	}

	/* The name and face in the rail are desktop furniture. On a phone the
	   person already knows who they are. */
	.cong-portal-nav__me {
		display: none;
	}

	/* Cards go edge to edge, as they do in every app worth copying. The border
	   stays — it is what separates two posts — but the corners do not, because
	   rounded corners against a screen edge read as a mistake. */
	.cong-portal .cong-feed__post,
	.cong-portal .cong-composer,
	.cong-portal .cong-happening__item {
		padding-inline: 0.9rem;
		border-radius: 0;
		border-inline: 0;
	}

	.cong-portal .cong-feed__post.is-card,
	.cong-portal .cong-feed__post.is-prayer {
		border-inline-start-width: 4px;
	}

	.cong-portal__main {
		gap: 0.6rem;
	}

	/* A reply box that is a full-width row with the button beneath it, rather
	   than a squeezed field next to a button that eats a third of the line. */
	.cong-thread__write {
		flex-wrap: wrap;
	}

	.cong-thread__write textarea {
		flex: 1 1 100%;
	}

	.cong-thread__write button {
		margin-inline-start: auto;
	}

	.cong-feed__title {
		font-size: 1.1rem;
	}

	/* Replies indent less — at 390px a 1rem indent per level is a column of
	   text four words wide. */
	.cong-thread {
		padding-inline-start: 0.6rem;
	}
}