/* RPA Digital Headquarters: Brother Portal. Tokens from docs/HOMEPAGE-MOCKUPS.md. */

:root {
	--rpa-red: #8f0a0e;
	--rpa-red-text: #a41722;
	--rpa-red-deep: #7a0103;
	--rpa-red-on-dark: #ef4b4f;
	--rpa-ink: #111111;
	--rpa-text: #393939;
	--rpa-muted: #5f5f5f;
	--rpa-surface: #ffffff;
	--rpa-surface-alt: #f6f6f6;
	--rpa-line: #e2e2e2;
	--rpa-footer: #151515;
	--rpa-radius: 6px;
	--rpa-font-heading: "Oswald", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--rpa-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.rpahq-portal-page {
	background: var(--rpa-surface-alt);
	color: var(--rpa-text);
	font-family: var(--rpa-font-body);
}

.rpahq-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 16px;
	background: var(--rpa-ink);
	color: #fff;
}

.rpahq-skip-link:focus {
	left: 16px;
	top: 16px;
}

.rpahq-portal {
	display: grid;
	/* minmax(0, …) so a wide table scrolls inside its own region instead of widening the page. */
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

@media (min-width: 960px) {
	.rpahq-portal {
		grid-template-columns: 240px minmax(0, 1fr);
		padding: 40px 28px 64px;
	}
}

.rpahq-portal__main:focus {
	outline: none;
}

.rpahq-portal h1,
.rpahq-portal h2 {
	font-family: var(--rpa-font-heading);
	color: var(--rpa-ink);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.rpahq-portal h1 {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	margin: 0 0 8px;
}

.rpahq-portal h2 {
	font-size: 1.25rem;
	margin: 0 0 12px;
}

.rpahq-portal a {
	color: var(--rpa-red-text);
}

.rpahq-portal a:focus-visible,
.rpahq-portal button:focus-visible,
.rpahq-portal input:focus-visible,
.rpahq-portal select:focus-visible,
.rpahq-portal textarea:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

/* Navigation */

.rpahq-portal-nav {
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	padding: 16px;
	align-self: start;
}

.rpahq-portal-nav__title {
	font-family: var(--rpa-font-heading);
	text-transform: uppercase;
	color: var(--rpa-red-deep);
	font-weight: 700;
	margin: 0 0 8px;
}

.rpahq-portal-nav ul,
.rpahq-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

@media (min-width: 960px) {
	.rpahq-portal-nav ul {
		flex-direction: column;
	}
}

.rpahq-portal-nav ul a,
.rpahq-subnav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--rpa-radius);
	color: var(--rpa-text);
	text-decoration: none;
	font-weight: 600;
}

.rpahq-portal-nav ul a:hover,
.rpahq-subnav a:hover {
	background: var(--rpa-surface-alt);
}

.rpahq-portal-nav ul a[aria-current="page"],
.rpahq-subnav a[aria-current="page"] {
	background: var(--rpa-red);
	color: #fff;
}

.rpahq-portal-nav__user {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--rpa-line);
	font-size: 0.875rem;
	color: var(--rpa-muted);
}

.rpahq-subnav {
	margin: 0 0 24px;
}

/* Content */

.rpahq-page-header {
	margin: 0 0 24px;
}

.rpahq-page-header p {
	margin: 0;
	color: var(--rpa-muted);
}

.rpahq-eyebrow {
	color: var(--rpa-red-text) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
}

.rpahq-panel,
.rpahq-card {
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	padding: 24px;
}

.rpahq-panel--narrow {
	max-width: 520px;
	margin: 0 auto;
	grid-column: 1 / -1;
}

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

.rpahq-card--link {
	display: block;
	color: inherit !important;
	text-decoration: none;
	border-top: 4px solid var(--rpa-red);
}

.rpahq-card--link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.rpahq-notice {
	padding: 12px 16px;
	margin: 0 0 16px;
	border-left: 4px solid var(--rpa-text);
	background: var(--rpa-surface-alt);
}

/* Buttons and forms */

.rpahq-button,
.rpahq-portal input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--rpa-red);
	border-radius: 4px;
	background: var(--rpa-red);
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
}

.rpahq-button--secondary {
	background: transparent;
	color: var(--rpa-red-text) !important;
}

.rpahq-portal label {
	display: block;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--rpa-ink);
}

.rpahq-portal input[type="text"],
.rpahq-portal input[type="email"],
.rpahq-portal input[type="url"],
.rpahq-portal input[type="tel"],
.rpahq-portal input[type="number"],
.rpahq-portal input[type="date"],
.rpahq-portal input[type="datetime-local"],
.rpahq-portal input[type="password"],
.rpahq-portal select,
.rpahq-portal textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	font: inherit;
	color: var(--rpa-ink);
	background: #fff;
}

.rpahq-portal .login-username,
.rpahq-portal .login-password,
.rpahq-portal .login-remember {
	margin: 0 0 16px;
}

/* Field, error and check-box styles are shared with public forms: see public.css. */

.rpahq-links {
	margin: 16px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.rpahq-portal * {
		transition: none !important;
		animation: none !important;
	}
}

/* Manage: lists and forms */

.rpahq-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.rpahq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.rpahq-tabs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: 999px;
	background: var(--rpa-surface);
	color: var(--rpa-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
}

.rpahq-tabs a[aria-current="page"] {
	background: var(--rpa-ink);
	border-color: var(--rpa-ink);
	color: #fff;
}

.rpahq-manage-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
}

.rpahq-manage-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 14px 18px;
}

.rpahq-manage-item + .rpahq-manage-item {
	border-top: 1px solid var(--rpa-line);
}

.rpahq-manage-item__title {
	font-weight: 700;
	font-size: 1.05rem;
}

.rpahq-manage-item__meta {
	margin: 2px 0 0;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--rpa-surface-alt);
	color: var(--rpa-text);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

.rpahq-status--publish {
	background: #e6f4ea;
	color: #14532d;
}

.rpahq-status--pending {
	background: #fff4d6;
	color: #6b4400;
}

.rpahq-form-title {
	margin: 0 0 4px !important;
	text-transform: none !important;
}

.rpahq-form-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.rpahq-form__group {
	margin: 0;
	padding: 20px 20px 4px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	min-width: 0;
}

.rpahq-form__group > legend {
	padding: 0 6px;
	font-family: var(--rpa-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--rpa-ink);
}

.rpahq-image-preview {
	display: block;
	max-width: 240px;
	height: auto;
	margin: 0 0 8px;
	border-radius: 4px;
}

.rpahq-portal input[type="file"] {
	display: block;
	max-width: 100%;
	min-height: 44px;
	font: inherit;
}

.rpahq-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 0;
}

.rpahq-portal button.rpahq-button {
	font: inherit;
	font-weight: 700;
}

.rpahq-button--danger {
	margin-left: auto;
	background: transparent !important;
	border-color: transparent !important;
	color: var(--rpa-red-text) !important;
	text-decoration: underline;
}

.rpahq-back {
	margin: 0 0 12px;
}

.rpahq-preview {
	padding: 24px;
	border: 2px dashed var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

/* Manage › Messages */

.rpahq-tabs--topics {
	margin: 0 0 16px;
}

.rpahq-tabs .rpahq-count {
	margin-left: 4px;
	font-weight: 400;
}

.rpahq-manage-item--unread .rpahq-manage-item__title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 2px 0;
	border-radius: 50%;
	background: var(--rpa-red);
}

.rpahq-status--new {
	background: #fdecec;
	color: var(--rpa-red-text);
}

.rpahq-status--replied {
	background: #e6f4ea;
	color: #14532d;
}

.rpahq-status--spam {
	background: #fff4d6;
	color: #6b4400;
}

.rpahq-message-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 16px;
	margin: 0 0 20px;
	overflow-wrap: anywhere;
}

.rpahq-message-details dt {
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-message-details dd {
	margin: 0;
}

@media (max-width: 520px) {
	.rpahq-message-details {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.rpahq-message-details dd {
		margin-bottom: 10px;
	}
}

.rpahq-message-body {
	overflow-wrap: anywhere;
	line-height: 1.6;
}

.rpahq-pager {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 16px 0 0;
}

/* Portal calendar */

/* Text for screen readers only (month captions, full dates in the grid, link context). */
.rpahq-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rpahq-calendar__subscribe-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
}

.rpahq-calendar__subscribe-link .rpahq-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.rpahq-calendar__group {
	padding-bottom: 8px;
}

.rpahq-calendar__group + .rpahq-calendar__group {
	margin-top: 16px;
}

.rpahq-calendar__group h2 {
	margin: 0;
}

.rpahq-badge--members {
	border: 1px solid var(--rpa-line);
	background: var(--rpa-surface-alt);
	color: var(--rpa-ink);
}

.rpahq-badge--going {
	background: #e6f4ea;
	color: #14532d;
}

.rpahq-calendar__rsvp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 10px 0 0;
}

.rpahq-calendar__rsvp a {
	font-weight: 600;
}

.rpahq-calendar__going {
	margin: 0;
	color: #14532d;
	font-weight: 700;
}

.rpahq-calendar__going::before {
	content: "✓ ";
	content: "✓ " / "";
}

/* Month view. Mobile first: the grid is a list of the days that have events, and becomes
   a seven-column table once the panel itself is wide enough (a container query, so the
   side menu's width counts; browsers without container queries keep the list). The full
   date of each day is in the markup for screen readers either way. */

.rpahq-month {
	container-type: inline-size;
}

.rpahq-month__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 12px;
}

.rpahq-month__head h2 {
	margin: 0;
}

.rpahq-month__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.rpahq-month__nav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-weight: 600;
}

.rpahq-month__nav a[aria-current="page"] {
	color: var(--rpa-ink);
	text-decoration: none;
}

.rpahq-month__grid {
	width: 100%;
	border-collapse: collapse;
}

.rpahq-month__grid,
.rpahq-month__grid tbody,
.rpahq-month__grid tr,
.rpahq-month__grid td {
	display: block;
}

.rpahq-month__grid thead,
.rpahq-month__grid.rpahq-month__grid--empty,
.rpahq-month__grid .rpahq-month__day--outside,
.rpahq-month__grid .rpahq-month__day--empty:not(.rpahq-month__day--today) {
	display: none;
}

