/**
 * Directory styling.
 *
 * The St. Luke's theme publishes its whole palette as real :root custom
 * properties, so these rules borrow them directly instead of restating the
 * hex values. The fallbacks keep the page readable if the theme is ever
 * swapped out from under the plugin.
 */

.slm-app {
	background: var(--parchment, #FAF7F2);
	color: var(--stone, #3D3328);
	font-family: "Crimson Pro", Georgia, serif;
	min-height: 70vh;
	padding: 48px 0 72px;
}

.slm-wrap {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 16px;
}

/*
 * The index inside the Directory page. There the theme draws the page, its
 * background and its title, so the directory adds none of its own, and its
 * spacing is restated because the theme's .entry-content p rule outranks
 * the plain class rules above.
 */
.slm-app--embedded {
	background: transparent;
	min-height: 0;
	padding: 0 0 48px;
}

.slm-app--embedded .slm-lede {
	margin: 6px 0 0;
}

.slm-app--embedded .slm-lede--tight {
	margin: 0 0 12px;
}

.slm-app--embedded .slm-yours {
	margin: 0 0 18px;
}

.slm-app--embedded .slm-head {
	margin-bottom: 20px;
	padding-bottom: 14px;
}

/* ------------------------------------------------------------- typography */

.slm-title,
.slm-profile-name {
	color: var(--blue, #1C2E4A);
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
}

.slm-title {
	font-size: 2.6rem;
}

.slm-profile-name {
	font-size: 2.1rem;
}

.slm-lede {
	color: var(--muted, #6B6050);
	font-size: 1rem;
	margin: 6px 0 0;
}

.slm-section-label {
	/* var(--gold) reads 2.6:1 on white/parchment - well under WCAG AA's 4.5:1
	   for text. #8F6516 is the same dark gold the pill badge below already
	   uses for exactly this reason (5.2:1). */
	color: #8F6516;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.17em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.slm-head {
	border-bottom: 1px solid var(--ivory-deep, #EDE5D4);
	margin-bottom: 24px;
	padding-bottom: 20px;
}

.slm-section {
	margin-top: 36px;
}

.slm-gap {
	margin-top: 14px;
}

.slm-sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------- controls */

.slm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.slm-input {
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-radius: 2px;
	color: var(--stone, #3D3328);
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	padding: 10px 12px;
}

.slm-input:focus-visible {
	border-color: var(--gold, #C8922A);
	outline: 2px solid var(--gold, #C8922A);
	outline-offset: 1px;
}

input.slm-input[type="search"] {
	flex: 1 1 240px;
}

.slm-btn {
	background: var(--blue, #1C2E4A);
	border: 1px solid var(--blue, #1C2E4A);
	border-radius: 2px;
	color: var(--ivory, #F5F0E8);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0.06em;
	padding: 10px 24px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.slm-btn:hover,
.slm-btn:focus-visible {
	background: var(--blue-light, #2E4A78);
	color: var(--ivory, #F5F0E8);
}

.slm-btn--outline,
.slm-btn--quiet {
	background: transparent;
	color: var(--blue, #1C2E4A);
}

.slm-btn--outline:hover,
.slm-btn--outline:focus-visible,
.slm-btn--quiet:hover,
.slm-btn--quiet:focus-visible {
	background: var(--blue, #1C2E4A);
	color: var(--ivory, #F5F0E8);
}

.slm-btn--quiet {
	border-color: transparent;
}

.slm-backlink {
	color: var(--muted, #6B6050);
	display: inline-block;
	font-size: 0.95rem;
	margin-bottom: 18px;
	text-decoration: none;
}

.slm-backlink:hover {
	/* Text-safe dark gold - see .slm-section-label above. */
	color: #8F6516;
}

.slm-yours {
	color: var(--muted, #6B6050);
	font-size: 0.95rem;
	margin: 0 0 18px;
}

.slm-yours a,
.slm-deflist a {
	color: var(--blue, #1C2E4A);
}

/* ------------------------------------------------------------------- grid */

.slm-grid {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.slm-letter {
	align-self: end;
	/* Text-safe dark gold - see .slm-section-label above. */
	color: #8F6516;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.3rem;
	grid-column: 1 / -1;
	margin: 22px 0 4px;
}

.slm-letter:first-child {
	margin-top: 0;
}

.slm-card {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 2px;
	color: inherit;
	display: flex;
	gap: 14px;
	padding: 12px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.slm-card:hover,
.slm-card:focus-visible {
	background: #FFFFFF;
	border-color: var(--ivory-deep, #EDE5D4);
}

.slm-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.slm-card-name {
	color: var(--blue, #1C2E4A);
	font-size: 1.08rem;
	line-height: 1.3;
}

.slm-card-meta {
	color: var(--muted, #6B6050);
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- photos */

.slm-photo {
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	object-fit: cover;
	vertical-align: middle;
}

.slm-photo--empty {
	align-items: center;
	background: var(--ivory-deep, #EDE5D4);
	color: var(--blue, #1C2E4A);
	display: inline-flex;
	font-family: "Playfair Display", Georgia, serif;
	justify-content: center;
	letter-spacing: 0.04em;
	line-height: 1;
}

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

.slm-profile-head {
	align-items: center;
	border-bottom: 1px solid var(--ivory-deep, #EDE5D4);
	display: flex;
	gap: 22px;
	padding-bottom: 24px;
}

.slm-profile-id {
	min-width: 0;
}

.slm-profile-meta {
	color: var(--muted, #6B6050);
	font-size: 1rem;
	margin-top: 4px;
}

.slm-card-plain {
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-radius: 2px;
	padding: 20px 22px;
}

.slm-card-plain p {
	margin: 0 0 1em;
}

.slm-card-plain p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------- family */

.slm-family {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.slm-relation {
	align-items: baseline;
	display: flex;
	gap: 16px;
}

.slm-relation-label {
	color: var(--muted, #6B6050);
	flex: 0 0 96px;
	font-size: 0.9rem;
}

.slm-relation-people {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.slm-person {
	align-items: center;
	color: var(--blue, #1C2E4A);
	display: inline-flex;
	gap: 8px;
	text-decoration: none;
}

.slm-person:hover span,
.slm-person:focus-visible span {
	text-decoration: underline;
}

/* -------------------------------------------------------------- deflists */

.slm-deflist {
	display: grid;
	gap: 8px 18px;
	grid-template-columns: 96px 1fr;
	margin: 0;
}

.slm-deflist dt {
	color: var(--muted, #6B6050);
	font-size: 0.9rem;
}

.slm-deflist dd {
	margin: 0;
}

.slm-empty {
	background: #FFFFFF;
	border: 1px dashed var(--ivory-deep, #EDE5D4);
	border-radius: 2px;
	color: var(--muted, #6B6050);
	padding: 28px;
	text-align: center;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.slm-app {
		padding: 32px 0 48px;
	}

	.slm-title {
		font-size: 1.9rem;
	}

	.slm-profile-name {
		font-size: 1.6rem;
	}

	.slm-grid {
		grid-template-columns: 1fr;
	}

	.slm-profile-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.slm-relation {
		flex-direction: column;
		gap: 6px;
	}

	.slm-relation-label {
		flex: 0 0 auto;
	}

	.slm-deflist {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.slm-deflist dd {
		margin-bottom: 10px;
	}

	.slm-filters {
		flex-direction: column;
	}

	input.slm-input[type="search"] {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------- management */

.slm-tools {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.slm-tool {
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-left: 2px solid var(--gold, #C8922A);
	border-radius: 2px;
	display: block;
	padding: 18px 20px;
	text-decoration: none;
}

.slm-tool:hover,
.slm-tool:focus-visible {
	border-color: var(--gold, #C8922A);
}

.slm-tool-title {
	color: var(--blue, #1C2E4A);
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.15rem;
}

.slm-tool-blurb {
	color: var(--muted, #6B6050);
	display: block;
	font-size: 0.95rem;
	margin-top: 4px;
}

.slm-pre {
	background: var(--parchment, #FAF7F2);
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-radius: 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	line-height: 1.55;
	margin: 12px 0;
	max-height: 340px;
	overflow: auto;
	padding: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

.slm-badge {
	/* var(--gold) under white text is 2.8:1 - under WCAG AA's 3:1 for large/
	   bold UI text. #8F6516 (5.2:1) is the same dark gold used elsewhere on
	   this page for text contrast. */
	background: #8F6516;
	border-radius: 11px;
	color: #FFFFFF;
	display: inline-block;
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 0.8rem;
	line-height: 1;
	min-width: 22px;
	padding: 5px 8px;
	text-align: center;
	vertical-align: 2px;
}

.slm-lede--tight {
	font-size: 0.95rem;
	margin: 0 0 12px;
}

.slm-notice {
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-left: 2px solid var(--gold, #C8922A);
	border-radius: 2px;
	margin-bottom: 18px;
	padding: 12px 16px;
}

.slm-notice--bad {
	border-left-color: var(--crimson, #8B1A1A);
}

.slm-rows {
	border-top: 1px solid var(--ivory-deep, #EDE5D4);
}

.slm-row {
	align-items: center;
	border-bottom: 1px solid var(--ivory-deep, #EDE5D4);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding: 12px 0;
}

.slm-row-main {
	flex: 1 1 220px;
	min-width: 0;
}

.slm-row-name {
	color: var(--blue, #1C2E4A);
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	text-decoration: none;
}

a.slm-row-name:hover,
a.slm-row-name:focus-visible {
	/* Text-safe dark gold - see .slm-section-label above. */
	color: #8F6516;
}

.slm-row-meta {
	color: var(--muted, #6B6050);
	display: block;
	font-size: 0.9rem;
	overflow-wrap: break-word;
}

.slm-row-action,
.slm-row-form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.slm-row-form select.slm-input {
	max-width: 100%;
}

@media (max-width: 767px) {
	.slm-row {
		align-items: stretch;
		flex-direction: column;
	}

	/*
	 * .slm-row-main's flex-basis of 220px is a width on the row's normal
	 * side-by-side layout; once flex-direction switches to column above,
	 * flex-basis controls height instead, forcing 220px of mostly-empty
	 * space above a one-line row like a name with no other detail below it.
	 */
	.slm-row-main {
		flex-basis: auto;
	}

	.slm-row-action,
	.slm-row-form {
		width: 100%;
	}

	.slm-row-form select.slm-input {
		flex: 1 1 100%;
	}

	.slm-row-action .slm-btn,
	.slm-row-form .slm-btn {
		width: 100%;
	}
}

/* --------------------------------------------------------- hub groups */

.slm-tools-group + .slm-tools-group {
	margin-top: 32px;
}

/* --------------------------------------------------------------- forms */

/* A page heading with its main action beside it, such as "Add an event". */
.slm-head--split {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.slm-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * .slm-head-actions on its own line rather than beside a heading inside
 * .slm-head--split - such as an "Add" button sitting below a tab switcher -
 * so it needs the bottom margin that context would otherwise supply.
 */
.slm-head-actions--block {
	margin-bottom: 24px;
}

/*
 * A small switcher between a few screens that share one page, such as Church
 * Ushers' "Teams" / "Schedule" - sits below a heading here, so unlike
 * .slm-head-actions it carries its own space below it.
 */
.slm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.slm-form {
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 720px;
	padding: 26px 28px;
}

.slm-field,
.slm-fieldset {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.slm-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.slm-field-row {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slm-label {
	color: var(--blue, #1C2E4A);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	padding: 0;
}

.slm-optional {
	color: var(--muted, #6B6050);
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 0.9rem;
}

.slm-hint {
	color: var(--muted, #6B6050);
	font-size: 0.92rem;
	margin: 0;
}

/* A member's church roles, shown read-only to people who may edit the
   profile but not assign roles. */
.slm-role-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0;
}

.slm-role-list .slm-tag {
	margin-left: 0;
}

.slm-form input.slm-input,
.slm-form select.slm-input {
	min-height: 46px;
	width: 100%;
}

.slm-form textarea.slm-input {
	box-sizing: border-box;
	line-height: 1.4;
	min-height: 90px;
	resize: vertical;
	width: 100%;
}

/*
 * iOS Safari's native date control can render its day/month/year segments
 * and calendar icon wider than the box's own CSS width, overflowing past
 * the form's right edge even though a text input or select the same width
 * does not - max-width plus overflow:hidden keeps the control itself inside
 * the box it was given rather than spilling out of it.
 */
.slm-form input[type="date"].slm-input {
	max-width: 100%;
	overflow: hidden;
}

/* Fields that belong to a choice above them, such as a new location. */
.slm-subfields {
	border-left: 2px solid var(--gold, #C8922A);
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 10px;
	padding: 4px 0 4px 18px;
}

.slm-subfields[hidden] {
	display: none;
}

.slm-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
}

.slm-checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.slm-check input {
	accent-color: var(--blue, #1C2E4A);
	height: 18px;
	margin: 0;
	width: 18px;
}

.slm-form-actions {
	align-items: center;
	border-top: 1px solid var(--ivory-deep, #EDE5D4);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 22px;
}

.slm-deflist--form {
	grid-template-columns: 120px 1fr;
}

/* Deleting sits apart from saving, so it is never pressed by mistake. */
.slm-danger-zone {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin-top: 28px;
	max-width: 720px;
}

.slm-danger-zone .slm-hint {
	flex: 1 1 260px;
}

.slm-btn--danger {
	background: transparent;
	border-color: var(--crimson, #8B1A1A);
	color: var(--crimson, #8B1A1A);
}

.slm-btn--danger:hover,
.slm-btn--danger:focus-visible {
	background: var(--crimson, #8B1A1A);
	border-color: var(--crimson, #8B1A1A);
	color: var(--ivory, #F5F0E8);
}

.slm-tag {
	border: 1px solid var(--gold, #C8922A);
	border-radius: 2px;
	/* Text-safe dark gold - see .slm-section-label above. The border stays
	   the decorative gold; only the text needs the contrast fix. */
	color: #8F6516;
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1;
	margin-left: 6px;
	padding: 3px 6px;
	text-transform: uppercase;
	vertical-align: 2px;
}

@media (max-width: 767px) {
	.slm-head--split {
		align-items: stretch;
		flex-direction: column;
	}

	.slm-head-actions .slm-btn,
	.slm-form-actions .slm-btn,
	.slm-danger-zone .slm-btn {
		text-align: center;
		width: 100%;
	}

	/* Side by side even on a phone, unlike the full-width stacked buttons
	   above - two or three short tabs read better as one row than a list. */
	.slm-tabs .slm-btn {
		flex: 1 1 0;
		text-align: center;
	}

	.slm-form {
		padding: 20px 18px;
	}

	.slm-field-row {
		grid-template-columns: 1fr;
	}

	.slm-deflist--form {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------ compact screens */

/*
 * The approval screens (people waiting to join, photos waiting) are used
 * mostly on a phone, so each person or photo is one small card - the name,
 * a line or two of detail, and the buttons beside it - rather than a row
 * that stacks full-width buttons underneath. .slm-compact wraps those
 * screens and tightens their heading and spacing; the other screens keep
 * the rules above.
 */
.slm-compact .slm-head {
	margin-bottom: 16px;
	padding-bottom: 14px;
}

.slm-compact .slm-section {
	margin-top: 22px;
}

.slm-compact .slm-section-label {
	margin-bottom: 8px;
}

.slm-compact .slm-lede--tight {
	margin: 0 0 10px;
}

/* A section label with a button beside it, such as "Approve all". */
.slm-section-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.slm-compact .slm-section-head .slm-section-label {
	margin-bottom: 0;
}

.slm-cards {
	display: grid;
	gap: 8px;
	max-width: 760px;
}

.slm-card {
	align-items: center;
	/* Long text inside a card must not push the card wider than the phone. */
	min-width: 0;
	background: #FFFFFF;
	border: 1px solid var(--ivory-deep, #EDE5D4);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(61, 51, 40, 0.05);
	display: flex;
	gap: 12px;
	padding: 12px 14px;
}

/*
 * A member card that is not the head of its household - a spouse or child,
 * shown gathered under the head's own card in the Member profiles list.
 */
/* A card that stands out for a reason of its own, such as Communion,
   Easter or Christmas on the usher schedule - the same gold accent the
   pill badges use, applied to the whole card rather than a badge alone. */
.slm-card--special {
	background: var(--gold-pale, #F5E6C8);
	border-color: var(--gold, #C8922A);
}

.slm-card--indented {
	border-left: 2px solid var(--gold, #C8922A);
	margin-left: 22px;
}

.slm-card-main {
	flex: 1 1 auto;
	min-width: 0;
}

.slm-card-title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

/* A badge that always sits on its own line under the card title, rather than
   sharing its line and only wrapping below once the title is long enough. */
.slm-card-badge {
	display: block;
	margin: 2px 0 0;
}

.slm-card-name {
	color: var(--blue, #1C2E4A);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.slm-card-meta {
	color: var(--muted, #6B6050);
	display: block;
	font-size: 0.95rem;
	line-height: 1.3;
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.slm-card-meta--small {
	font-size: 0.85rem;
}

/* The theme's gold is too light for small text, so the pill's text is darker. */
.slm-pill {
	border: 1px solid var(--gold, #C8922A);
	border-radius: 999px;
	color: #8F6516;
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 4px 9px;
	white-space: nowrap;
}

.slm-card-actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 6px;
}

/* Buttons in a line under the details, where a picture takes the left side. */
.slm-card-actions--row {
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 8px;
}

.slm-card-form {
	margin: 0;
}

.slm-card .slm-btn,
.slm-section-head .slm-btn {
	border-radius: 8px;
	font-size: 13px;
	padding: 8px 12px;
	text-align: center;
}

.slm-card-actions .slm-btn {
	min-width: 104px;
}

/* In a line, the buttons share the width equally. */
.slm-card-actions--row .slm-card-form {
	flex: 1 1 0;
	max-width: 160px;
}

.slm-card-actions--row .slm-btn {
	min-width: 0;
	width: 100%;
}

/*
 * The theme strips the border off every submit button
 * (button[type="submit"] { border: none }), which outranks a single class,
 * so the outline is restated here where it sits inside a card.
 */
.slm-card .slm-btn--soft,
.slm-section-head .slm-btn--soft {
	background: transparent;
	border: 1px solid #C9BCA2;
	color: var(--blue, #1C2E4A);
}

.slm-card .slm-btn--soft:hover,
.slm-card .slm-btn--soft:focus-visible,
.slm-section-head .slm-btn--soft:hover,
.slm-section-head .slm-btn--soft:focus-visible {
	background: var(--blue, #1C2E4A);
	border-color: var(--blue, #1C2E4A);
	color: var(--ivory, #F5F0E8);
}

/*
 * The theme's stripped submit-button border (see above) also affects
 * --outline buttons, which otherwise have no background either - without
 * this they render with no visible chrome at all, indistinguishable from a
 * plain text link.
 */
.slm-card .slm-btn--outline,
.slm-row-form .slm-btn--outline,
.slm-section-head .slm-btn--outline {
	border: 1.5px solid var(--blue, #1C2E4A);
}

.slm-card .slm-btn--outline:hover,
.slm-card .slm-btn--outline:focus-visible,
.slm-row-form .slm-btn--outline:hover,
.slm-row-form .slm-btn--outline:focus-visible,
.slm-section-head .slm-btn--outline:hover,
.slm-section-head .slm-btn--outline:focus-visible {
	border-color: var(--blue, #1C2E4A);
}

.slm-card-note {
	color: var(--muted, #6B6050);
	font-size: 0.85rem;
	max-width: 112px;
	text-align: right;
}

@media (min-width: 768px) {
	.slm-card-actions {
		flex-direction: row;
	}
}

/* -------------------------------------------------------------- pagination */

.slm-pager {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 18px;
	max-width: 760px;
}

.slm-pager-status {
	color: var(--muted, #6B6050);
	font-size: 0.9rem;
}

.slm-btn--disabled {
	cursor: default;
	opacity: 0.4;
	pointer-events: none;
}

@media (max-width: 767px) {
	.slm-compact .slm-title {
		font-size: 1.6rem;
	}

	/* The search box and its button stay on one line. */
	.slm-compact .slm-filters {
		flex-direction: row;
		margin-bottom: 14px;
	}

	.slm-compact .slm-filters .slm-btn {
		padding: 10px 14px;
	}

	.slm-compact input.slm-input[type="search"] {
		flex: 1 1 0;
	}

	.slm-card-actions:not(.slm-card-actions--row) .slm-btn {
		width: 100%;
	}

	/* The usher schedule's date range ("March 29 to April 4") is too long to
	   share a row with the Edit button on a phone - wrapped onto its own
	   line below, it spans the card's full width instead of being squeezed
	   by whatever sits beside it. */
	.slm-card--schedule {
		flex-wrap: wrap;
	}

	.slm-card--schedule .slm-card-main,
	.slm-card--schedule .slm-card-actions {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------------ verses */

/* A profile with verses: the verses sit in a right-hand column on anything
   wider than a phone held upright, and below the rest on a phone. */
@media (min-width: 768px) {
	.slm-profile-body {
		align-items: start;
		display: grid;
		gap: 32px;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

/* Confirmation and wedding verses on a profile - see includes/verses.php. */
.slm-verses {
	display: grid;
	gap: 12px;
}

.slm-verse-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.slm-verse-label {
	color: var(--muted, #6B6050);
	font-size: 0.92rem;
}

.slm-verse-ref {
	font-weight: 600;
	margin-top: 2px;
}

.slm-verse-text {
	border-left: 3px solid var(--gold, #C8922A);
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.5;
	margin: 10px 0 0;
	padding: 2px 0 2px 14px;
}

.slm-verse-credit {
	color: var(--muted, #6B6050);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin-top: 6px;
	text-align: right;
}