.rpahq-month__day {
	padding: 12px 0;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-month__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-month__weekday {
	color: var(--rpa-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rpahq-month__today {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--rpa-red);
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rpahq-month__events {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-month__event {
	font-size: 0.9375rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.rpahq-month__event a {
	color: var(--rpa-ink);
	font-weight: 600;
	text-decoration: none;
}

.rpahq-month__event a:hover {
	color: var(--rpa-red-text);
	text-decoration: underline;
}

.rpahq-month__event--cancelled a {
	text-decoration: line-through;
}

.rpahq-month__event--continues a {
	color: var(--rpa-muted);
	font-weight: 400;
}

.rpahq-month__time {
	margin-right: 4px;
	color: var(--rpa-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.rpahq-month__event .rpahq-badge {
	margin: 2px 2px 0 0;
	padding: 1px 6px;
	font-size: 0.75rem;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: normal;
}

@container (min-width: 600px) {
	.rpahq-month__grid,
	.rpahq-month__grid.rpahq-month__grid--empty {
		display: table;
		table-layout: fixed;
	}

	.rpahq-month__grid thead {
		display: table-header-group;
	}

	.rpahq-month__grid tbody {
		display: table-row-group;
	}

	.rpahq-month__grid tr {
		display: table-row;
	}

	.rpahq-month__grid td,
	.rpahq-month__grid .rpahq-month__day--outside,
	.rpahq-month__grid .rpahq-month__day--empty:not(.rpahq-month__day--today) {
		display: table-cell;
	}

	.rpahq-month__grid th {
		padding: 6px;
		border-bottom: 1px solid var(--rpa-line);
		color: var(--rpa-muted);
		font-size: 0.8125rem;
		letter-spacing: 0.06em;
		text-align: left;
		text-transform: uppercase;
	}

	.rpahq-month__day {
		height: 104px;
		padding: 6px;
		border: 1px solid var(--rpa-line);
		vertical-align: top;
	}

	.rpahq-month__day--outside {
		background: var(--rpa-surface-alt);
	}

	.rpahq-month__day--outside .rpahq-month__date {
		color: var(--rpa-muted);
		font-weight: 400;
	}

	.rpahq-month__day--today {
		box-shadow: inset 0 0 0 2px var(--rpa-red);
	}

	.rpahq-month__weekday {
		display: none;
	}

	.rpahq-month__today {
		padding: 0 6px;
		font-size: 0.6875rem;
	}

	.rpahq-month__events {
		gap: 4px;
	}

	.rpahq-month__event {
		font-size: 0.8125rem;
	}

	.rpahq-month__time {
		display: block;
		margin: 0;
		font-size: 0.75rem;
	}
}

/* Subscribe panel */

.rpahq-subscribe {
	margin: 24px 0 0;
}

.rpahq-subscribe:focus {
	outline: none;
}

.rpahq-portal input.rpahq-subscribe__url {
	background: var(--rpa-surface-alt);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
}

.rpahq-subscribe__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}

.rpahq-subscribe__help {
	margin: 0 0 12px;
	padding-left: 20px;
}

.rpahq-subscribe__help li + li {
	margin-top: 6px;
}

.rpahq-subscribe .rpahq-notice {
	margin: 12px 0 0;
}

.rpahq-button--small {
	min-height: 44px;
	padding: 0 12px;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.rpahq-portal .rpahq-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.rpahq-link-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-link-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
}

.rpahq-link-list .rpahq-icon,
.rpahq-dues__links .rpahq-icon {
	width: 16px;
	height: 16px;
}

/* Dashboard */

.rpahq-dashboard-card {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-dashboard-card > :last-child {
	margin-bottom: 0;
}

.rpahq-dashboard-card ul:not([role="list"]) {
	margin: 0 0 12px;
	padding-left: 20px;
}

.rpahq-dashboard-dues {
	margin: 12px 0;
	padding: 10px 12px;
	border-left: 4px solid var(--rpa-red);
	background: var(--rpa-surface-alt);
	font-weight: 600;
}

.rpahq-dashboard-profile {
	margin: 12px 0 6px;
}

progress.rpahq-progress {
	display: block;
	width: 100%;
	height: 8px;
	margin: 0 0 16px;
	accent-color: var(--rpa-red);
}

.rpahq-dashboard-meeting__title {
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 1.05rem;
}

.rpahq-dashboard-meeting__meta {
	margin: 0 0 16px;
}

.rpahq-dashboard-meeting__going {
	margin: 0 0 8px;
}

.rpahq-dashboard-meeting__going .rpahq-badge {
	margin-left: 0;
}

.rpahq-dashboard-card .rpahq-rsvp-cancel {
	margin: 0 0 12px;
}

.rpahq-dashboard-meeting__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.rpahq-dashboard-events,
.rpahq-dashboard-items,
.rpahq-dashboard-tasks {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.rpahq-dashboard-event {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.rpahq-dashboard-event .rpahq-date-badge__day {
	font-size: 1.25rem;
}

.rpahq-dashboard-event__title {
	font-weight: 700;
	color: var(--rpa-ink) !important;
}

.rpahq-dashboard-event--cancelled .rpahq-dashboard-event__title {
	text-decoration: line-through;
}

.rpahq-dashboard-event .rpahq-badge {
	margin: 2px 4px 0 0;
}

.rpahq-dashboard-event__when {
	display: block;
	margin-top: 2px;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-dashboard-items li > .rpahq-muted {
	display: block;
}

.rpahq-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.rpahq-dashboard-tasks__item--due {
	font-weight: 700;
}

.rpahq-dashboard-tasks__item--due::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 2px 0;
	border-radius: 50%;
	background: var(--rpa-red);
}

.rpahq-dashboard-tasks .rpahq-muted {
	display: block;
	font-weight: 400;
}

/* Dashboard › Customize (a <details>, so it works without JavaScript) */

.rpahq-customize {
	margin: 24px 0 0;
	padding: 0;
}

.rpahq-customize > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 24px;
	font-weight: 700;
	color: var(--rpa-ink);
	cursor: pointer;
}

.rpahq-customize > summary:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-customize > :not(summary) {
	margin-left: 24px;
	margin-right: 24px;
}

.rpahq-customize[open] > summary {
	border-bottom: 1px solid var(--rpa-line);
	margin-bottom: 16px;
}

.rpahq-customize form {
	padding-bottom: 8px;
}

.rpahq-customize__label {
	margin: 16px 0 8px;
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-customize__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
}

.rpahq-customize__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 12px;
}

.rpahq-customize__item + .rpahq-customize__item {
	border-top: 1px solid var(--rpa-line);
}

.rpahq-customize__name {
	font-weight: 600;
}

.rpahq-customize__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Officers */

.rpahq-officer__office {
	margin-bottom: 8px !important;
}

.rpahq-officer__holders {
	display: grid;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.rpahq-officer__name {
	font-weight: 700;
	font-size: 1.05rem;
}

.rpahq-officer__term {
	display: block;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-officer__vacant {
	margin: 0 0 12px;
	color: var(--rpa-muted);
	font-style: italic;
}

.rpahq-officer__email {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.rpahq-officer__email .rpahq-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--rpa-red);
}

/* Dues */

.rpahq-dues {
	display: grid;
	gap: 16px;
	max-width: 760px;
}

.rpahq-dues__links {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.rpahq-dues__links li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.rpahq-dues__links .rpahq-button {
	gap: 8px;
}

.rpahq-dues__instructions {
	margin-top: 8px;
}

/* My profile */

.rpahq-jump {
	margin: 0 0 20px;
}

.rpahq-jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-jump a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: 999px;
	background: var(--rpa-surface);
	color: var(--rpa-text);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.rpahq-jump a:hover {
	border-color: var(--rpa-red);
}

.rpahq-profile {
	display: grid;
	gap: 24px;
	/* minmax(0, …) so a wide control (the file input) can't push the page past a phone's width. */
	grid-template-columns: minmax(0, 1fr);
}

.rpahq-profile__section {
	min-width: 0;
	scroll-margin-top: 16px;
}

.rpahq-profile .rpahq-form {
	grid-template-columns: minmax(0, 1fr);
}

/* Sections take focus from the jump links; only keyboard focus needs the ring. */
.rpahq-profile__section:focus:not(:focus-visible),
.rpahq-review:focus:not(:focus-visible),
.rpahq-portal .rpahq-error-summary:focus:not(:focus-visible),
.rpahq-portal .rpahq-notice:focus:not(:focus-visible) {
	outline: none;
}

.rpahq-profile__section > h2 {
	margin-bottom: 8px;
}

.rpahq-readonly__label {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--rpa-ink);
}

.rpahq-readonly__value {
	margin: 0;
	overflow-wrap: anywhere;
}

/* A profile field and its "Show … in the directory" choice read as one item. */
.rpahq-profile-pair {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-profile-pair:last-of-type {
	border-bottom: 0;
}

.rpahq-profile-pair .rpahq-field--checkbox {
	margin-top: -6px;
}

.rpahq-notice--waiting {
	border-left-color: #b7791f;
	background: #fff8e6;
}

.rpahq-notice p {
	margin: 0 0 6px;
}

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

.rpahq-profile__note {
	overflow-wrap: anywhere;
}

.rpahq-portal .rpahq-error-summary h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
	color: var(--rpa-ink);
}

/* Never shown: the username field that lets password managers file the new password. */
.rpahq-portal input[hidden] {
	display: none !important;
}

/* Directory: search and filters */

.rpahq-directory-search {
	display: grid;
	gap: 0 16px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 24px;
}

.rpahq-directory-search .rpahq-field {
	margin-bottom: 12px;
}

.rpahq-directory-search__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.rpahq-portal input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	font: inherit;
	color: var(--rpa-ink);
	background: #fff;
}

@media (min-width: 640px) {
	.rpahq-directory-search {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		align-items: end;
	}

	.rpahq-directory-search__name {
		grid-column: 1 / -1;
	}

	.rpahq-directory-search__actions {
		grid-column: 1 / -1;
	}
}

/* Directory: results */

.rpahq-directory__count {
	font-size: 1.1rem !important;
}

.rpahq-directory-list {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.rpahq-directory-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rpahq-directory-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rpahq-directory-list > li {
	display: flex;
}

.rpahq-person {
	flex: 1;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-person__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rpahq-person__head > div {
	min-width: 0;
}

.rpahq-person__photo,
.rpahq-person__initials {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.rpahq-person__photo {
	object-fit: cover;
}

.rpahq-person__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rpa-surface-alt);
	border: 1px solid var(--rpa-line);
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
}

.rpahq-person--entry .rpahq-person__photo,
.rpahq-person--entry .rpahq-person__initials {
	width: 112px;
	height: 112px;
}

.rpahq-person--entry .rpahq-person__initials {
	font-size: 2.25rem;
}

.rpahq-portal h3.rpahq-person__name {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.rpahq-person__name a {
	text-decoration: none;
}

.rpahq-person__name a:hover {
	text-decoration: underline;
}

.rpahq-person__offices {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 0;
}

.rpahq-person__offices .rpahq-badge {
	margin-left: 0;
}

.rpahq-badge--office {
	background: #fdecec;
	color: var(--rpa-red-deep);
}

.rpahq-badge--waiting {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 10px;
	background: #fff4d6;
	color: #6b4400 !important;
	text-decoration: none;
}

.rpahq-badge--waiting:hover {
	text-decoration: underline;
}

.rpahq-person__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin: 14px 0 0;
	overflow-wrap: anywhere;
}

.rpahq-person__fields dt {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rpa-muted);
}

.rpahq-person__fields dd {
	margin: 0 0 8px;
}

@media (min-width: 520px) {
	.rpahq-person--entry .rpahq-person__fields {
		grid-template-columns: max-content 1fr;
		gap: 8px 16px;
	}

	.rpahq-person--entry .rpahq-person__fields dt {
		font-size: inherit;
		color: var(--rpa-ink);
	}

	.rpahq-person--entry .rpahq-person__fields dd {
		margin: 0;
	}
}

.rpahq-person--entry .rpahq-notice {
	margin: 20px 0 0;
}

.rpahq-directory__export {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 24px 0 0;
}

/* Directory entry: profile change waiting for approval */

.rpahq-review {
	margin-top: 24px;
	border-top: 4px solid #b7791f;
	scroll-margin-top: 16px;
}

.rpahq-compare {
	display: grid;
	gap: 20px;
	margin: 0 0 20px;
}

.rpahq-compare__row {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr);
}

.rpahq-compare__row > h3 {
	margin: 0;
	font-size: 1rem;
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.rpahq-compare__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rpahq-compare__cell {
	padding: 12px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
	min-width: 0;
}

.rpahq-compare__label {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rpa-muted);
}

.rpahq-compare__photo {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.rpahq-compare__text {
	margin: 0;
	overflow-wrap: anywhere;
}

.rpahq-review__actions {
	display: grid;
	gap: 20px;
}

.rpahq-review__return {
	padding-top: 16px;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-review__return textarea {
	min-height: 88px;
}

/* Manage › Events › {event} › RSVPs (views/portal/manage-rsvps.php) */

.rpahq-rsvp-totals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.rpahq-rsvp-totals > div {
	padding: 14px 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-rsvp-totals dt {
	margin: 0 0 4px;
	color: var(--rpa-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rpahq-rsvp-totals dd {
	margin: 0;
	color: var(--rpa-ink);
	font-size: 1.25rem;
	font-weight: 700;
}

/* A data table keeps its columns; on a phone it scrolls sideways inside a focusable,
   labelled region (WCAG 1.4.10 lets data tables do this). */
.rpahq-rsvp-table {
	/* 0.14.0: screen-reader-only text inside stays inside the scrolling box (else it can widen the page). */
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-rsvp-table:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-rsvp-table table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.rpahq-rsvp-table caption {
	padding: 14px 16px 4px;
	color: var(--rpa-ink);
	font-weight: 700;
	text-align: left;
}

.rpahq-rsvp-table th,
.rpahq-rsvp-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rpa-line);
	text-align: left;
	vertical-align: middle;
}

.rpahq-rsvp-table thead th {
	color: var(--rpa-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rpahq-rsvp-table tbody th {
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-rsvp-table tbody tr:last-child > * {
	border-bottom: 0;
}

.rpahq-rsvp-table__cancelled th,
.rpahq-rsvp-table__cancelled td {
	color: var(--rpa-muted);
}

.rpahq-rsvp-remove {
	margin: 0;
}

.rpahq-rsvp-remove .rpahq-button {
	padding: 0 14px;
	font-size: 0.8125rem;
}

.rpahq-status--going {
	background: #e6f4ea;
	color: #14532d;
}

/* =========================================================================================
 * 0.5.0 Documents: the library (/portal/documents/) and Manage › Documents' current-file panel.
 * ======================================================================================= */

/* Documents library: the count heading matches the directory's. */
.rpahq-documents__count {
	font-size: 1.1rem !important;
}

/* Each row: title, badge, meta and summary on the left; Edit on the right (below on phones). */
.rpahq-document__main {
	flex: 1 1 18rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-document__file {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--rpa-muted);
	white-space: nowrap;
}

.rpahq-document .rpahq-badge {
	margin-left: 6px;
}

.rpahq-document__summary {
	margin: 6px 0 0;
	color: var(--rpa-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rpahq-document__summary p {
	margin: 0 0 6px;
}

.rpahq-document__summary p:last-child {
	margin-bottom: 0;
}

/* The pager's "Page 2 of 5" sits between Newer and Older. */
.rpahq-documents .rpahq-pager {
	align-items: center;
	flex-wrap: wrap;
}

/* Manage › Documents: the current file above the form's fields. */
.rpahq-document-current {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
	overflow-wrap: anywhere;
}

.rpahq-document-current p {
	margin: 0;
}

.rpahq-document-current p + p {
	margin-top: 4px;
}

/* =========================================================================================
 * 0.5.0 Announcements: /portal/announcements/, announcement cards (also on committee pages and in
 * Manage › Announcements' Preview). No fixed widths: holds at 375 px with no sideways scroll.
 * ======================================================================================= */

/* Portal › Announcements */

.rpahq-announcements {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 0 24px;
}

.rpahq-announcement {
	min-width: 0;
	padding: 20px 24px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	scroll-margin-top: 16px;
}

/* Pinned (current) announcements carry the chapter red down the side. */
.rpahq-announcement--pinned {
	border-left: 4px solid var(--rpa-red);
}

/* The anchor target (#rpahq-announcement-{id}, from the dashboard) is outlined; a focus that
   only came from the link isn't ringed twice. */
.rpahq-announcement:target {
	box-shadow: 0 0 0 3px var(--rpa-red-text);
}

.rpahq-announcement:focus:not(:focus-visible),
.rpahq-announcements-archive > h2:focus:not(:focus-visible) {
	outline: none;
}

.rpahq-announcement__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 6px;
}

.rpahq-announcement__head .rpahq-announcement__title {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-announcement__head .rpahq-badge {
	margin-left: 0;
}

.rpahq-announcement__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0 0 12px;
	color: var(--rpa-muted);
	font-size: 0.9375rem;
}

.rpahq-announcement__meta .rpahq-badge {
	margin-left: 0;
}

.rpahq-announcement__body {
	overflow-wrap: anywhere;
	line-height: 1.6;
}

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

.rpahq-announcement__body > :last-child {
	margin-bottom: 0;
}

.rpahq-announcement__body ul,
.rpahq-announcement__body ol {
	padding-left: 1.5em;
}

.rpahq-announcement__body blockquote {
	margin: 12px 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--rpa-line);
	color: var(--rpa-text);
}

.rpahq-announcement__body a {
	color: var(--rpa-red-text);
	text-decoration: underline;
}

.rpahq-announcement__edit {
	margin: 12px 0 0;
}

.rpahq-announcement__edit a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

/* Earlier announcements: folded, title and date in the summary (works without JavaScript). */

.rpahq-announcements-archive {
	margin: 32px 0 0;
}

.rpahq-announcements-archive > h2 {
	margin: 0 0 12px;
	scroll-margin-top: 16px;
}

.rpahq-announcements--archive {
	gap: 8px;
}

.rpahq-announcement--collapsed {
	padding: 0;
}

.rpahq-announcement__details > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	min-height: 44px;
	padding: 10px 24px;
	font-weight: 700;
	color: var(--rpa-ink);
	cursor: pointer;
}

.rpahq-announcement__details > summary:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-announcement__details > summary .rpahq-announcement__title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-announcement__date {
	font-weight: 400;
	color: var(--rpa-muted);
}

.rpahq-announcement__details[open] > summary {
	border-bottom: 1px solid var(--rpa-line);
	margin-bottom: 12px;
}

.rpahq-announcement__details > :not(summary) {
	margin-left: 24px;
	margin-right: 24px;
}

.rpahq-announcement__details > :last-child {
	margin-bottom: 16px;
}

/* Inside a panel (a committee page's Announcements section), announcements are separated by
   rules instead of being cards inside a card. */
.rpahq-panel .rpahq-announcement {
	padding: 16px 0;
	border: 0;
	border-top: 1px solid var(--rpa-line);
	border-radius: 0;
	background: transparent;
}

.rpahq-panel .rpahq-announcement--pinned {
	padding-left: 12px;
	border-left: 4px solid var(--rpa-red);
}

.rpahq-announcements-archive .rpahq-pager {
	align-items: center;
	flex-wrap: wrap;
}

@media (max-width: 480px) {
	.rpahq-announcement {
		padding: 16px;
	}

	.rpahq-announcement--collapsed {
		padding: 0;
	}

	.rpahq-announcement__details > summary {
		padding: 10px 16px;
	}

	.rpahq-announcement__details > :not(summary) {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* =========================================================================================
 * 0.5.0 Committees: index cards, a committee's page and Manage › Committees.
 * ======================================================================================= */

/* Committees: index cards (/portal/committees/). Each card is an <article class="rpahq-card">
   whose only link is the name in its h2; .rpahq-card--link is for cards that are themselves links. */

.rpahq-committee-card {
	min-width: 0;
	overflow-wrap: anywhere;
	border-top: 4px solid var(--rpa-red);
}

.rpahq-committee-card h2 {
	margin: 0 0 8px;
	font-size: 1.25rem;
}

.rpahq-committee-card h2 a {
	display: inline-block;
	min-height: 44px;
	padding: 8px 0;
	color: var(--rpa-ink) !important;
}

.rpahq-committee-card p {
	margin: 0 0 6px;
}

.rpahq-committee-card__badge {
	margin-bottom: 8px !important;
}

/* A committee's page (/portal/committees/{key}/). */

.rpahq-committee__header .rpahq-badge {
	margin-top: 4px;
}

.rpahq-committee__edit {
	margin: -12px 0 16px;
}

.rpahq-committee__about,
.rpahq-committee__section {
	min-width: 0;
	overflow-wrap: anywhere;
	margin: 0 0 16px;
}

.rpahq-committee__section h2 {
	margin-top: 0;
	font-size: 1.25rem;
}

.rpahq-committee__description p {
	margin: 0 0 12px;
}

.rpahq-committee__facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0;
}

.rpahq-committee__facts dt {
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-committee__facts dd {
	margin: 0;
}

.rpahq-committee__members {
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	margin-bottom: 12px;
}

.rpahq-committee__announcements > * + * {
	margin-top: 16px;
}

.rpahq-committee__file {
	font-weight: 400;
}

@media (max-width: 480px) {
	.rpahq-committee__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.rpahq-committee__facts dd + dt {
		margin-top: 8px;
	}
}

/* Manage › Committees: details and members. */

.rpahq-committee-manage__section {
	min-width: 0;
	overflow-wrap: anywhere;
	margin: 0 0 16px;
}

.rpahq-committee-manage__section h3 {
	margin-top: 0;
}

.rpahq-committee-manage__search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.rpahq-committee-manage__search .rpahq-field {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}

.rpahq-committee-manage__search .rpahq-form__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.rpahq-committee-manage__people {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-committee-manage__people li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	min-height: 44px;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-committee-manage__people li:last-child {
	border-bottom: 0;
}

.rpahq-committee-manage__name {
	font-weight: 600;
	min-width: 0;
}

/* =========================================================================================
 * 0.6.0 News and highlights: the photo panel and Preview (Manage › News and highlights).
 * ======================================================================================= */

/* Manage › News and highlights: the photo panel at the top of the form and the
   Preview. Reuses .rpahq-form__group, .rpahq-field*, .rpahq-check, .rpahq-preview and public.css's
   .rpahq-photos grid (public.css loads before portal.css). No fixed widths: two photo cards a row
   at 375 px, no sideways scroll. */

.rpahq-news-photo-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
	padding: 0;
	list-style: none;
}

.rpahq-news-photo {
	margin: 0;
	padding: 10px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
	min-width: 0;
}

.rpahq-news-photo > legend {
	padding: 0 4px;
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-news-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 8px;
	border-radius: 4px;
}

.rpahq-news-photo .rpahq-field {
	margin: 0 0 6px;
}

.rpahq-news-photo input[type="text"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.rpahq-news-photos-panel > .rpahq-field__error {
	margin: 0 0 12px;
}

/* Preview */

.rpahq-news-preview h2 {
	margin: 0 0 4px;
}

.rpahq-news-preview__meta {
	margin: 0 0 16px;
}

.rpahq-news-preview__main {
	margin: 0 0 16px;
}

.rpahq-news-preview__main img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.rpahq-news-preview__body {
	overflow-wrap: anywhere;
	line-height: 1.6;
}

.rpahq-news-preview .rpahq-news-photos {
	margin: 20px 0 0;
}

/* A list's Add buttons side by side (e.g. Add news post and Add a Chapter Highlights story). */
.rpahq-toolbar__add {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* =========================================================================================
 * 0.6.0 Manage › Homepage: order and visibility, section screens, Chapter info.
 * ======================================================================================= */

/* Manage › Homepage (/portal/manage/homepage/). */

/* The section list: each row has the section's name, Shown/Hidden and "Last edited", then its
   Position, Show switch and Edit link. On a phone the controls drop under the name. */

.rpahq-homepage-sections > h2,
.rpahq-homepage-chapter > h2 {
	margin-top: 0;
}

.rpahq-homepage-list {
	margin: 0 0 12px;
}

.rpahq-homepage-row__info {
	flex: 1 1 260px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-homepage-row__info .rpahq-status {
	margin-left: 8px;
	vertical-align: middle;
}

.rpahq-homepage-row__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.rpahq-homepage-row__controls .rpahq-field {
	margin: 0;
}

.rpahq-homepage-row__controls .rpahq-field--select {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rpahq-homepage-row__controls select {
	width: auto;
	min-width: 64px;
	min-height: 44px;
}

.rpahq-homepage-row__controls .rpahq-check {
	min-height: 44px;
}

.rpahq-homepage-note {
	margin: 0 0 12px;
}

/* =========================================================================================
 * 0.6.0 Manage › Waiting for approval (the review queue).
 * ======================================================================================= */

/* Manage › Waiting for approval (views/portal/manage-review.php).
   Reuses .rpahq-back, .rpahq-form-title, .rpahq-form-meta, .rpahq-form*, .rpahq-field*,
   .rpahq-check, .rpahq-panel, .rpahq-preview, .rpahq-tabs, .rpahq-toolbar,
   .rpahq-manage-list/-item, .rpahq-status*, .rpahq-notice*, .rpahq-error-summary,
   .rpahq-review__actions, .rpahq-review__return, .rpahq-button* and .rpahq-visually-hidden.
   No fixed widths: holds at 375 px. */

/* The list: a tick box (44 px target) before each item's title and meta. */

.rpahq-queue__item {
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.rpahq-queue__select {
	flex: 0 0 auto;
	justify-content: center;
	min-width: 44px;
	min-height: 44px !important;
	margin: -10px 0 -10px -12px;
	cursor: pointer;
}

.rpahq-queue__select input {
	width: 20px;
	height: 20px;
	margin: 0;
}

.rpahq-queue__body {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-queue__bulk {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 16px;
	scroll-margin-top: 16px;
}

.rpahq-queue__bulk h2,
.rpahq-queue__bulk .rpahq-field,
.rpahq-queue__bulk .rpahq-form__actions,
.rpahq-queue__bulk > p {
	margin: 0;
}

.rpahq-queue__bulk textarea {
	min-height: 88px;
}

.rpahq-queue__bulk:focus:not(:focus-visible) {
	outline: none;
}

/* One item: the preview, what stops an approval, then Approve and Return. */

.rpahq-queue-preview,
.rpahq-queue-blockers,
.rpahq-queue-actions {
	margin: 0 0 20px;
}

.rpahq-queue-preview .rpahq-preview {
	overflow-x: auto;
}

.rpahq-queue-blockers {
	scroll-margin-top: 16px;
}

.rpahq-queue-blockers h2 {
	margin: 0 0 8px;
	font-size: 1rem;
}

.rpahq-queue-blockers ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.rpahq-queue-blockers p {
	margin: 0;
}

.rpahq-queue-actions h2 {
	margin-top: 0;
}

.rpahq-queue-approve,
.rpahq-queue-actions .rpahq-review__return {
	margin: 0;
	gap: 12px;
}

/* The field summary (types without a preview; wp-admin shows it unstyled). */

.rpahq-review-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 16px;
	margin: 0;
}

.rpahq-review-summary dt {
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-review-summary dd {
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.rpahq-review-summary img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.rpahq-review-summary__alt {
	display: block;
	margin-top: 4px;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

@media (min-width: 640px) {
	.rpahq-review-summary {
		grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
	}

	.rpahq-review-summary dd {
		margin-bottom: 8px;
	}
}

/* =========================================================================================
 * 0.6.0 Manage › Activity and the Manage overview's "To do" panel.
 * ======================================================================================= */

/* Manage › Activity (0.6.0). The filter form reuses .rpahq-directory-search, the table
   reuses .rpahq-rsvp-table (a focusable region that scrolls sideways on a phone). */

.rpahq-activity-table table {
	min-width: 760px;
}

.rpahq-activity-table th,
.rpahq-activity-table td {
	vertical-align: top;
}

.rpahq-activity-table tbody th {
	white-space: nowrap;
	font-weight: 400;
}

.rpahq-activity-table__details {
	min-width: 220px;
	color: var(--rpa-muted);
	overflow-wrap: anywhere;
}

.rpahq-activity .rpahq-pager {
	align-items: center;
	flex-wrap: wrap;
}

.rpahq-pager__status {
	margin: 0;
	text-align: center;
}

/* Manage › Overview: the "To do" panel above the section cards. */

.rpahq-overview-tasks {
	margin: 0 0 24px;
}

.rpahq-overview-tasks h2 {
	margin: 0 0 12px;
	font-size: 1.125rem;
}

.rpahq-overview-tasks .rpahq-dashboard-tasks {
	margin: 0;
}

/* =========================================================================================
 * 0.6.0 Events: Duplicate and Repeat; Manage › {type} › History.
 * ======================================================================================= */

/* Manage › Events › Duplicate and Repeat, and Manage › {type} › History.
   Reuses .rpahq-back, .rpahq-form-title, .rpahq-form-meta, .rpahq-form*, .rpahq-field*,
   .rpahq-check, .rpahq-panel, .rpahq-manage-list/-item, .rpahq-status*, .rpahq-button*,
   .rpahq-muted and .rpahq-visually-hidden. No fixed widths: holds at 375 px. */

/* Repeat: the choices, then the dates the copies would get. */

.rpahq-repeat {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 0 20px;
}

.rpahq-repeat .rpahq-field,
.rpahq-repeat > p {
	margin: 0;
}

.rpahq-repeat-dates {
	margin: 0 0 20px;
	scroll-margin-top: 16px;
}

.rpahq-repeat-dates h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.rpahq-repeat-dates__list {
	margin: 0 0 12px;
	padding-left: 1.5em;
}

.rpahq-repeat-dates__list li + li {
	margin-top: 4px;
}

.rpahq-repeat-dates .rpahq-form {
	margin-top: 12px;
}

/* History: one row per saved version; Restore sits where a list row's status would. */

.rpahq-history .rpahq-manage-item > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-history__restore {
	margin: 0;
}

/* =========================================================================================
 * 0.7.0 Manage › Roster and Request access.
 * ======================================================================================= */

/* Manage › Roster (views/portal/manage-roster.php) and Request access
   (views/portal/request-access.php). Reuses .rpahq-tabs, .rpahq-manage-list/-item, .rpahq-badge*, .rpahq-message-details,
   .rpahq-rsvp-table (scrolling region), .rpahq-directory-search, .rpahq-pager, .rpahq-link-list,
   .rpahq-form*, .rpahq-panel and .rpahq-visually-hidden. No fixed widths: holds at 375 px. */

/* Request access: the trap stays out of sight (it also carries .rpahq-visually-hidden). */
.rpahq-request__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rpahq-request .rpahq-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* Tabs and toolbar. */
.rpahq-roster-tabs {
	margin: 0 0 16px;
}

.rpahq-roster-toolbar:empty {
	display: none;
}

.rpahq-roster-count {
	margin: 0 0 8px;
}

/* The Brothers list: a tick box (dues offices) before each name. */
.rpahq-roster-item {
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 0;
}

.rpahq-roster-item__select {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	margin: -10px 0 -10px -10px;
	padding: 10px;
	box-sizing: border-box;
}

.rpahq-roster-item__body {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-roster-item__body .rpahq-badge {
	margin-left: 6px;
	vertical-align: middle;
}

.rpahq-roster-bulk__set {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

/* Record and tab sections. */
.rpahq-roster-section {
	min-width: 0;
	overflow-wrap: anywhere;
	margin: 0 0 16px;
}

.rpahq-roster-section h2,
.rpahq-roster-section h3 {
	margin-top: 0;
}

.rpahq-roster-facts {
	margin: 0 0 16px;
}

.rpahq-roster-access {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.rpahq-roster-history,
.rpahq-roster-preview {
	margin: 16px 0 0;
}

.rpahq-roster-history table {
	min-width: 560px;
}

/* Access requests. */
.rpahq-roster-requests {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-roster-request {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-roster-request h3 {
	margin-top: 0;
}

.rpahq-roster-counts {
	margin: 0 0 16px;
}

/* =========================================================================================
 * 0.7.0 Manage › Settings.
 * ======================================================================================= */

/* Manage › Settings (views/portal/manage-settings.php). Reuses .rpahq-cards, .rpahq-card--link,
   .rpahq-manage-list, .rpahq-customize, .rpahq-panel, .rpahq-button*, .rpahq-toolbar.
   Phone-first: no fixed widths, holds at 375 px. */

/* Index: a heading per section, its groups as link cards; "Advanced settings" is a <details>. */
.rpahq-settings-section {
	margin: 0 0 24px;
}

.rpahq-settings-section > h2 {
	margin: 0 0 12px;
}

.rpahq-settings-section .rpahq-card h3,
.rpahq-settings-advanced .rpahq-card h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.rpahq-settings-section .rpahq-card p,
.rpahq-settings-advanced .rpahq-card p {
	margin: 0;
	overflow-wrap: anywhere;
}

.rpahq-settings-advanced {
	margin: 0 0 24px;
}

.rpahq-settings-advanced .rpahq-cards {
	padding-bottom: 16px;
}

/* List editor: name, key and badge on the left; the buttons wrap under them on a phone. */
.rpahq-settings-list__info {
	min-width: 0;
}

.rpahq-settings-list__info .rpahq-manage-item__meta {
	overflow-wrap: anywhere;
}

.rpahq-settings-list__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* "Rights (advanced)" and "Reset to starter values" sit inside or under a form panel. */
.rpahq-settings-rights {
	margin: 16px 0 0;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
}

.rpahq-settings-rights > :not(summary) {
	margin-left: 12px;
	margin-right: 12px;
}

.rpahq-settings-reset {
	margin-top: 16px;
}

/* The rights matrix: stacked fieldsets, never a wide table. */
.rpahq-rights {
	min-width: 0;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.rpahq-rights > legend {
	margin: 0 0 4px;
	padding: 0;
	font-weight: 700;
}

.rpahq-rights__group {
	min-width: 0;
	margin: 0 0 12px;
	padding: 10px 12px 4px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
}

.rpahq-rights__group > legend {
	padding: 0 6px;
	font-weight: 700;
}

.rpahq-rights__group .rpahq-field {
	margin: 0 0 8px;
}

.rpahq-rights__group select {
	width: 100%;
	max-width: 100%;
}

.rpahq-rights__group .rpahq-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
}

@media (min-width: 640px) {
	.rpahq-rights__group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.rpahq-rights__group > legend {
		grid-column: 1 / -1;
	}
}

/* Export and import, and the change lists of the import and reset previews. */
.rpahq-settings-transfer + .rpahq-settings-transfer,
.rpahq-settings-preview {
	margin-top: 16px;
}

.rpahq-settings-changes {
	margin: 0 0 16px;
	padding-left: 20px;
	list-style: disc;
	overflow-wrap: anywhere;
}

/* =========================================================================================
 * 0.7.0 Manage › Reports.
 * ======================================================================================= */

/* Manage › Reports (views/portal/manage-reports.php).
   Reuses .rpahq-directory-search (the period form), .rpahq-rsvp-totals (the Portal use
   tiles), .rpahq-rsvp-table (each table: a focusable, labelled region that scrolls sideways
   on a phone), .rpahq-panel, .rpahq-notice*, .rpahq-button*, .rpahq-field__help,
   .rpahq-muted, .rpahq-small and .rpahq-visually-hidden. No fixed widths: holds at 375 px. */

/* Each report: its heading with "Download CSV" beside it (under it on a phone). */

.rpahq-reports-section {
	margin: 0 0 32px;
}

.rpahq-reports-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 12px;
}

.rpahq-reports-section__head h2 {
	margin: 0;
	font-size: 1.25rem;
}

.rpahq-reports-section .rpahq-muted {
	margin: 8px 0 12px;
}

/* Tables: fewer columns than the RSVP list, so they need less width before they scroll. */

.rpahq-reports-table table {
	min-width: 480px;
}

.rpahq-reports-table--wide table {
	min-width: 640px;
}

.rpahq-reports-table td {
	font-variant-numeric: tabular-nums;
}

.rpahq-reports-table tfoot th,
.rpahq-reports-table tfoot td {
	border-top: 2px solid var(--rpa-line);
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-reports-table tfoot tr:last-child > * {
	border-bottom: 0;
}

/* Where the numbers come from and how far back they go. */

.rpahq-reports-footer {
	margin: 32px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-reports-footer p {
	margin: 0 0 8px;
}

/* =========================================================================================
 * 0.7.0 Manage › Leadership › Start new term.
 * ======================================================================================= */

/* Manage › Leadership › Start new term (views/portal/manage-new-term.php).
   Reuses .rpahq-back, .rpahq-form-title, .rpahq-form*, .rpahq-field*, .rpahq-check,
   .rpahq-rsvp-table (the focusable, labelled table region), .rpahq-panel, .rpahq-notice*,
   .rpahq-button* and .rpahq-visually-hidden. No fixed widths: holds at 375 px. */

/* The table has three short columns, so it doesn't need the RSVP list's sideways scroll. */
.rpahq-rsvp-table.rpahq-new-term-table {
	margin: 0 0 20px;
}

.rpahq-rsvp-table.rpahq-new-term-table table {
	min-width: 0;
}

.rpahq-rsvp-table.rpahq-new-term-table th,
.rpahq-rsvp-table.rpahq-new-term-table td {
	vertical-align: top;
}

.rpahq-rsvp-table.rpahq-new-term-table tbody th .rpahq-field__error {
	margin: 4px 0 0;
	font-weight: 400;
}

.rpahq-rsvp-table.rpahq-new-term-table .rpahq-muted {
	display: block;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-rsvp-table.rpahq-new-term-table .rpahq-field {
	margin: 0;
}

.rpahq-rsvp-table.rpahq-new-term-table select {
	width: 100%;
	max-width: 20rem;
}

.rpahq-new-term > .rpahq-muted,
.rpahq-new-term-preview .rpahq-muted {
	color: var(--rpa-muted);
}

/* The preview: what starts, what ends, who stays. */
.rpahq-new-term-preview h3 {
	margin: 16px 0 8px;
	font-size: 1.05rem;
}

.rpahq-new-term-preview h3:first-child {
	margin-top: 0;
}

.rpahq-new-term-preview ul {
	margin: 0 0 12px;
	padding-left: 1.5em;
}

.rpahq-new-term-preview li + li {
	margin-top: 4px;
}

.rpahq-new-term__confirm {
	margin-top: 16px;
}

/* Phones: each seat stacks into a block, the office as its heading line, and the select
   takes the full width. Column names show beside the two cells (the select also has its
   own label). */
@media (max-width: 599px) {
	.rpahq-rsvp-table.rpahq-new-term-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.rpahq-rsvp-table.rpahq-new-term-table table,
	.rpahq-rsvp-table.rpahq-new-term-table tbody,
	.rpahq-rsvp-table.rpahq-new-term-table tr,
	.rpahq-rsvp-table.rpahq-new-term-table th,
	.rpahq-rsvp-table.rpahq-new-term-table td {
		display: block;
		box-sizing: border-box;
		width: auto;
	}

	.rpahq-rsvp-table.rpahq-new-term-table tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--rpa-line);
	}

	.rpahq-rsvp-table.rpahq-new-term-table tbody tr:last-child {
		border-bottom: 0;
	}

	.rpahq-rsvp-table.rpahq-new-term-table th,
	.rpahq-rsvp-table.rpahq-new-term-table td,
	.rpahq-rsvp-table.rpahq-new-term-table tbody tr:last-child > * {
		padding: 4px 12px;
		border-bottom: 0;
	}

	.rpahq-rsvp-table.rpahq-new-term-table tbody th {
		font-size: 1rem;
	}

	.rpahq-rsvp-table.rpahq-new-term-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		color: var(--rpa-muted);
		font-size: 0.8125rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.rpahq-rsvp-table.rpahq-new-term-table select {
		max-width: none;
	}
}

/* =========================================================================================
 * 0.8.0 Formatting toolbar on rich-text fields; event-type markers in the portal calendar.
 * ======================================================================================= */

/* 0.8.0: formatting toolbar on rich-text fields (wp_editor teeny, B23). The wrapper keeps the
   field's id for the error summary; the toolbar wraps on a phone instead of scrolling sideways. */
.rpahq-richtext {
	max-width: 100%;
	margin-top: 4px;
}

.rpahq-richtext:focus {
	outline: none;
}

.rpahq-richtext:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-richtext .wp-editor-wrap,
.rpahq-richtext .wp-editor-container,
.rpahq-richtext .mce-tinymce {
	box-sizing: border-box;
	max-width: 100%;
}

.rpahq-richtext .wp-editor-container {
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	overflow: hidden;
}

.rpahq-richtext .mce-toolbar .mce-container-body,
.rpahq-richtext .mce-toolbar .mce-btn-group {
	white-space: normal;
}

.rpahq-richtext .mce-toolbar .mce-btn-group .mce-btn {
	margin: 2px;
}

.rpahq-richtext .mce-btn button {
	min-width: 32px;
	min-height: 32px;
}

.rpahq-field.rpahq-field--invalid .rpahq-richtext .wp-editor-container {
	border-color: var(--rpa-red);
	border-width: 2px;
}

/* 0.8.0: event-type markers in the portal calendar. The marker itself (.rpahq-type-marker:
   icon or dot in --rpahq-type-color, decorative) is styled in public.css, which the portal
   also loads; these rules place it in the portal's own components. */

/* Type tabs: the marker before each name. On the current (dark) tab it follows the white
   text, so it stays visible. */
.rpahq-tabs a .rpahq-type-marker {
	margin-right: 6px;
}

.rpahq-tabs a[aria-current="page"] .rpahq-type-marker {
	color: inherit;
}

/* Month entries: the marker before the title (after the time, which is its own line once
   the grid is a table). The space after it is in the markup. */
.rpahq-month__event .rpahq-type-marker {
	margin-top: -2px;
}

.rpahq-month__event--continues .rpahq-type-marker {
	opacity: 0.7;
}

/* 0.8.1: the formatting toolbar's inner faces are spans (portal.js), not buttons; keep TinyMCE's
   button look and its 36 x 34 px controls (WCAG 2.5.8 target size). */
.mce-toolbar .mce-btn .rpahq-mce-face {
	display: inline-block;
	padding: 6px 7px;
	font-size: 14px;
	line-height: normal;
	color: #595959;
	text-align: center;
	cursor: pointer;
	background: transparent;
}

.mce-toolbar .mce-listbox .rpahq-mce-face {
	font-size: 13px;
	line-height: 20px;
	text-align: left;
}

/* ===== 0.9.0: member-engagement upgrades (PLAN D20). Merged from work/0.9.0/css-*.css. ===== */

/* =========================================================================================
 * 0.9.0 Weekly digest, dues reminders, email preferences (Builder A).
 * Reuses .rpahq-panel, .rpahq-panel--narrow, .rpahq-notice*, .rpahq-form*, .rpahq-check,
 * .rpahq-field__help, .rpahq-button*, .rpahq-muted, .rpahq-small, .rpahq-toolbar.
 * ======================================================================================= */

/* The welcome card's dues banner: an amber notice, the link on its own tap-sized line on a phone.
   Scoped to the banner: public.css's red .rpahq-notice--alert (cancelled meeting, RSVP errors)
   also loads in the portal and keeps its colour. */
.rpahq-notice--alert.rpahq-dues-banner {
	border-left-color: #b7791f;
	background: #fff8e6;
	color: var(--rpa-ink);
}

.rpahq-dues-banner {
	margin: 12px 0;
	overflow-wrap: anywhere;
}

.rpahq-dues-banner a {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	font-weight: 600;
	color: var(--rpa-red-text);
}

/* My profile › Email preferences: the two checkboxes stack, each a full-width tap target. */
.rpahq-email-prefs .rpahq-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.rpahq-email-prefs .rpahq-field__help {
	margin-top: 4px;
}

/* The unsubscribe page and the Settings test-digest panel. */
.rpahq-unsubscribe .rpahq-form__actions .rpahq-button,
.rpahq-digest-test .rpahq-button {
	min-height: 44px;
}

.rpahq-digest-test {
	margin-top: 16px;
}

/* Manage › Roster: "Reminders sent this month" sits in the toolbar, wrapping under the button. */
.rpahq-dues-reminders-count {
	margin: 0;
	flex: 1 1 auto;
	text-align: right;
}

@media (max-width: 600px) {
	.rpahq-dues-reminders-count {
		flex-basis: 100%;
		text-align: left;
	}
}

/* 0.9.0: "Email me a sign-in link" (views/portal/sign-in.php, includes/magic-link.php) and the
   "Since you last signed in" card (includes/recent.php). Reuses .rpahq-panel--narrow,
   .rpahq-form*, .rpahq-field*, .rpahq-check, .rpahq-notice*, .rpahq-error-summary,
   .rpahq-dashboard-items, .rpahq-muted, .rpahq-small and .rpahq-visually-hidden (the honeypot
   also carries public.css's .rpahq-contact__trap). No fixed widths: holds at 375 px. */

/* The second panel sits under the password form with the same gap the portal uses between
   panels. */
.rpahq-sign-in-link {
	margin-top: 24px;
}

.rpahq-sign-in-link h2 {
	margin-top: 0;
}

/* "Keep me signed in": a tap-sized row. */
.rpahq-sign-in-link .rpahq-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

/* Since you last signed in: small group headings inside the card. */
.rpahq-recent__heading {
	margin: 16px 0 4px;
	font-size: 1rem;
}

.rpahq-recent > .rpahq-muted + .rpahq-recent__heading {
	margin-top: 8px;
}

/* =========================================================================================
 * 0.9.0 Events (Builder C): the RSVP list's waitlist group, the check-in screen and the
 * shifts screen. Phone-first: at 375 px nothing scrolls sideways (only the RSVP table, inside
 * its own region); check-in buttons are at least 48 px tall.
 * ======================================================================================= */

/* RSVP list: group headings inside the one table, and the Waitlisted status. */
.rpahq-rsvp-table th[scope="rowgroup"] {
	padding-top: 16px;
	background: var(--rpa-surface-alt);
	color: var(--rpa-ink);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.rpahq-status--waitlist {
	background: #fff4e5;
	color: #7a3e00;
}

/* Check-in: totals, search, one row per person. */
.rpahq-check-in__totals .rpahq-rsvp-totals {
	display: block;
	margin: 0 0 16px;
	color: var(--rpa-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.rpahq-check-in__search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 16px;
}

.rpahq-check-in__search .rpahq-field {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
}

.rpahq-check-in__search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
}

.rpahq-check-in__search-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rpahq-check-in {
	display: grid;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.rpahq-check-in__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 16px;
	border: 1px solid var(--rpa-line);
	border-left: 4px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-check-in__row--in {
	border-left-color: #1b7a3a;
	background: #f1f8f3;
}

.rpahq-check-in__who {
	display: grid;
	flex: 1 1 180px;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-check-in__name {
	color: var(--rpa-ink);
	font-size: 1.0625rem;
}

.rpahq-check-in__form {
	flex: 0 0 auto;
	margin: 0;
}

.rpahq-check-in__button {
	min-width: 120px;
	min-height: 48px;
	font-size: 1rem;
}

.rpahq-check-in__button[aria-busy="true"] {
	opacity: 0.6;
}

@media (max-width: 480px) {
	.rpahq-check-in__form,
	.rpahq-check-in__button {
		width: 100%;
	}
}

.rpahq-check-in__walkin summary {
	min-height: 44px;
	cursor: pointer;
	color: var(--rpa-ink);
	font-weight: 700;
	line-height: 44px;
}

.rpahq-check-in__walkin select,
.rpahq-check-in__walkin input[type="text"],
.rpahq-check-in__walkin input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
}

/* Shifts screen: one fieldset per shift; the three short fields side by side when they fit. */
.rpahq-shift-row {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	min-width: 0;
}

.rpahq-shift-row legend {
	padding: 0 4px;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-shift-row--new {
	border-style: dashed;
}

.rpahq-shift-row__times {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
}

.rpahq-shift-row .rpahq-field {
	min-width: 0;
	margin: 0;
}

.rpahq-shift-row input[type="text"],
.rpahq-shift-row input[type="time"],
.rpahq-shift-row input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
}

/* 0.9.0: portal search (menu box and page), the milestones card and the officer checklists
   card (Builder D). Phone-first: nothing here is wider than its container at 375 px. */

/* Search box in the portal menu and on /portal/search/ */

.rpahq-portal-nav__search,
.rpahq-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
	margin: 0 0 12px;
}

.rpahq-search-form {
	margin: 0 0 24px;
}

.rpahq-portal-nav__search input[type="search"],
.rpahq-search-form input[type="search"] {
	box-sizing: border-box;
	flex: 1 1 10rem;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	font: inherit;
	color: var(--rpa-ink);
	background: #fff;
}

.rpahq-portal-nav__search .rpahq-button,
.rpahq-search-form .rpahq-button {
	flex: 0 0 auto;
	padding: 0 14px;
}

/* Results: one panel per group, rows reuse .rpahq-manage-list / .rpahq-manage-item */

.rpahq-search-group {
	margin: 0 0 24px;
}

.rpahq-search-group h2 {
	margin: 0 0 12px;
}

.rpahq-search-group .rpahq-manage-item > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-search-group__all {
	margin: 12px 0 0;
}

/* Milestones card ("This month") */

.rpahq-milestones__heading {
	margin: 0 0 8px;
	font-size: 1rem;
}

.rpahq-milestones + .rpahq-milestones__heading {
	margin-top: 16px;
}

/* Officer checklists card */

.rpahq-checklist-group + .rpahq-checklist-group {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-checklist-group__title {
	margin: 0 0 2px;
	font-size: 1rem;
}

.rpahq-checklist-group__count {
	margin: 0 0 8px;
}

.rpahq-checklist {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-checklist__item {
	min-width: 0;
}

.rpahq-checklist__form {
	margin: 0;
}

.rpahq-checklist__tick {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var(--rpa-radius);
	background: transparent;
	color: var(--rpa-ink);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.rpahq-checklist__tick:hover {
	background: var(--rpa-surface-alt);
	border-color: var(--rpa-line);
}

.rpahq-checklist__box {
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--rpa-red);
}

.rpahq-checklist__item--done .rpahq-checklist__name {
	text-decoration: line-through;
	color: var(--rpa-muted);
}

.rpahq-checklist__period,
.rpahq-checklist__description,
.rpahq-checklist__link {
	display: block;
	margin: 0 0 0 44px;
}

.rpahq-checklist__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 44px;
}

/* 0.9.0 (Builder E): home-screen hint, drag-and-drop cards, PDF preview, report charts, offline page. */

/* Home-screen hint (pwa.php): a notice with its own dismiss form. */
.rpahq-pwa-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 16px;
}

.rpahq-pwa-hint > p {
	flex: 1 1 240px;
	margin: 0;
}

.rpahq-pwa-hint form {
	margin: 0;
}

.rpahq-pwa-hint .rpahq-button {
	min-height: 44px;
}

/* Drag-and-drop dashboard cards (portal.js adds the grab handle; the Customize form stays). */
.rpahq-dashboard .rpahq-dashboard-card {
	position: relative;
}

.rpahq-card__grab {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	color: var(--rpa-muted);
	font-size: 18px;
	line-height: 1;
	letter-spacing: -2px;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.rpahq-card__grab:hover {
	color: var(--rpa-ink);
	border-color: var(--rpa-muted);
}

.rpahq-card__grab:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

/* Room for the handle beside the card heading. */
.rpahq-dashboard .rpahq-card__grab + h2 {
	padding-right: 52px;
}

.rpahq-dashboard-card--dragging {
	opacity: 0.6;
	outline: 2px dashed var(--rpa-red);
	outline-offset: 2px;
	cursor: grabbing;
}

.rpahq-dashboard-card[draggable="true"] {
	cursor: grabbing;
}

/* Inline PDF preview (documents.php): a native <details>, no script. */
.rpahq-document__preview {
	margin: 8px 0 0;
}

.rpahq-document__preview > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	color: var(--rpa-ink);
	font-weight: 700;
	cursor: pointer;
}

.rpahq-document__preview > summary:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-document__preview[open] > summary {
	margin-bottom: 8px;
}

.rpahq-document__preview iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 480px;
	max-height: 60vh;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-document__preview p {
	margin: 8px 0 0;
}

/* Report charts (reporting.php rpahq_svg_bars()): a picture of the table that follows. */
.rpahq-chart {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 16px;
	font-family: var(--rpa-font-body);
	font-size: 12px;
}

.rpahq-chart text {
	fill: var(--rpa-ink);
	font-size: 12px;
}

.rpahq-chart__bar--1 {
	fill: var(--rpa-red);
}

.rpahq-chart__bar--2 {
	fill: #555555;
}

.rpahq-chart__bar--3 {
	fill: #1f5f8b;
}

/* The static offline page (pwa.php): no menu, so the main column stands alone. */
.rpahq-portal-offline .rpahq-offline {
	max-width: 40rem;
	margin: 0 auto;
	padding: 48px 16px;
}

/* ===== 0.10.0: online payments through Stripe and Square (PLAN D21). Merged from work/0.10.0/css-*.css. ===== */

/* 0.10.0: online payment on the Dues page (Pay online, automatic payments, my online payments,
   the result page) and the payment item's "Payment services" panel in Settings. Phone first:
   nothing here is wider than its column at 375 px; the history table scrolls inside its own
   region (.rpahq-rsvp-table). */

.rpahq-pay-items,
.rpahq-pay-subs,
.rpahq-pay-sync__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-pay-item,
.rpahq-pay-sub {
	min-width: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--rpa-line);
	overflow-wrap: anywhere;
}

.rpahq-pay-item:first-child,
.rpahq-pay-sub:first-child {
	padding-top: 0;
	border-top: 0;
}

.rpahq-pay-item__name,
.rpahq-pay-sub__name {
	margin: 0 0 4px;
	font-size: 1.0625rem;
}

.rpahq-pay-item__description,
.rpahq-pay-sub__status {
	margin: 0 0 8px;
}

.rpahq-pay-item__amount {
	margin: 0 0 8px;
	color: var(--rpa-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.rpahq-pay-form,
.rpahq-pay-sub__form,
.rpahq-pay-sync__form {
	display: grid;
	gap: 8px;
	justify-items: start;
	margin: 0;
}

.rpahq-pay-form > p,
.rpahq-pay-sub__form > p {
	margin: 0;
}

.rpahq-pay-item__button,
.rpahq-pay-sub__form .rpahq-button,
.rpahq-pay-sync__form .rpahq-button {
	min-height: 44px;
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

/* Payer-chosen amounts: radio choices that wrap, each a 44 px target. */
.rpahq-pay-amounts {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rpahq-pay-amounts legend {
	margin: 0 0 6px;
	padding: 0;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-pay-amounts__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rpahq-pay-amounts__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	cursor: pointer;
}

.rpahq-pay-amounts__choice:has(input:checked) {
	border-color: var(--rpa-red);
	box-shadow: inset 0 0 0 1px var(--rpa-red);
}

.rpahq-pay-amounts__choice input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.rpahq-pay-amounts__other {
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
}

.rpahq-pay-amounts__other input {
	width: 100%;
	max-width: 12em;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--rpa-muted);
	border-radius: var(--rpa-radius);
	font: inherit;
}

.rpahq-pay-amounts__other input[aria-invalid="true"] {
	border-color: var(--rpa-red-text);
}

/* Stop automatic payments: the confirmation box and its label side by side. */
.rpahq-pay-sub__confirm {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.rpahq-pay-sub__confirm input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
}

.rpahq-pay-history td:last-child {
	white-space: nowrap;
}

/* The result page. */
.rpahq-pay-result__dues {
	color: var(--rpa-ink);
}

.rpahq-pay-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

/* Settings › Payment items › an item: one row per connected service. */
.rpahq-pay-sync__row {
	display: grid;
	gap: 8px;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.rpahq-pay-sync__row {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

/* 0.10.0: Manage › Payments (Builder C). Reuses .rpahq-subnav, .rpahq-toolbar, .rpahq-panel,
   .rpahq-field*, .rpahq-rsvp-table (its region scrolls inside itself), .rpahq-message-details,
   .rpahq-badge*, .rpahq-notice*, .rpahq-error-summary, .rpahq-pager, .rpahq-reports-section*
   and .rpahq-button*. Phone-first: no fixed widths, holds at 375 px. */

/* The sub-navigation sits under the Manage menu with a little room. */
.rpahq-pay-subnav {
	margin: 0 0 16px;
}

/* Filters: labelled selects that wrap, then the buttons on their own line on phones. */
.rpahq-pay-filters {
	align-items: flex-end;
	justify-content: flex-start;
}

.rpahq-pay-filters .rpahq-field {
	flex: 1 1 10rem;
	min-width: 0;
	margin: 0;
}

.rpahq-pay-filters select {
	width: 100%;
	max-width: 100%;
}

.rpahq-pay-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 100%;
}

/* The payments table: amounts and references don't wrap; the region scrolls instead. */
.rpahq-pay-table td:nth-child(4),
.rpahq-pay-table td:last-child {
	white-space: nowrap;
}

.rpahq-pay-table .rpahq-badge {
	margin-left: 4px;
}

/* Detail: provider ids may be long; let them break rather than push the page sideways. */
.rpahq-pay-detail code {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.rpahq-pay-flags {
	margin: 0;
	padding-left: 1.25em;
}

/* Actions: each form on its own row, buttons at least 44 px high (from .rpahq-button). */
.rpahq-pay-actions form {
	margin: 0 0 12px;
}

.rpahq-pay-link fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.rpahq-pay-link legend {
	font-weight: 700;
	margin: 0 0 8px;
}

/* The refund form: the amount input stays short on wide screens and full width on phones. */
.rpahq-pay-refund input[name="rpahq_payments_amount"] {
	width: 100%;
	max-width: 12rem;
}

.rpahq-pay-refund textarea {
	width: 100%;
}

@media (max-width: 480px) {
	.rpahq-pay-filters__actions .rpahq-button,
	.rpahq-pay-actions .rpahq-button {
		width: 100%;
		justify-content: center;
	}
}

/* 0.11.0: audit fixes (Builder A) ---------------------------------------------------- */
/* 0.11.0 (Builder A): email typo choice, Access requests bulk Decline, Reset every calendar
   link, the pending sign-in email change, the confirm-email page. Phone-first: everything wraps
   at 375 px; checkboxes keep 44 px targets. */

/* "Did you mean …?" — Use {suggestion} / Keep as typed under an email field (portal forms). */
.rpahq-email-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.rpahq-email-choice .rpahq-button {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Access requests: the tick box for "Decline selected" sits at the top of each request. */
.rpahq-roster-request__select {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	margin: -10px 0 0 -10px;
	padding: 10px;
	box-sizing: border-box;
}

.rpahq-roster-requests-bulk {
	margin: 1rem 0;
}

/* Brothers list toolbar: the Reset every calendar link form sits inline with Add a Brother. */
.rpahq-roster-calendar-reset {
	display: inline-flex;
	margin: 0;
}

/* The record's "Waiting for confirmation" block and My profile's line. */
.rpahq-email-pending {
	font-weight: 600;
}

.rpahq-roster-email-pending .rpahq-form__actions {
	flex-wrap: wrap;
}

/* The actor's password box on a record's Details (type password; no field class of its own). */
.rpahq-field--password input[type="password"] {
	width: 100%;
	max-width: 24rem;
	box-sizing: border-box;
}

/* 0.11.0: accounts, sessions and two-step sign-in (Builder D) ------------------------- */
/* 0.11.0 (Builder D, D-20/D-21): the sign-in code page, My profile › Two-step sign-in and
   Signed-in devices, and the roster record's account actions. Phone-first: nothing here is
   wider than the panel at 375 px; the QR scales down with the panel. */

/* Sign-in › Enter your code */
.rpahq-code-expired {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.rpahq-portal .rpahq-code-input {
	max-width: 12ch;
	font-size: 1.5rem;
	letter-spacing: 0.15em;
	font-variant-numeric: tabular-nums;
}

.rpahq-code__backup {
	margin: 16px 0;
}

.rpahq-code__backup > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	font-weight: 600;
	color: var(--rpa-red-text);
}

.rpahq-code__backup > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* My profile › Two-step sign-in */
.rpahq-two-step__steps {
	margin: 0 0 16px;
	padding-left: 1.25em;
}

.rpahq-two-step__steps > li + li {
	margin-top: 16px;
}

.rpahq-two-step__qr {
	max-width: 240px;
	margin: 8px 0 12px;
}

.rpahq-two-step__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.rpahq-two-step__key,
.rpahq-backup-codes code {
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	overflow-wrap: anywhere;
}

.rpahq-backup-codes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 8px 24px;
	margin: 0 0 16px;
	padding-left: 1.75em;
}

@media print {
	.rpahq-backup-codes code {
		font-size: 12pt;
	}
}

/* My profile › Signed-in devices */
.rpahq-sessions__about {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rpahq-sessions__item .rpahq-badge {
	margin-left: 6px;
}

/* Manage › Roster › record: Sign this member out everywhere, Reset two-step sign-in */
.rpahq-account-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.rpahq-account-actions form {
	margin: 0;
}

/* ==== 0.12.0: Builder A: command-center overview, goals, This week, phone Manage chrome (D-2 to D-7) ==== */

/* 0.12.0 (Builder A): the Manage command center (KPI tiles, goals, "This week"), the phone
   Manage layout (bottom tab bar, "More" list, sticky Save bar, tap targets) and the
   .rpahq-phone-only / .rpahq-wide-only switches (D-2 to D-7).
   Nothing is fixed or sticky outside the max-width: 767.98px query; at 768 px and wider only
   the overview's new panels change. A owns --rpahq-tabbar-h and --rpahq-actions-h; others may
   read them. Holds at 320 px without sideways scroll. */

:root {
	--rpahq-tabbar-h: 60px;
	/* One row of submit buttons; two rows below 360 px (see the query further down). */
	--rpahq-actions-h: 68px;
}

/* Breakpoint switches (C uses them for the "Step by step" links). */
@media (min-width: 768px) {
	.rpahq-phone-only {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	.rpahq-wide-only {
		display: none !important;
	}
}

/* ---- Overview: At a glance (KPI tiles) ---- */

.rpahq-kpis,
.rpahq-goals,
.rpahq-feed {
	margin: 0 0 24px;
}

.rpahq-kpis h2,
.rpahq-goals h2,
.rpahq-feed h2 {
	margin: 0 0 12px;
	font-size: 1.125rem;
}

.rpahq-kpis__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.rpahq-kpis__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rpahq-kpis__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.rpahq-kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-kpi h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--rpa-ink);
}

.rpahq-kpi__value {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--rpa-ink);
	overflow-wrap: anywhere;
}

.rpahq-kpi__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--rpa-muted);
	overflow-wrap: anywhere;
}

.rpahq-kpi__spark {
	max-width: 100%;
}

.rpahq-sparkline {
	display: block;
	max-width: 100%;
	height: auto;
}

.rpahq-kpi__link {
	margin: auto 0 0;
}

.rpahq-kpi__link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

/* ---- Overview: Goals ---- */

.rpahq-goals__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

div.rpahq-progress {
	display: grid;
	gap: 4px;
}

.rpahq-progress__label,
.rpahq-goal__name {
	margin: 0;
	font-weight: 700;
	color: var(--rpa-ink);
	overflow-wrap: anywhere;
}

/* The track's edge is #767676 (4.5:1 on white) and the bar is the brand red (WCAG 1.4.11). */
.rpahq-progress progress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 14px;
	border: 1px solid #767676;
	border-radius: 7px;
	background: var(--rpa-surface-alt);
	color: var(--rpa-red);
	overflow: hidden;
}

.rpahq-progress progress::-webkit-progress-bar {
	background: var(--rpa-surface-alt);
}

.rpahq-progress progress::-webkit-progress-value {
	background: var(--rpa-red);
}

.rpahq-progress progress::-moz-progress-bar {
	background: var(--rpa-red);
}

.rpahq-progress__text,
.rpahq-goal__figure {
	margin: 0;
	font-size: 0.9375rem;
}

.rpahq-goal__meta {
	margin: 4px 0 0;
	color: var(--rpa-muted);
}

.rpahq-goal--met .rpahq-goal__state {
	color: #1e6b34;
	font-weight: 700;
}

.rpahq-goal--missed .rpahq-goal__state {
	color: var(--rpa-red-text);
	font-weight: 700;
}

/* ---- Overview: This week ---- */

.rpahq-feed__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-feed__item {
	overflow-wrap: anywhere;
}

.rpahq-feed__what {
	font-weight: 700;
	color: var(--rpa-ink);
}

.rpahq-feed__who,
.rpahq-feed time {
	color: var(--rpa-muted);
}

.rpahq-feed__more {
	margin: 12px 0 0;
}

/* ---- Phone chrome: hidden at 768 px and wider ---- */

.rpahq-tabbar {
	display: none;
}

@media (max-width: 359.98px) {
	:root {
		--rpahq-actions-h: 120px;
	}
}

@media (max-width: 767.98px) {
	/* Room under the page for the bar, so the WPCL footer and the last control are never under it. */
	body.rpahq-portal-manage {
		padding-bottom: calc(var(--rpahq-tabbar-h) + env(safe-area-inset-bottom));
	}

	/* A focused field scrolls clear of the tab bar and a sticky Save bar (WCAG 2.2 2.4.11).
	   scroll-padding works only on the scroll container, which is the root. */
	html {
		scroll-padding-bottom: calc(var(--rpahq-tabbar-h) + var(--rpahq-actions-h) + 16px);
	}

	.rpahq-portal-manage .rpahq-tabbar {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 10;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid var(--rpa-line);
		background: var(--rpa-surface);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
	}

	.rpahq-tabbar__list {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.rpahq-tabbar__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.rpahq-tabbar__link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		box-sizing: border-box;
		width: 100%;
		min-height: 60px;
		padding: 6px 2px;
		border: 0;
		background: none;
		color: var(--rpa-text);
		font: inherit;
		font-size: 0.75rem;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}

	/* One line per label; the full name stays in the markup for assistive technology. */
	.rpahq-tabbar__label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.rpahq-tabbar__link[aria-current="page"],
	.rpahq-tabbar__link[aria-current="true"],
	.rpahq-tabbar__link[aria-expanded="true"] {
		color: var(--rpa-red-text);
		box-shadow: inset 0 3px 0 var(--rpa-red);
	}

	.rpahq-tabbar__link:focus-visible {
		outline: 3px solid var(--rpa-ink);
		outline-offset: -3px;
	}

	.rpahq-tabbar__badge {
		position: absolute;
		top: 4px;
		left: calc(50% + 6px);
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		background: var(--rpa-red);
		color: #fff;
		font-size: 0.6875rem;
		line-height: 20px;
		text-align: center;
	}

	/* The Manage list is "More": shown only as the :target (no JS) or when the toggle opens it. */
	.rpahq-portal-manage #rpahq-manage-subnav:not(:target):not(.rpahq-subnav--open) {
		display: none;
	}

	.rpahq-portal-manage #rpahq-manage-subnav {
		padding: 8px;
		border: 1px solid var(--rpa-line);
		border-radius: var(--rpa-radius);
		background: var(--rpa-surface);
		scroll-margin-top: 16px;
	}

	.rpahq-portal-manage #rpahq-manage-subnav ul {
		flex-direction: column;
	}

	/* Sticky Save/Publish bar on every Manage form (one per <form>, so sequential forms never
	   overlap). It sits on the tab bar and drops to the bottom while the keyboard is up. */
	.rpahq-portal-manage .rpahq-form__actions {
		position: sticky;
		bottom: calc(var(--rpahq-tabbar-h) + env(safe-area-inset-bottom));
		z-index: 5;
		padding: 10px 0;
		border-top: 1px solid var(--rpa-line);
		background: var(--rpa-surface);
	}

	/* One row at 375 px (D-7): the two submit buttons share the row and wrap their own words
	   ("Unpublish (save as draft)" is wider than half a phone). Integration, 0.12.0. */
	.rpahq-portal-manage .rpahq-form__actions > :is(.rpahq-button, button, input[type="submit"]) {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		padding: 6px 8px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Search and bulk forms reuse the class but aren't save bars. */
	.rpahq-portal-manage .rpahq-committee-manage__search .rpahq-form__actions,
	.rpahq-portal-manage .rpahq-queue__bulk .rpahq-form__actions,
	.rpahq-portal-manage .rpahq-request .rpahq-form__actions {
		position: static;
		padding: 16px 0;
		border-top: 0;
		background: none;
	}

	/* While a text field, textarea or select has focus the on-screen keyboard is up: hide the
	   tab bar and let the Save bar sit at the bottom (browsers without :has() keep both). */
	body.rpahq-portal-manage:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) {
		--rpahq-tabbar-h: 0px;
	}

	body.rpahq-portal-manage:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) .rpahq-tabbar {
		display: none;
	}

	/* Tap targets: 44 px for the links and buttons of lists, tabs, pagers and toolbars;
	   inline links in running text keep their line. Checkboxes and radios 24 px. */
	.rpahq-portal-manage .rpahq-portal__main button,
	.rpahq-portal-manage .rpahq-portal__main input[type="submit"],
	.rpahq-portal-manage .rpahq-portal__main :is(.rpahq-toolbar, .rpahq-pager, .rpahq-tabs, .rpahq-back, .rpahq-dashboard-tasks, .rpahq-feed__list, .rpahq-manage-item, .rpahq-subnav) a:not(p a) {
		min-height: 44px;
	}

	.rpahq-portal-manage .rpahq-portal__main :is(.rpahq-toolbar, .rpahq-pager, .rpahq-back, .rpahq-dashboard-tasks, .rpahq-feed__list, .rpahq-manage-item) a:not(p a) {
		display: inline-flex;
		align-items: center;
	}

	.rpahq-portal-manage .rpahq-portal__main input[type="checkbox"],
	.rpahq-portal-manage .rpahq-portal__main input[type="radio"] {
		width: 24px;
		height: 24px;
	}
}

/* ==== end 0.12.0: Builder A ==== */

/* ==== 0.12.0: Builder B: the table helper on every Manage list, column chooser, saved views (D-8 to D-10) ==== */

/* 0.12.0 (Builder B): the table helper on every Manage list (D-8): the toolbar (search, Sort
   by, Order, Show), the column chooser, saved views, the table with sortable headers, the
   count line and, under 600 px, rows stacked as cards (explicit roles keep the table
   semantics). Nothing is fixed or sticky. Holds at 320 px without sideways scroll. */

/* Toolbar */
.rpahq-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 16px;
	margin: 0 0 16px;
}

.rpahq-table-search {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 0;
}

.rpahq-table-search .rpahq-field {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.rpahq-table-search__q {
	flex: 1 1 220px !important;
}

.rpahq-table-search__q input {
	width: 100%;
}

.rpahq-table-search select {
	max-width: 100%;
}

.rpahq-table-search__actions {
	display: flex;
	align-items: flex-end;
}

/* Column chooser: a disclosure holding a POST form. */
.rpahq-table-cols {
	flex: 0 1 auto;
	max-width: 100%;
}

.rpahq-table-cols > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	color: var(--rpa-ink);
	font-weight: 600;
	cursor: pointer;
}

.rpahq-table-cols > summary:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-table-cols[open] > summary {
	margin-bottom: 8px;
}

.rpahq-table-cols form {
	padding: 12px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-table-cols fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.rpahq-table-cols .rpahq-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
}

.rpahq-table-cols input[type="checkbox"] {
	width: 24px;
	height: 24px;
}

/* Saved views */
.rpahq-saved-views {
	flex: 1 1 260px;
	min-width: 0;
}

.rpahq-saved-views h3 {
	margin: 0 0 6px;
	font-size: 1rem;
}

.rpahq-saved-views__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.rpahq-saved-views__list li {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.rpahq-saved-views__delete {
	display: inline;
	margin: 0;
}

.rpahq-saved-views__delete .rpahq-button {
	padding: 0 12px;
	font-size: 0.8125rem;
}

.rpahq-saved-views__save {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
}

.rpahq-saved-views__save .rpahq-field {
	flex: 1 1 180px;
	margin: 0;
}

.rpahq-table-export {
	margin: 0;
}

.rpahq-table-capped {
	margin: 0 0 12px;
}

/* The table */
.rpahq-table-wrap {
	/* 0.14.0: as .rpahq-rsvp-table, screen-reader-only text stays inside the scrolling box. */
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-table-wrap:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.rpahq-table caption {
	padding: 14px 16px 4px;
	color: var(--rpa-ink);
	font-weight: 700;
	text-align: left;
}

.rpahq-table__count {
	display: block;
	color: var(--rpa-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.rpahq-table th,
.rpahq-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rpa-line);
	text-align: left;
	vertical-align: top;
}

.rpahq-table thead th {
	color: var(--rpa-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.rpahq-table tbody th {
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-table tbody tr:last-child > * {
	border-bottom: 0;
}

.rpahq-table__sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rpahq-table__sort:hover,
.rpahq-table__sort:focus-visible {
	color: var(--rpa-red-text);
}

.rpahq-table__arrow {
	font-size: 0.75em;
}

.rpahq-table .rpahq-manage-item__meta {
	margin: 2px 0 0;
}

.rpahq-table__group-row th {
	background: var(--rpa-surface-alt);
	color: var(--rpa-ink);
}

/* The RSVP list keeps its own wide layout above 600 px; the helper's rows replace its cells. */
.rpahq-table-wrap.rpahq-rsvp-table table {
	min-width: 720px;
}

/* Phones: rows stack as cards; each cell is labelled by its column (data-label), and the
   table keeps its roles (table, rowgroup, row, columnheader, rowheader, cell). */
@media (max-width: 599.98px) {
	.rpahq-table-wrap,
	.rpahq-table-wrap.rpahq-rsvp-table {
		overflow-x: visible;
		border: 0;
		background: transparent;
	}

	.rpahq-table-wrap.rpahq-rsvp-table table {
		min-width: 0;
	}

	.rpahq-table,
	.rpahq-table tbody,
	.rpahq-table tr,
	.rpahq-table th,
	.rpahq-table td {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	.rpahq-table caption {
		display: block;
		padding: 0 0 8px;
	}

	/* Column headers stay for assistive technology; sorting uses the toolbar's selects. */
	.rpahq-table thead {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rpahq-table tbody tr {
		margin: 0 0 12px;
		padding: 12px 14px;
		border: 1px solid var(--rpa-line);
		border-radius: var(--rpa-radius);
		background: var(--rpa-surface);
	}

	.rpahq-table tbody tr.rpahq-table__group-row {
		margin: 16px 0 8px;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.rpahq-table tbody th,
	.rpahq-table tbody td,
	.rpahq-table tbody tr:last-child > * {
		padding: 4px 0;
		border: 0;
		overflow-wrap: anywhere;
	}

	.rpahq-table tbody th[scope="row"] {
		padding-bottom: 8px;
		font-size: 1rem;
	}

	.rpahq-table tbody td::before {
		content: attr(data-label);
		display: block;
		color: var(--rpa-muted);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.rpahq-table tbody td:empty {
		display: none;
	}

	.rpahq-table-search .rpahq-field,
	.rpahq-table-search__q {
		flex: 1 1 100% !important;
	}

	.rpahq-table-search select {
		width: 100%;
	}
}

/* ==== end 0.12.0: Builder B ==== */

/* ==== 0.12.0: Builder C: Events stepped form, Manage calendar, templates, wrap up, tell the chapter, share kit (D-11 to D-18) ==== */

/* 0.12.0 (Builder C): Manage › Events: the stepped form, the Manage calendar, templates, Wrap up,
 * Tell the chapter and the share kit. Phone-first at 375 px, nothing scrolls sideways; the month
 * grid reuses .rpahq-month* (its phone day list included). Reads A's --rpahq-actions-h. */

/* The step list: a numbered row that wraps, the current step marked in text weight and a bar. */
.rpahq-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	counter-reset: rpahq-step;
}
.rpahq-steps__step {
	counter-increment: rpahq-step;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-bottom: 3px solid var(--rpa-line);
	color: var(--rpa-muted);
}
.rpahq-steps__step::before {
	content: counter(rpahq-step) ".";
}
.rpahq-steps__step a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.rpahq-steps__step--saved {
	color: var(--rpa-ink);
}
.rpahq-steps__step--current {
	border-bottom-color: var(--rpa-red);
	color: var(--rpa-ink);
	font-weight: 700;
}

/* The form and its preview: stacked on phones, side by side from 960 px. */
.rpahq-steps-layout {
	display: grid;
	gap: 1rem;
	min-width: 0;
}
.rpahq-steps-layout > * {
	min-width: 0;
}
.rpahq-steps-preview .rpahq-event-row {
	margin: 0;
}
.rpahq-steps-seo {
	margin: 1rem 0;
}
.rpahq-steps-seo > summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
}
@media (min-width: 960px) {
	.rpahq-steps-layout {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

/* The Manage calendar: badges wrap under the title inside the day; muted "(not yours)". */
.rpahq-manage-calendar .rpahq-month__event .rpahq-badge {
	display: inline-block;
	margin: 0.125rem 0.25rem 0 0;
	font-size: 0.75rem;
	white-space: normal;
}
.rpahq-manage-calendar .rpahq-month__event > .rpahq-muted {
	display: block;
	overflow-wrap: anywhere;
}

/* Templates and Save as template. */
.rpahq-event-templates .rpahq-manage-item p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rpahq-event-template-preview {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.25rem 1rem;
	margin: 0 0 1rem;
}
.rpahq-event-template-preview dt {
	font-weight: 600;
}
.rpahq-event-template-preview dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Wrap up: one card per step, the state in words with a decorative mark. */
.rpahq-wrapup__progress {
	font-weight: 700;
}
.rpahq-wrapup {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rpahq-wrapup__step {
	padding: 0.75rem 1rem;
	border: 1px solid var(--rpa-line);
	border-left: 4px solid var(--rpa-line);
	border-radius: 4px;
	background: var(--rpa-surface, #fff);
}
.rpahq-wrapup__step--done {
	border-left-color: #1f5f8b;
}
.rpahq-wrapup__step--todo {
	border-left-color: var(--rpa-red);
}
.rpahq-wrapup__title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}
.rpahq-wrapup__mark {
	display: inline-block;
	width: 1.25em;
}
.rpahq-wrapup__state {
	margin: 0 0 0.5rem;
}

/* Email previews (Tell the chapter, Thank volunteers): wrap long lines, never scroll sideways. */
.rpahq-email-preview {
	margin: 0;
	padding: 0.75rem;
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	border: 1px solid var(--rpa-line);
	background: var(--rpa-surface-alt, #f6f6f6);
	font-size: 0.9rem;
}
.rpahq-email-preview-box > summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* The share kit: the image scales down to the column; the text boxes take the full width. */
.rpahq-share__image {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--rpa-line);
}
.rpahq-share-text__box {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
}
.rpahq-share-text__copy {
	margin-top: 0.5rem;
}

/* ==== end 0.12.0: Builder C ==== */

/* ==== 0.12.0: Builder D: Reports pages, filters, drill-downs, donut and heat map (D-19 to D-28) ==== */

/* =========================================================================================
 * 0.12.0 Builder D: Manage › Reports pages (Attendance, Dues, Membership), filters, drills,
 * the donut and the heat map (views/portal/manage-reports.php, includes/analytics.php,
 * includes/charts.php).
 * Reuses .rpahq-tabs (the page tabs), .rpahq-directory-search (the period form),
 * .rpahq-reports-section*, .rpahq-rsvp-table / .rpahq-reports-table (scrolling regions),
 * .rpahq-chart (bars), .rpahq-sparkline (A), .rpahq-back, .rpahq-panel, .rpahq-notice*.
 * No fixed widths beyond the tables' own scrolling regions: holds at 320 and 375 px.
 * ======================================================================================= */

/* The page tabs wrap under the header; on a phone they scroll inside themselves. */

.rpahq-reports-pages {
	margin: 0 0 16px;
}

@media (max-width: 599.98px) {
	.rpahq-reports-pages {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.rpahq-reports-pages a {
		flex: 0 0 auto;
	}
}

/* Filters inside the period form: dates, event type, committee, test mode. One column on a
   phone; the help and the error line take the whole row. */

.rpahq-reports-filters {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 16px;
}

.rpahq-reports-filters .rpahq-field {
	margin-bottom: 12px;
}

.rpahq-reports-filters .rpahq-field__help {
	grid-column: 1 / -1;
	margin: -4px 0 12px;
}

.rpahq-reports-period .rpahq-notice--error {
	grid-column: 1 / -1;
}

.rpahq-reports-filters input[type="date"],
.rpahq-reports-filters select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	font: inherit;
	color: var(--rpa-ink);
	background: #fff;
}

.rpahq-reports-filters [aria-invalid="true"] {
	border-color: var(--rpa-red);
	box-shadow: 0 0 0 1px var(--rpa-red);
}

@media (min-width: 640px) {
	.rpahq-reports-filters {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		align-items: end;
	}
}

/* Saved views of a page sit under the form. */

.rpahq-reports-period + .rpahq-saved-views {
	margin: -8px 0 24px;
}

/* "What this counts" and single figures. */

.rpahq-reports-counts {
	margin-top: 8px;
}

.rpahq-reports-figure {
	margin: 0 0 12px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rpa-ink);
}

/* Table links that open a drill-down keep the 44 px target on phones. */

@media (max-width: 767.98px) {
	.rpahq-analytics .rpahq-reports-table th a,
	.rpahq-analytics-drill .rpahq-reports-table td a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* A drill-down: one list with the way back. */

.rpahq-analytics-drill .rpahq-reports-table table {
	min-width: 360px;
}

/* The donut (D-28): never wider than its box; the centre text is decorative. */

.rpahq-donut {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 0 16px;
}

/* The heat map (D-23): the number is the content; five shades repeat it. Dark text on the
   two lightest, white on the three darkest, each 4.5:1 or more. */

.rpahq-heatmap table {
	min-width: 420px;
}

.rpahq-heat {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.rpahq-heat--0 {
	background: #f6e7e7;
	color: #1a1a1a;
}

.rpahq-heat--1 {
	background: #e8b9bb;
	color: #1a1a1a;
}

.rpahq-heat--2 {
	background: #b5545a;
	color: #fff;
}

.rpahq-heat--3 {
	background: #8f0a0e;
	color: #fff;
}

.rpahq-heat--4 {
	background: #5c0609;
	color: #fff;
}

.rpahq-heat--none {
	color: var(--rpa-muted);
}

@media (forced-colors: active) {
	.rpahq-heat {
		forced-color-adjust: auto;
	}
}

/* Settings › Reports and analytics: the test send panel. */

.rpahq-report-test {
	margin-top: 24px;
}

/* ==== end 0.12.0: Builder D ==== */

/* ==== 0.13.0: Builder D, Manage › Events sync badges (merged from work/0.13.0) ==== */

/* 0.13.0 (Builder D): Manage › Events sync badges, the form note and the Detach button. The
   badges reuse .rpahq-badge and its --members / --going / --waiting colours; the button reuses
   .rpahq-button--secondary / --small. */
.rpahq-cal-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.5em;
	align-items: center;
	overflow-wrap: anywhere;
}
.rpahq-cal-badges__note {
	flex-basis: 100%;
	margin: 0.25em 0 0;
}
.rpahq-cal-badges__note:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.rpahq-cal-detach {
	display: inline;
	margin: 0;
}

/* ==== end 0.13.0: Builder D, Manage › Events sync badges ==== */


/* ==== 0.14.0: Builder A, Manage › Setup (checklist, Health, Email delivery, Launch) (merged from work/0.14.0/css-a.css) ==== */

/* 0.14.0 (Builder A, PLAN D26-1 … D26-10): Manage › Setup's own screens: the checklist, Health,
   Email delivery and Launch. Reuses .rpahq-panel, .rpahq-button*, .rpahq-notice*, .rpahq-rsvp-table
   (the scrolling table region), .rpahq-muted, .rpahq-field__error and .rpahq-visually-hidden.
   No fixed widths: holds at 375 px. (The hosted wp-admin pages have their own assets/css/setup.css.) */

.rpahq-setup-head {
	margin: 0 0 16px;
}

.rpahq-setup-back {
	margin: 0 0 8px;
}

.rpahq-setup-back a {
	text-decoration: none;
}

/* The checklist. */
.rpahq-setup-progress {
	margin: 0 0 16px;
}

.rpahq-setup-progress__text {
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-setup-progress progress {
	display: block;
	width: 100%;
	height: 12px;
	accent-color: var(--rpa-red);
}

.rpahq-setup-next {
	margin: 0 0 24px;
	border-left: 4px solid var(--rpa-red);
}

.rpahq-setup-next h3 {
	margin-top: 0;
}

.rpahq-setup-steps {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

/* 0.22.0 (D36): the steps under five stages; the step numbers run on across them. */
.rpahq-setup-stages {
	counter-reset: rpahq-step;
}

.rpahq-setup-stage {
	margin: 0 0 8px;
}

.rpahq-setup-stage__title {
	margin: 24px 0 4px;
}

.rpahq-setup-stage__purpose {
	margin: 0 0 12px;
	color: var(--rpa-ink);
}

.rpahq-setup-step {
	counter-increment: rpahq-step;
	margin: 0 0 12px;
	padding: 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.rpahq-setup-step p {
	margin: 0 0 6px;
}

.rpahq-setup-step__title,
.rpahq-setup-step__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	color: var(--rpa-ink);
}

.rpahq-setup-step__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.rpahq-setup-step__name::before {
	content: counter(rpahq-step) ". ";
}

/* A done step is one line: title, "Done", a small Open link (44px tall to tap). */
.rpahq-setup-step--done {
	padding: 4px 16px;
}

.rpahq-setup-step--done .rpahq-setup-step__line {
	align-items: center;
	margin: 0;
}

.rpahq-setup-step__open {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: auto;
	padding: 0 4px;
}

.rpahq-setup-step__why {
	color: var(--rpa-ink);
}

.rpahq-setup-step__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 0.875rem;
}

.rpahq-setup-who {
	display: inline-block;
	padding: 0 8px;
	border: 1px solid var(--rpa-line);
	border-radius: 999px;
	font-weight: 600;
	color: var(--rpa-ink);
}

.rpahq-setup-who--web {
	border-style: dashed;
}

.rpahq-setup-time {
	color: var(--rpa-muted);
}

.rpahq-setup-step__detail {
	font-size: 0.875rem;
	color: var(--rpa-muted);
}

.rpahq-setup-step__link .rpahq-button {
	margin-top: 4px;
}

.rpahq-setup-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	border: 2px solid var(--rpa-muted);
	color: var(--rpa-muted);
	font-weight: 700;
	line-height: 1;
}

.rpahq-setup-step--done .rpahq-setup-step__icon {
	border-color: #1a7f37;
	background: #1a7f37;
	color: #fff;
}

.rpahq-setup-step__state {
	font-weight: 600;
}

.rpahq-setup-step--done .rpahq-setup-step__state {
	color: #1a7f37;
}

.rpahq-setup-step--todo .rpahq-setup-step__state {
	color: var(--rpa-red-text);
}

.rpahq-setup-step--skipped .rpahq-setup-step__state,
.rpahq-setup-step--waiting .rpahq-setup-step__state {
	color: var(--rpa-muted);
}

.rpahq-setup-step--waiting .rpahq-setup-step__icon {
	border-style: dashed;
}

.rpahq-setup-skip {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 12px 0 0;
}

.rpahq-setup-skip label,
.rpahq-setup-skip .rpahq-field__error {
	flex: 1 1 100%;
	margin: 0;
}

.rpahq-setup-skip input[type="text"] {
	flex: 1 1 14em;
	width: auto;
	min-width: 0;
}

.rpahq-setup-pages ul,
.rpahq-health-members ul {
	margin: 0 0 12px;
	padding-left: 1.25em;
}

.rpahq-setup-pages li {
	margin: 0 0 6px;
}

/* Health (and the state words on Email delivery and Launch). */
.rpahq-health-group {
	margin: 0 0 24px;
}

.rpahq-health-group__link {
	margin: 0 0 8px;
}

.rpahq-health-table {
	/* Keeps its screen-reader-only text inside the scrolling box. */
	position: relative;
}

.rpahq-health-table table {
	min-width: 560px;
}

.rpahq-health-table th[scope="row"] {
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-health-table td {
	vertical-align: top;
}

.rpahq-health-state {
	font-weight: 700;
	white-space: nowrap;
}

.rpahq-health-state--ok {
	color: #1a7f37;
}

.rpahq-health-state--fix {
	color: var(--rpa-red-text);
}

.rpahq-health-state--check,
.rpahq-health-state--na {
	color: var(--rpa-muted);
}

.rpahq-health-probe {
	margin: 12px 0 0;
}

/* Email delivery. */
.rpahq-setup-section {
	margin: 0 0 16px;
}

.rpahq-setup-email-terms dt {
	margin: 12px 0 2px;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-setup-email-terms dd {
	margin: 0;
}

/* Launch. */
.rpahq-launch-item,
.rpahq-launch-golive {
	margin: 0 0 16px;
}

.rpahq-launch-item:focus,
.rpahq-launch-golive:focus {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-launch-item h3,
.rpahq-launch-golive h3:first-child {
	margin-top: 0;
}

.rpahq-launch-item--done {
	border-left: 4px solid #1a7f37;
}

.rpahq-launch-item--todo {
	border-left: 4px solid var(--rpa-red);
}

.rpahq-launch-item__state {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

/* The host cron line: long, so it wraps inside its own box. */
.rpahq-launch-code {
	display: block;
	max-width: 100%;
	padding: 10px 12px;
	border-radius: 4px;
	background: var(--rpa-surface-alt);
	font-family: Consolas, Monaco, monospace;
	font-size: 0.875rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-all;
	user-select: all;
}

.rpahq-launch-form {
	margin: 12px 0 0;
}

.rpahq-launch-password input[type="password"] {
	max-width: 22em;
}

.rpahq-launch-help {
	display: block;
	margin: 0 0 6px;
}

.rpahq-launch-check label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 600;
}

.rpahq-launch-check input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 0;
	flex: none;
}

.rpahq-launch-undo {
	margin: 12px 0 0;
}

.rpahq-launch-undo summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--rpa-red-text);
	font-weight: 600;
	cursor: pointer;
}

.rpahq-launch-missing ul {
	margin: 0 0 12px;
	padding-left: 1.25em;
}

.rpahq-launch-golive {
	border-top: 4px solid var(--rpa-red);
}

.rpahq-launch-golive__button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==== end 0.14.0: Builder A, Manage › Setup (checklist, Health, Email delivery, Launch) ==== */


/* ==== 0.14.0: Builder B, the action inbox, the act page, coaching empty states (merged from work/0.14.0/css-b.css) ==== */

/* 0.14.0 (D26-11, B2): the inbox. One row per item: title, who/when, the primary action, then
   Done / Snooze 7 days. Wide screens show both small forms; phones fold them under "More"
   (<details>, no JavaScript), so each row stays short. 44 px targets come from
   .rpahq-button--small. */
.rpahq-inbox h2 .rpahq-inbox__count {
	vertical-align: middle;
	background: var(--rpa-red);
	color: #fff;
}

.rpahq-inbox__list {
	display: grid;
	gap: 0;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.rpahq-inbox__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-inbox__item:first-child {
	border-top: 0;
}

.rpahq-inbox__main {
	min-width: 0;
}

.rpahq-inbox__main p {
	margin: 0;
	overflow-wrap: anywhere;
}

.rpahq-inbox__kind {
	color: var(--rpa-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rpahq-inbox__title {
	font-weight: 700;
}

.rpahq-inbox__detail {
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-inbox__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

.rpahq-inbox__form {
	margin: 0;
}

.rpahq-inbox__more > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 700;
}

.rpahq-inbox__more-body {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 8px;
}

.rpahq-inbox__links {
	margin: 0;
	font-size: 0.9375rem;
}

.rpahq-inbox__hidden-intro {
	color: var(--rpa-muted);
}

.rpahq-inbox--card .rpahq-inbox__item {
	grid-template-columns: minmax(0, 1fr);
}

.rpahq-inbox--card .rpahq-inbox__actions {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.rpahq-inbox__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.rpahq-inbox__actions {
		justify-content: flex-start;
	}

}

/* 0.14.0 (D26-15): the act-from-email page. */
.rpahq-act__describe {
	font-size: 1.0625rem;
	overflow-wrap: anywhere;
}

.rpahq-act__who {
	color: var(--rpa-muted);
}

.rpahq-act__preview {
	margin: 0 0 16px;
}

.rpahq-act__preview > summary {
	min-height: 44px;
	cursor: pointer;
	font-weight: 700;
}

.rpahq-act__email {
	max-width: 100%;
	padding: 12px;
	overflow-x: auto;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
	font-size: 0.875rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* 0.14.0 (D26-19): coaching empty states. Portal pages get the public .rpahq-empty look too;
   inside a panel (Goals, This week, a report section, a KPI tile) the inner panel loses its
   own frame so panels don't nest visibly. */
.rpahq-empty--coach p {
	margin: 0 0 12px;
}

.rpahq-empty--coach p:last-child {
	margin-bottom: 0;
}

.rpahq-panel .rpahq-empty--coach,
.rpahq-kpi .rpahq-empty--coach {
	margin: 8px 0 0;
	padding: 12px;
	border: 0;
	box-shadow: none;
}

.rpahq-kpi .rpahq-empty--coach {
	font-size: 0.875rem;
}

td.rpahq-empty--coach {
	padding: 16px;
}

/* ==== end 0.14.0: Builder B, the action inbox, the act page, coaching empty states ==== */


/* ==== 0.14.0: Builder C, Add from a flyer (merged from work/0.14.0/css-c-portal.css) ==== */

/* 0.14.0 (D26-21): the flyer field. The drop zone is the file input itself (a dropped file
   lands on it in every current browser), so it needs no script; the frame only makes the
   target big and visible. */
.rpahq-flyer-drop {
	padding: 16px;
	border: 2px dashed var(--rpa-line);
	border-radius: 6px;
	background: var(--rpa-surface-alt);
}

.rpahq-flyer-drop:focus-within {
	border-color: var(--rpa-red);
}

.rpahq-flyer-drop.rpahq-field--invalid {
	border-color: var(--rpa-red);
}

.rpahq-flyer-drop__label {
	font-weight: 700;
}

.rpahq-flyer-drop__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 0;
	font: inherit;
}

.rpahq-flyer-form input[type="date"],
.rpahq-flyer-form input[type="time"] {
	max-width: 100%;
	min-height: 44px;
}

.rpahq-flyer-lengths {
	margin: 0 0 16px;
}

.rpahq-flyer-lengths summary {
	min-height: 44px;
	cursor: pointer;
}

/* "Looks right?" */
.rpahq-flyer-preview .rpahq-event-list,
.rpahq-flyer-page .rpahq-event {
	margin: 0;
}

.rpahq-flyer-facts__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px 16px;
	margin: 0 0 12px;
}

.rpahq-flyer-facts__list dt {
	font-weight: 700;
}

.rpahq-flyer-facts__list dd {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

@media (min-width: 480px) {
	.rpahq-flyer-facts__list {
		grid-template-columns: minmax(8em, max-content) 1fr;
	}

	.rpahq-flyer-facts__list dd {
		margin: 0;
	}
}

/* The event page's layout inside a portal panel: never wider than the panel at 375 px. */
.rpahq-flyer-page .rpahq-event__layout {
	min-width: 0;
}

.rpahq-flyer-page img {
	max-width: 100%;
	height: auto;
}

/* ==== end 0.14.0: Builder C, Add from a flyer ==== */


/* ==== 0.14.0: Builder D, What we still need and the submit page (merged from work/0.14.0/css-d-portal.css) ==== */

/* "What we still need": list and request page */
.rpahq-content > .rpahq-panel,
.rpahq-content__section {
	margin: 0 0 20px;
}

.rpahq-content__section > .rpahq-table-wrap {
	margin: 0 0 12px;
}

.rpahq-content__back {
	margin: 0 0 8px;
}

.rpahq-content__title {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.rpahq-content__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	color: var(--rpa-muted);
}

.rpahq-content__facts .rpahq-badge {
	margin-left: 0;
}

.rpahq-content__tabs {
	margin: 0 0 12px;
}

.rpahq-content__requests th a {
	overflow-wrap: anywhere;
}

/* Request statuses (text always says the status; colour only supports it). */
.rpahq-badge--open {
	border: 1px solid var(--rpa-line);
	background: var(--rpa-surface-alt);
	color: var(--rpa-ink);
}

.rpahq-badge--submitted {
	background: #fdecec;
	color: var(--rpa-red-deep);
}

.rpahq-badge--placed {
	background: #e6f4ea;
	color: #14532d;
}

.rpahq-badge--done {
	background: var(--rpa-surface-alt);
	color: var(--rpa-muted);
}

/* Place: photos as a wrapping grid; each one a fieldset with its tick and alt text. */
.rpahq-content__photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.rpahq-content__photo fieldset {
	min-width: 0;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
}

.rpahq-content__photo legend {
	padding: 0 4px;
	font-weight: 700;
}

.rpahq-content__photo input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}

.rpahq-content__thumb {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	margin: 0 0 8px;
	object-fit: contain;
	background: var(--rpa-surface-alt);
}

.rpahq-content__note {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-left: 3px solid var(--rpa-line);
	background: var(--rpa-surface-alt);
	overflow-wrap: anywhere;
}

.rpahq-content__note p {
	margin: 0 0 8px;
}

.rpahq-content__note p:last-child {
	margin-bottom: 0;
}

/* The link panel: the read-only address wraps inside its box, never the page. */
.rpahq-content__link input[readonly] {
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
}

.rpahq-content__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.rpahq-content__buttons form {
	margin: 0;
}

.rpahq-content__delete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-content__older summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
}

/* The public submit page */
.rpahq-submit h1 {
	overflow-wrap: anywhere;
}

.rpahq-submit__who {
	color: var(--rpa-muted);
}

.rpahq-submit__needs {
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.rpahq-submit input[type="file"] {
	max-width: 100%;
	min-height: 44px;
}

.rpahq-submit .rpahq-notice p {
	margin: 0 0 6px;
}

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

/* The honeypot stays out of sight (it also carries .rpahq-visually-hidden; the
   .rpahq-contact__trap rule, public.css, copied for this page). */
.rpahq-submit__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.rpahq-content__buttons .rpahq-button,
	.rpahq-content__delete .rpahq-button,
	.rpahq-submit .rpahq-form__actions .rpahq-button {
		min-height: 44px;
	}
}

/* ==== end 0.14.0: Builder D, What we still need and the submit page ==== */

/* ==== 0.16.0: UI pass, pages without the portal menu and the sign-in "gate" ==== */

/* Pages with no menu (sign-in, request access, the code page, pending, confirm email,
   unsubscribe, submit) take the whole width instead of the menu's 240px column. */
.rpahq-portal--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1120px;
}

@media (min-width: 960px) {
	.rpahq-portal--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The gate: a crimson brand panel beside the sign-in card; stacked on phones. */
.rpahq-gate {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1040px;
	margin: 0 auto;
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(17, 17, 17, 0.12);
}

@media (min-width: 860px) {
	.rpahq-gate {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		min-height: 560px;
	}
}

.rpahq-gate__brand {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	color: #fff;
	background:
		radial-gradient(120% 90% at 85% 15%, rgba(176, 20, 27, 0.9) 0%, rgba(122, 1, 3, 0) 60%),
		linear-gradient(160deg, #7a0103 0%, #4a0002 100%);
	overflow: hidden;
}

@media (min-width: 860px) {
	.rpahq-gate__brand {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 48px 44px;
		gap: 18px;
	}
}

.rpahq-gate__seal {
	display: block;
	flex: none;
	width: 52px;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

@media (min-width: 860px) {
	.rpahq-gate__seal {
		width: 120px;
	}
}

.rpahq-gate__chapter {
	margin: 0;
	font-family: var(--rpa-font-heading);
	font-size: 1.125rem;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

@media (min-width: 860px) {
	.rpahq-gate__chapter {
		font-size: 1.75rem;
	}

	.rpahq-gate__chapter::after {
		display: block;
	}
}

.rpahq-gate__chapter::after {
	content: "";
	display: none;
	width: 56px;
	height: 3px;
	margin-top: 14px;
	background: #c9a227;
}

.rpahq-gate__welcome {
	display: none;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #f6e9e9;
}

.rpahq-gate__list {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 860px) {
	.rpahq-gate__welcome {
		display: block;
	}

	.rpahq-gate__list {
		display: grid;
		gap: 10px;
	}
}

.rpahq-gate__list li {
	position: relative;
	padding-left: 28px;
	line-height: 1.45;
	color: #fff;
}

.rpahq-gate__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 8px;
	border-left: 3px solid #e7cf7a;
	border-bottom: 3px solid #e7cf7a;
	transform: rotate(-45deg);
}

.rpahq-gate__side {
	display: grid;
	align-content: center;
	gap: 0;
	padding: 8px 0 24px;
}

/* Inside the gate the panels lose their own frame: the gate is the frame. */
.rpahq-gate .rpahq-panel {
	border: 0;
	border-radius: 0;
	background: transparent;
	margin: 0;
	max-width: none;
	padding: 24px 24px 0;
}

@media (min-width: 860px) {
	.rpahq-gate .rpahq-panel {
		padding: 40px 48px 0;
	}
}

.rpahq-gate__card h1 {
	margin: 0 0 8px;
	font-size: 2rem;
	line-height: 1.1;
}

.rpahq-gate__card > p {
	margin: 0 0 20px;
	color: var(--rpa-text);
	line-height: 1.55;
}

/* wp_login_form()'s markup: full-width, finger-sized fields and a full-width button. */
.rpahq-gate #rpahq-sign-in p {
	margin: 0 0 16px;
}

.rpahq-gate #rpahq-sign-in label {
	margin-bottom: 6px;
	font-size: 0.9375rem;
}

.rpahq-gate #rpahq-sign-in input[type="text"],
.rpahq-gate #rpahq-sign-in input[type="email"],
.rpahq-gate #rpahq-sign-in input[type="password"] {
	display: block;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #8a8a8a;
	border-radius: 6px;
	background: #fff;
	color: var(--rpa-ink);
	font-size: 1.0625rem;
}

.rpahq-gate #rpahq-sign-in input:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 1px;
	border-color: var(--rpa-red-text);
}

.rpahq-gate #rpahq-sign-in .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 400;
	cursor: pointer;
}

.rpahq-gate #rpahq-sign-in .login-remember input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--rpa-red);
}

.rpahq-gate #rpahq-sign-in .login-submit {
	margin: 4px 0 0;
}

.rpahq-gate #rpahq-sign-in input[type="submit"] {
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-family: var(--rpa-font-heading);
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rpahq-gate #rpahq-sign-in input[type="submit"]:hover {
	background: var(--rpa-red-deep);
	border-color: var(--rpa-red-deep);
}

.rpahq-gate #rpahq-sign-in input[type="submit"]:focus-visible {
	outline: 3px solid #c9a227;
	outline-offset: 2px;
}

/* Show/hide password (added by portal.js; without JS the field stays a plain password box). */
.rpahq-gate .rpahq-pass-wrap {
	position: relative;
}

.rpahq-gate .rpahq-pass-wrap input[type="password"],
.rpahq-gate .rpahq-pass-wrap input[type="text"] {
	padding-right: 84px;
}

.rpahq-pass-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	min-width: 64px;
	min-height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--rpa-red-text);
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
}

.rpahq-pass-toggle:hover {
	background: #f6eaea;
}

.rpahq-pass-toggle:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 0;
}

.rpahq-gate__forgot {
	margin: 18px 0 0;
	text-align: center;
}

.rpahq-gate .rpahq-links a,
.rpahq-gate__new a:not(.rpahq-button) {
	color: var(--rpa-red-text);
}

/* "Email me a sign-in link": a second way in under a divider. */
.rpahq-gate .rpahq-sign-in-link {
	margin-top: 24px;
	padding-top: 0;
}

.rpahq-gate .rpahq-sign-in-link::before {
	content: "";
	display: block;
	height: 1px;
	margin: 0 0 20px;
	background: var(--rpa-line);
}

.rpahq-gate .rpahq-sign-in-link h2 {
	margin: 0 0 6px;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
}

.rpahq-gate .rpahq-sign-in-link .rpahq-button {
	justify-content: center;
	width: 100%;
	background: transparent;
	color: var(--rpa-red-text) !important;
}

.rpahq-gate__new {
	display: grid;
	gap: 12px;
	margin: 24px 24px 0;
	padding: 16px 18px;
	border-radius: 8px;
	background: var(--rpa-surface-alt);
	color: var(--rpa-text);
	line-height: 1.5;
}

@media (min-width: 860px) {
	.rpahq-gate__new {
		margin: 28px 48px 0;
	}
}

.rpahq-gate__new .rpahq-button {
	justify-content: center;
}

@media (forced-colors: active) {
	.rpahq-gate__brand {
		background: Canvas;
		color: CanvasText;
		border-bottom: 1px solid CanvasText;
	}
}

/* ==== end 0.16.0: the sign-in gate ==== */

/* ==== 0.16.0: wide screens, and My profile's three pages ==== */

/* Dashboard cards three across in the full-width frame (0.17.0: the frame is --rpa-shell on
   every screen, so the 0.16.0 1640px portal is gone). */
@media (min-width: 1280px) {
	.rpahq-dashboard {
		grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
		gap: 20px;
	}
}

/* My profile's pages: tabs under the heading. They scroll sideways on a narrow phone rather
   than wrap, so the current one stays obvious. */
.rpahq-pagetabs {
	margin: 0 0 20px;
	border-bottom: 2px solid var(--rpa-line);
	overflow-x: auto;
}

.rpahq-pagetabs ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-pagetabs a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	color: var(--rpa-text);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.rpahq-pagetabs a:hover {
	color: var(--rpa-red);
	border-bottom-color: var(--rpa-line);
}

.rpahq-pagetabs a[aria-current="page"] {
	color: var(--rpa-red);
	border-bottom-color: var(--rpa-red);
}

.rpahq-pagetabs a:focus-visible {
	outline: 3px solid var(--rpa-red);
	outline-offset: -3px;
}

/* Two columns of sections on a wide screen; each section keeps its own height. Everything on
   the page is then in view, so the jump list under the tabs isn't needed. */
@media (min-width: 1280px) {
	.rpahq-profile + .rpahq-jump,
	.rpahq-pagetabs + .rpahq-jump {
		display: none;
	}

	.rpahq-profile {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	/* The one long list on its page reads better full width. */
	.rpahq-profile--security .rpahq-profile__section:only-child,
	.rpahq-profile .rpahq-email-prefs:only-child {
		grid-column: 1 / -1;
	}
}

@media (forced-colors: active) {
	.rpahq-pagetabs a[aria-current="page"] {
		border-bottom-color: Highlight;
	}
}

@media (max-width: 479px) {
	.rpahq-pagetabs a {
		padding: 0 12px;
		font-size: 0.9375rem;
	}
}

/* ==== 0.17.0 (D30): one frame width on every screen, the phone menu, phone tap targets ==== */

:root {
	/* The frame: the same width as WP Custom Layout's header and footer (header_max_width and
	   footer_max_width, 1280 on this site). Raise all three together. */
	--rpa-shell: 1280px;
	/* One centred card width for the pages without the menu (request access, pending, …). */
	--rpa-card: 640px;
}

/* WPCL's footer floor makes <body> a flex column, which shrank a margin-auto block to its
   content: every page had its own width. */
.rpahq-portal,
.rpahq-portal--solo {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rpa-shell);
}

@media (min-width: 960px) {
	.rpahq-portal--solo {
		max-width: var(--rpa-shell);
	}
}

.rpahq-portal--solo > .rpahq-portal__main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rpa-card);
	margin: 0 auto;
}

.rpahq-portal--solo > .rpahq-portal__main:has(.rpahq-gate) {
	max-width: 1040px;
}

.rpahq-portal--solo .rpahq-panel--narrow {
	max-width: none;
}

/* The phone menu (D30-3): a bar with the portal, this section and Menu; the script folds the
   rest. Desktop keeps the full menu column. */
.rpahq-portal-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rpahq-portal-nav__bar .rpahq-portal-nav__title {
	margin: 0;
}

.rpahq-portal-nav__here {
	display: none;
}

.rpahq-portal-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	color: var(--rpa-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rpahq-portal-nav__toggle::before {
	content: "";
	width: 16px;
	height: 12px;
	background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

.rpahq-portal-nav__toggle[aria-expanded="true"] {
	border-color: var(--rpa-red);
	color: var(--rpa-red);
}

.rpahq-portal-nav__toggle:focus-visible {
	outline: 3px solid var(--rpa-red);
	outline-offset: 2px;
}

@media (max-width: 959px) {
	.rpahq-portal {
		gap: 16px;
		padding-top: 12px;
	}

	.rpahq-portal-nav--fold {
		padding: 8px 8px 8px 14px;
	}

	.rpahq-portal-nav--fold .rpahq-portal-nav__title {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		min-width: 0;
	}

	.rpahq-portal-nav--fold .rpahq-portal-nav__here {
		display: block;
		font-family: var(--rpa-font-body, inherit);
		text-transform: none;
		color: var(--rpa-ink);
		font-weight: 600;
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rpahq-portal-nav--fold:not(.is-open) .rpahq-portal-nav__body {
		display: none;
	}

	.rpahq-portal-nav--fold.is-open .rpahq-portal-nav__body {
		margin-top: 12px;
		padding: 12px 6px 4px 0;
		border-top: 1px solid var(--rpa-line);
	}

	/* Open: two columns of sections, so the whole menu fits one screen. */
	.rpahq-portal-nav--fold ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Phone text no smaller than 14px (D30-5). */
	.rpahq-portal .rpahq-small,
	.rpahq-portal .rpahq-field__help,
	.rpahq-portal-nav__user {
		font-size: 0.875rem;
	}
}

@media (min-width: 960px) {
	.rpahq-portal-nav__toggle {
		display: none;
	}

	.rpahq-portal-nav__bar {
		display: block;
	}

	.rpahq-portal-nav__bar .rpahq-portal-nav__title {
		margin: 0 0 8px;
	}
}

/* 44px targets for the links that stand alone in dashboard cards, on touch screens. */
@media (pointer: coarse), (max-width: 959px) {
	.rpahq-dashboard-card li > a:first-child,
	.rpahq-dashboard-card p > a:only-child {
		display: inline-block;
		padding-block: 11px;
	}

	.rpahq-dashboard-card li {
		margin-bottom: 0;
	}
}

/* ==== 0.18.0 (D31 A): the dashboard ==== */

/* A4: each card keeps its own height instead of stretching to the tallest card in its row. */
.rpahq-dashboard {
	align-items: start;
}

/* A1: the welcome card's "You can manage N areas. Open Manage" line (it replaces the 0.17.0
   chips). */
.rpahq-welcome-manage {
	margin: 12px 0;
}

/* A2: "Since you last signed in" count lines ("3 new announcements") when the matching card
   is on the dashboard. */
.rpahq-recent__count {
	margin: 8px 0 0;
	font-weight: 600;
}

.rpahq-recent__count + .rpahq-recent__heading {
	margin-top: 16px;
}

/* The Open Manage link and the count links are each their paragraph's only element, so the
   0.17.0 rule (.rpahq-dashboard-card p > a:only-child, 11px block padding) already applies on
   touch screens; this keeps them at 44px whatever the line height. */
@media (pointer: coarse), (max-width: 959px) {
	.rpahq-dashboard-card .rpahq-welcome-manage > a,
	.rpahq-dashboard-card .rpahq-recent__count > a {
		min-height: 44px;
		box-sizing: border-box;
	}
}

/* ==== 0.18.0: Builder B, the inbox rows and the grouped Manage subnav (D31, B1-B3) ==== */


/* B1: one small primary action per row, the same on the overview and the dashboard card.
   `.rpahq-portal button.rpahq-button { font: inherit }` made a POST button (Approve) large
   while the link buttons (Review, Open) were small; the inbox's buttons keep the small size. */
.rpahq-portal .rpahq-inbox button.rpahq-button--small {
	font-size: 0.8125rem;
	line-height: 1.2;
}

/* Done and Snooze 7 days live under "More" on every screen (a <details>, no JavaScript). */
.rpahq-inbox__more {
	display: block;
}

.rpahq-inbox__more > summary {
	gap: 6px;
	border-radius: var(--rpa-radius);
	color: var(--rpa-red-text);
	list-style: none;
}

.rpahq-inbox__more > summary::-webkit-details-marker {
	display: none;
}

/* A small chevron that turns when the row's More is open. */
.rpahq-inbox__more > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.rpahq-inbox__more[open] > summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.rpahq-inbox__more > summary:hover {
	background: var(--rpa-surface-alt);
}

.rpahq-inbox__more-body {
	justify-content: flex-end;
}

.rpahq-inbox--card .rpahq-inbox__more-body {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.rpahq-inbox__more-body {
		justify-content: flex-start;
	}
}

/* B3: the Manage subnav in groups: Overview first, then Content, People, Money and records,
   Site (0.18.0, D31). 0.18.3 (D32): each group is a dropdown, a <details> whose <summary> is
   its label. From 768 px: one row of Overview and the group buttons; an open group's list
   drops below its button. Under 768 px the nav is the tab bar's More list and the groups fold
   open in place. The group holding the current section is marked (--current). */
#rpahq-manage-subnav .rpahq-subnav__label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--rpa-radius);
	color: var(--rpa-text);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

#rpahq-manage-subnav .rpahq-subnav__label::-webkit-details-marker {
	display: none;
}

/* A small chevron that turns when the group is open. */
#rpahq-manage-subnav .rpahq-subnav__label::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

#rpahq-manage-subnav .rpahq-subnav__group[open] > .rpahq-subnav__label::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

#rpahq-manage-subnav .rpahq-subnav__label:hover {
	background: var(--rpa-surface-alt);
}

#rpahq-manage-subnav .rpahq-subnav__group--current > .rpahq-subnav__label {
	color: var(--rpa-red-text);
	box-shadow: inset 0 -3px 0 var(--rpa-red);
}

#rpahq-manage-subnav .rpahq-subnav__label:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	#rpahq-manage-subnav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
	}

	#rpahq-manage-subnav .rpahq-subnav__group {
		position: relative;
	}

	#rpahq-manage-subnav :is(a, .rpahq-subnav__label) {
		min-height: 40px;
		padding: 0 12px;
	}

	#rpahq-manage-subnav .rpahq-subnav__group > ul {
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		z-index: 30;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 2px;
		min-width: 220px;
		padding: 6px;
		border: 1px solid var(--rpa-line);
		border-radius: var(--rpa-radius);
		background: var(--rpa-surface);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}

	#rpahq-manage-subnav .rpahq-subnav__group > ul a {
		white-space: nowrap;
	}

	/* The last groups open leftwards so their lists stay inside the frame. */
	#rpahq-manage-subnav .rpahq-subnav__group:last-of-type > ul {
		left: auto;
		right: 0;
	}
}

@media (max-width: 767.98px) {
	#rpahq-manage-subnav .rpahq-subnav__group {
		margin-top: 4px;
		padding-top: 4px;
		border-top: 1px solid var(--rpa-line);
	}

	#rpahq-manage-subnav .rpahq-subnav__label {
		justify-content: space-between;
	}

	#rpahq-manage-subnav .rpahq-subnav__group > ul {
		padding-left: 12px;
	}
}

/* ==== end 0.18.0: Builder B ==== */

/* =========================================================================================
 * 0.18.0 (D31 C2): Manage › Reports, text people read is at least 14px.
 * The report tables' column heads and the summary tiles' labels were 13px (0.8125rem); the
 * RSVP list and other screens that share .rpahq-rsvp-table/.rpahq-rsvp-totals keep theirs.
 * Chart tick labels inside the SVG stay at 12px.
 * ======================================================================================= */

.rpahq-reports-table thead th,
.rpahq-reports-section .rpahq-table thead th,
.rpahq-reports-section .rpahq-rsvp-totals dt {
	font-size: 0.875rem;
}

/* 0.18.0 (D31 C1/C2): on a phone a report's sortable table (Engagement by Brother and the
   like) stacks each row as a card, as everywhere; here the figures sit side by side in a small
   grid (the name across the top) instead of one per line, and their labels are 14px. The
   table keeps its roles (they are explicit in the markup). */
@media (max-width: 599.98px) {
	.rpahq-reports-section .rpahq-table tbody tr:not(.rpahq-table__group-row) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 4px 12px;
	}

	.rpahq-reports-section .rpahq-table tbody tr:not(.rpahq-table__group-row) > th,
	.rpahq-reports-section .rpahq-table tbody tr:not(.rpahq-table__group-row) > td {
		width: auto;
		min-width: 0;
	}

	.rpahq-reports-section .rpahq-table tbody tr:not(.rpahq-table__group-row) > th[scope="row"] {
		grid-column: 1 / -1;
	}

	.rpahq-reports-section .rpahq-table tbody td::before {
		font-size: 0.875rem;
	}
}

/* 0.18.0 (D31 C3): the review preview's public title prints as an h2 (one h1 per page); a
   program's keeps the look its h1 had (an event's keeps .rpahq-event__title). */
.rpahq-preview h2.rpahq-preview__title {
	margin: 0 0 12px;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	text-transform: uppercase;
}

/* 0.18.1: a chart row with a drill-down link (pointer only; the table row has the same link). */
.rpahq-chart a {
	cursor: pointer;
}

.rpahq-chart a:hover .rpahq-chart__bar {
	opacity: 0.8;
}

/* 0.21.0 (D35): an officer's portal account (Manage › Leadership › {term} › Portal account). */
.rpahq-officer-callout a {
	font-weight: 700;
}

.rpahq-officer-state {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--rpa-line);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.5;
	white-space: nowrap;
}

.rpahq-officer-state--none,
.rpahq-officer-state--not-invited {
	border-color: var(--rpa-red);
	color: var(--rpa-red-text);
}

.rpahq-officer-state--signed-in {
	color: var(--rpa-muted);
}

/* The submit button follows the invitation box where :has() works (else "and invite" stays). */
.rpahq-officer-form:has(input[name="rpahq_officer[invite]"]:not(:checked)) .rpahq-officer-submit__invite {
	display: none;
}

.rpahq-officer-confirm:focus {
	outline: 2px solid var(--rpa-red);
	outline-offset: 2px;
}

@media (pointer: coarse) {
	.rpahq-officer-state {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
	}
}

/* ==== 0.28.0 (D43): polish, on every screen ==== */

/* Panels sit on the grey page with a hairline shadow as well as the border. */
.rpahq-portal .rpahq-panel,
.rpahq-portal .rpahq-card,
.rpahq-portal .rpahq-form__group,
.rpahq-portal .rpahq-table-wrap,
.rpahq-portal-nav {
	box-shadow: 0 1px 2px rgb(17 17 17 / 0.05);
}

/* Menu search: the box and its button are one control on one line. */
.rpahq-portal-nav__search {
	flex-wrap: nowrap;
	gap: 0;
}

.rpahq-portal-nav__search input[type="search"] {
	flex: 1 1 auto;
	border-right: 0;
	border-radius: 4px 0 0 4px;
}

.rpahq-portal-nav__search .rpahq-button {
	padding: 0 12px;
	border-radius: 0 4px 4px 0;
	font-size: 0.8125rem;
}

/* Form sections: the title sits inside its panel over a rule, not on the border. */
.rpahq-form__group > legend {
	float: left;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--rpa-line);
	letter-spacing: 0.03em;
}

.rpahq-form__group > legend + * {
	clear: both;
}

/* The record being edited reads as the page's subject; its links read as a toolbar. */
.rpahq-portal .rpahq-form-title {
	font-size: 1.5rem;
}

.rpahq-form-meta {
	gap: 6px 10px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-form-meta a {
	font-weight: 600;
	text-decoration: none;
}

.rpahq-form-meta a:hover,
.rpahq-form-meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tables: quiet column labels on a tinted header row; the sorted column is red. */
.rpahq-table thead th {
	background: var(--rpa-surface-alt);
	color: var(--rpa-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rpahq-table__sort {
	text-decoration: none;
}

.rpahq-table__sort:hover,
.rpahq-table__sort:focus-visible {
	text-decoration: underline;
}

.rpahq-table th[aria-sort="ascending"] .rpahq-table__sort,
.rpahq-table th[aria-sort="descending"] .rpahq-table__sort {
	color: var(--rpa-red-text);
}

.rpahq-table tbody tr:hover > * {
	background: #fafafa;
}

/* Status chips and badges stay on one line. */
.rpahq-portal .rpahq-status,
.rpahq-table .rpahq-badge {
	white-space: nowrap;
}

/* Disclosure buttons (Columns, Preview) look like buttons, with a caret. */
.rpahq-table-cols > summary,
.rpahq-document__preview > summary {
	gap: 8px;
	border-color: #b8b8b8;
	list-style: none;
}

.rpahq-table-cols > summary::-webkit-details-marker,
.rpahq-document__preview > summary::-webkit-details-marker {
	display: none;
}

.rpahq-table-cols > summary::after,
.rpahq-document__preview > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.rpahq-table-cols[open] > summary::after,
.rpahq-document__preview[open] > summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.rpahq-table-cols > summary:hover,
.rpahq-document__preview > summary:hover {
	border-color: var(--rpa-ink);
}

/* Saved views: a small label and a name box sized for a name. */
.rpahq-saved-views h3 {
	color: var(--rpa-muted);
	font-family: var(--rpa-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rpahq-saved-views__save .rpahq-field {
	flex: 0 1 22rem;
}

/* Dashboard: a light grab handle (a border on hover), so headings keep their line. */
.rpahq-card__grab {
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-color: transparent;
	background: transparent;
	font-size: 16px;
}

.rpahq-card__grab:hover {
	border-color: var(--rpa-line);
	background: var(--rpa-surface-alt);
}

.rpahq-dashboard .rpahq-card__grab + h2 {
	padding-right: 36px;
}

.rpahq-dashboard-card h2 {
	font-size: 1.125rem;
}

/* A finger still gets a 44px handle. */
@media (pointer: coarse) {
	.rpahq-card__grab {
		top: 6px;
		right: 6px;
		width: 44px;
		height: 44px;
	}

	.rpahq-dashboard .rpahq-card__grab + h2 {
		padding-right: 44px;
	}
}

/* ==== 0.28.0 (D42): wide screens ==== */

/* Portal pages use more of a wide screen. --rpa-shell (0.17.0, D30) is the frame, and it is the
   same width as WP Custom Layout's header and footer, so on portal pages the header and footer
   follow it here: the three stay lined up. Public pages keep WPCL's own 1280px. Phones,
   tablets and laptops up to 1599px are unchanged. */
@media (min-width: 1600px) {
	:root {
		--rpa-shell: 1440px;
	}
}

@media (min-width: 1880px) {
	:root {
		--rpa-shell: 1600px;
	}
}

@media (min-width: 1600px) {
	/* !important beats WPCL's inline custom property; the header and footer read it. */
	body.rpahq-portal-page .wpcl-header {
		--wpcl-header-max-width: var(--rpa-shell) !important;
	}

	body.rpahq-portal-page .wpcl-footer {
		--wpcl-footer-max-width: var(--rpa-shell) !important;
	}

	.rpahq-portal:not(.rpahq-portal--solo) {
		grid-template-columns: 256px minmax(0, 1fr);
		gap: 32px;
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* Inside the wider frame, nothing stretches past a comfortable reading or typing width. */
@media (min-width: 1600px) {
	/* Form fields stop at 52rem: a 1,200px name box reads badly and the eye loses the label.
	   Filter bars and two-column forms are already narrower, so they don't change. */
	.rpahq-portal__main .rpahq-field,
	.rpahq-portal__main .rpahq-search-form input[type="search"] {
		max-width: 52rem;
	}

	/* Announcement text keeps a readable line length. */
	.rpahq-announcement__body,
	.rpahq-portal__main .rpahq-page-header p {
		max-width: 80ch;
	}

	/* Directory: four Brothers across. */
	.rpahq-directory-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Dues: the panels pair up instead of one 760px column; the payment history keeps the
	   whole width for its table. */
	.rpahq-dues {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		max-width: none;
	}

	.rpahq-dues > .rpahq-dues__history,
	.rpahq-dues > .rpahq-dues__subscriptions {
		grid-column: 1 / -1;
	}

	/* Manage › Overview: "Waiting for you" on the left, At a glance, goals and the feed on the
	   right, so each task's button sits next to it. Everything else keeps the full width. */
	.rpahq-portal__main:has(> .rpahq-overview-tasks):has(> .rpahq-kpis) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 24px;
		align-items: start;
	}

	.rpahq-portal__main:has(> .rpahq-overview-tasks):has(> .rpahq-kpis) > * {
		grid-column: 1 / -1;
	}

	.rpahq-portal__main:has(> .rpahq-overview-tasks):has(> .rpahq-kpis) > .rpahq-overview-tasks {
		grid-column: 1;
		grid-row: span 3;
	}

	.rpahq-portal__main:has(> .rpahq-overview-tasks):has(> .rpahq-kpis) > :is(.rpahq-kpis, .rpahq-goals, .rpahq-feed) {
		grid-column: 2;
	}

	.rpahq-portal__main:has(> .rpahq-overview-tasks) > .rpahq-kpis .rpahq-kpis__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}